giscus comments work, dark mode works, unstyled

Author: nemanjam

.vscode/settings.json

@@ -27,5 +27,5 @@
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
   // "gitlens.currentLine.enabled": false,
-  "cSpell.words": ["astro"]
+  "cSpell.words": ["astro", "giscus"]
 }

docs/working-notes/todo3.md

@@ -407,5 +407,7 @@ write content for home and about
 write readme and credits
 search with fuse.js astro-paper
 fix lint, types, format
+put images beside .mdx in content, slug...
+style giscus, tags and share
 ```
 

package.json

@@ -41,6 +41,7 @@
     "debounce": "^2.1.0",
     "dotenv": "^16.4.5",
     "feed": "^4.2.2",
+    "giscus": "^1.5.0",
     "mdast-util-to-string": "^4.0.0",
     "nanostores": "^0.10.3",
     "object-treeify": "^4.0.1",

src/components/Giscus.astro

@@ -0,0 +1,35 @@
+---
+
+---
+
+<giscus-widget
+  id="giscus-comments"
+  repo="nemanjam/nemanjam.github.io"
+  repoid="R_kgDOKc-LeA"
+  category="General"
+  categoryid="DIC_kwDOKc-LeM4CZ7UL"
+  mapping="pathname"
+  term="Comments are welcome"
+  strict="0"
+  reactionsenabled="1"
+  emitmetadata="0"
+  inputposition="bottom"
+  theme="light"
+  lang="en"
+  crossorigin="anonymous"
+  loading="lazy"></giscus-widget>
+
+<script>
+  import 'giscus';
+
+  import { SELECTORS } from '@/constants/dom';
+  import { getCurrentMode } from '@/utils/dom';
+
+  const { GISCUS_WIDGET_SELECTOR } = SELECTORS;
+
+  // will run only on page load
+  const giscusWidget = document.querySelector(GISCUS_WIDGET_SELECTOR);
+  const mode = getCurrentMode();
+
+  if (giscusWidget) giscusWidget.setAttribute('theme', mode);
+</script>

src/components/PostListMore.astro

@@ -11,7 +11,7 @@ const { morePosts } = Astro.props;
 ---
 
 <div>
-  <h2>More posts</h2>
+  <h2 class="b-h2">More posts</h2>
   <ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
     {
       morePosts.map((post) => (

src/components/ThemeToggle.astro

@@ -10,9 +10,8 @@ import { Icon } from 'astro-icon/components';
 </theme-toggle>
 
 <script>
-  import { getNextTheme } from 'utils/dom';
-
   import { THEME_CONFIG } from '@/constants/themes';
+  import { getNextTheme, sendModeToGiscus } from '@/utils/dom';
 
   const { CHANGE_EVENT } = THEME_CONFIG;
 
@@ -42,6 +41,10 @@ import { Icon } from 'astro-icon/components';
 
           // set the aria-checked attribute
           // button.setAttribute('aria-checked', String(isDarkMode()));
+
+          // send message with delay to Giscus here
+          // ThemeScript has <script is:inline /> and can't import files
+          setTimeout(() => sendModeToGiscus(), 50);
         },
         { signal }
       );

src/constants/dom.ts

@@ -0,0 +1,4 @@
+export const SELECTORS = {
+  GISCUS_WIDGET_SELECTOR: '#giscus-comments',
+  GISCUS_IFRAME_SELECTOR: 'iframe[title="Comments"]',
+} as const;

src/pages/blog/[slug].astro

@@ -5,6 +5,7 @@ import { getAllPostsWithReadingTime } from '@/modules/post/common';
 import { getRandomPosts } from '@/modules/post/random';
 import { getHeadingsForTableOfContents } from '@/modules/post/table-of-contents';
 import { default as PostLayout } from '@/layouts/Post.astro';
+import Giscus from '@/components/Giscus.astro';
 import PostListMore from '@/components/PostListMore.astro';
 import PostMeta from '@/components/PostMeta.astro';
 import Share from '@/components/Share.astro';
@@ -110,6 +111,8 @@ const metadata: Metadata = { title, description, image };
     <TagList tags={tags} size="lg" class="mb-4 md:mb-6" />
 
     <Share {title} {description} url={`${ROUTES.BLOG}${slug}`} size="md" />
+
+    <Giscus />
   </Fragment>
 
   <Fragment slot="more-posts">

src/types/constants.ts

@@ -1,7 +1,8 @@
 import type { CATEGORIES } from '@/constants/collections';
 import type { PAGE_METADATA } from '@/constants/metadata';
 import type { NAVIGATION_ITEMS } from '@/constants/navigation';
-import type { THEMES } from '@/constants/themes';
+import type { MODES, THEMES } from '@/constants/themes';
+import type { ValueUnion } from '@/types/utils';
 import type { LocalImageProps } from 'astro:assets';
 
 export type CategoryType = (typeof CATEGORIES)[number];
@@ -12,6 +13,8 @@ export type NavigationItem = (typeof NAVIGATION_ITEMS)[number];
 
 export type Theme = (typeof THEMES)[number];
 
+export type Mode = ValueUnion<typeof MODES>;
+
 export type ImageSizes = {
   FIXED: Record<string, Pick<LocalImageProps, 'width' | 'height'>>;
   RESPONSIVE: Record<string, Pick<LocalImageProps, 'widths' | 'sizes'>>;

src/utils/dom.ts

@@ -1,3 +1,4 @@
+import { SELECTORS } from '@/constants/dom';
 import { DEFAULT_THEMES, MODES, THEME_CONFIG, THEMES } from '@/constants/themes';
 
 import type { Theme } from '@/types/constants';
@@ -33,3 +34,22 @@ export const getNextTheme = () => {
   const nextIndex = (currentIndex + 1) % THEMES.length;
   return THEMES[nextIndex];
 };
+
+/*-------------------------------- giscus dark/light mode ------------------------------*/
+
+const { GISCUS_WIDGET_SELECTOR, GISCUS_IFRAME_SELECTOR } = SELECTORS;
+
+export const sendModeToGiscus = (): void => {
+  const giscusIframeUrl = 'https://giscus.app';
+
+  const shadowHost = document.querySelector(GISCUS_WIDGET_SELECTOR);
+  const shadowRoot = shadowHost?.shadowRoot;
+  if (!shadowRoot) return;
+
+  const iframe = shadowRoot.querySelector(GISCUS_IFRAME_SELECTOR) as HTMLIFrameElement;
+  if (!iframe?.contentWindow) return;
+
+  const mode = getCurrentMode();
+
+  iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: mode } } }, giscusIframeUrl);
+};