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