diff --git a/src/components/controllers/tutorial/index.jsx b/src/components/controllers/tutorial/index.jsx
index 1fb99a08a..e245029c1 100644
--- a/src/components/controllers/tutorial/index.jsx
+++ b/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,7 +195,7 @@ export function Tutorial({ html, meta }) {
components={TUTORIAL_COMPONENTS}
/>
- {meta.tutorial?.setup &&
+ {meta.tutorial?.setup && (
- }
+ )}
@@ -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 (
diff --git a/src/components/widgets.js b/src/components/widgets.js
index 5d5c2a0e9..eeac7c209 100644
--- a/src/components/widgets.js
+++ b/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,
diff --git a/src/config.json b/src/config.json
index b55a9dd0f..925355e33 100644
--- a/src/config.json
+++ b/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": [
diff --git a/src/index.jsx b/src/index.jsx
index ce30201d4..35b823e04 100755
--- a/src/index.jsx
+++ b/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
diff --git a/src/lambda/release.js b/src/lambda/release.js
index ea89d5cf0..1ade1f827 100644
--- a/src/lambda/release.js
+++ b/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,
diff --git a/src/lib/i18n.jsx b/src/lib/i18n.jsx
index 232ee14d5..f3cc098cb 100644
--- a/src/lib/i18n.jsx
+++ b/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();
diff --git a/vite.config.js b/vite.config.js
index 26e9da14b..24d1c269f 100644
--- a/vite.config.js
+++ b/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';
}
}