feat: comments (should only work on live domain)

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

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2 class="type-h2">Comments</h2>
+    <iframe
+      id="discourse-embed-frame"
+      class="mt-4 mb-24"
+      :src="embedSrc"
+      width="100%"
+      scrolling="no"
+      referrerpolicy="no-referrer-when-downgrade"
+      height="38px"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Comments',
+  components: {},
+  data: () => ({}),
+  computed: {
+    embedSrc() {
+      return `https://discuss.ipfs.io/embed/comments?embed_url=https://blog.ipfs.io${this.$frontmatter.url}`
+    },
+  },
+}
+</script>

src/.vuepress/theme/layouts/Blog.vue

@@ -34,6 +34,7 @@
           all
         />
       </div>
+      <div v-else class="p-48" />
       <div
         v-if="
           mountFinish &&

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

@@ -20,6 +20,7 @@
           itemprop="articleBody"
           class="blog type-rich mb-10 mt-4 pt-4 border-t-2 border-gray border-opacity-25"
         />
+        <Comments v-if="showComments" />
       </div>
     </article>
   </Layout>
@@ -29,6 +30,7 @@
 import Layout from '@theme/layouts/Layout.vue'
 import LazyImage from '@theme/components/base/LazyImage'
 import PostHero from '@theme/components/blog/PostHero'
+import Comments from '@theme/components/blog/Comments'
 
 export default {
   name: 'BlogPost',
@@ -36,6 +38,13 @@ export default {
     Layout,
     LazyImage,
     PostHero,
+    Comments,
+  },
+  data: () => ({
+    showComments: null,
+  }),
+  mounted() {
+    this.showComments = window.location.hostname === 'blog.ipfs.io'
   },
 }
 </script>