* Test giscus on homepage

* Use @giscus/react and support light theme

* Track prefers color scheme

* Create a discussion tab for each version
This commit is contained in:
Misode
2022-03-16 02:39:33 +01:00
committed by GitHub
parent cf41b5cdac
commit 1b91485bf1
17 changed files with 420 additions and 12 deletions

View File

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