Skip to content

Commit ede31bd

Browse files
MortaroMortaro
committed
🚧 home
2 parents 36b087c + ceb3abd commit ede31bd

File tree

11 files changed

+203
-438
lines changed

11 files changed

+203
-438
lines changed

‎i18n/en-US/components/Header.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ links:
1313
action:
1414
title: "Get Started"
1515
href: "/getting-started"
16+
language:
17+
title: "Português"
18+
href: "/pt-br"
1619
mode:
1720
dark: "Night Mode"
1821
light: "Day Mode"

‎i18n/en-US/components/Home.yml‎

Lines changed: 57 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,68 @@
11
title: "Full-stack Javascript Components"
22
description: "Nullstack is a full-stack javascript framework for building progressive web applications"
33
hero:
4-
heading: "Full-stack Javascript Components"
5-
tagline: "for one-dev armies"
4+
heading: "Full-stack"
5+
subHeading: "Javascript Components"
6+
tagline: "For one-dev armies"
67
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"
8+
- "Write the back-end and the front-end of a feature in a single
9+
component and let the framework decide where the code should run."
10+
- "Nullstack gives you all the tools you need to stay focused on your
11+
business logic."
12+
callToAction: "npx create-nullstack-app"
13+
trinity:
14+
optimized:
15+
title: "Optimized for first render"
1416
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"
17+
"On the first render you'll get SEO ready HTML optimized for the first
18+
paint of your route in a single request using local functions with
19+
zero javascript dependencies in the client bundle"
20+
pwa:
21+
title: "Snappy PWA experience"
2122
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 is the complete code of a product list and edit form without hiding a single line."
36-
- "Both components invoke server functions to access a MySQL database inside JavaScript without you having to think about APIs"
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"
23+
"After the content is served and the network is idle Nullstack
24+
javascript is loaded, the state of the application is restored through
25+
hydration and it becomes a single page application"
26+
api:
27+
title: "Lightweight API requests"
28+
text:
29+
"Subsequent server functions will fetch JSON from an automaticallty
30+
generated microservice API, deserialize the response, update the
31+
aplication state, and rerender the page out of the box"
4032
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"
33+
- title: "No more glue code"
34+
snippet: "GlueCode"
35+
image: "/nulla-glue.webp"
36+
text:
37+
"A full-stack Lifecycle combined with a feature-driven mindset allows
38+
you to write clean and reusable code without the need to create APIs
39+
manually."
40+
- title: "Become a better programmer"
41+
snippet: "Vanilla"
42+
image: "/nulla-scrolls.jpg"
43+
inverted: true
44+
text:
45+
"Your components are just POJOs.
46+
Take advantage of the existing ecosystem while you write Javascript as it is supposed to be,
47+
and see the result reflected in the dom."
48+
- title: "You already know Nullstack"
49+
snippet: "Modern"
50+
image: "/nulla-map.jpg"
51+
text:
52+
"Routes are simple attributes you can assign to any tag, and links are just a tags.
53+
You will find out that Nullstack is just a modern version of your current stack."
54+
- title: "All the tools you need"
55+
snippet: "Batteries"
56+
image: "/nulla-tools.webp"
57+
inverted: true
58+
text:
59+
"Most chores are very repetitive.
60+
Save your energy for the real challenges using the shortcuts we created,
61+
like object events and two-way bindings"
5362
playlist:
54-
heading: "Watch our Nullstack video tutorials"
55-
tagline: "Nullstack cares about making its content as direct to the point and easy to understand as possible"
63+
heading: "Learn with our "
64+
slang: "Dweebs"
65+
realWord: " Experts"
5666
videos:
5767
- title: "Full-stack with Nullstack - Part 1"
5868
link: "https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
@@ -63,25 +73,3 @@ playlist:
6373
- title: "Full-stack with Nullstack - Part 3"
6474
link: "https://www.youtube.com/watch?v=8PExa5-G1As&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
6575
thumbnail: "/thumbnail-en-us-3.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"

‎i18n/pt-BR/components/Header.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ links:
1313
action:
1414
title: "Começar"
1515
href: "/pt-br/comecando"
16+
language:
17+
title: "English"
18+
href: "/"
1619
mode:
1720
dark: "Modo Noite"
1821
light: "Modo Dia"

‎i18n/pt-BR/components/Home.yml‎

Lines changed: 49 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,64 @@
11
title: "Componentes Javascript Full-stack"
22
description: "Nullstack é um framework javascript full-stack para construir aplicações web progressivas"
33
hero:
4-
heading: "Componentes Javascript Full-stack"
4+
heading: "Full-stack"
5+
subHeading: "em Componentes Javascript"
56
tagline: "para exércitos de um dev só"
67
descriptions:
7-
- "Nullstack é um framework full-stack para construir <strong>aplicações web progressivas</strong>."
8-
- "Ele conecta uma camada de <strong>UI com estado</strong> a <strong>microserviços</strong> especializados no mesmo componente usando <strong>vanilla javascript</strong>."
9-
- "Concentre-se em resolver sua lógica de negócios em vez de escrever código para interoperabilidade."
10-
cycle:
11-
ssr:
12-
title: "Renderização no Servidor"
13-
link: "/pt-br/renderizando-no-servidor"
8+
- "Escreva o back-end e o front-end de um recurso em um único
9+
componente e deixe o framework decidir onde o código deve ser executado."
10+
- "O Nullstack oferece todas as ferramentas de que você precisa para manter o foco em sua lógica de negócios."
11+
callToAction: "npx create-nullstack-app"
12+
trinity:
13+
optimized:
14+
title: "Otimizado para a primeira renderização"
1415
text:
15-
"Nullstack gera HTML otimizado e com <strong>SEO pronto</strong> para o primeiro rascunho de sua rota em uma única requisição usando funções locais e com <strong> zero dependências javascript </strong> no cliente."
16-
spa:
17-
title: "Single Page Application"
18-
link: "/pt-br/ciclo-de-vida-full-stack"
16+
"Na primeira renderização, você terá HTML pronto para SEO e otimizado para a primeira pintura de sua rota em uma única solicitação usando funções locais com nenhuma dependência de javascript no pacote do cliente"
17+
pwa:
18+
title: "Pertinente Experiência de PWA"
1919
text:
20-
"Após hidratação, requisições irão buscar JSON de uma <strong>API gerada automaticamente</strong> por funções do servidor, atualizar o estado da aplicação e renderizar a página novamente."
21-
ssg:
22-
title: "Geração de Site Estático"
23-
link: "/pt-br/geracao-de-sites-estaticos"
24-
text: "Você pode até usar o Nullstack para gerar <strong>sites estáticos</strong> ultra-rápidos que servem HTML e se tornam uma Single Page Application usando uma <strong>API estática</strong> gerada automaticamente."
25-
about:
26-
heading: "Recursos Completos como Componentes"
27-
taglines:
28-
- "Nullstack não é apenas outra parte de sua stack, mas sim a sua stack"
29-
- "Sua aplicação pode ser exportado do back-end para o front-end como um componente e montado em outra aplicação"
30-
showcase:
31-
descriptions:
32-
- "O exemplo acima é o código completo de uma listagem de produtos e um formulário de edição sem esconder nenhuma linha."
33-
- "Ambos os componentes invocam funções de servidor para ter acesso ao banco de dados MySQL no meio do JavaScript sem você ter que pensar em APIs."
20+
"Depois que o conteúdo é servido e a rede está ociosa, o javascript do Nullstack é carregado, o estado do aplicativo é restaurado por meio de hidratação e torna-se um aplicativo de página única"
21+
api:
22+
title: "Solicitações de API leves"
23+
text:
24+
"As funções de servidor subsequentes buscarão JSON de uma API de microsserviços gerada automaticamente, desserializarão a resposta, atualizarão o estado do aplicativo e renderizarão a página sem nenhuma escrita adicional"
3425
productivity:
3526
heading: "A Produtividade está nos Detalhes"
3627
tagline: "Os recursos do Nullstack foram extraídos de projetos da vida real com conveniência e consistência em mente"
3728
features:
38-
- title: "Componentes com Estado"
39-
key: "Stateful"
40-
link: "/pt-br/componentes-com-estado"
41-
- title: "Vínculo Bidirecional"
42-
key: "Binding"
43-
link: "/pt-br/vinculo-bidirecional"
44-
- title: "Rotas Integradas"
45-
key: "Routes"
46-
link: "/pt-br/rotas-e-parametros"
47-
- title: "Ciclo de Vida Full-stack"
48-
key: "Lifecycle"
49-
link: "/pt-br/ciclo-de-vida-full-stack"
29+
- title: "No more glue code"
30+
snippet: "GlueCode"
31+
image: "/home-glue-code.jpg"
32+
text:
33+
"A full-stack Lifecycle combined with a feature-driven mindset allows
34+
you to write clean and reusable code without the need to create APIs
35+
manually."
36+
- title: "Become a better programmer"
37+
snippet: "Vanilla"
38+
image: "/home-glue-code.jpg"
39+
inverted: true
40+
text:
41+
"Your components are just POJOs.
42+
Take advantage of the existing ecosystem while you write Javascript as it is supposed to be,
43+
and see the result reflected in the dom."
44+
- title: "You already know Nullstack"
45+
snippet: "Modern"
46+
image: "/home-glue-code.jpg"
47+
text:
48+
"Routes are simple attributes you can assign to any tag, and links are just a tags.
49+
You will find out that Nullstack is just a modern version of your current stack."
50+
- title: "All the tools you need"
51+
snippet: "Batteries"
52+
image: "/home-glue-code.jpg"
53+
inverted: true
54+
text:
55+
"Most chores are very repetitive.
56+
Save your energy for the real challenges using the shortcuts we created,
57+
like object events and two-way bindings"
5058
playlist:
51-
heading: "Assista aos nossos vídeos tutoriais do Nullstack"
52-
tagline: "Nullstack se preocupa em tornar seu conteúdo o mais direto ao ponto e fácil de entender quanto possível"
59+
heading: "Learn with our "
60+
slang: "Dweebs"
61+
realWord: " Experts"
5362
videos:
5463
- title: "Full-stack com Nullstack - Parte 1"
5564
link: "https://www.youtube.com/watch?v=ieLVXZGXUkI&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe"
@@ -60,25 +69,3 @@ playlist:
6069
- title: "Full-stack com Nullstack - Parte 3"
6170
link: "https://www.youtube.com/watch?v=uRlvILvJ0Oc&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe"
6271
thumbnail: "/thumbnail-pt-br-3.webp"
63-
why:
64-
heading: "Por que você deve usar o Nullstack?"
65-
reasons:
66-
- title: "Desenvolvimento Escalável"
67-
description: "Cada projeto começa pequeno e se torna complexo com o tempo. Escale conforme avança, não importa o tamanho da equipe."
68-
link: "/pt-br/sobre"
69-
closer: "Sem compromissos, sem imposições."
70-
- title: "Desenvolvimento Orientado a Recursos"
71-
description: "Desenvolvimento de back e front end de um recurso no mesmo componente de forma organizada com facilidade de visão geral."
72-
link: "/pt-br/sobre#feature-driven"
73-
closer: "Verdadeira componentização e reutilização de código."
74-
- title: "Ecossistema já existente"
75-
description: "Tira proveito de todo e qualquer pacote isomórfico em Vanilla Javascript já feito em toda história."
76-
link: "/pt-br/sobre#tudo---possivel"
77-
closer: "Todo o sua aplicação fala a mesma língua."
78-
- title: "Adapte-se rapidamente às mudanças de escopo"
79-
description: "A estrutura horizontal, ao contrário de uma hierárquica, torna muito mais fácil mover os recursos."
80-
link: "/pt-br/sobre#por-que-inje--o-de-depend-ncia-em-vez-de-modularidade"
81-
closer: "Flexibilidade acima de burocracia."
82-
getStarted:
83-
text: "Começar!"
84-
link: "/pt-br/comecando"

‎public/nulla-tools.webp‎

12.9 KB
Loading

‎src/Application.scss‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,10 @@
2222
font-display: swap;
2323
}
2424

25-
/*! purgecss start ignore */
26-
27-
.light {
28-
--primary-font-family: "Crete Round", serif;
29-
--secondary-font-family: "Roboto", sans-serif;
30-
--primary-color: #d22365;
31-
--soft-color: #fff;
32-
--neutral-color: #f0f0f2;
33-
--heavy-color: #282c34;
34-
--warning-color: #ffffd6;
35-
}
36-
37-
.dark {
38-
--primary-font-family: "Crete Round", serif;
39-
--secondary-font-family: "Roboto", sans-serif;
40-
--primary-color: #ddbc72;
41-
--soft-color: #2c3748;
42-
--neutral-color: #282c34;
43-
--heavy-color: #fff;
44-
--warning-color: #ffffd6;
45-
}
46-
47-
/*! purgecss end ignore */
48-
4925
body {
5026
font-family: var(--secondary-font-family);
27+
--primary-font-family: "Crete Round", serif;
28+
--secondary-font-family: "Roboto", sans-serif;
5129
font-weight: 300;
5230
overflow-y: scroll;
5331
}
@@ -91,7 +69,7 @@ section a img {
9169

9270
main {
9371
min-height: 100vh;
94-
padding-top: 70px;
72+
padding-top: 61px;
9573
}
9674

9775
@media (min-width: 1600px) {

‎src/Footer.njs‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
1-
import Translatable from './Translatable';
1+
import Nullstack from 'nullstack';
2+
import Github from "poisonicon/github/stroke";
3+
import Youtube from "poisonicon/youtube/stroke";
4+
import Twitter from "poisonicon/trash/stroke";
25

3-
class Footer extends Translatable {
6+
class Footer extends Nullstack {
47

5-
renderLink({title, href}) {
8+
renderLink({ href, icon: Icon, title }) {
69
return (
7-
<a href={href} rel="noopener" target="_blank"
8-
class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">
9-
{title}
10+
<a
11+
href={href}
12+
title={title}
13+
target="_blank"
14+
rel="noopener"
15+
class="hover:text-pink-600 text-white py-2 px-4 inline-block"
16+
>
17+
<Icon height={30}/>
1018
</a>
1119
)
1220
}
13-
14-
render({locale}) {
15-
if(!this.i18n) return false;
16-
const localUrl = locale !== "en-US" ? `/${locale.toLowerCase()}` : "";
21+
render() {
1722
return (
1823
<footer class="flex flex-wrap w-full justify-center relative">
1924
<div class="w-full relative flex justify-center h-80 bg-70 hover:bg-100 bg-center bg-no-repeat" style="background-image: url(/stars.png); transition: background-size 3s;">
20-
<img src="/footer.png" class="absolute bottom-0" />
25+
<img src="/footer.png" alt="Nulla-Chan" class="absolute bottom-0" />
2126
</div>
22-
<div class="bg-gray-800 w-full text-center">
23-
<a href="https://github.com/nullstack/nullstack/stargazers" class="text-white p-4 inline-block text-xl">
24-
<span>Leave a star on</span>
25-
<span class="font-bold block">GitHub</span>
26-
</a>
27+
<div class="bg-gray-800 w-full text-center py-4 space-x-1">
28+
<Link href="https://twitter.com/nullstackapp" title="Twitter" icon={Twitter} />
29+
<Link href="https://github.com/nullstack/nullstack" title="Github" icon={Github} />
30+
<Link href="https://www.youtube.com/nullstack" title="Youtube" icon={Youtube} />
2731
</div>
2832
</footer>
2933
)

0 commit comments

Comments
 (0)