fix: fix firefox issues (#94)

src/.vuepress/theme/components/UnstyledLink.vue

@@ -2,7 +2,7 @@
   <RouterLink v-if="isInternal" :to="link" :exact="exact">
     <slot />
   </RouterLink>
-  <a v-else :href="link" :target="target" :rel="rel">
+  <a v-else :href="link" :rel="rel" target="_blank">
     <slot />
   </a>
 </template>

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

@@ -12,11 +12,10 @@
 <script>
 import RegularCard from '@theme/components/blog/RegularCard'
 import LinkCard from '@theme/components/blog/LinkCard'
-import VideoCard from '@theme/components/blog/VideoCard'
 
 export default {
   name: 'BlogCard',
-  components: { RegularCard, LinkCard, VideoCard },
+  components: { RegularCard, LinkCard },
   inheritAttrs: false,
   props: {
     card: {
@@ -40,10 +39,8 @@ export default {
         case 'News coverage':
         case 'Release notes':
         case 'Tutorial':
-          return LinkCard
-
         case 'Video':
-          return VideoCard
+          return LinkCard
 
         default:
           return RegularCard

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

@@ -9,12 +9,35 @@
       itemtype="https://schema.org/BlogPosting"
       class="flex flex-col flex-grow"
     >
-      <UnstyledLink
-        :to="path"
-        :item="{ target: '_blank' }"
-        class="embed-responsive-item"
-      >
-        <div class="cover embed-responsive embed-responsive-og">
+      <UnstyledLink :to="path" class="embed-responsive-item">
+        <!--
+            Because of an unknown firefox issue, we removed the VideoCard component and inlined it here.
+            See here: https://github.com/ipfs/ipfs-blog/pull/94
+        -->
+        <div
+          v-if="frontmatter.type === 'Video'"
+          class="cover embed-responsive embed-responsive-og"
+          @click="handleVideoClick"
+        >
+          <LazyImage
+            class="h-full embed-responsive-item"
+            img-class="w-full h-full object-cover"
+            itemprop="image"
+            :alt="title"
+            src-placeholder="/card-placeholder.png"
+            :src="thumbnailPath"
+          />
+          <div
+            class="absolute top-0 flex justify-center items-center w-full h-full bg-black bg-opacity-25"
+          >
+            <SVGIcon
+              name="play"
+              title="Play"
+              :class-list="['w-16', 'h-16', 'fill-current']"
+            />
+          </div>
+        </div>
+        <div v-else class="cover embed-responsive embed-responsive-og">
           <LazyImage
             class="h-full embed-responsive-item"
             img-class="h-full object-cover"
@@ -41,7 +64,7 @@
             :title="title"
             :description="frontmatter.description"
             :post-path="path"
-            external
+            :onclick="frontmatter.type === 'Video' ? handleVideoClick : null"
             class="type-p4 text-primary"
           />
         </div>
@@ -54,6 +77,7 @@
 import LazyImage from '@theme/components/base/LazyImage'
 import UnstyledLink from '@theme/components/UnstyledLink'
 import PostMeta from '@theme/components/blog/PostMeta'
+import SVGIcon from '@theme/components/base/SVGIcon.vue'
 
 export default {
   name: 'LinkCard',
@@ -61,6 +85,7 @@ export default {
     LazyImage,
     UnstyledLink,
     PostMeta,
+    SVGIcon,
   },
   inheritAttrs: false,
   props: {
@@ -76,6 +101,48 @@ export default {
       type: String,
       required: true,
     },
+    openVideoModal: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    thumbnailPath() {
+      if (!this.path.includes('youtube')) {
+        return ''
+      }
+
+      const newPath = new URL(this.path)
+      const id =
+        newPath.searchParams.get('v') || newPath.searchParams.get('list')
+
+      return `http://img.youtube.com/vi/${id}/0.jpg`
+    },
+  },
+  methods: {
+    handleVideoClick(event) {
+      /* Only uses the anchor default behavior when it's a
+         new tab click  - ctrl/cmd + click or "open in a
+         new tab" option */
+      if (
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.metaKey ||
+        (event.button && event.button === 1)
+      ) {
+        return
+      }
+
+      event.preventDefault()
+
+      this.$store.commit('appState/setVideoModalCard', {
+        frontmatter: this.frontmatter,
+        path: this.path,
+        title: this.title,
+      })
+
+      this.openVideoModal()
+    },
   },
 }
 </script>

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

@@ -10,27 +10,13 @@
         {{ resolvedDate }}
       </time>
     </div>
-    <router-link
-      v-if="title && !external && !onclick"
-      :to="postPath"
-      :title="title"
-    >
-      <h1 class="type-h5 text-xl text-primary hover:underline clamp-3">
-        {{ title }}
-      </h1>
-    </router-link>
-    <UnstyledLink
-      v-if="title && external && !onclick"
-      :to="postPath"
-      :item="{ target: '_blank' }"
-      :title="title"
-    >
+    <UnstyledLink v-if="!onclick" :to="postPath" :title="title">
       <h1 class="type-h5 text-xl text-primary hover:underline clamp-3">
         {{ title }}
       </h1>
     </UnstyledLink>
     <a
-      v-if="title && onclick"
+      v-if="onclick"
       :href="postPath"
       target="_blank"
       class="text-left"
@@ -106,10 +92,6 @@ export default {
       type: String,
       default: '',
     },
-    external: {
-      type: Boolean,
-      default: false,
-    },
     onclick: {
       type: Function,
       default: null,

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

@@ -1,124 +0,0 @@
-<template>
-  <div
-    class="group bg-white rounded flex flex-col transform hover:scale-105 duration-300 ease-in-out"
-    itemprop="mainEntityOfPage"
-  >
-    <article
-      itemprop="blogPost"
-      itemscope
-      itemtype="https://schema.org/BlogPosting"
-      class="flex flex-col flex-grow"
-    >
-      <div class="cover embed-responsive overflow-visible embed-responsive-og">
-        <a
-          target="_blank"
-          :href="path"
-          class="embed-responsive-item"
-          @click="handleVideoClick"
-        >
-          <div class="h-full w-full relative">
-            <LazyImage
-              class="h-full"
-              img-class="w-full h-full object-cover"
-              itemprop="image"
-              :alt="title"
-              src-placeholder="/card-placeholder.png"
-              :src="thumbnailPath"
-            />
-            <div
-              class="absolute top-0 flex justify-center items-center w-full h-full bg-black bg-opacity-25"
-            >
-              <SVGIcon
-                name="play"
-                title="Play"
-                :class-list="['w-16', 'h-16', 'fill-current']"
-              />
-            </div>
-          </div>
-        </a>
-      </div>
-      <div class="p-4 flex flex-grow flex-col">
-        <div class="flex flex-grow">
-          <PostMeta
-            :category="frontmatter.type"
-            :date="frontmatter.date"
-            :tags="frontmatter.tags"
-            :title="title"
-            :description="frontmatter.description"
-            :post-path="path"
-            :onclick="handleVideoClick"
-            class="type-p4 text-primary"
-          />
-        </div>
-      </div>
-    </article>
-  </div>
-</template>
-
-<script>
-import SVGIcon from '@theme/components/base/SVGIcon.vue'
-import PostMeta from '@theme/components/blog/PostMeta'
-import LazyImage from '@theme/components/base/LazyImage'
-
-export default {
-  name: 'VideoCard',
-  components: { SVGIcon, PostMeta, LazyImage },
-  inheritAttrs: false,
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    frontmatter: {
-      type: Object,
-      default: () => ({}),
-    },
-    path: {
-      type: String,
-      required: true,
-    },
-    openVideoModal: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  computed: {
-    thumbnailPath() {
-      if (!this.path.includes('youtube')) {
-        return ''
-      }
-
-      const newPath = new URL(this.path)
-      const id =
-        newPath.searchParams.get('v') || newPath.searchParams.get('list')
-
-      return `http://img.youtube.com/vi/${id}/0.jpg`
-    },
-  },
-  methods: {
-    handleVideoClick(event) {
-      /* Only uses the anchor default behavior when it's a
-         new tab click  - ctrl/cmd + click or "open in a
-         new tab" option */
-      if (
-        event.ctrlKey ||
-        event.shiftKey ||
-        event.metaKey ||
-        (event.button && event.button === 1)
-      ) {
-        return
-      }
-
-      event.preventDefault()
-
-      this.$store.commit('appState/setVideoModalCard', {
-        frontmatter: this.frontmatter,
-        path: this.path,
-        title: this.title,
-      })
-
-      this.openVideoModal()
-    },
-  },
-}
-</script>

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

@@ -6,11 +6,7 @@
       itemtype="https://schema.org/BlogPosting"
     >
       <h1 class="type-h5 text-primary mr-4">
-        <UnstyledLink
-          :to="videoModalCard.path"
-          :item="{ target: '_blank' }"
-          class="clamp-3 hover:underline"
-        >
+        <UnstyledLink :to="videoModalCard.path" class="clamp-3 hover:underline">
           {{ videoModalCard.title }}
         </UnstyledLink>
       </h1>