Improve version and article linking

src/app/components/Giscus.tsx

@@ -11,16 +11,18 @@ export function Giscus({ term }: Props) {
 		? `http://localhost:3000/src/styles/giscus${themeSuffix}.css`
 		: `${location.protocol}//${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" />
+	return <div class="giscus-container">
+		<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" />
+	</div>
 }

src/app/components/versions/ChangelogEntry.tsx

@@ -1,6 +1,6 @@
 import { marked } from 'marked'
 import { ChangelogTag } from '.'
-import type { Change, ChangelogVersion } from '../../services'
+import type { Change } from '../../services'
 
 type Props = {
 	change: Change,
@@ -10,8 +10,8 @@ type Props = {
 export function ChangelogEntry({ change, activeTags, toggleTag }: Props) {
 	return <div class="changelog-entry">
 		<div class="changelog-version">
-			<ArticleLink {...change.version}/>
-			<ArticleLink {...change.group}/>
+			<a href={`/versions/?id=${change.version}`}>{change.version}</a>
+			<a href={`/versions/?id=${change.group}`}>{change.group}</a>
 		</div>
 		<div class="changelog-tags">
 			{change.tags.map(tag => <ChangelogTag label={tag} onClick={toggleTag ? () => toggleTag(tag) : undefined} active={activeTags?.includes(tag)} />)}
@@ -19,9 +19,3 @@ export function ChangelogEntry({ change, activeTags, toggleTag }: Props) {
 		<div class="changelog-content" dangerouslySetInnerHTML={{ __html: marked(change.content) }} />
 	</div>
 }
-
-function ArticleLink({ id, article }: ChangelogVersion) {
-	return article === null
-		? <span>{id}</span>
-		: <a href={`https://www.minecraft.net/en-us/article/${article}`} target="_blank">{id}</a>
-}

src/app/components/versions/VersionDetail.tsx

@@ -2,16 +2,18 @@ import { useEffect, useMemo, useState } from 'preact/hooks'
 import { VersionMetaData } from '.'
 import { useLocale } from '../../contexts'
 import type { Change, VersionMeta } from '../../services'
-import { getChangelogs } from '../../services'
+import { getArticleLink, getChangelogs } from '../../services'
 import { Giscus } from '../Giscus'
+import { Octicon } from '../Octicon'
 import { ChangelogList } from './ChangelogList'
 
 type Tab = 'changelog' | 'discussion' 
 
 interface Props {
-	version: VersionMeta
+	id: string,
+	version?: VersionMeta,
 }
-export function VersionDetail({ version }: Props) {
+export function VersionDetail({ id, version }: Props) {
 	const { locale } = useLocale()
 
 	const [tab, setTab] = useState<Tab>('changelog')
@@ -20,33 +22,45 @@ export function VersionDetail({ version }: Props) {
 	useEffect(() => {
 		getChangelogs()
 			.then(changelogs => setChangelogs(
-				changelogs.map(c => ({ ...c, tags: c.tags.filter(t => t !== c.group.id) }))
+				changelogs.map(c => ({ ...c, tags: c.tags.filter(t => t !== c.group) }))
 			))
 			.catch(e => console.error(e))
 	}, [])
 
 	const filteredChangelogs = useMemo(() =>
-		changelogs?.filter(c => c.version.id === version.id || c.group.id === version.id),
-	[version.id, changelogs])
+		changelogs?.filter(c => c.version === id || c.group === id),
+	[id, changelogs])
+
+	const articleLink = version && getArticleLink(version.id)
 
 	return <>
 		<div class="version-detail">
-			<h2>{version.name}</h2>
+			<h2>{version?.name ?? id}</h2>
 			<div class="version-info">
-				<VersionMetaData label={locale('versions.released')} value={releaseDate(version)} />
-				<VersionMetaData label={locale('versions.release_target')} value={version.release_target} link={version.id !== version.release_target ? `/versions/?id=${version.release_target}` : undefined} />
-				<VersionMetaData label={locale('versions.data_version')} value={version.data_version} />
-				<VersionMetaData label={locale('versions.protocol_version')} value={version.protocol_version} />
-				<VersionMetaData label={locale('versions.data_pack_format')} value={version.data_pack_version} />
-				<VersionMetaData label={locale('versions.resource_pack_format')} value={version.resource_pack_version} />
+				{version ? <>
+					<VersionMetaData label={locale('versions.released')} value={releaseDate(version)} />
+					<VersionMetaData label={locale('versions.release_target')} value={version.release_target} link={version.id !== version.release_target ? `/versions/?id=${version.release_target}` : undefined} />
+					<VersionMetaData label={locale('versions.data_version')} value={version.data_version} />
+					<VersionMetaData label={locale('versions.protocol_version')} value={version.protocol_version} />
+					<VersionMetaData label={locale('versions.data_pack_format')} value={version.data_pack_version} />
+					<VersionMetaData label={locale('versions.resource_pack_format')} value={version.resource_pack_version} />
+				</> : filteredChangelogs?.length ?? 0 > 1 ? <p>
+					This version is not released yet.
+				</p> : <p>
+					This version does not exist. Only versions since 1.14 are tracked, or it may be too recent.
+				</p>}
 			</div>
 			<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>
+				{articleLink && <a href={articleLink} target="_blank">
+					{locale('versions.article')}
+					{Octicon.link_external}
+				</a>}
 			</div>
 			<div class="version-tab">
 				{tab === 'changelog' && <ChangelogList changes={filteredChangelogs} defaultOrder="asc" />}
-				{tab === 'discussion' && <Giscus term={`version/${version.id}`} />}
+				{tab === 'discussion' && <Giscus term={`version/${id}/`} />}
 			</div>
 		</div>
 	</>