From e9df4ad12c267ed47acf72d9f0b02ea54f117353 Mon Sep 17 00:00:00 2001 From: Christian Mortaro Date: Wed, 3 May 2023 21:50:30 -0300 Subject: [PATCH] :memo: update examples --- i18n/en-US/articles/getting-started.md | 26 -------- i18n/en-US/components/Contributors.yml | 6 -- i18n/en-US/components/Home.yml | 9 ++- i18n/en-US/snippets/GlueCode.njs | 19 +++--- i18n/en-US/snippets/NeverWriteAnotherAPI.njs | 23 +++++++ i18n/pt-BR/articles/comecando.md | 26 -------- i18n/pt-BR/components/Contributors.yml | 6 -- i18n/pt-BR/components/Home.yml | 11 ++-- i18n/pt-BR/snippets/GlueCode.njs | 27 ++++---- i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs | 23 +++++++ package.json | 2 +- src/Application.njs | 65 ++++++++------------ src/Article.njs | 8 +-- src/Header.njs | 46 +++++++++----- src/Home.njs | 38 ++++++------ src/Post.njs | 8 +-- src/PostExample.njs | 6 +- src/Snippet.njs | 4 +- src/Translatable.njs | 12 ++-- tailwind.config.js | 2 +- webpack.config.js | 2 +- 21 files changed, 175 insertions(+), 194 deletions(-) create mode 100644 i18n/en-US/snippets/NeverWriteAnotherAPI.njs create mode 100644 i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs diff --git a/i18n/en-US/articles/getting-started.md b/i18n/en-US/articles/getting-started.md index dd4fbf52..27543766 100644 --- a/i18n/en-US/articles/getting-started.md +++ b/i18n/en-US/articles/getting-started.md @@ -9,8 +9,6 @@ Create full stack JavaScript applications within seconds using `npx` to generate > 🔥 The minimum required [node.js](https://nodejs.org) version for development mode is *12.20.0*. -> ⚠ If the directory you are in contains spaces, you use Windows and `npx` gives errors, read about [the known npx bug](#the-known-npx-bug). - Replace `project-name` with your project name and run the command below to start a project: ```sh @@ -105,30 +103,6 @@ This is the compiled result of your application in production mode. >✨ Learn more about [how to deploy a Nullstack application](/how-to-deploy-a-nullstack-application). -## The known npx bug - -Warned on `npx` issues like [#100](https://github.com/zkat/npx/issues/100), [#110](https://github.com/zkat/npx/issues/110) and [#143](https://github.com/zkat/npx/issues/146), it has an error when trying to resolve the path to his cache folder when contains spaces. - -If this happens to you, our recommendations are: - -- Using downloaded as you normally would with `npm`: - ```sh - npm i -g create-nullstack-app - create-nullstack-app project-name - ``` - -- or, change the cache folder directory, as stated [here](https://github.com/zkat/npx/issues/146#issuecomment-384016791) and [here](https://github.com/zkat/npx/issues/146#issuecomment-384019497): - - - If you want to keep the use of space, replace `FirstName` with the one used on your path and run: - ```sh - npm config set cache "C:\Users\FirstName~1\AppData\Roaming\npm-cache" --global - ``` - - - or, using another path without spaces: - ```sh - npm config set cache C:\tmp\nodejs\npm-cache --global - ``` - ## Next step ⚔ Create your first [Stateless Component](/stateless-components). \ No newline at end of file diff --git a/i18n/en-US/components/Contributors.yml b/i18n/en-US/components/Contributors.yml index 881eb2ee..775b03bb 100644 --- a/i18n/en-US/components/Contributors.yml +++ b/i18n/en-US/components/Contributors.yml @@ -21,37 +21,31 @@ core: github: "Mortaro" description: "Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits." contribution: "Reverse engineered wishful thinking code into existence and then refactored it into a framework." - work: "Head of product focused development at AE Studio with over 18 years of experience in development across web2, web3, and UX." - name: "Anny Figueira" role: "Autistic Adopter" github: "AnnyFigueira" description: "Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything." contribution: "An early adopter of the framework that developed real production applications to validate how the parts fit together." - work: "Full stack developer at AE Studio with over 12 years of experience in web development" - name: "Dayson Marx" role: "Distracted Designer" github: "daysonmarx" description: "Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice." contribution: "API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective." - work: "UX, UI, and brand designer at AE Studio with over 10 years of experience including front-end development" - name: "Bianca Augusta" role: "Autistic Artist" github: "Bilkaya" description: "Aspiring comic writer, Warcraft/FFXIV addict, loves healer and tank roles." contribution: "Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro." - work: "Concept artist at Gearbox Software with over 11 years of career as a game artist" - name: "Guilherme Correia" role: "import Member from vuejs-br" github: "GuiDevloper" description: "Experimentalist, writer of fictional universes and dreamer that develop while listening to untitled cassette tapes." contribution: "User of undocumented features and creator of issues requiring documentation that he will do himself." - work: "Fulltime open-source contributor with over 5 years of web development experience" - name: "Bruno Michels" role: "The Dev For Fun" github: "brunolm" description: "Weeb at the top of ranks on Stack Overflow, CoderWars, CodersRank. Plays games and develops things for fun." contribution: "Something with types. Brainwashing the creator to add TypeScript to Nullstack." - work: "Wildcard Developer at AE Studio with over 15 years of experience doing specific things." contentCreators: title: "The Content Creators" diff --git a/i18n/en-US/components/Home.yml b/i18n/en-US/components/Home.yml index 7f788a0b..42fe8dba 100644 --- a/i18n/en-US/components/Home.yml +++ b/i18n/en-US/components/Home.yml @@ -4,9 +4,8 @@ hero: heading: "Feature-Driven" subHeading: "Full Stack JavaScript Components" descriptions: - - Your new favorite web framework. - - "Write the backend and frontend of a feature in a single isomorphic - component and let the framework decide where the code should run." + - Nullstack is a web framework that makes coding fun again. + - "Write the backend and frontend of a feature in a single isomorphic component with zero boilerplate or glue code." callToAction: "npx create-nullstack-app" actionLink: '/getting-started' actionCallback: 'Command copied, paste it on the terminal' @@ -33,8 +32,8 @@ trinity: generated microservice API, deserialize the response, update the aplication state, and rerender the page out of the box" features: - - title: "No more glue code" - snippet: "GlueCode" + - title: "Never write another API" + snippet: "NeverWriteAnotherAPI" image: "/illustrations/nulla-glue.webp" text: "You write features for products. The compiler extracts your front end code and replaces all static async functions with calls to microservices" diff --git a/i18n/en-US/snippets/GlueCode.njs b/i18n/en-US/snippets/GlueCode.njs index 4ea56349..5125ef25 100644 --- a/i18n/en-US/snippets/GlueCode.njs +++ b/i18n/en-US/snippets/GlueCode.njs @@ -1,24 +1,23 @@ -class Feature extends Nullstack { +class WaifuCounter extends Nullstack { // runs in the server - static async delete({ database }) { - database.query("DELETE * FROM WAIFUS"); + static async getWaifus({ database }) { + const sql = "SELECT COUNT(*) FROM WAIFUS"; + return database.query(sql); } // runs in the client - async confirm() { - if (confirm("You sure? uwu")) { - await this.delete(); - } + async countWaifus() { + this.waifus = this.getWaifus() } // runs wherever is best render() { return ( - ); } - + } diff --git a/i18n/en-US/snippets/NeverWriteAnotherAPI.njs b/i18n/en-US/snippets/NeverWriteAnotherAPI.njs new file mode 100644 index 00000000..a04903a2 --- /dev/null +++ b/i18n/en-US/snippets/NeverWriteAnotherAPI.njs @@ -0,0 +1,23 @@ +class WaifuCreator extends Nullstack { + + // extracted into a microservice + static async insertWaifu({ database, name }) { + const sql = "INSERT INTO waifus (name) VALUES (?)"; + return database.query(sql, name); + } + + // invokes the microservice + async create() { + this.insertWaifu({ name: "Nulla-Chan" }) + } + + // render in the DOM + render() { + return ( + + ); + } + +} diff --git a/i18n/pt-BR/articles/comecando.md b/i18n/pt-BR/articles/comecando.md index 56f85a7d..b67795f8 100644 --- a/i18n/pt-BR/articles/comecando.md +++ b/i18n/pt-BR/articles/comecando.md @@ -9,8 +9,6 @@ Crie aplicações JavaScript full stack em segundos usando `npx` para gerar os a > 🔥 A versão mínima necessária do [node.js](https://nodejs.org/pt-br/) para o modo de desenvovimento é *12.20.0*. -> ⚠ Se o diretório em que você está contém espaços, você usa Windows e o `npx` der erros, leia sobre o [bug conhecido do npx](#bug-conhecido-do-npx). - Troque `project-name` com o nome do seu projeto e rode o comanto abaixo para começar um projeto: ```sh @@ -99,30 +97,6 @@ Este é o resultado compilado da sua aplicação em modo de produção. >✨ Saiba mais sobre [como fazer deploy de aplicação Nullstack](/pt-br/como-fazer-deploy-de-aplicacao-nullstack). -## Bug conhecido do npx - -Avisado em issues do `npx` como [#100](https://github.com/zkat/npx/issues/100), [#110](https://github.com/zkat/npx/issues/110) e [#143](https://github.com/zkat/npx/issues/146), ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços. - -Se isso ocorrer com você, nossas recomendações são: - -- Usando baixado como normalmente faria com `npm`: - ```sh - npm i -g create-nullstack-app - create-nullstack-app project-name - ``` - -- ou, mudar o diretório da pasta de cache, como dito [aqui](https://github.com/zkat/npx/issues/146#issuecomment-384016791) e [aqui](https://github.com/zkat/npx/issues/146#issuecomment-384019497): - - - Se deseja manter o uso do espaço, subtitua `PrimeiroNome` pelo usado no seu caminho e rode: - ```sh - npm config set cache "C:\Users\PrimeiroNome~1\AppData\Roaming\npm-cache" --global - ``` - - - ou, usando outro caminho sem espaços: - ```sh - npm config set cache C:\tmp\nodejs\npm-cache --global - ``` - ## Próximo Passo ⚔ Crie seu primeiro [componente renderizável](/pt-br/componentes-renderizaveis). diff --git a/i18n/pt-BR/components/Contributors.yml b/i18n/pt-BR/components/Contributors.yml index fe333e2b..68d6c865 100644 --- a/i18n/pt-BR/components/Contributors.yml +++ b/i18n/pt-BR/components/Contributors.yml @@ -21,37 +21,31 @@ core: github: "Mortaro" description: "Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits." contribution: "Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework." - work: "Head of product focused development na AE Studio com mais de 18 anos de experiência em desenvolvimento web2, web3, e UX." - name: "Anny Figueira" role: "Adotante Autista" github: "AnnyFigueira" description: "Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo." contribution: "Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam." - work: "Full stack developer na AE Studio com mais de 12 anos de experiência em desenvolvimento web" - name: "Dayson Marx" role: "Designer Distraído" github: "daysonmarx" description: "Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal." contribution: "Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end." - work: "UX, UI, e brand designer na AE Studio com mais de 10 anos anos de experiência incluindo desenvolvimento front-end" - name: "Bianca Augusta" role: "Artista Autista" github: "Bilkaya" description: "Aspirante à escritora de quadrinhos, viciada em WoW e Final Fantasy XIV, ama ser tanque e curandeira." contribution: "Mãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro." - work: "Concept artist na Gearbox Software com mais de 11 anos de carreira como game artist" - name: "Guilherme Correia" role: "import Membro from vuejs-br" github: "GuiDevloper" description: "Experimentalista, escritor de universos fictícios e sonhador que desenvolve enquanto toca fitas K7 sem título." contribution: "Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer." - work: "Contribuidor open-source em tempo integral com mais de 5 anos de experiência em desenvolviento web" - name: "Bruno Michels" role: "O Dev Por Diversão" github: "brunolm" description: "Weeb que está no topo dos ranks do Stack Overflow, CoderWars, CodersRank. Joga jogos e desenvolve coisas por diversão." contribution: "Algo com tipos. Lavagem cerebral no criador para adicionar TypeScript no Nullstack." - work: "Wildcard Developer at AE Studio com mais de 15 anos de experiência fazendo coisas especificas." contentCreators: title: "Os Criadores de Conteúdo" diff --git a/i18n/pt-BR/components/Home.yml b/i18n/pt-BR/components/Home.yml index c45b8d7a..98af4f1c 100644 --- a/i18n/pt-BR/components/Home.yml +++ b/i18n/pt-BR/components/Home.yml @@ -4,9 +4,8 @@ hero: heading: "Componentes JavaScript Full Stack" subHeading: "Orientados a Recursos" descriptions: - - "Seu novo framework web favorito." - - "Escreva o backend e o frontend de um recurso em um único componente isomórfico - e deixe o framework descobrir onde o código deve ser executado." + - "Nullstack é um web framework que torna programar divertido novamente." + - "Escreva o backend e o frontend de um recurso em um único componente isomórfico sem boilerplate ou glue code." callToAction: "npx create-nullstack-app" actionLink: '/pt-br/comecando' actionCallback: 'Comando copiado, cole no terminal' @@ -27,11 +26,11 @@ trinity: text: "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 da aplicação e renderizarão a página sem nenhum código adicional" features: - - title: "Não perca mais tempo colando um código no outro" - snippet: "GlueCode" + - title: "Nunca escreva outra API" + snippet: "NeverWriteAnotherAPI" image: "/illustrations/nulla-glue.webp" text: - "Um ciclo de vida full stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente." + "Você escreve recursos para produtos. O compilador extrai seu código de frontend e substitui todas as funções assíncronas estáticas por chamadas para microsserviços" - title: "Torne-se um programador menos dependente de maneirismos" snippet: "Vanilla" image: "/illustrations/nulla-scrolls.webp" diff --git a/i18n/pt-BR/snippets/GlueCode.njs b/i18n/pt-BR/snippets/GlueCode.njs index dcf20b70..f353e832 100644 --- a/i18n/pt-BR/snippets/GlueCode.njs +++ b/i18n/pt-BR/snippets/GlueCode.njs @@ -1,24 +1,23 @@ -class Feature extends Nullstack { +class WaifuCounter extends Nullstack { - // executa no servidor - static async delete({ database }) { - database.query("DELETE * FROM WAIFUS"); + // roda no servidor + static async getWaifus({ database }) { + const sql = "SELECT COUNT(*) FROM WAIFUS"; + return database.query(sql); } - // executa no client - async confirm() { - if (confirm("Tem certeza? uwu")) { - await this.delete(); - } + // roda no cliente + async countWaifus() { + this.waifus = this.getWaifus() } - // executa onde for melhor + // roda onde for melhor render() { return ( - ); } - -} + +} \ No newline at end of file diff --git a/i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs b/i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs new file mode 100644 index 00000000..ea1c1ac3 --- /dev/null +++ b/i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs @@ -0,0 +1,23 @@ +class WaifuCreator extends Nullstack { + + // extraído em um microsserviço + static async insertWaifu({ database, name }) { + const sql = "INSERT INTO waifus (name) VALUES (?)"; + return database.query(sql, name); + } + + // invoca o microsserviço + async create() { + this.insertWaifu({ name: "Nulla-Chan" }) + } + + // renderiza no DOM + render() { + return ( + + ); + } + +} diff --git a/package.json b/package.json index 3ca8b618..dcc79574 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "", "license": "ISC", "devDependencies": { - "nullstack": "~0.17.0", + "nullstack": "github:nullstack/nullstack#even-more-unstable-hot", "tailwindcss": "^3.0.0", "postcss-loader": "^7.0.1" }, diff --git a/src/Application.njs b/src/Application.njs index 934d01ae..d0c1976c 100644 --- a/src/Application.njs +++ b/src/Application.njs @@ -31,69 +31,52 @@ class Application extends Nullstack { prepare(context) { context.mode = 'light'; context.oppositeMode = 'dark'; + context.page.locale = context.router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US'; } hydrate(context) { - if (localStorage['mode']) { - context.mode = localStorage['mode']; - if (context.mode === 'dark') { - document.querySelector('html').setAttribute('data-theme', context.mode) - context.oppositeMode = 'light'; - } - } + context.mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light" + document.querySelector('html').setAttribute('data-theme', context.mode) } - renderHiringBanner() { - return ( -
- - AE Studio is hiring Nullstack developers that get shit done! - Apply here. - -
- ) - } - - render({ router, mode }) { - const locale = router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US'; + render({ mode }) { return (
-
- {/* */} +
- - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + -
-
+
+
-
+
) diff --git a/src/Article.njs b/src/Article.njs index 1b5322c3..dbb44293 100644 --- a/src/Article.njs +++ b/src/Article.njs @@ -67,11 +67,11 @@ class Article extends Translatable { return YAML.parse(file); } - async initiate({ page, locale, params }) { - super.initiate({ page, locale }) - const article = await this.getArticleByKey({ key: params.slug, locale }); + async initiate({ page, params }) { + super.initiate({ page }) + const article = await this.getArticleByKey({ key: params.slug, locale: page.locale }); Object.assign(this, article); - const { topics } = await this.getArticlesList({ locale }); + const { topics } = await this.getArticlesList({ locale: page.locale }); this.topics = topics } diff --git a/src/Header.njs b/src/Header.njs index 9f4f3799..5f09883a 100644 --- a/src/Header.njs +++ b/src/Header.njs @@ -2,13 +2,9 @@ import Logo from "nullstack/logo"; import Translatable from "./Translatable"; import Hamburger from "../icons/Hamburger"; import Close from "../icons/Close"; -import Mode from "../icons/Mode"; -import Brasil from "../icons/Brasil"; -import Gringo from "../icons/Gringo"; -import GitHub from "../icons/GitHub"; import Discord from "../icons/Discord"; import docsearch from '@docsearch/js'; -import '@docsearch/css'; +import '@docsearch/css/dist/style.css'; class Header extends Translatable { @@ -68,7 +64,15 @@ class Header extends Translatable { }); } - render({ mode, oppositeMode, locale }) { + toggleLocale({ page }) { + if (page.locale === 'pt-BR') { + page.locale = 'en-US' + } else { + page.locale = 'pt-BR' + } + } + + render({ page, mode }) { if (!this.i18n) return false; return (
@@ -94,18 +98,14 @@ class Header extends Translatable {
- - - +
@@ -113,6 +113,24 @@ class Header extends Translatable { ); } + renderGithubStars() { + return ( +
+ + Star + +