tweak posting to show avatar

Author: jillztom

.vitepress/theme/components/VueJobs.vue

@@ -42,31 +42,20 @@ onMounted(async () => {
     <div class="vuejobs-container" v-if="openings.length">
       <div class="vj-item" v-for="(job, n) in openings" :key="n">
         <a class="vj-job-title" :href="job.link" target="_blank">
-          <p>
-            {{ job.title }}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              focusable="false"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              class="vt-link-icon"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none"></path>
-              <path
-                d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"
-              ></path>
-            </svg>
-          </p>
+          <img :src="job.company_logo" alt="" class="vj-company-logo" />
+          <div>
+            <p>
+              {{ job.title }}
+            </p>
 
-          <p class="vj-job-info">
-            {{ job.company }}
-            <span v-if="job.salary">·</span>
-            {{ job.salary }}
-            <span>·</span>
-            {{ job.location }}
-          </p>
+            <p class="vj-job-info">
+              {{ job.company }}
+              <!-- <span v-if="job.salary">·</span> -->
+              <!-- {{ job.salary }} -->
+              <span>·</span>
+              {{ job.location }}
+            </p>
+          </div>
         </a>
       </div>
     </div>
@@ -75,9 +64,9 @@ onMounted(async () => {
 
 <style scoped>
 .vuejobs-container {
-  background-color: var(--vt-c-bg-soft);
-  padding: 5px 15px;
   border-radius: 2px;
+  background-color: var(--vt-c-bg-soft);
+  padding: 3px 10px;
 }
 .vj-item {
   padding: 10px 0 10px 0;
@@ -92,19 +81,26 @@ onMounted(async () => {
 .vuejobs-container a {
   line-height: 16px;
   transition: color 0.2s ease;
-  display: inline-block;
 }
 .vuejobs-container a:hover {
   color: var(--vt-c-brand);
 }
 .vj-job-title {
   font-size: 12px;
   color: var(--vt-c-text-1);
+  display: flex;
+  flex-direction: row;
 }
 .vj-job-info {
   font-size: 11px;
   color: var(--vt-c-text-2);
   margin-top: 2px;
   line-height: 12px;
 }
+.vj-company-logo {
+  width: 30px;
+  height: 30px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
 </style>