From 4730fc50df624aa29de80320077ae92a49308fb3 Mon Sep 17 00:00:00 2001
From: Ricardo <ricardos8977@gmail.com>
Date: Wed, 13 Jan 2021 11:34:10 +0000
Subject: [PATCH] feat: comments (should only work on live domain)

---
 .../theme/components/blog/Comments.vue        | 27 +++++++++++++++++++
 src/.vuepress/theme/layouts/Blog.vue          |  1 +
 src/.vuepress/theme/layouts/BlogPost.vue      |  9 +++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/.vuepress/theme/components/blog/Comments.vue

diff --git a/src/.vuepress/theme/components/blog/Comments.vue b/src/.vuepress/theme/components/blog/Comments.vue
new file mode 100644
index 00000000..202f305f
--- /dev/null
+++ b/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>
diff --git a/src/.vuepress/theme/layouts/Blog.vue b/src/.vuepress/theme/layouts/Blog.vue
index 17b23f83..1ca63315 100644
--- a/src/.vuepress/theme/layouts/Blog.vue
+++ b/src/.vuepress/theme/layouts/Blog.vue
@@ -34,6 +34,7 @@
           all
         />
       </div>
+      <div v-else class="p-48" />
       <div
         v-if="
           mountFinish &&
diff --git a/src/.vuepress/theme/layouts/BlogPost.vue b/src/.vuepress/theme/layouts/BlogPost.vue
index 51ae70a7..93884f98 100644
--- a/src/.vuepress/theme/layouts/BlogPost.vue
+++ b/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>