refactor: config file TBD

src/components/branding/index.jsx

@@ -1,10 +1,28 @@
 import style from './style.module.css';
-import config from '../../config.json';
+
+const LOGOS = [
+	{
+		name: 'logo-text',
+		alt: 'Full Logo'
+	},
+	{
+		name: 'logo-text-inverted',
+		alt: 'Full Logo with Inverted Colors'
+	},
+	{
+		name: 'symbol',
+		alt: 'Preact Symbol'
+	},
+	{
+		name: 'symbol-inverted',
+		alt: 'Preact Symbol with Inverted Colors'
+	}
+];
 
 export default function Branding() {
 	return (
 		<div class={style.logos}>
-			{config.branding.map(asset => (
+			{LOGOS.map(asset => (
 				<LogoVariation name={asset.name} alt={asset.alt} />
 			))}
 		</div>

src/components/content-region/index.jsx

@@ -1,8 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import Markup from 'preact-markup';
 import widgets from '../widgets';
-import style from './style.module.css';
-import { useTranslation } from '../../lib/i18n';
 import { TocContext } from '../table-of-contents';
 import { prefetchContent } from '../../lib/use-content';
 import { ReplPage, TutorialPage, CodeEditor } from '../routes';
@@ -33,34 +31,7 @@ const COMPONENTS = {
 	}
 };
 
-function SiblingNav({ route, lang, start }) {
-	let title = '';
-	let url = '';
-	if (route) {
-		url = route.path.toLowerCase();
-		title =
-			typeof route.name === 'object'
-				? route.name[lang || 'en']
-				: route.name || route.title;
-	}
-	const label = useTranslation(start ? 'previous' : 'next');
-
-	return (
-		<a class={style.nextLink} data-dir-end={!start} href={url}>
-			{start && <span class={style.icon}>&larr;&nbsp;</span>}
-			{!start && <span class={style.icon}>&nbsp;&rarr;</span>}
-			<span class={style.nextInner}>
-				<span class={style.nextTitle}>
-					<span class={style.nextTitleInner}>{title}</span>
-				</span>
-				<span class={style.nextUrl}>{label}</span>
-			</span>
-		</a>
-	);
-}
-
 export default function ContentRegion({ content, components, ...props }) {
-	const hasNav = !!(props.next || props.prev);
 	components = Object.assign({}, COMPONENTS, components);
 
 	useEffect(() => {
@@ -73,7 +44,7 @@ export default function ContentRegion({ content, components, ...props }) {
 	}, [props.current]);
 
 	return (
-		<content-region name={props.current} data-page-nav={hasNav} can-edit={props.canEdit}>
+		<content-region name={props.current} can-edit={props.canEdit}>
 			{content && (
 				<TocContext.Provider value={{ toc: props.toc }}>
 					<Markup
@@ -84,20 +55,6 @@ export default function ContentRegion({ content, components, ...props }) {
 					/>
 				</TocContext.Provider>
 			)}
-			{hasNav && (
-				<div class={style.nextWrapper}>
-					{props.prev ? (
-						<SiblingNav start lang={props.lang} route={props.prev} />
-					) : (
-						<span />
-					)}
-					{props.next ? (
-						<SiblingNav lang={props.lang} route={props.next} />
-					) : (
-						<span />
-					)}
-				</div>
-			)}
 		</content-region>
 	);
 }

src/components/controllers/tutorial/index.jsx

@@ -13,8 +13,7 @@ import { TutorialContext, SolutionContext } from './contexts';
 import { parseStackTrace } from '../repl/errors';
 import cx from '../../../lib/cx';
 import { CodeEditor, Runner, ErrorOverlay, Splitter } from '../../routes';
-import { useLanguage } from '../../../lib/i18n';
-import config from '../../../config.json';
+import { useTranslation } from '../../../lib/i18n';
 import { MarkdownRegion } from '../markdown-region';
 import style from './style.module.css';
 
@@ -75,7 +74,6 @@ export function Tutorial({ html, meta }) {
 		return () => clearTimeout(delay);
 	}, [editorCode]);
 
-
 	const useResult = fn => {
 		useEffect(() => {
 			resultHandlers.add(fn);
@@ -197,15 +195,15 @@ export function Tutorial({ html, meta }) {
 								components={TUTORIAL_COMPONENTS}
 							/>
 
-							{meta.tutorial?.setup &&
+							{meta.tutorial?.setup && (
 								<TutorialSetupBlock
 									code={meta.tutorial.setup}
 									runner={runner}
 									useResult={useResult}
 									useRealm={useRealm}
 									useError={useError}
 								/>
-							}
+							)}
 
 							<ButtonContainer meta={meta} showCode={showCode} help={help} />
 						</div>
@@ -217,13 +215,16 @@ export function Tutorial({ html, meta }) {
 }
 
 function ButtonContainer({ meta, showCode, help }) {
-	const [lang] = useLanguage();
+	const previous = useTranslation('previous');
+	const solve = useTranslation('solve');
+	const beginTutorial = useTranslation('beginTutorial');
+	const next = useTranslation('next');
 
 	return (
 		<div class={style.buttonContainer}>
 			{meta.prev && (
 				<a class={style.prevButton} href={meta.prev}>
-					{config.i18n.previous[lang] || config.i18n.previous.en}
+					{previous}
 				</a>
 			)}
 			{meta.solvable && (
@@ -233,16 +234,12 @@ function ButtonContainer({ meta, showCode, help }) {
 					disabled={!showCode}
 					title="Show solution to this example"
 				>
-					{config.i18n.tutorial.solve[lang] ||
-						config.i18n.tutorial.solve.en}
+					{solve}
 				</button>
 			)}
 			{meta.next && (
 				<a class={style.nextButton} href={meta.next}>
-					{meta.code == false
-						? (config.i18n.tutorial.begin[lang] || config.i18n.tutorial.begin.en)
-						: (config.i18n.next[lang] || config.i18n.next.en)
-					}
+					{meta.code == false ? beginTutorial : next}
 				</a>
 			)}
 		</div>

src/components/widgets.js

@@ -1,14 +1,22 @@
+import { lazy } from 'preact-iso';
+
 import Jumbotron from './jumbotron';
 import GithubRepos from './github-repos';
 import TodoList from './todo-list';
 import Logo from './logo';
 import Toc from './table-of-contents';
-import BlogOverview from './blog-overview';
 import Sponsors from './sponsors';
-import WeAreUsing from './we-are-using';
-import Branding from './branding';
 import TabGroup from './tab-group';
 
+// Hoist the CSS to avoid FOUC
+import './branding/style.module.css';
+import './blog-overview/style.module.css';
+import './we-are-using/style.module.css';
+
+const Branding = lazy(() => import('./branding'));
+const BlogOverview = lazy(() => import('./blog-overview'));
+const WeAreUsing = lazy(() => import('./we-are-using'));
+
 export default {
 	Toc,
 	BlogOverview,

src/config.json

@@ -12,7 +12,7 @@
 		"tr": "Turkish",
 		"zh": "简体中文"
 	},
-	"repo": "preact",
+	"repo": "preactjs/preact",
 	"docsearch": {
 		"apiKey": "842e1531d4af13c18b4718c456e386b2",
 		"indexName": "preact",
@@ -56,26 +56,24 @@
 		"selectYourLanguage": {
 			"en": "Select your language"
 		},
-		"tutorial": {
-			"begin": {
-				"en": "Begin Tutorial",
-				"kr": "튜토리얼 시작",
-				"ru": "Начать обучение",
-				"zh": "开始教程"
-			},
-			"help": {
-				"en": "Help",
-				"ja": "助ける",
-				"kr": "정답 확인",
-				"ru": "Помощь",
-				"zh": "帮助"
-			},
-			"solve": {
-				"en": "Solve",
-				"ja": "説き明かす",
-				"ru": "Решить",
-				"zh": "解决"
-			}
+		"beginTutorial": {
+			"en": "Begin Tutorial",
+			"kr": "튜토리얼 시작",
+			"ru": "Начать обучение",
+			"zh": "开始教程"
+		},
+		"help": {
+			"en": "Help",
+			"ja": "助ける",
+			"kr": "정답 확인",
+			"ru": "Помощь",
+			"zh": "帮助"
+		},
+		"solve": {
+			"en": "Solve",
+			"ja": "説き明かす",
+			"ru": "Решить",
+			"zh": "解决"
 		}
 	},
 	"nav": [
@@ -1092,23 +1090,5 @@
 				"en": "Congratulations!"
 			}
 		}
-	],
-	"branding": [
-		{
-			"name": "logo-text",
-			"alt": "Full Logo"
-		},
-		{
-			"name": "logo-text-inverted",
-			"alt": "Full Logo with Inverted Colors"
-		},
-		{
-			"name": "symbol",
-			"alt": "Preact Symbol"
-		},
-		{
-			"name": "symbol-inverted",
-			"alt": "Preact Symbol with Inverted Colors"
-		}
 	]
 }

src/index.jsx

@@ -66,7 +66,7 @@ export async function prerender() {
 
 		// Preloading
 		// These are all low priority, non-blocking fetches that we just want to have started early. None are critical due to prerendering.
-		{ type: 'link', props: { rel: 'preload', href: '/.netlify/functions/release?repo=preact', as: 'fetch', fetchpriority: 'low' } },
+		{ type: 'link', props: { rel: 'preload', href: '/.netlify/functions/release?repo=preactjs/preact', as: 'fetch', fetchpriority: 'low' } },
 		location.pathname == '/' && { type: 'link', props: { rel: 'preload', href: '/.netlify/functions/repos?org=preactjs', as: 'fetch', fetchpriority: 'low' } },
 		{ type: 'link', props: { rel: 'preload', href: '/contributors.json', as: 'fetch', fetchpriority: 'low' } },
 		// Hardcoding English is intentional, first render always fetches it with user preference only being applied later

src/lambda/release.js

@@ -3,9 +3,11 @@
  * @param {unknown} [_context]
  */
 export default async function releaseLambda(req, _context) {
-	const repo = req?.url ? new URL(req.url).searchParams.get('repo') : 'preact';
+	const repo = req?.url
+		? new URL(req.url).searchParams.get('repo')
+		: 'preactjs/preact';
 
-	const { version, url } = await fetchRelease(`preactjs/${repo}`);
+	const { version, url } = await fetchRelease(repo);
 
 	return new Response(JSON.stringify({ version, url }), {
 		status: 200,

src/lib/i18n.jsx

@@ -74,7 +74,8 @@ export function useLanguage() {
 
 /**
  * Get the translation of a key. Defaults to English if no translation is found
- * @param {string} key
+ * @param {keyof typeof config.i18n} key
+ * @returns {string}
  */
 export function useTranslation(key) {
 	const [lang] = useLanguage();

src/types.d.ts

@@ -4,7 +4,7 @@ declare global {
 	namespace preact.JSX {
 		interface IntrinsicElements {
 			'loading-bar': { showing: boolean };
-			'content-region': { name: string; 'data-page-nav': boolean; 'can-edit': boolean, children: any };
+			'content-region': { name: string; 'can-edit': boolean, children: any };
 		}
 	}
 }

vite.config.js

@@ -28,6 +28,14 @@ export default defineConfig({
 						return 'assets/xmldom-[hash].js';
 					if (chunkInfo.facadeModuleId?.includes('@docsearch/react'))
 						return 'assets/docsearch-[hash].js';
+
+					if (chunkInfo.facadeModuleId?.includes('branding'))
+						return 'assets/branding-[hash].js';
+					if (chunkInfo.facadeModuleId?.includes('blog-overview'))
+						return 'assets/blog-overview-[hash].js';
+					if (chunkInfo.facadeModuleId?.includes('we-are-using'))
+						return 'assets/we-are-using-[hash].js';
+
 					return 'assets/[name]-[hash].js';
 				}
 			}