Skip to content

Commit 6f7add9

Browse files
AnnyFigueiraAnnyFigueira
committed
🚧 start of i18n
1 parent 353bd2e commit 6f7add9

4 files changed

Lines changed: 68 additions & 48 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"poisonicon": "^0.1.1",
1919
"prismjs": "^1.22.0",
2020
"remarkable": "^2.0.1",
21-
"remarkable-meta": "^1.0.1"
21+
"remarkable-meta": "^1.0.1",
22+
"yaml": "^1.10.0"
2223
}
2324
}

‎pages/en-US/Documentation.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
title: ""
2+
description: ""
3+
heading: "Nullstack Documentation"
4+
tagline: "Follow these steps and become a full-stack javascript developer!"
5+
topics:
6+
- title: "Core concepts"
7+
description: "Start your journey in Nullstack with these basic concepts"
8+
links:
9+
- "Getting started"
10+
- "Renderable components"
11+
- "Stateful components"
12+
- "Full-stack lifecycle"
13+
- "Server functions"
14+
- "Context"
15+
- "Routes and params"
16+
- "Two-way bindings"
17+
- title: "Advanced concepts"
18+
description: "These are concepts that you will most likely learn as you need in your projects"
19+
links:
20+
- "Application Startup"
21+
- "Context data"
22+
- "Context environment"
23+
- "Context page"
24+
- "Context project"
25+
- "Context settings"
26+
- "Context secrets"
27+
- "Instance self"
28+
- "Instance Key"
29+
- "Server request and response"
30+
- "Styles"
31+
- "NJS file extension"
32+
- "Server-side rendering"
33+
- "Static site generation"
34+
- "Service Worker"
35+
- "How to deploy a Nullstack application"
36+
- title: "Examples"
37+
description: "The best way to learn Nullstack is by reading some code"
38+
links:
39+
- "How to use MongoDB with Nullstack"
40+
- "How to use Google Analytics with Nullstack"
41+
- "How to use Facebook Pixel with Nullstack"

‎src/Application.njs‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,6 @@ class Application extends Nullstack {
4343
await this.startWorker(context);
4444
}
4545

46-
prepare({page}) {
47-
page.locale = 'en';
48-
}
49-
5046
renderPreloader() {
5147
return (
5248
<head>
@@ -63,7 +59,7 @@ class Application extends Nullstack {
6359
<Preloader />
6460
<Header />
6561
<Home route="/" />
66-
<Documentation route="/documentation" />
62+
<Documentation route="/documentation" locale="en-US" />
6763
<Components route="/components" />
6864
<Contributors route="/contributors" />
6965
<Waifu route="/waifu" />

‎src/Documentation.njs‎

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,50 @@
11
import Nullstack from 'nullstack';
2+
import {readFileSync} from 'fs';
3+
import YAML from 'yaml';
24

35
class Documentation extends Nullstack {
6+
7+
i18n = {};
8+
9+
static async geti18nByLocale({locale}) {
10+
const file = readFileSync(`pages/${locale}/${this.name}.yml`, 'utf-8');
11+
return YAML.parse(file);
12+
}
413

5-
prepare({project, page}) {
6-
page.title = `Documentation - ${project.name}`;
7-
page.description = 'Follow these steps and become a full-stack javascript developer!';
14+
async initiate({project, page, locale}) {
15+
this.i18n = await this.geti18nByLocale({locale});
16+
page.title = `${this.i18n.title} - ${project.name}`;
17+
page.description = this.i18n.description;
818
page.priority = 0.8;
19+
page.locale = locale || 'en-US';
920
}
1021

11-
renderLink({title}) {
22+
renderLink({locale, title}) {
1223
const href = '/' + title.toLowerCase().split(' ').join('-');
24+
const prefix = locale != 'en-US' ? locale.toLowerCase() : '';
1325
return (
14-
<a href={href} class="xl x12 p3y bcm2t ci1"> {title} </a>
26+
<a href={prefix + href} class="xl x12 p3y bcm2t ci1"> {title} </a>
1527
)
1628
}
1729

18-
renderTopic({title, description, children}) {
30+
renderTopic({title, description, links}) {
1931
return (
2032
<div class="x12 m6y bcm2 p4x p4t p1b">
2133
<h2 class="x12 sm-fs6 md+fs8 m2b"> {title} </h2>
2234
<p class="x12 fs4 m6b"> {description} </p>
23-
<nav class="x12"> {children} </nav>
35+
<nav class="x12">
36+
{links.map(link => <Link title={link} />)}
37+
</nav>
2438
</div>
2539
)
2640
}
2741

2842
render() {
2943
return (
3044
<section class="x sm-p4x sm-p10y md+p20y">
31-
<h1 class="x12 sm-fs6 md+fs12 m2b"> Nullstack Documentation </h1>
32-
<p class="x12 fs4"> Follow these steps and become a full-stack javascript developer! </p>
33-
<Topic title="Core concepts" description="Start your journey in Nullstack with these basic concepts">
34-
<Link title="Getting started" />
35-
<Link title="Renderable components" />
36-
<Link title="Stateful components" />
37-
<Link title="Full-stack lifecycle" />
38-
<Link title="Server functions" />
39-
<Link title="Context" />
40-
<Link title="Routes and params" />
41-
<Link title="Two-way bindings" />
42-
</Topic>
43-
<Topic title="Advanced concepts" description="These are concepts that you will most likely learn as you need in your projects">
44-
<Link title="Application Startup" />
45-
<Link title="Context data" />
46-
<Link title="Context environment" />
47-
<Link title="Context page" />
48-
<Link title="Context project" />
49-
<Link title="Context settings" />
50-
<Link title="Context secrets" />
51-
<Link title="Instance self" />
52-
<Link title="Instance Key" />
53-
<Link title="Server request and response" />
54-
<Link title="Styles" />
55-
<Link title="NJS file extension" />
56-
<Link title="Server-side rendering" />
57-
<Link title="Static site generation" />
58-
<Link title="Service Worker" />
59-
<Link title="How to deploy a Nullstack application" />
60-
</Topic>
61-
<Topic title="Examples" description="The best way to learn Nullstack is by reading some code">
62-
<Link title="How to use MongoDB with Nullstack" />
63-
<Link title="How to use Google Analytics with Nullstack" />
64-
<Link title="How to use Facebook Pixel with Nullstack" />
65-
</Topic>
45+
<h1 class="x12 sm-fs6 md+fs12 m2b"> {this.i18n.heading} </h1>
46+
<p class="x12 fs4"> {this.i18n.tagline} </p>
47+
{this.i18n.topics.map((topic) => <Topic {...topic} />)}
6648
</section>
6749
)
6850
}

0 commit comments

Comments
 (0)