refactor: use env variables for comments system

.env.example

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_GISCUS_REPO=
+NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
+NEXT_PUBLIC_GISCUS_CATEGORY=
+NEXT_PUBLIC_GISCUS_CATEGORY_ID=
+NEXT_PUBLIC_UTTERANCES_REPO=
+NEXT_PUBLIC_DISQUS_SHORTNAME=

data/siteMetadata.js

@@ -17,15 +17,16 @@ const siteMetadata = {
   linkedin: 'https://www.linkedin.com',
   locale: 'en-US',
   comment: {
+    // Select a provider and use the environment variables associated to it
+    // https://vercel.com/docs/environment-variables
     provider: 'giscus', // supported providers: giscus, utterances, disqus
     giscusConfig: {
-      repo: 'timlrx/tailwind-nextjs-starter-blog', // username/repoName
-      // Visit the link below, enter your repo in the configuration section and copy the script data parameters
-      // Before that you should create a new Github discussions category with the Announcements type so that new discussions can only be created by maintainers and giscus
+      // Visit the link below, and follow the steps in the 'configuration' section
       // https://giscus.app/
-      repositoryId: 'MDEwOlJlcG9zaXRvcnkzMjgxMjEyNjA=',
-      category: 'Blog Comments',
-      categoryId: 'DIC_kwDOE467rM4B-XTQ',
+      repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
+      repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
+      category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
+      categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
       mapping: 'pathname', // supported options: pathname, url, title
       reactions: '1', // Emoji reactions: 1 = enable / 0 = disable
       // Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
@@ -41,7 +42,9 @@ const siteMetadata = {
       themeURL: '',
     },
     utterancesConfig: {
-      repo: '', // username/repoName
+      // Visit the link below, and follow the steps in the 'configuration' section
+      // https://utteranc.es/
+      repo: process.env.NEXT_PUBLIC_UTTERANCES_REPO,
       issueTerm: '', // supported options: pathname, url, title
       label: '', // label (optional): Comment 💬
       // theme example: github-light, github-dark, preferred-color-scheme
@@ -52,7 +55,7 @@ const siteMetadata = {
     },
     disqus: {
       // https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-      shortname: '',
+      shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
     },
   },
 }