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