Add giscus

content/01.far-reaches.md

@@ -0,0 +1,3 @@
+---
+title: The Far Reaches
+---

content/Graphics/01.god-rays.md

@@ -0,0 +1,6 @@
+---
+draft: false
+title: Screen Space God Rays
+tags:
+  - graphics
+---

content/index.md

@@ -0,0 +1,17 @@
+---
+title: Welcome to Shaderlog!
+---
+A long time ago in a year known to many by 2003, I played my first "real" video game: **Pokémon Sapphire**. After encountering it in a Walmart in the great state of Maine, I quickly became enamored with the vaguely whale-shaped creature on the box art for the game. And so I began my scheming to acquire the game for myself.
+
+In about ~0.03 seconds I had formulated my plan. It was simple. Brilliant even. All I need do was ask my grandmother who was with me at that fated Walmart for it. The trick? My parents weren't with us to say no.
+
+And so began my love of video games in earnest. I played many Gameboy Advance games over the next couple of years, eventually migrating to PC and console gaming but always had a soft spot for games with pixel art and turn-based strategy like **Pokémon**, early **Fire Emblem** and of course **Final Fantasy**.
+
+Fast-forward a couple decades and now I am a full-time software engineer with a degree and background that while not all that uncommon these days, puts me in the perfect position to be able to learn how to develop those very same turn-based games I loved growing up.
+
+So come join me in here in this blog where I will be attempting to document my progress as an amateur game developer as I work on my new open-world tactics RPG game **The Far Reaches**. I will be splitting these into two major categories:
+- **Graphics Blog** A series of posts designed to introduce the high-level concepts and problems I encounter during development as well as my designs and solutions for solving them. I will attempt to explain these in layman's terms but a cursory understanding of some topics may be required.
+- **Dev Log** - A series of more casual posts that detail the progress and design decisions I have made for my game. These will likely be more of a "stream of consciousness"-type post that go over more game-specific stuff.
+
+## Dev Log
+## Graphics Blog

package-lock.json

@@ -1360,11 +1360,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2351,9 +2351,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3198,9 +3198,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
-      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
+      "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"

quartz.config.ts

@@ -8,12 +8,10 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "Blog",
     enableSPA: true,
     enablePopovers: true,
-    analytics: {
-      provider: "plausible",
-    },
+    analytics: null,
     locale: "en-US",
     baseUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates", ".obsidian"],

quartz.layout.ts

@@ -20,6 +20,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
+    Component.Comments(),
   ],
   left: [
     Component.PageTitle(),

quartz/components/Comments.tsx

@@ -0,0 +1,30 @@
+// @ts-ignore: typescript doesn't know about our inline bundling system
+// so we need to silence the error
+import script from "./scripts/comments.inline"
+import { QuartzComponentConstructor } from "./types"
+
+export default (() => {
+    function Footer() {
+        return (
+            <script src="https://giscus.app/client.js"
+                data-repo="carsonclarke570/quartz-blog"
+                data-repo-id="R_kgDOMIfdqw"
+                data-category="Blog"
+                data-category-id="DIC_kwDOMIfdq84CgCqR"
+                data-mapping="pathname"
+                data-strict="0"
+                data-reactions-enabled="1"
+                data-emit-metadata="0"
+                data-input-position="bottom"
+                data-theme="dark"
+                data-lang="en"
+                crossorigin="anonymous"
+                async>
+            </script>
+        )
+    }
+
+    Footer.beforeDOMLoaded = script
+
+    return Footer
+}) satisfies QuartzComponentConstructor

quartz/components/Footer.tsx

@@ -13,6 +13,7 @@ export default ((opts?: Options) => {
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
+        <div class="giscus" style={{ marginTop: "5rem" }}></div>
         <hr />
         <p>
           {i18n(cfg.locale).components.footer.createdWith}{" "}

quartz/components/index.ts

@@ -20,6 +20,8 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 
+import Comments from "./Comments"
+
 export {
   ArticleTitle,
   Content,
@@ -42,4 +44,6 @@ export {
   RecentNotes,
   NotFound,
   Breadcrumbs,
+
+  Comments
 }

quartz/components/scripts/comments.inline.ts

@@ -0,0 +1,57 @@
+document.addEventListener("themechange", (e) => {
+    const theme = e.detail.theme === 'light' ? 'light_protanopia' : 'dark_protanopia'
+
+    function sendMessage(message: { setConfig: { theme: string } }) {
+        const iframe = document.querySelector('iframe.giscus-frame') as HTMLIFrameElement;
+        if (!iframe) return;
+        iframe.contentWindow?.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+
+    sendMessage({
+        setConfig: {
+            theme: theme
+        }
+    });
+})
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
+    const currentTheme = localStorage.getItem("theme") ?? userPref
+    if (currentTheme === "dark") { return } // default is dark theme
+
+    const theme = currentTheme === "light" ? "light_protanopia" : "dark_protanopia"
+
+    const existingGiscusContainer = document.getElementById('giscus-container');
+
+    if (existingGiscusContainer) {
+        // Remove the existing Giscus instance
+        existingGiscusContainer.innerHTML = '';
+    }
+
+    // Create a new container element for Giscus
+    const newGiscusContainer = document.createElement('div');
+    newGiscusContainer.id = 'giscus-container';
+    document.body.appendChild(newGiscusContainer);
+
+    // Create a new script element with the updated data-theme attribute
+    const newScript = document.createElement('script');
+    newScript.src = 'https://giscus.app/client.js';
+    newScript.setAttribute('data-repo', 'carsonclarke570/quartz-blog');
+    newScript.setAttribute('data-repo-id', 'R_kgDOMIfdqw');
+    newScript.setAttribute('data-category', 'Blog');
+    newScript.setAttribute('data-category-id', 'DIC_kwDOMIfdq84CgCqR');
+    newScript.setAttribute('data-mapping', 'pathname');
+    newScript.setAttribute('data-strict', '0');
+    newScript.setAttribute('data-reactions-enabled', '1');
+    newScript.setAttribute('data-emit-metadata', '0');
+    newScript.setAttribute('data-input-position', 'bottom');
+    newScript.setAttribute('data-theme', theme);
+    newScript.setAttribute('data-lang', 'en');
+    newScript.setAttribute('data-loading', 'lazy');
+    newScript.setAttribute('crossOrigin', 'anonymous');
+    newScript.async = true;
+
+    // Append the new script to the Giscus container
+    newGiscusContainer.appendChild(newScript);
+})