feat: add comment gisqus and refactor

- install comment gisqus
- move pkgs loadmore to scripts

pkgs/LoadMore/cmd.mjs → pkgs/Scripts/cmd.mjs

@@ -5,23 +5,19 @@ const bundleFile = async () => {
   const getPkg = JSON.parse(readFileSync('./package.json'))
 
   const Opts = {
-    entryPoints: ['src/index.ts'],
+    entryPoints: ['src/loadmore/index.ts', 'src/gisqus.ts'],
     bundle: true,
     minify: true,
     outdir: 'dist',
     platform: 'node',
     format: 'esm',
-    outExtension: { '.js': '.mjs' },
     external: [
       'vite',
       ...Object.keys(getPkg.dependencies || {}),
       ...Object.keys(getPkg.peerDependencies || {}),
     ],
   }
 
-  await build(Opts)
-  Opts.format = 'cjs'
-  Opts.outExtension = { '.js': '.cjs' }
   await build(Opts)
 
   const replaceHtml = (PATH) => {
@@ -30,8 +26,7 @@ const bundleFile = async () => {
     writeFileSync(PATH, result)
   }
 
-  replaceHtml('./dist/index.mjs')
-  replaceHtml('./dist/index.cjs')
+  replaceHtml('./dist/loadmore/index.js')
 }
 
 const isBuild = process.env.BUILD === 'true'

pkgs/LoadMore/package.json → pkgs/Scripts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "loadmore",
+  "name": "myscript",
   "version": "1.0.0",
   "description": "vite plugin for html literal and ",
   "scripts": {
@@ -25,13 +25,13 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+    "./loadmore": {
+      "types": "./dist/loadmore/index.d.ts",
+      "import": "./dist/loadmore/index.js"
     },
-    "./type": {
-      "types": "./dist/types.d.ts"
+    "./giscus": {
+      "types": "./dist/gisqus.d.ts",
+      "import": "./dist/gisqus.js"
     }
   },
   "files": [

pkgs/Scripts/src/gisqus.ts

@@ -0,0 +1,44 @@
+;(function () {
+  let isClick = false
+  const ELEMENT_COMMENT = document.getElementById('content-comment')!
+  const BtnToggle = document.getElementById('toggle-comment')!
+  BtnToggle.onclick = () => {
+    ELEMENT_COMMENT.classList.toggle('hidden')
+    let isHide = true
+    if (isHide) {
+      isClick = false
+      BtnToggle.innerHTML = 'Hide Comments'
+    } else {
+      isClick = true
+      BtnToggle.innerHTML = 'Show Comments'
+    }
+    if (!isClick) {
+      isClick = true
+      const REPO = 'alifprihantoro/pawartatech'
+      const REPO_ID = 'R_kgDONCtgBQ'
+      const DATA_CATEGORY = 'Gisqus'
+      const CATEGORY_ID = 'DIC_kwDONCtgBc4CkVdt'
+      const DATA_MAPPING = 'pathname'
+      const isLazy = true
+      const DATA_THEMES = 'dark'
+      const script = document.createElement('script')
+      script.src = 'https://giscus.app/client.js'
+      script.setAttribute('data-repo', REPO)
+      script.setAttribute('data-repo-id', REPO_ID)
+      script.setAttribute('data-category', DATA_CATEGORY)
+      script.setAttribute('data-category-id', CATEGORY_ID)
+      script.setAttribute('data-mapping', DATA_MAPPING)
+      script.setAttribute('data-strict', '1')
+      script.setAttribute('data-reactions-enabled', '1')
+      script.setAttribute('data-emit-metadata', '1')
+      script.setAttribute('data-input-position', 'top')
+      script.setAttribute('data-theme', DATA_THEMES)
+      if (isLazy) {
+        script.setAttribute('data-loading', 'lazy')
+      }
+      script.setAttribute('data-lang', 'id')
+      script.setAttribute('crossorigin', 'anonymous')
+      ELEMENT_COMMENT.appendChild(script)
+    }
+  }
+})()

pkgs/ui/package.json

@@ -39,6 +39,7 @@
     "@muryp/vite-html": "^1.0.6",
     "@storybook/addon-console": "^3.0.0",
     "@storybook/test": "^8.3.6",
-    "configs": "workspace:^"
+    "configs": "workspace:^",
+    "myscript": "workspace:^"
   }
 }

pkgs/ui/src/assets/css/main.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 /* default */
 h1,
 h2,

pkgs/ui/src/view/pages/post/index.ts

@@ -1,3 +1,4 @@
+import Scripts from 'myscript/giscus?raw'
 export default function Post({
   Content,
   title,
@@ -20,10 +21,19 @@ export default function Post({
         ${Content}
       </article>
       <b:if cond='data:blog.pageType != "static_page"'>
+        <button class="btn btn-primary w-full" id="toggle-comment">
+          show comment
+        </button>
+        <div id="content-comment" class="hidden"></div>
+        <script defer>
+          //<![CDATA[
+          ${Scripts}
+          //]]>
+        </script>
         ${NextPrev}
         <h2 class="text-center uppercase font-Rokkit font-bold">Baca Juga :</h2>
         <div class="w-full my-12 ">${RelatedPost}</div>
       </b:if>
     </div>
   `
-}
+}

web/blogger/package.json

@@ -13,7 +13,7 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.12",
-    "loadmore": "workspace:^",
+    "myscript": "workspace:^",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "ui": "workspace:^"

web/blogger/src/component/pages/List.ts

@@ -1,4 +1,4 @@
-import script from 'loadmore?raw'
+import script from 'myscript/loadmore?raw'
 
 export default html`
   <div id="LoadMoreList"></div>
@@ -9,4 +9,4 @@ export default html`
     ${script}
     //]]>
   </script>
-`
+`