Skip to content

Commit f01e0b9

Browse files
rschristianrschristian
committed
refactor: Mostly works
1 parent 0e62dde commit f01e0b9

File tree

32 files changed

+815
-1135
lines changed

32 files changed

+815
-1135
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"node": ">=20"
88
},
99
"scripts": {
10-
"dev": "vite --port 8080",
11-
"server": "vite preview --port 8080",
10+
"serve:dev": "vite --port 3000",
11+
"serve:prod": "vite preview --port 3000",
1212
"build": "vite build",
1313
"lint": "eslint src test",
1414
"format": "prettier --write \"{src,test}/**/*.{css,js,json}\"",

‎src/components/blog-overview/index.jsx‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,55 @@
1-
import config from '../../config.json';
2-
import { useLanguage, useTranslation } from '../../lib/i18n';
1+
import { blogPosts } from '../../route-config.js';
2+
import { useTranslate, useBlogTranslate } from '../../lib/i18n';
33
import { Time } from '../time';
44
import { prefetchContent } from '../../lib/use-content';
55
import { BlogPage } from '../routes.jsx';
66
import s from './style.module.css';
77

88
export default function BlogOverview() {
9-
const [lang] = useLanguage();
10-
const continueReading = useTranslation('continueReading');
9+
const translate = useTranslate();
10+
const translateBlog = useBlogTranslate();
1111

12-
return (
13-
<div>
14-
<div class={s.postList}>
15-
{config.blog.map(post => {
16-
//const name = getRouteName(post, lang);
17-
const name = 'FIXME';
18-
const excerpt = post.excerpt[lang] || post.excerpt.en;
12+
const posts = [];
13+
for (const post in blogPosts) {
14+
const translatedBlog = translateBlog(
15+
/** @type {keyof typeof blogPosts} */ (post)
16+
);
17+
18+
const prefetchAndPreload = () => {
19+
BlogPage.preload();
20+
prefetchContent(post);
21+
};
1922

20-
const prefetchAndPreload = () => {
21-
BlogPage.preload();
22-
prefetchContent(post.path);
23-
};
23+
posts.push(
24+
<article class={s.post}>
25+
<div class={s.meta}>
26+
<Time value={blogPosts[post].date} />
27+
</div>
28+
<h2 class={s.title}>
29+
<a
30+
href={post}
31+
onMouseOver={prefetchAndPreload}
32+
onTouchStart={prefetchAndPreload}
33+
>
34+
{translatedBlog.label}
35+
</a>
36+
</h2>
37+
<p class={s.excerpt}>{translatedBlog.excerpt}</p>
38+
<a
39+
href={post}
40+
onMouseOver={prefetchAndPreload}
41+
onTouchStart={prefetchAndPreload}
42+
class="btn-small"
43+
>
44+
{translate('i18n', 'continueReading')} &rarr;
45+
</a>
46+
</article>
47+
);
48+
}
2449

25-
return (
26-
<article class={s.post}>
27-
<div class={s.meta}>
28-
<Time value={post.date} />
29-
</div>
30-
<h2 class={s.title}>
31-
<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload}>{name}</a>
32-
</h2>
33-
<p class={s.excerpt}>{excerpt}</p>
34-
<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload} class="btn-small">
35-
{continueReading} &rarr;
36-
</a>
37-
</article>
38-
);
39-
})}
40-
</div>
50+
return (
51+
<div>
52+
<div class={s.postList}>{posts}</div>
4153
</div>
4254
);
4355
}

‎src/components/content-region/index.jsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect } from 'preact/hooks';
22
import Markup from 'preact-markup';
33
import widgets from '../widgets';
44
import style from './style.module.css';
5-
import { useTranslation } from '../../lib/i18n';
5+
import { useTranslate } from '../../lib/i18n';
66
import { TocContext } from '../table-of-contents';
77
import { prefetchContent } from '../../lib/use-content';
88
import { ReplPage, TutorialPage, CodeEditor } from '../routes';
@@ -43,7 +43,7 @@ function SiblingNav({ route, lang, start }) {
4343
? route.name[lang || 'en']
4444
: route.name || route.title;
4545
}
46-
const label = useTranslation(start ? 'previous' : 'next');
46+
const translate = useTranslate();
4747

4848
return (
4949
<a class={style.nextLink} data-dir-end={!start} href={url}>
@@ -53,7 +53,9 @@ function SiblingNav({ route, lang, start }) {
5353
<span class={style.nextTitle}>
5454
<span class={style.nextTitleInner}>{title}</span>
5555
</span>
56-
<span class={style.nextUrl}>{label}</span>
56+
<span class={style.nextUrl}>
57+
{translate('i18n', start ? 'previousPage' : 'nextPage')}
58+
</span>
5759
</span>
5860
</a>
5961
);
@@ -73,7 +75,11 @@ export default function ContentRegion({ content, components, ...props }) {
7375
}, [props.current]);
7476

7577
return (
76-
<content-region name={props.current} data-page-nav={hasNav} can-edit={props.canEdit}>
78+
<content-region
79+
name={props.current}
80+
data-page-nav={hasNav}
81+
can-edit={props.canEdit}
82+
>
7783
{content && (
7884
<TocContext.Provider value={{ toc: props.toc }}>
7985
<Markup

‎src/components/controllers/blog-page.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { useContent } from '../../lib/use-content';
33
import { NotFound } from './not-found';
44
import { MarkdownRegion } from './markdown-region';
55
import Footer from '../footer/index';
6-
import { blogRoutes } from '../../lib/route-utils';
6+
import { blogPosts } from '../../route-config.js';
77
import style from './style.module.css';
88

99
export default function BlogPage() {
1010
const { slug } = useRoute().params;
11-
const isValidRoute = blogRoutes[`/blog/${slug}`];
11+
const isValidRoute = blogPosts[`/blog/${slug}`];
1212

1313
return (
1414
<ErrorBoundary>

‎src/components/controllers/guide-page.jsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import { useState, useEffect } from 'preact/hooks';
22
import { useRoute, ErrorBoundary } from 'preact-iso';
33
import { useContent } from '../../lib/use-content';
4-
import { useLanguage } from '../../lib/i18n.jsx';
5-
import config from '../../config.json';
4+
import { useLanguageContext } from '../../lib/i18n.jsx';
65
import { NotFound } from './not-found';
76
import cx from '../../lib/cx';
87
import { MarkdownRegion } from './markdown-region';
98
import Sidebar from '../sidebar';
109
import Footer from '../footer/index';
11-
import { flatv10DocPages } from '../../config.js';
12-
//import { docRoutes } from '../../lib/route-utils';
10+
import { flatDocPages } from '../../route-config.js';
1311
import { LATEST_MAJOR, PREVIEW_MAJOR } from '../doc-version';
1412
import style from './style.module.css';
1513

1614
export function GuidePage() {
1715
const { version, name } = useRoute().params;
18-
const isValidRoute = flatv10DocPages['/' + name];
16+
const isValidRoute = flatDocPages[version]['/' + name];
1917

2018
return (
2119
<ErrorBoundary>
@@ -58,9 +56,7 @@ function OldDocsWarning() {
5856
}
5957

6058
const outdatedVersion = version !== PREVIEW_MAJOR;
61-
const latestExists = config.docs[LATEST_MAJOR].some(section =>
62-
section.routes.some(route => route.path === '/' + name)
63-
);
59+
const latestExists = flatDocPages[LATEST_MAJOR]['/' + name];
6460

6561
return (
6662
<div class={style.stickyWarning}>
@@ -94,7 +90,7 @@ const MAINTAINED_LANGUAGES = ['en', 'ru', 'zh'];
9490
function UnmaintainedTranslationWarning({ meta }) {
9591
const { path, params } = useRoute();
9692
const { name, version } = params;
97-
const [lang, setLang] = useLanguage();
93+
const { lang, setLang } = useLanguageContext();
9894

9995
if (
10096
version !== LATEST_MAJOR ||

‎src/components/controllers/page.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useRoute, ErrorBoundary } from 'preact-iso';
2-
import { navRoutes } from '../../lib/route-utils';
32
import { useContent } from '../../lib/use-content';
43
import { NotFound } from './not-found';
54
import { MarkdownRegion } from './markdown-region';
65
import Footer from '../footer/index';
76
import style from './style.module.css';
7+
import { headerNav } from '../../route-config.js';
88

99
// Supports generic pages like `/`, `/about/*`, `/blog`, etc.
1010
export function Page() {
1111
const { path } = useRoute();
12-
const isValidRoute = true;
12+
const isValidRoute = headerNav[path];
1313

1414
return (
1515
<ErrorBoundary>

‎src/components/controllers/tutorial-page.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { Tutorial } from './tutorial';
44
import { SolutionProvider } from './tutorial/contexts';
55
import { NotFound } from './not-found';
66
import { useContent, prefetchContent } from '../../lib/use-content';
7-
import { tutorialRoutes } from '../../lib/route-utils';
7+
import { tutorialPages } from '../../route-config.js';
88

99
import style from './tutorial/style.module.css';
1010

1111
export default function TutorialPage() {
1212
const { step } = useRoute().params;
13-
const isValidRoute = tutorialRoutes[`/tutorial${step ? `/${step}` : ''}`];
13+
const isValidRoute = tutorialPages[`/tutorial${step ? `/${step}` : ''}`];
1414

1515
return (
1616
<ErrorBoundary>

‎src/components/controllers/tutorial/index.jsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { TutorialContext, SolutionContext } from './contexts';
1313
import { parseStackTrace } from '../repl/errors';
1414
import cx from '../../../lib/cx';
1515
import { CodeEditor, Runner, ErrorOverlay, Splitter } from '../../routes';
16-
import { useTranslation } from '../../../lib/i18n.jsx';
16+
import { useTranslate } from '../../../lib/i18n.jsx';
1717
import { MarkdownRegion } from '../markdown-region';
1818
import style from './style.module.css';
1919

@@ -215,16 +215,13 @@ export function Tutorial({ html, meta }) {
215215
}
216216

217217
function ButtonContainer({ meta, showCode, help }) {
218-
const previousPage = useTranslation('previousPage');
219-
const nextPage = useTranslation('nextPage');
220-
const solve = useTranslation('solve');
221-
const tutorialBegin = useTranslation('beginTutorial');
218+
const translate = useTranslate();
222219

223220
return (
224221
<div class={style.buttonContainer}>
225222
{meta.prev && (
226223
<a class={style.prevButton} href={meta.prev}>
227-
{previousPage}
224+
{translate('i18n', 'previousPage')}
228225
</a>
229226
)}
230227
{meta.solvable && (
@@ -234,12 +231,14 @@ function ButtonContainer({ meta, showCode, help }) {
234231
disabled={!showCode}
235232
title="Show solution to this example"
236233
>
237-
{solve}
234+
{translate('i18n', 'solve')}
238235
</button>
239236
)}
240237
{meta.next && (
241238
<a class={style.nextButton} href={meta.next}>
242-
{meta.code == false ? tutorialBegin : nextPage}
239+
{meta.code == false
240+
? translate('i18n', 'beginTutorial')
241+
: translate('i18n', 'nextPage')}
243242
</a>
244243
)}
245244
</div>

‎src/components/doc-version/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback } from 'preact/hooks';
22
import { useLocation, useRoute } from 'preact-iso';
3-
import { docRoutes } from '../../lib/route-utils.js';
3+
import { flatDocPages } from '../../route-config.js';
44
import style from './style.module.css';
55

66
export const LATEST_MAJOR = 'v10';
@@ -18,7 +18,7 @@ export default function DocVersion() {
1818
const onChange = useCallback(
1919
e => {
2020
const version = e.currentTarget.value;
21-
const url = docRoutes[version]?.[`/${name}`]
21+
const url = flatDocPages[version]?.[`/${name}`]
2222
? path.replace(/(v\d{1,2})/, version)
2323
: `/guide/${version}/getting-started`;
2424
route(url);

‎src/components/edit-button/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useRoute } from 'preact-iso';
2-
import { useLanguage } from '../../lib/i18n';
2+
import { useLanguageContext } from '../../lib/i18n';
33
import style from './style.module.css';
44

55
export default function EditThisPage({ isFallback }) {
66
let { path } = useRoute();
7-
const [lang] = useLanguage();
7+
const { lang } = useLanguageContext();
88

99
path = !isFallback ? path + '.md' : '';
1010
const editUrl = `https://github.com/preactjs/preact-www/tree/master/content/${lang}${path}`;

0 commit comments

Comments
 (0)