Feat: Improve Giscus theme visibility and add i18n support

[Seol-JY]

• Fix UI clarity by updating Giscus theme to tritanopia
• Add dynamic language support for comment section
• Ensure dark/light mode is properly applied after giscus iframe is fully loaded

Theme Comparison

• noborder theme (Before) vs tritanopia theme (After)
• Please review both themes and let me know your preference:
  
  

Language Support

• Dynamic language switching based on user preferences
  

Theme consistency

• Maintain theme consistency by applying giscus theme after load
  

[vercel]

@Seol-JY is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

[ohprettyhak]

Suggested change

data-loading="lazy"

If the user changes the theme before the giscus iframe is loaded, the postMessage does not take effect.

How about removing that line to disable lazy loading?

[Seol-JY]

I've identified the issue! It would be great if we could get the Maintainer's thoughts on this part.

While it seems possible to resolve this issue without removing the lazy loading option, it would likely require some tricky workarounds

[Kimbangg]

@Seol-JY @ohprettyhak
I've resolved it by applying the theme again when the load is complete. I used addEventListener("event", () => {}) to update the theme once the iframe has finished loading. 🙏

Since I'm not very familiar with Vue or Giscus, please let me know if there's a better way to approach this! 👀

2025-01-22.8.41.01.mov

// component
<script setup lang="ts">
import { useData } from "vitepress";
import { useGiscusTheme } from "../hooks/useGiscusTheme";

const { frontmatter, title, isDark } = useData();
useGiscusTheme();
</script>

<template>
  <div
    v-if="frontmatter.comments !== false"
    :key="title"
    class="giscus"
    style="margin-top: 24px"
  >
    <component
      :is="'script'"
      :data-theme="isDark ? 'noborder_dark' : 'noborder_light'"
      src="https://giscus.app/client.js"
      data-repo="toss/frontend-fundamentals"
      data-repo-id="R_kgDONfHk5g"
      data-category="Commented Docs"
      data-category-id="DIC_kwDONfHk5s4ClUqX"
      data-mapping="title"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="bottom"
      data-lang="en"
      crossorigin="anonymous"
      data-loading="lazy"
      async
    />
  </div>
</template>

// useGiscusTheme.tsx
import { ref, watch, computed } from "vue";
import { useData } from "vitepress";

import { sendGiscusMessage, GISCUS_THEME } from "../utils";

export function useGiscusTheme() {
  const { isDark } = useData();
  const isIframeLoaded = ref(false);

  const setupThemeHandler = () => {
    window.addEventListener("message", (event) => {
      if (event.origin === "https://giscus.app" && event.data?.giscus != null) {
        isIframeLoaded.value = true;
        syncTheme();
      }
    });
  };

  const syncTheme = () => {
    sendGiscusMessage({
      setConfig: {
        theme: isDark.value ? GISCUS_THEME.dark : GISCUS_THEME.light
      }
    });
  };

  watch(isDark, () => {
    if (isIframeLoaded.value) {
      syncTheme();
    }
  });

  setupThemeHandler();
  
 /**
 * optional
 /* 
  return {
    theme: computed(() =>
      isDark.value ? GISCUS_THEME.dark : GISCUS_THEME.light
    )
  };
}

const GISCUS_ORIGIN = "https://giscus.app" as const;

export const GISCUS_THEME = {
  light: "noborder_light",
  dark: "noborder_dark"
};

export function sendGiscusMessage<T>(message: T) {
  const iframe = document.querySelector<HTMLIFrameElement>(
    "iframe.giscus-frame"
  );

  if (iframe == null) {
    return;
  }

  iframe.contentWindow?.postMessage(
    {
      giscus: message
    },
    GISCUS_ORIGIN
  );
}

[ohprettyhak]

Looks good to me 👍

[Seol-JY]

@Kimbangg
I've implemented the functionality based on your suggested code! I've updated the PR content accordingly. While this is unrelated to the current PR, I'm wondering about your thoughts on introducing Toss Product Sans font for the document content (body text only) in the next PR?

[Seol-JY]

Since site language codes and giscus language codes may be different from each other and this can cause immediate errors, this work was done to handle that mapping.