Add guides (#224)

* Add guides

* Add versioning to guides

* Guides: special variables and nested expressions

* Add guides page to vite build

* Add search and hash hooks, guide tags and headings

* Improve guides list and filtering

* Add 1.19 download link

src/app/components/Giscus.tsx

@@ -9,7 +9,7 @@ export function Giscus({ term }: Props) {
 	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`
+		: `${location.protocol}//${location.host}/assets/giscus${themeSuffix}.css`
 
 	return <GiscusReact
 		repo="misode/misode.github.io"

src/app/components/GuideCard.tsx

@@ -0,0 +1,25 @@
+import { ChangelogTag } from './versions'
+
+interface Props {
+	title: string,
+	link: string,
+	versions: string[],
+	tags: string[],
+	activeTags?: string[],
+	toggleTag?: (tag: string) => unknown,
+}
+export function GuideCard({ title, link, versions, tags, activeTags, toggleTag }: Props) {
+	const onToggleTag = (tag: string) => (e: MouseEvent) => {
+		if (toggleTag) toggleTag(tag)
+		e.preventDefault()
+		e.stopImmediatePropagation()
+	}
+
+	return <a class="guide-card" href={link} >
+		<span class="guide-versions">{versions.join(' • ')}</span>
+		<h3>{title}</h3>
+		<div class="guide-tags">
+			{tags.sort().map(tag => <ChangelogTag label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
+		</div>
+	</a>
+}

src/app/components/index.ts

@@ -6,6 +6,7 @@ export * from './ErrorPanel'
 export * from './forms'
 export * from './generator'
 export * from './Giscus'
+export * from './GuideCard'
 export * from './Header'
 export * from './Icons'
 export * from './Octicon'

src/app/components/versions/ChangelogList.tsx

@@ -56,9 +56,9 @@ export function ChangelogList({ changes, defaultOrder }: Props) {
 		</div>}
 		<div class="changelog-list">
 			{sortedChangelogs === undefined
-				? <span>{locale('loading')}</span>
+				? <span class="note">{locale('loading')}</span>
 				: sortedChangelogs.length === 0
-					? <span>{locale('changelog.no_results')}</span>
+					? <span class="note">{locale('changelog.no_results')}</span>
 					:	sortedChangelogs.map(change =>
 						<ChangelogEntry change={change} activeTags={tags} toggleTag={toggleTag} />)}
 		</div>

src/app/components/versions/ChangelogTag.tsx

@@ -4,7 +4,7 @@ import { hashString } from '../../Utils'
 type TagProps = {
 	label: string,
 	active?: boolean,
-	onClick?: () => unknown,
+	onClick?: (e: MouseEvent) => unknown,
 }
 export function ChangelogTag({ label, active, onClick }: TagProps) {
 	const color = label === 'breaking' ? 5 : hashString(label) % 360

src/app/components/versions/VersionList.tsx

@@ -22,7 +22,7 @@ export function VersionList({ versions, link }: Props) {
 
 	return <>
 		<div class="versions-controls">
-			<TextInput class="btn btn-input version-search" list="sound-list" placeholder={locale('versions.search')}
+			<TextInput class="btn btn-input version-search" placeholder={locale('versions.search')}
 				value={search} onChange={setSearch} />
 			<Checkbox label="Include snapshots" value={snapshots} onChange={setSnapshots} />
 		</div>