Giscus (#209)

* Test giscus on homepage * Use @giscus/react and support light theme * Track prefers color scheme * Create a discussion tab for each version
2026-05-01 21:23:12 +00:00 · 2022-03-16 02:39:33 +01:00
parent cf41b5cdac
commit 1b91485bf1
17 changed files with 420 additions and 12 deletions
@@ -13,6 +13,7 @@
 		ga('set', 'dimension3', localStorage.getItem('schema_version') || '1.18.2');
 		ga('set', 'dimension4', localStorage.getItem('language') || 'en');
 		ga('set', 'dimension5', 'none');
+		ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none');
 		ga('send', 'pageview');
 	</script>
 	<meta charset="utf-8">
@@ -9,6 +9,7 @@
      "version": "1.0.0",
      "license": "MIT",
      "dependencies": {
+        "@giscus/react": "^1.1.2",
        "@mcschema/core": "^0.12.28",
        "@mcschema/java-1.15": "^0.2.3",
        "@mcschema/java-1.16": "^0.6.6",
@@ -30,6 +31,7 @@
      },
      "devDependencies": {
        "@preact/preset-vite": "^2.1.0",
+        "@rollup/plugin-alias": "^3.1.9",
        "@rollup/plugin-html": "^0.2.3",
        "@types/google.analytics": "0.0.40",
        "@types/howler": "^2.2.4",
@@ -380,6 +382,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@giscus/react": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-1.1.2.tgz",
+      "integrity": "sha512-htSAAiTtoHTRE8GqSSkWmT+Iq7LJhtqSmr+HjEC1cXlNd1WeLVZXjnuiIj7+L8DOUnAdfh+1FClN304FVxIcsQ==",
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
    "node_modules/@mcschema/core": {
      "version": "0.12.29",
      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.12.29.tgz",
@@ -519,6 +530,21 @@
        "vite": ">=2.0.0-beta.3"
      }
    },
+    "node_modules/@rollup/plugin-alias": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
+      "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==",
+      "dev": true,
+      "dependencies": {
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
    "node_modules/@rollup/plugin-html": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-html/-/plugin-html-0.2.3.tgz",
@@ -2841,8 +2867,7 @@
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "node_modules/js-yaml": {
      "version": "3.14.1",
@@ -3179,6 +3204,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3334,7 +3371,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3621,6 +3657,33 @@
        }
      ]
    },
+    "node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      },
+      "peerDependencies": {
+        "react": "17.0.2"
+      }
+    },
    "node_modules/regexpp": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -3833,6 +3896,16 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
    "node_modules/semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -4733,6 +4806,12 @@
        }
      }
    },
+    "@giscus/react": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-1.1.2.tgz",
+      "integrity": "sha512-htSAAiTtoHTRE8GqSSkWmT+Iq7LJhtqSmr+HjEC1cXlNd1WeLVZXjnuiIj7+L8DOUnAdfh+1FClN304FVxIcsQ==",
+      "requires": {}
+    },
    "@mcschema/core": {
      "version": "0.12.29",
      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.12.29.tgz",
@@ -4853,6 +4932,15 @@
        "@rollup/pluginutils": "^4.1.0"
      }
    },
+    "@rollup/plugin-alias": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
+      "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==",
+      "dev": true,
+      "requires": {
+        "slash": "^3.0.0"
+      }
+    },
    "@rollup/plugin-html": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-html/-/plugin-html-0.2.3.tgz",
@@ -6564,8 +6652,7 @@
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "js-yaml": {
      "version": "3.14.1",
@@ -6828,6 +6915,15 @@
        }
      }
    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
    "lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -6946,8 +7042,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "once": {
      "version": "1.4.0",
@@ -7146,6 +7241,27 @@
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
+    "react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      }
+    },
    "regexpp": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -7302,6 +7418,16 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
    "semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -15,6 +15,7 @@
  "author": "Misode",
  "license": "MIT",
  "dependencies": {
+    "@giscus/react": "^1.1.2",
    "@mcschema/core": "^0.12.28",
    "@mcschema/java-1.15": "^0.2.3",
    "@mcschema/java-1.16": "^0.6.6",
@@ -36,6 +37,7 @@
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.1.0",
+    "@rollup/plugin-alias": "^3.1.9",
    "@rollup/plugin-html": "^0.2.3",
    "@types/google.analytics": "0.0.40",
    "@types/howler": "^2.2.4",
@@ -7,6 +7,7 @@ export namespace Analytics {
 	const DIM_LANGUAGE = 4
 	const DIM_PREVIEW = 5
 	const DIM_GENERATOR = 6
+	const DIM_PREFERS_COLOR_SCHEME = 7

 	function event(category: string, action: string, label?: string) {
 		ga('send', 'event', category, action, label)
@@ -45,6 +46,10 @@ export namespace Analytics {
 		dimension(DIM_GENERATOR, generator)
 	}

+	export function setPrefersColorScheme(colorScheme: string) {
+		dimension(DIM_PREFERS_COLOR_SCHEME, colorScheme)
+	}
+
 	export function generatorEvent(action: string, label?: string) {
 		event(ID_GENERATOR, action, label)
 	}
@@ -0,0 +1,26 @@
+import { Giscus as GiscusReact } from '@giscus/react'
+import { useTheme } from '../contexts'
+
+interface Props {
+	term?: string,
+}
+export function Giscus({ term }: Props) {
+	const { actualTheme } = useTheme()
+	const themeSuffix = actualTheme === 'light' ? '-burn' : ''
+	const themeUrl = (import.meta as any).env.DEV
+		? `http://localhost:3000/src/styles/giscus${themeSuffix}.css`
+		: `https://${location.host}/assets/giscus${themeSuffix}.css`
+
+	return <GiscusReact
+		repo="misode/misode.github.io"
+		repoId="MDEwOlJlcG9zaXRvcnkxOTIyNTQyMzA="
+		category="Site"
+		categoryId="DIC_kwDOC3WRFs4COB8r"
+		mapping={term ? 'specific' : 'pathname'}
+		term={term}
+		reactionsEnabled="1"
+		emitMetadata="0"
+		inputPosition="top"
+		theme={themeUrl}
+		lang="en" />
+}
@@ -5,6 +5,7 @@ export * from './BtnMenu'
 export * from './ErrorPanel'
 export * from './forms'
 export * from './generator'
+export * from './Giscus'
 export * from './Header'
 export * from './Icons'
 export * from './Octicon'
@@ -3,14 +3,19 @@ import { VersionMetaData } from '.'
 import { useLocale } from '../../contexts'
 import type { Change, VersionMeta } from '../../services'
 import { getChangelogs } from '../../services'
+import { Giscus } from '../Giscus'
 import { ChangelogList } from './ChangelogList'

+type Tab = 'changelog' | 'discussion' 
+
 interface Props {
 	version: VersionMeta
 }
 export function VersionDetail({ version }: Props) {
 	const { locale } = useLocale()

+	const [tab, setTab] = useState<Tab>('changelog')
+
 	const [changelogs, setChangelogs] = useState<Change[] | undefined>(undefined)
 	useEffect(() => {
 		getChangelogs()
@@ -35,9 +40,13 @@ export function VersionDetail({ version }: Props) {
 				<VersionMetaData label={locale('versions.data_pack_format')} value={version.data_pack_version} />
 				<VersionMetaData label={locale('versions.resource_pack_format')} value={version.resource_pack_version} />
 			</div>
-			<h3>{locale('versions.technical_changes')}</h3>
-			<div class="version-changes">
-				<ChangelogList changes={filteredChangelogs} defaultOrder="asc" />
+			<div class="version-tabs">
+				<span class={tab === 'changelog' ? 'selected' : ''} onClick={() => setTab('changelog')}>{locale('versions.technical_changes')}</span>
+				<span class={tab === 'discussion' ? 'selected' : ''} onClick={() => setTab('discussion')}>{locale('versions.discussion')}</span>
+			</div>
+			<div class="version-tab">
+				{tab === 'changelog' && <ChangelogList changes={filteredChangelogs} defaultOrder="asc" />}
+				{tab === 'discussion' && <Giscus term={`version/${version.id}`} />}
 			</div>
 		</div>
 	</>
@@ -2,14 +2,17 @@ import type { ComponentChildren } from 'preact'
 import { createContext } from 'preact'
 import { useCallback, useContext, useEffect, useState } from 'preact/hooks'
 import { Analytics } from '../Analytics'
+import { useMediaQuery } from '../hooks'
 import { Store } from '../Store'

 interface Theme {
 	theme: string,
+	actualTheme: 'light' | 'dark',
 	changeTheme: (theme: string) => unknown,
 }
 const Theme = createContext<Theme>({
 	theme: 'dark',
+	actualTheme: 'dark',
 	changeTheme: () => {},
 })

@@ -19,6 +22,8 @@ export function useTheme() {

 export function ThemeProvider({ children }: { children: ComponentChildren }) {
 	const [theme, setTheme] = useState(Store.getTheme())
+	const prefersLight = useMediaQuery('(prefers-color-scheme: light)')
+	const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')

 	useEffect(() => {
 		document.documentElement.setAttribute('data-theme', theme)
@@ -30,8 +35,13 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
 		setTheme(theme)
 	}, [])

+	useEffect(() => {
+		Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
+	}, [prefersLight, prefersDark])
+
 	const value: Theme = {
 		theme,
+		actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark',
 		changeTheme,
 	}

@@ -1,4 +1,5 @@
 export * from './useActiveTimout'
 export * from './useCanvas'
 export * from './useFocus'
+export * from './useMediaQuery'
 export * from './useModel'
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export function useMediaQuery(query: string): boolean {
+	const [prefers, setPrefers] = useState(matchMedia(query).matches)
+
+	const onChange = (e: MediaQueryListEvent) => {
+		setPrefers(e.matches)
+	}
+
+	useEffect(() => {
+		const mediaQuery = matchMedia(query)
+		mediaQuery.addEventListener('change', onChange)
+		return () => {
+			mediaQuery.removeEventListener('change', onChange)
+		}
+	}, [query])
+
+	return prefers
+}
@@ -1,5 +1,5 @@
 import config from '../../config.json'
-import { ToolCard } from '../components'
+import { Giscus, ToolCard } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { cleanUrl } from '../Utils'

@@ -33,6 +33,7 @@ export function Home({}: Props) {
 				desc="Convert your data packs from 1.16 to 1.17 to 1.18" />
 			<ToolCard title="Technical Changelog" link="/changelog/" />
 			<ToolCard title="Minecraft Versions" link="/versions/" />
+			<Giscus />
 		</div>
 	</main>
 }
@@ -133,6 +133,7 @@
  "versions.data_pack_format": "Data pack format",
  "versions.resource_pack_format": "Resource pack format",
  "versions.technical_changes": "Technical changes",
+  "versions.discussion": "Discussion",
  "world": "World Settings",
  "worldgen": "Worldgen",
  "worldgen/biome": "Biome",
@@ -0,0 +1,87 @@
+/*!
+ * Modified from GitHub's Light theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+main {
+	--color-prettylights-syntax-comment: #6e7781;
+	--color-prettylights-syntax-constant: #0550ae;
+	--color-prettylights-syntax-entity: #8250df;
+	--color-prettylights-syntax-storage-modifier-import: #24292f;
+	--color-prettylights-syntax-entity-tag: #116329;
+	--color-prettylights-syntax-keyword: #cf222e;
+	--color-prettylights-syntax-string: #0a3069;
+	--color-prettylights-syntax-variable: #953800;
+	--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+	--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+	--color-prettylights-syntax-invalid-illegal-bg: #82071e;
+	--color-prettylights-syntax-carriage-return-text: #f6f8fa;
+	--color-prettylights-syntax-carriage-return-bg: #cf222e;
+	--color-prettylights-syntax-string-regexp: #116329;
+	--color-prettylights-syntax-markup-list: #3b2300;
+	--color-prettylights-syntax-markup-heading: #0550ae;
+	--color-prettylights-syntax-markup-italic: #24292f;
+	--color-prettylights-syntax-markup-bold: #24292f;
+	--color-prettylights-syntax-markup-deleted-text: #82071e;
+	--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+	--color-prettylights-syntax-markup-inserted-text: #116329;
+	--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+	--color-prettylights-syntax-markup-changed-text: #953800;
+	--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+	--color-prettylights-syntax-markup-ignored-text: #eaeef2;
+	--color-prettylights-syntax-markup-ignored-bg: #0550ae;
+	--color-prettylights-syntax-meta-diff-range: #8250df;
+	--color-prettylights-syntax-brackethighlighter-angle: #57606a;
+	--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+	--color-prettylights-syntax-constant-other-reference-link: #0a3069;
+	--color-btn-text: #494949;
+	--color-btn-bg: #b8b8b8;
+	--color-btn-border: #b8b8b8;
+	--color-btn-shadow: 0 0 transparent;
+	--color-btn-inset-shadow: 0 0 transparent;
+	--color-btn-hover-bg: #bdbdbd;
+	--color-btn-hover-border: #bdbdbd;
+	--color-btn-active-bg: #b8b8b8;
+	--color-btn-active-border: #b8b8b8;
+	--color-btn-selected-bg: #cecece;
+	--color-btn-primary-text: #fff;
+	--color-btn-primary-bg: #2da44e;
+	--color-btn-primary-border: #2da44e;
+	--color-btn-primary-shadow: 0 0 transparent;
+	--color-btn-primary-inset-shadow: 0 0 transparent;
+	--color-btn-primary-hover-bg: #2c974b;
+	--color-btn-primary-hover-border: #2c974b;
+	--color-btn-primary-selected-bg: #298e46;
+	--color-btn-primary-selected-shadow: 0 0 transparent;
+	--color-btn-primary-disabled-text: #ffffffcc;
+	--color-btn-primary-disabled-bg: #94d3a2;
+	--color-btn-primary-disabled-border: #94d3a2;
+	--color-fg-default: #2f2f2f;
+	--color-fg-muted: #494949;
+	--color-fg-subtle: #494949;
+	--color-canvas-default: #e2e2e2;
+	--color-canvas-overlay: #e2e2e2;
+	--color-canvas-inset: #fafafa;
+	--color-canvas-subtle: #d4d3d3;
+	--color-border-default: #b8b8b8;
+	--color-border-muted: #cecece;
+	--color-neutral-muted: rgba(175, 184, 193, .2);
+	--color-accent-fg: #0969da;
+	--color-accent-emphasis: #0969da;
+	--color-accent-muted: rgba(84, 174, 255, .4);
+	--color-accent-subtle: #ddf4ff;
+	--color-success-fg: #1a7f37;
+	--color-danger-fg: #cf222e;
+	--color-primer-shadow-inset: inset 0 1px 0 rgba(208, 215, 222, .2);
+	--color-primer-shadow-focus: 0 0 0 3px rgba(9, 105, 218, .3);
+	--color-scale-gray-1: #eaeef2;
+	--color-scale-blue-1: #b6e3ff;
+
+	/*! Extensions from @primer/css/alerts/flash.scss */
+	--color-social-reaction-bg-hover: var(--color-scale-gray-1);
+	--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
+}
+
+main .pagination-loader-container {
+	background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg)
+}
@@ -0,0 +1,87 @@
+/*!
+ * Modified from GitHub's Dark theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+main {
+	--color-prettylights-syntax-comment: #768390;
+	--color-prettylights-syntax-constant: #6cb6ff;
+	--color-prettylights-syntax-entity: #dcbdfb;
+	--color-prettylights-syntax-storage-modifier-import: #adbac7;
+	--color-prettylights-syntax-entity-tag: #8ddb8c;
+	--color-prettylights-syntax-keyword: #f47067;
+	--color-prettylights-syntax-string: #96d0ff;
+	--color-prettylights-syntax-variable: #f69d50;
+	--color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+	--color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+	--color-prettylights-syntax-invalid-illegal-bg: #922323;
+	--color-prettylights-syntax-carriage-return-text: #cdd9e5;
+	--color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+	--color-prettylights-syntax-string-regexp: #8ddb8c;
+	--color-prettylights-syntax-markup-list: #eac55f;
+	--color-prettylights-syntax-markup-heading: #316dca;
+	--color-prettylights-syntax-markup-italic: #adbac7;
+	--color-prettylights-syntax-markup-bold: #adbac7;
+	--color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+	--color-prettylights-syntax-markup-deleted-bg: #78191b;
+	--color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+	--color-prettylights-syntax-markup-inserted-bg: #1b4721;
+	--color-prettylights-syntax-markup-changed-text: #ffddb0;
+	--color-prettylights-syntax-markup-changed-bg: #682d0f;
+	--color-prettylights-syntax-markup-ignored-text: #adbac7;
+	--color-prettylights-syntax-markup-ignored-bg: #255ab2;
+	--color-prettylights-syntax-meta-diff-range: #dcbdfb;
+	--color-prettylights-syntax-brackethighlighter-angle: #768390;
+	--color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+	--color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+	--color-btn-text: #c3c3c3;
+	--color-btn-bg: #3d3d3d;
+	--color-btn-border: #3d3d3d;
+	--color-btn-shadow: 0 0 transparent;
+	--color-btn-inset-shadow: 0 0 transparent;
+	--color-btn-hover-bg: #383838;
+	--color-btn-hover-border: #383838;
+	--color-btn-active-bg: #3d3d3d;
+	--color-btn-active-border: #3d3d3d;
+	--color-btn-selected-bg: #575757;
+	--color-btn-primary-text: #fff;
+	--color-btn-primary-bg: #347d39;
+	--color-btn-primary-border: #347d39;
+	--color-btn-primary-shadow: 0 0 transparent;
+	--color-btn-primary-inset-shadow: 0 0 transparent;
+	--color-btn-primary-hover-bg: #46954a;
+	--color-btn-primary-hover-border: #46954a;
+	--color-btn-primary-selected-bg: #347d39;
+	--color-btn-primary-selected-shadow: 0 0 transparent;
+	--color-btn-primary-disabled-text: #e6e6e6cc;
+	--color-btn-primary-disabled-bg: #347d39;
+	--color-btn-primary-disabled-border: #347d39;
+	--color-fg-default: #dcdcdc;
+	--color-fg-muted: #c3c3c3;
+	--color-fg-subtle: #c3c3c3;
+	--color-canvas-default: #252525;
+	--color-canvas-overlay: #252525;
+	--color-canvas-inset: #1b1b1b;
+	--color-canvas-subtle: #222222;
+	--color-border-default: #3d3d3d;
+	--color-border-muted: #575757;
+	--color-neutral-muted: rgba(99, 110, 123, .4);
+	--color-accent-fg: #539bf5;
+	--color-accent-emphasis: #316dca;
+	--color-accent-muted: rgba(65, 132, 228, .4);
+	--color-accent-subtle: rgba(56, 139, 253, .15);
+	--color-success-fg: #57ab5a;
+	--color-danger-fg: #e5534b;
+	--color-primer-shadow-inset: 0 0 transparent;
+	--color-primer-shadow-focus: 0 0 0 3px #143d79;
+	--color-scale-gray-7: #373e47;
+	--color-scale-blue-8: #143d79;
+
+	/*! Extensions from @primer/css/alerts/flash.scss */
+	--color-social-reaction-bg-hover: var(--color-scale-gray-7);
+	--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
+}
+
+main .pagination-loader-container {
+	background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
+}
@@ -1394,6 +1394,23 @@ hr {
 	fill: var(--accent-primary);
 }

+.version-tabs {
+	display: flex;
+	margin: 20px 0 10px;
+	box-shadow: inset 0 -1px 0 var(--background-4);
+}
+
+.version-tabs > * {
+	border-bottom: 2px solid transparent;
+	padding: 8px 16px;
+	cursor: pointer;
+}
+
+.version-tabs > .selected {
+	border-color: var(--text-3);
+	color: var(--text-1);
+}
+
 .ace_editor,
 .ace_gutter,
 .ace_gutter .ace_layer,
@@ -1437,6 +1454,10 @@ hr {
 	background-color: var(--selection) !important;
 }

+.giscus {
+	margin-top: 16px;
+}
+
@media screen and (max-width: 720px) {
 	.sound-search-group {
 		margin-bottom: 8px;
@@ -6,7 +6,7 @@
    "moduleResolution": "node",
 		"strict": true,
 		"sourceMap": true,
-		"skipLibCheck": false,
+		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
 		"allowSyntheticDefaultImports": true,
 		"resolveJsonModule": true,
@@ -1,4 +1,5 @@
 import preact from '@preact/preset-vite'
+import alias from '@rollup/plugin-alias'
 import html from '@rollup/plugin-html'
 import { env } from 'process'
 import copy from 'rollup-plugin-copy'
@@ -11,6 +12,14 @@ export default defineConfig({
 		sourcemap: true,
 		rollupOptions: {
 			plugins: [
+				alias({
+					entries: [
+						{ find: 'react', replacement: 'preact/compat' },
+						{ find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+						{ find: 'react-dom', replacement: 'preact/compat' },
+						{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
+					],
+				}),
 				html({
 					fileName: '404.html',
 					title: '404',
@@ -45,6 +54,8 @@ export default defineConfig({
 					targets: [
 						{ src: 'src/sitemap.txt', dest: 'dist' },
 						{ src: 'src/sitemap.txt', dest: 'dist', rename: 'sitemap2.txt' },
+						{ src: 'src/styles/giscus.css', dest: 'dist/assets' },
+						{ src: 'src/styles/giscus-burn.css', dest: 'dist/assets' },
 					],
 					hook: 'writeBundle',
 				}),