Merge pull request #52 from ansidev/feature/disqus-comment

Feature: Component Disqus for comment

Author: ansidev

.github/workflows/deploy_to_netlify.yaml

@@ -120,13 +120,15 @@ jobs:
           SITE_GA_ID: ${{ vars.SITE_GA_ID }}
           SITE_SWETRIX_ID: ${{ vars.SITE_SWETRIX_ID }}
           SITE_COUNTER_ANALYTICS_ID: ${{ vars.SITE_COUNTER_ANALYTICS_ID }}
+          SITE_DISQUS_ID: ${{ vars.SITE_DISQUS_ID }}
         shell: bash
         run: |
           set -e
           [[ ${PROD:-false} == "true" ]] && \
             OUTPUT=$(GA_ID=$SITE_GA_ID \
               SWETRIX_ID=$SITE_SWETRIX_ID \
               COUNTER_ANALYTICS_ID=$SITE_COUNTER_ANALYTICS_ID \
+              DISQUS_ID=$SITE_DISQUS_ID \
               pnpm netlify deploy \
               --auth ${{ env.NETLIFY_AUTH_TOKEN }} \
               --site ${{ env.NETLIFY_SITE_ID }} \

src/components/Disqus.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  siteId: string
+  pageURL: string
+  pageIdentifier: string
+}
+
+const { siteId, pageURL, pageIdentifier } = Astro.props
+---
+
+<div id="disqus_thread"></div>
+<script define:vars={{ siteId, pageURL, pageIdentifier }}>
+  var disqus_config = function () {
+    this.page.url = pageURL
+    this.page.identifier = pageIdentifier
+  }
+  ;(function () {
+    // DON'T EDIT BELOW THIS LINE
+    var d = document,
+      s = d.createElement('script')
+    s.src = `https://${siteId}.disqus.com/embed.js`
+    s.setAttribute('data-timestamp', new Date().toString())
+    ;(d.head || d.body).appendChild(s)
+  })()
+</script>
+<noscript>
+  Please enable JavaScript to view the
+  <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+</noscript>

src/configs/site.ts

@@ -49,5 +49,8 @@ export default {
     swetrix: {
       projectId: env.SWETRIX_ID,
     },
+    disqus: {
+      siteId: env.DISQUS_ID,
+    },
   }
 }

src/layouts/PostLayout.astro

@@ -31,6 +31,9 @@ const { author } = siteConfig
     <div class="prose p-4 border max-w-5xl">
       <slot />
     </div>
+    <div class="py-8 max-w-5xl">
+      <slot name="post-footer" />
+    </div>
   </article>
 </AppLayout>
 

src/pages/[slug].astro

@@ -1,7 +1,9 @@
 ---
 import { CollectionEntry, getCollection } from 'astro:content'
 
+import Disqus from '@/components/Disqus.astro'
 import PostLayout from '@/layouts/PostLayout.astro'
+import { getPluginConfig, isPluginEnabled } from '@/utils/plugin'
 
 export async function getStaticPaths() {
   const allPosts = await getCollection('leetcode-solutions')
@@ -23,4 +25,14 @@ const { Content } = await entry.render()
 
 <PostLayout frontmatter={entry.data}>
   <Content />
+  {
+    isPluginEnabled('disqus') && (
+      <Disqus
+        slot="post-footer"
+        {...getPluginConfig('disqus')}
+        pageURL={Astro.url.href}
+        pageIdentifier={Astro.url.pathname}
+      />
+    )
+  }
 </PostLayout>