Giscus (#209)

* Test giscus on homepage

* Use @giscus/react and support light theme

* Track prefers color scheme

* Create a discussion tab for each version

src/app/Analytics.ts

@@ -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)
 	}

src/app/components/Giscus.tsx

@@ -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" />
+}

src/app/components/index.ts

@@ -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'

src/app/components/versions/VersionDetail.tsx

@@ -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>
 	</>

src/app/contexts/Theme.tsx

@@ -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,
 	}
 

src/app/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useActiveTimout'
 export * from './useCanvas'
 export * from './useFocus'
+export * from './useMediaQuery'
 export * from './useModel'

src/app/hooks/useMediaQuery.ts

@@ -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
+}

src/app/pages/Home.tsx

@@ -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>
 }

src/locales/en.json

@@ -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",

src/styles/giscus-burn.css

@@ -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)
+}

src/styles/giscus.css

@@ -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)
+}

src/styles/global.css

@@ -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;