[Feat] Giscus 댓글 연결 및 favicon/open-graph 이미지 추가

Author: aaronryu

.github/workflows/deploy.yml

@@ -0,0 +1,40 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  # GitHub의 Actions 탭에서 이 워크플로를 수동으로 실행할 수 있습니다.
+  workflow_dispatch:
+
+# 이 작업이 리포지토리를 복제하고 페이지 배포를 생성하도록 허용합니다.
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v6
+      - name: Install, build, and upload your site
+        uses: withastro/action@v6
+        # with:
+        #   path: . # 저장소 내 Astro 프로젝트의 루트 위치입니다. (선택 사항)
+        #   node-version: 24 # 사이트를 빌드하는 데 사용해야 하는 특정 버전의 Node입니다. 기본값은 22입니다. (선택 사항)
+        #   package-manager: pnpm@latest # 종속성을 설치하고 사이트를 빌드하는 데 사용해야 하는 노드 패키지 관리자입니다. lockfile을 기반으로 자동으로 감지됩니다. (선택 사항)
+        #   build-cmd: pnpm run build # 사이트를 빌드하는 데 실행할 명령입니다. 기본적으로 패키지 빌드 스크립트/작업을 실행합니다. (선택 사항)
+        # env:
+        #   PUBLIC_POKEAPI: 'https://pokeapi.co/api/v2' # 변수 값에는 작은따옴표를 사용합니다. (선택 사항)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v5

public/css/giscus-custom.css

@@ -0,0 +1,16 @@
+main {
+  --color-text-primary: var(--text);
+  --color-fg-default: var(--text);
+}
+
+.gsc-main {
+  gap: 0.6em;
+}
+
+.gsc-comments {
+  gap: 0.2em;
+}
+
+.gsc-comments-count {
+  font-size: 1.1em;
+}

public/favicon.ico

@@ -0,0 +1,67 @@
+---
+const customCss = new URL("/css/giscus-custom.css", Astro.site).href;
+---
+
+<section class="comments">
+  <script
+    is:inline
+    src="https://giscus.app/client.js"
+    data-repo="aaronryu/aaronryu.github.io"
+    data-repo-id="MDEwOlJlcG9zaXRvcnkxNjMwOTgxOTc="
+    data-category="Announcements"
+    data-category-id="DIC_kwDOCbiuVc4C8t_o"
+    data-mapping="pathname"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="top"
+    data-theme={customCss}
+    data-lang="ko"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async
+  >
+  </script>
+  <!-- preferred_color_scheme -->
+</section>
+
+<script is:inline>
+  function getGiscusTheme() {
+    return document.documentElement.classList.contains("dark") ? "dark" : "light";
+  }
+
+  function sendGiscusTheme(theme) {
+    const iframe = document.querySelector("iframe.giscus-frame");
+    if (!iframe) return false;
+
+    iframe.contentWindow.postMessage(
+      { giscus: { setConfig: { theme: theme } } },
+      "https://giscus.app",
+    );
+    return true;
+  }
+
+  // 다크 모드 토글을 감지
+  // + 중복 등록 방지: 이미 observer 가 있으면 스킵
+  if (!window.__giscusObserver) {
+    window.__giscusObserver = new MutationObserver(() => {
+      sendGiscusTheme(getGiscusTheme());
+    });
+
+    window.__giscusObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+  }
+
+  // Lazy Loading 방식으로 Giscus 댓글창을 로드하기에 그것이 완료되었을때 현재 테마설정을 읽어 사용하도록
+  window.addEventListener("message", (event) => {
+    if (event.origin !== "https://giscus.app") return;
+    if (!(typeof event.data === "object" && event.data.giscus)) return;
+
+    // Giscus sends a message when it's finished loading
+    sendGiscusTheme(getGiscusTheme());
+  });
+</script>
+
+<script></script>

public/favicon.svg

@@ -149,7 +149,7 @@ const currentYear = new Date().getFullYear();
   .wsj-logo {
     font-family: "Times New Roman", Times, serif;
     font-size: 1.4em;
-    font-weight: 900;
+    font-weight: 600;
     line-height: 0.9em;
     letter-spacing: -0.5px;
     text-align: start;

public/tpo-social-share.png

@@ -214,7 +214,7 @@ const totalYears = diff / (1000 * 60 * 60 * 24 * 365.25);
   .wsj-logo {
     font-family: "Times New Roman", Times, serif;
     font-size: 2.4em;
-    font-weight: 900;
+    font-weight: 600;
     line-height: 0.9em;
     letter-spacing: -0.5px;
     text-align: center;

src/components/Comments.astro

@@ -56,7 +56,7 @@ const translatePath = useTranslatedPath(lang);
   .on-scroll-sticky-header .logo {
     font-family: "Times New Roman", Times, serif;
     font-size: 1.6em;
-    font-weight: 900;
+    font-weight: 600;
     letter-spacing: -0.5px;
     text-align: center;
 

src/components/Footer.astro

@@ -27,12 +27,14 @@ const {
   author = AARON,
   keywords = AARONS_BLOG_KEYWORDS[lang as Lang],
   description = AARONS_BLOG_DESCRIPTION[lang as Lang],
-  image = "",
+  image,
   section,
   created,
   updated,
 } = Astro.props;
 
+const ogImageUrl = new URL('/tpo-social-share.png', Astro.site).href;
+
 const isArticle = title !== AARONS_BLOG_TITLE && !!created;
 const isProd = import.meta.env.PROD;
 const isDev = import.meta.env.DEV;
@@ -93,13 +95,9 @@ const jaURL = new URL(languageURL.ja, Astro.site).href;
       )
     }
     <meta property="og:url" content="https://aaron.github.io/" />
-    <!-- TODO <meta property="og:image" content="https://aaron.github.io/images/og.png" /> -->
+    <meta property="og:image" content={image ?? ogImageUrl} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content={AARONS_TWITTER_ACCOUNT} />
-    <meta name="twitter:creator" content={AARONS_TWITTER_ACCOUNT} />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <!-- TODO <meta name="twitter:image" content="https://aaron.github.io/images/og.png" /> -->
     <!-- (C.1) SEO 개선을 위한 Canonical 설정 - 원본 페이지 주소 명시 -->
     <!-- 현재 페이지의 절대 경로를 가리킴 -->
     <link rel="canonical" href={canonicalURL} />