Skip to content

Commit 2afdcf2

Browse files
committed
🚧 i18n structure
1 parent 046c755 commit 2afdcf2

113 files changed

Lines changed: 215 additions & 5131 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

i18n/en-US/articles/njs-file-extension.md

Lines changed: 3 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ If only a subclass is imported, a Nullstack import will be injected at transpile
1111

1212
At transpile time JSX tags will be replaced with *Nullstack.element*
1313

14-
This extension also allows Nullstack to make free transpile time optimizations like source injection and extracting renderable components into stateless functions.
14+
This extension also allows Nullstack to make free transpile time optimizations like source injection.
1515

1616
> 🔥 Each file must have only one class declaration.
1717
1818
On the *server* bundle static async functions are mapped into a registry for security.
1919

20-
On the *client* bundle static async functions are removed and replaced with a flag.
20+
On the *client* bundle static async functions are removed and replaced with a invoke method.
2121

2222
On the *client* bundle static async functions with the name starting with "start" (and optionally followed by an uppercase letter) are completely removed.
2323

@@ -77,7 +77,7 @@ class Tasks extends List {
7777

7878
static hash = 'd493ac09d0d57574a30f136d31da455f';
7979

80-
static getTasks = true;
80+
static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');
8181

8282
prepare(context) {
8383
context.tasks = [];
@@ -111,67 +111,6 @@ class Tasks extends List {
111111
export default Tasks;
112112
```
113113

114-
> 🐱‍💻 Bellow an example of a original .njs file.
115-
116-
```jsx
117-
import Nullstack from 'nullstack';
118-
119-
class Tasks extends Nullstack {
120-
121-
renderTask({task}) {
122-
return (
123-
<li>
124-
<input bind={task.description} />
125-
</li>
126-
)
127-
}
128-
129-
render({tasks}) {
130-
return (
131-
<main>
132-
<ul>
133-
{tasks.map((task) => <Task task={task} />)}
134-
</ul>
135-
</main>
136-
)
137-
}
138-
139-
}
140-
141-
export default Tasks;
142-
```
143-
144-
> 🐱‍💻 Bellow an example of the same transpiled .njs file.
145-
146-
```jsx
147-
import Nullstack from 'nullstack';
148-
149-
class Tasks extends Nullstack {
150-
151-
static renderTask({task}) {
152-
return (
153-
<li>
154-
<input source={task} bind="description" />
155-
</li>
156-
)
157-
}
158-
159-
static render({tasks}) {
160-
const Task = this.renderTask;
161-
return (
162-
<main>
163-
<ul>
164-
{tasks.map((task) => <Task task={task} />)}
165-
</ul>
166-
</main>
167-
)
168-
}
169-
170-
}
171-
172-
export default Tasks;
173-
```
174-
175114
## Next step
176115

177116
⚔ Learn about [server-side rendering](/server-side-rendering).

i18n/en-US/articles/renderable-components.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,6 @@ class Application extends Nullstack {
6363
export default Application;
6464
```
6565

66-
> 💡 Components that do nothing besides rendering are extracted into faster functional components at transpile time!
67-
6866
## Using HTML attributes
6967

7068
Nullstack JSX deviates a little from the spec.
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
title: "Community Components"
2+
description: "A curated list of Nullstack components made by the community"
3+
heading: "Community Components"
4+
tagline: "A curated list of Nullstack components made by the community."
5+
contribute: "If you want to add a component to this list <a href='https://github.com/nullstack/nullstack.github.io/issues' class='ci1'> open an issue on github </a>."
6+
topics:
7+
- title: "Integrations"
8+
projects:
9+
- title: "Google Analytics"
10+
repository: "https://github.com/Mortaro/nullstack-google-analytics"
11+
- title: "Facebook Pixel"
12+
repository: "https://github.com/Mortaro/nullstack-facebook-pixel"
13+
- title: "General Inputs"
14+
projects:
15+
- title: Currency Input"
16+
repository: "https://github.com/Mortaro/nullstack-currency-input"
17+
- title: "Date Input"
18+
repository: "https://github.com/Mortaro/nullstack-date-input"
19+
- title: "CKEditor Adapter"
20+
repository: "https://github.com/Mortaro/nullstack-ckeditor-adapter"
21+
- title: "Brazilian Inputs"
22+
tagline:
23+
title: "Nullstack is a Brazilian Framework"
24+
text: "🤘 Nullstack é BR porr@!"
25+
projects:
26+
- title: CPF and CNPJ Inputs"
27+
repository: "https://github.com/Mortaro/nullstack-cpf-cnpj-input"
28+
- title: "CEP Input"
29+
repository: "https://github.com/Mortaro/nullstack-cep-input"
30+
- title: "Phone Input"
31+
repository: "https://github.com/Mortaro/nullstack-phone-input"
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
title: "Documentation"
2+
description: "Follow these steps and become a full-stack javascript developer!"
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+
- title: "Getting started"
10+
href: "/getting-started"
11+
- title: "Renderable components"
12+
href: "/renderable-components"
13+
- title: "Stateful components"
14+
href: "/stateful-components"
15+
- title: "Full-stack lifecycle"
16+
href: "/full-stack-lifecycle"
17+
- title: "Server functions"
18+
href: "/server-functions"
19+
- title: "Context"
20+
href: "/context"
21+
- title: "Routes and params"
22+
href: "/routes-and-params"
23+
- title: "Two-way bindings"
24+
href: "/two-way-bindings"
25+
- title: "Advanced concepts"
26+
description: "These are concepts that you will most likely learn as you need in your projects"
27+
links:
28+
- title: "Application Startup"
29+
href: "/application-startup"
30+
- title: "Context data"
31+
href: "/context-data"
32+
- title: "Context environment"
33+
href: "/context-environment"
34+
- title: "Context page"
35+
href: "/context-page"
36+
- title: "Context project"
37+
href: "/context-project"
38+
- title: "Context settings"
39+
href: "/context-settings"
40+
- title: "Context secrets"
41+
href: "/context-secrets"
42+
- title: "Instance self"
43+
href: "/instance-self"
44+
- title: "Instance Key"
45+
href: "/instance-key"
46+
- title: "Server request and response"
47+
href: "/server-request-and-response"
48+
- title: "Styles"
49+
href: "/styles"
50+
- title: "NJS file extension"
51+
href: "/njs-file-extension"
52+
- title: "Server-side rendering"
53+
href: "/server-side-rendering"
54+
- title: "Static site generation"
55+
href: "/static-site-generation"
56+
- title: "Service Worker"
57+
href: "/service-worker"
58+
- title: "How to deploy a Nullstack application"
59+
href: "/how-to-deploy-a-nullstack-application"
60+
- title: "Examples"
61+
description: "The best way to learn Nullstack is by reading some code"
62+
links:
63+
- title: "How to use MongoDB with Nullstack"
64+
href: "/how-to-use-mongodb-with-nullstack"
65+
- title: "How to use Google Analytics with Nullstack"
66+
href: "/how-to-use-google-analytics-with-nullstack"
67+
- title: "How to use Facebook Pixel with Nullstack"
68+
href: "/how-to-use-facebook-pixel-with-nullstack"

i18n/pt-BR/components/Home.yml

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
title: "Componentes Javascript Full-stack"
2+
description: "Nullstack é um framework javascript full-stack para construir aplicações web progressivas"
3+
hero:
4+
heading: "Componentes Javascript Full-stack"
5+
tagline: "para exercitos de um dev só"
6+
descriptions:
7+
- "Nullstack is a full-stack framework for building <strong>progressive web applications</strong>."
8+
- "It connects a <strong> stateful UI </strong> layer to specialized <strong>microservices</strong> in the same component using <strong>vanilla javascript</strong>."
9+
- "Focus on solving your business logic instead of writing glue code."
10+
cycle:
11+
ssr:
12+
title: "Server-Side Rendering"
13+
link: "/server-side-rendering"
14+
text:
15+
"Nullstack generates <strong> SEO ready </strong> HTML optimized for the
16+
first paint of your route in a single request using local functions
17+
with <strong> zero javascript </strong> dependencies in the client bundle."
18+
spa:
19+
title: "Single Page Application"
20+
link: "/full-stack-lifecycle"
21+
text:
22+
"After hydration, requests will fetch JSON from an <strong> automatically generated API </strong>
23+
off server functions, update the application state, and rerender the page."
24+
ssg:
25+
title: "Static Site Generation"
26+
link: "/static-site-generation"
27+
text: "You can even use Nullstack to generate lightning-fast <strong> static websites </strong> that serve HTML and become a single page application using an automatically generated <strong> static API </strong>."
28+
about:
29+
heading: "Complete Features as Components"
30+
taglines:
31+
- "Nullstack is not another part of your stack, it is your stack"
32+
- "Your application can be exported from back-end to front-end as a component and mounted into another application"
33+
showcase:
34+
descriptions:
35+
- "The example above uses <a href='/server-functions' class='ci1 p1x'> server functions </a> to read tasks from a JSON file and store them in the <a href='/context' class='ci1 p1x'> context </a> available to all components."
36+
- "The tasks are listed in a specific <a href='/routes-and-params' class='ci1 p1x'> route </a> that renders a component with multiple <a href='/renderable-components' class='ci1 p1x'> inner components </a> filtered by status with inputs using <a href='/two-way-bindings' class='ci1 p1l'> two-way bindings </a>."
37+
productivity:
38+
heading: "Productivity is in the Details"
39+
tagline: "Nullstack features have been extracted from real life projects with convenience and consistency in mind"
40+
features:
41+
- title: "Stateful Components"
42+
key: "Stateful"
43+
link: "/stateful-components"
44+
- title: "Two-Way Binding"
45+
key: "Binding"
46+
link: "/two-way-bindings"
47+
- title: "Built-in Routes"
48+
key: "Routes"
49+
link: "/routes-and-params"
50+
- title: "Full-stack Lifecycle"
51+
key: "Lifecycle"
52+
link: "/full-stack-lifecycle"
53+
playlist:
54+
heading: "Watch our Nullstack video turorials"
55+
tagline: "Nullstack cares about making its content as direct to the point and easy to understand as possible"
56+
videos:
57+
- title: "Full-stack with Nullstack - Part 1"
58+
link: "https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
59+
thumbnail: "/thumb-01.webp"
60+
- title: "Full-stack with Nullstack - Part 2"
61+
link: "https://www.youtube.com/watch?v=_i5kKXkhBaM&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
62+
thumbnail: "/thumb-02.webp"
63+
- title: "Full-stack with Nullstack - Part 3"
64+
link: "https://www.youtube.com/watch?v=8PExa5-G1As&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
65+
thumbnail: "/thumb-03.webp"
66+
why:
67+
heading: "Why should you use Nullstack?"
68+
reasons:
69+
- title: "Scalable Development"
70+
description: "Every project starts small and becomes complex over time. Scale as you go, no matter the size of the team."
71+
link: "/about"
72+
closer: "No compromises, no enforcements."
73+
- title: "Feature-driven Development"
74+
description: "Development of both back and front ends of a feature in the same component in an organized way with ease of overview."
75+
link: "/about#feature-driven"
76+
closer: "True componentization and code reusability."
77+
- title: "Already existing ecosystem"
78+
description: "Takes advantage of any isomorphic vanilla Javascript package made throughout history."
79+
link: "/about#everything-as-vanilla-as-possible"
80+
closer: "All of your application speaks the same language."
81+
- title: "Quickly adapt to scope changes"
82+
description: "The horizontal structure, as opposed to a hierarchical one, makes it a lot easier to move resources around."
83+
link: "/about#why-dependency-injection-instead-of-modularity"
84+
closer: "Flexibility over bureaucracy."
85+
getStarted:
86+
text: "Get Started"
87+
link: "/getting-started"

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"author": "",
66
"license": "ISC",
77
"devDependencies": {
8-
"nullstack": "~0.9.0"
8+
"nullstack": "github:nullstack/nullstack#static-invoker"
99
},
1010
"scripts": {
1111
"start": "npx webpack --config node_modules/nullstack/webpack.config.js --mode=development --watch",

src/Application.njs

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,30 @@ class Application extends Nullstack {
5656
render() {
5757
return (
5858
<main>
59-
<Preloader />
6059
<Header />
60+
6161
<Home route="/" locale="en-US" />
62+
<Home route="/pt-br" locale="pt-BR" />
63+
6264
<Documentation route="/documentation" locale="en-US" />
63-
<Components route="/components" />
64-
<Contributors route="/contributors" />
65-
<Waifu route="/waifu" />
66-
<Article route="/pt-br/:slug" locale="pt-BR" />
65+
<Documentation route="/pt-br/documentacao" locale="pt-BR" />
66+
67+
<Components route="/components" locale="en-US" />
68+
<Components route="/pt-br/componentes" locale="pt-BR" />
69+
70+
<Contributors route="/contributors" locale="en-US" />
71+
<Contributors route="/pt-br/contribuidores" locale="pt-BR" />
72+
73+
<Waifu route="/waifu" locale="en-US" />
74+
<Waifu route="/pt-br/waifu" locale="pt-BR" />
75+
6776
<Article route="/:slug" locale="en-US" />
77+
<Article route="/pt-br/:slug" locale="pt-BR" />
78+
6879
<Footer />
80+
6981
<GoogleAnalytics id="G-E7GZ5Z4MLN" />
82+
<Preloader />
7083
<Loader />
7184
</main>
7285
)

0 commit comments

Comments
 (0)