feat: add visual differentiation between blog post cards and other cards

src/.vuepress/theme/components/blog/LinkCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
+    class="group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out p-2"
     itemprop="mainEntityOfPage"
   >
     <article
@@ -8,14 +8,14 @@
       itemscope
       itemtype="https://schema.org/BlogPosting"
     >
-      <div class="cover embed-responsive embed-responsive-og">
-        <UnstyledLink
-          :to="path"
-          :item="{ target: '_blank' }"
-          class="embed-responsive-item"
-        >
+      <UnstyledLink
+        :to="path"
+        :item="{ target: '_blank' }"
+        class="embed-responsive-item"
+      >
+        <div class="cover embed-responsive embed-responsive-og">
           <LazyImage
-            class="h-full p-2"
+            class="h-full embed-responsive-item"
             img-class="h-full"
             itemprop="image"
             :alt="title"
@@ -28,9 +28,9 @@
                     .join('-')}-placeholder.png`
             "
           />
-        </UnstyledLink>
-      </div>
-      <div class="pt-1 pb-4 px-4 flex flex-grow flex-col">
+        </div>
+      </UnstyledLink>
+      <div class="pt-1 pb-4 px-2 flex flex-grow flex-col">
         <UnstyledLink :to="path" :item="{ target: '_blank' }">
           <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
             {{ title }}

src/.vuepress/theme/components/blog/PostHero.vue

@@ -33,9 +33,13 @@
       </div>
     </div>
     <div class="grid-margins pt-8 flex justify-between items-center">
-      <ul v-if="resolvedTags.length" class="tags flex mt-1" itemprop="keywords">
+      <div
+        v-if="resolvedTags.length"
+        class="tags flex mt-1"
+        itemprop="keywords"
+      >
         <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" link dark />
-      </ul>
+      </div>
       <div class="flex">
         Share this item:
         <PostSocials class="flex max-w-3xl ml-2" />

src/.vuepress/theme/components/blog/PostMeta.vue

@@ -11,15 +11,16 @@
         {{ resolvedDate }}
       </time>
     </div>
-    <ul class="tags mt-2 mb-1 flex flex-wrap" itemprop="keywords">
-      <li
+    <div class="tags mt-2 mb-1 flex flex-wrap" itemprop="keywords">
+      <button
         v-if="category"
-        class="p-1 mr-1 bg-white text-blueGreen hover:underline rounded cursor-pointer mt-1"
+        class="p-1 mr-1 bg-blueGreen text-white font-semibold hover:underline rounded cursor-pointer mt-1"
+        @click="handleCatClick"
       >
-        <div @click="handleCatClick">{{ category }}</div>
-      </li>
+        {{ category }}
+      </button>
       <PostTag v-for="tag in resolvedTags" :key="tag" class="mt-1" :tag="tag" />
-    </ul>
+    </div>
   </div>
 </template>
 

src/.vuepress/theme/components/blog/PostTag.vue

@@ -1,15 +1,14 @@
 <template>
-  <li
-    :class="[
-      'post-tag p-1 mr-1  hover:underline rounded cursor-pointer',
-      dark ? 'bg-blueGreen text-white' : 'bg-white text-blueGreen',
-    ]"
+  <router-link
+    v-if="link"
+    :to="{ path: $localePath, query: { tags: tag } }"
+    :class="computedClass"
   >
-    <router-link v-if="link" :to="{ path: $localePath, query: { tags: tag } }">
-      #{{ tag }}
-    </router-link>
-    <div v-else @click="handleTagClick">#{{ tag }}</div>
-  </li>
+    #{{ tag }}
+  </router-link>
+  <button v-else :class="computedClass" @click="handleTagClick">
+    #{{ tag }}
+  </button>
 </template>
 
 <script>
@@ -28,10 +27,30 @@ export default {
       type: Boolean,
       default: null,
     },
+    className: {
+      type: String,
+      default: '',
+    },
+    callback: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    computedClass() {
+      return [
+        'post-tag p-1 mr-1 hover:underline rounded cursor-pointer',
+        this.dark
+          ? 'bg-blueGreen text-white'
+          : 'bg-white text-blueGreen border',
+        this.className,
+      ]
+    },
   },
   methods: {
     handleTagClick() {
       this.$store.commit('appState/setActiveTags', [this.tag])
+      this.callback()
     },
   },
 }

src/.vuepress/theme/components/blog/RegularCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group bg-gray-pale rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out"
+    class="group bg-aquaMuted bg-opacity-50 rounded overflow-hidden flex flex-col transform hover:scale-105 duration-300 ease-in-out p-2"
     itemprop="mainEntityOfPage"
     :to="path"
   >
@@ -12,7 +12,7 @@
       <div class="cover embed-responsive embed-responsive-og">
         <router-link :to="path" class="embed-responsive-item">
           <LazyImage
-            class="h-full p-2"
+            class="h-full"
             img-class="h-full"
             itemprop="image"
             :alt="title"
@@ -25,7 +25,7 @@
           />
         </router-link>
       </div>
-      <div class="pt-1 pb-4 px-4 flex flex-grow flex-col">
+      <div class="pt-1 pb-4 px-2 flex flex-grow flex-col">
         <router-link :to="path">
           <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
             {{ title }}

src/.vuepress/theme/components/blog/VideoCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group bg-gray-pale rounded flex flex-col transform hover:scale-105 duration-300 ease-in-out"
+    class="group bg-gray-pale rounded flex flex-col transform hover:scale-105 duration-300 ease-in-out p-2"
     itemprop="mainEntityOfPage"
   >
     <article
@@ -12,7 +12,7 @@
         <a
           target="_blank"
           :href="path"
-          class="embed-responsive-item p-2"
+          class="embed-responsive-item"
           @click="handleVideoClick"
         >
           <div class="h-full w-full relative">
@@ -35,7 +35,7 @@
           </div>
         </a>
       </div>
-      <div class="pt-1 pb-4 px-4 flex flex-grow flex-col">
+      <div class="pt-1 pb-4 px-2 flex flex-grow flex-col">
         <a
           :href="path"
           target="_blank"

src/.vuepress/theme/components/blog/VideoModalContent.vue

@@ -36,20 +36,18 @@
         <div class="mt-3 flex flex-wrap" itemprop="keywords">
           <button
             v-if="videoModalCard.frontmatter.type"
-            class="px-2 py-1 bg-gray-pale text-blueGreen hover:underline rounded-lg text-sm mr-1"
+            class="p-1 bg-blueGreen text-white hover:underline rounded text-sm mr-1"
             @click="handleCatClick()"
           >
             {{ videoModalCard.frontmatter.type }}
           </button>
-          <button
+          <PostTag
             v-for="tag in resolvedTags"
             :key="tag"
             :tag="tag"
-            class="px-2 py-1 bg-gray-pale text-blueGreen hover:underline rounded-lg text-sm mr-1 last:mr-0"
-            @click="handleTagClick(tag)"
-          >
-            #{{ tag }}
-          </button>
+            :callback="closeModal"
+            class-name="text-sm"
+          />
         </div>
       </div>
       <footer class="flex-grow">
@@ -85,10 +83,11 @@ import { mapState } from 'vuex'
 import dayjs from 'dayjs'
 import UnstyledLink from '@theme/components/UnstyledLink'
 import PostSocials from '@theme/components/blog/PostSocials.vue'
+import PostTag from '@theme/components/blog/PostTag'
 
 export default {
   name: 'VideoModalContent',
-  components: { UnstyledLink, PostSocials },
+  components: { UnstyledLink, PostSocials, PostTag },
   props: {
     closeModal: {
       type: Function,
@@ -146,10 +145,6 @@ export default {
       )
       this.closeModal()
     },
-    handleTagClick(tag) {
-      this.$store.commit('appState/setActiveTags', [tag])
-      this.closeModal()
-    },
   },
 }
 </script>

src/.vuepress/theme/layouts/BlogPost.vue

@@ -46,7 +46,7 @@ export default {
   mounted() {
     this.showComments =
       window.location.hostname === 'blog.ipfs.io' ||
-      window.location.hostname === 'ipfsblog-vuepress.netlify.app'
+      window.location.hostname === 'ipfs-blog.netlify.app'
   },
 }
 </script>

src/.vuepress/theme/tailwind.config.js

@@ -68,6 +68,7 @@ const theme = {
       deepBlue: '#002256',
       plBlack: '#16161F',
       blueGreen: '#3e9096',
+      aquaMuted: '#9ad4db',
       gray: {
         dark: '#707175',
         default: '#d1d1d6',