fix: links on images and title + support category prop

nuxt-themes · Jun 17, 2021 · 4ec0303 · 4ec0303
1 parent c01e9fa
commit 4ec0303
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/nuxtjs.org/components/BlogpostList.vue b/nuxtjs.org/components/BlogpostList.vue
@@ -9,7 +9,7 @@
         :description="post.description"
         :image="post.imgUrl"
         :slug="post.slug"
-        :tags="post.tags"
+        :category="post.category"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
           <div class="flex items-center">

diff --git a/nuxtjs.org/components/ContentCardTemplate.vue b/nuxtjs.org/components/ContentCardTemplate.vue
@@ -1,25 +1,25 @@
 <template>
-  <NuxtLink
-    :to="`/blog/${slug}`"
-    class="flex flex-col cursor-pointer shadow rounded-lg overflow-hidden dark:bg-secondary-darkest"
-  >
-    <article>
-      <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
+  <article class="flex flex-col shadow rounded-lg overflow-hidden dark:bg-secondary-darkest">
+    <div class="aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
+      <NuxtLink :to="`/blog/${slug}`">
         <NuxtImg :src="image" width="864" height="378" :alt="title" />
-      </div>
-      <div v-if="tags.length" class="px-4 mb-1">
-        <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm">
-          <span>{{ tag }}</span>
-          <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span>
-        </span>
-      </div>
-      <h1 class="font-bold text-body-xl mb-2 px-4">
-        <NuxtLink :to="`/blog/${slug}`">{{ title }}</NuxtLink>
-      </h1>
-      <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
-      <slot name="footer" />
-    </article>
-  </NuxtLink>
+      </NuxtLink>
+    </div>
+    <div v-if="tags.length" class="px-4 mb-1">
+      <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm">
+        <span>{{ tag }}</span>
+        <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span>
+      </span>
+    </div>
+    <div v-else-if="category" class="px-4 mb-1">
+      <span class="text-gray-400 dark:text-cloud font-medium text-sm">{{ category }}</span>
+    </div>
+    <h1 class="font-bold text-body-xl mb-2 px-4">
+      <NuxtLink :to="`/blog/${slug}`">{{ title }}</NuxtLink>
+    </h1>
+    <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
+    <slot name="footer" />
+  </article>
 </template>
 
 <script>
@@ -46,6 +46,10 @@ export default defineComponent({
     tags: {
       type: Array,
       default: () => []
+    },
+    category: {
+      type: String,
+      default: ''
     }
   }
 })