From 4f8fbfe89a11dc274eb781a2bba2050f54ff888c Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Wed, 7 Jun 2023 13:07:45 -0300 Subject: [PATCH 1/8] fix styles.md example --- i18n/en-US/articles/styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/en-US/articles/styles.md b/i18n/en-US/articles/styles.md index 6a47909b..cc1057e3 100644 --- a/i18n/en-US/articles/styles.md +++ b/i18n/en-US/articles/styles.md @@ -65,7 +65,7 @@ class Counter extends Nullstack { return (
0 && 'bigger-than-zero', this.count % 2 === 0 ? 'even' : 'odd' ]} - style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color-red;' ]} + style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color: red;' ]} > {this.count}
From 9d366bce108bfa593dbfbbe3c0d9384af7df07e6 Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Wed, 7 Jun 2023 16:39:20 -0300 Subject: [PATCH 2/8] translated to pt-br --- i18n/pt-BR/articles/estilos.md | 56 ++++++++++++ i18n/pt-BR/articles/o-que-e-nullstack.md | 112 ++++++++++++++++++++--- 2 files changed, 156 insertions(+), 12 deletions(-) diff --git a/i18n/pt-BR/articles/estilos.md b/i18n/pt-BR/articles/estilos.md index c3d73494..185814e1 100644 --- a/i18n/pt-BR/articles/estilos.md +++ b/i18n/pt-BR/articles/estilos.md @@ -18,4 +18,60 @@ class Header extends Nullstack { } export default Header; +``` + +## Classes e estilos condicionais + +Você pode passar valores falsy para `style` e `class` para pular a renderização de condicionais. + +```jsx +import Nullstack from 'nullstack'; + +class Counter extends Nullstack { + + count = 0; + + render() { + return ( +
0 && 'bigger-than-zero'} + style={this.count > 0 && 'border-color: black;'} + > + {this.count} +
+ ) + } + +} + +export default Counter; +``` + +## Array de classes e estilo + +Passe uma array de strings como suporte para `style` e` class` e elas serão unidas ao atributo final. + +Você também pode passar valores falsy para pular a renderização de condicionais. + +```jsx +import Nullstack from 'nullstack'; + +class Counter extends Nullstack { + + count = 0; + + render() { + return ( +
0 && 'bigger-than-zero', this.count % 2 === 0 ? 'even' : 'odd' ]} + style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color: red;' ]} + > + {this.count} +
+ ) + } + +} + +export default Counter; ``` \ No newline at end of file diff --git a/i18n/pt-BR/articles/o-que-e-nullstack.md b/i18n/pt-BR/articles/o-que-e-nullstack.md index 247a6a66..b68a0f9b 100644 --- a/i18n/pt-BR/articles/o-que-e-nullstack.md +++ b/i18n/pt-BR/articles/o-que-e-nullstack.md @@ -1,26 +1,114 @@ --- title: O que é Nullstack? -description: Nullstack é um framework isomórfico JavaScript que permite aos desenvolvedores construir aplicações Full Stack enquanto se concentram nos recursos do produto e resolvem os problemas do usuário, em vez de gastar uma quantidade significativa de tempo se preocupando com camadas de abstração e escolhendo quais ferramentas os fazem parecer sofisticados. +description: O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas; em vez disso, você possui pequenos recursos em componentes. --- -Nullstack é um framework isomórfico JavaScript que permite aos desenvolvedores construir aplicações Full Stack enquanto se concentram nos recursos do produto e resolvem os problemas do usuário, em vez de gastar uma quantidade significativa de tempo se preocupando com camadas de abstração e escolhendo quais ferramentas os fazem parecer sofisticados. +O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas; em vez disso, você possui pequenos recursos em componentes. -O Nullstack pode ser usado para construir uma variedade de projetos, como Blockchain dapps, aplicações da web (SSR, SPA, SSG), extensões do Google Chrome, aplicativos nativos híbridos, aplicativos Electron e qualquer outra coisa que você possa fazer com JavaScript ao mesmo tempo com uma única base de código. +É mais fácil mostrar do que dizer: vamos repassar um componente que permite ver o número de curtidas de uma postagem em 5 minutos! -## Orientado a recursos +Na sua cabeça, você já está pensando em APIs e arquitetura, mas todos os seus usuários desejam ver as informações do banco de dados na tela, então vamos fazer exatamente isso: -Um recurso em Nullstack fala a mesma linguagem para o desenvolvedor, o gerente de projetos e o cliente. +```jsx +import Nullstack from 'nullstack' -Em Nullstack os componentes são recursos completos. Eles conectam o back-end e o front-end da aplicação, fornecendo um recurso totalmente funcional em um único componente. +class LikeButton extends Nullstack { -Não existem grandes projetos no Nullstack, apenas pequenos recursos. Um recurso pode ser composto de outros recursos, um recurso pode até mesmo ser uma aplicação inteira importada como um componente em outra aplicação. + // as variáveis de instância são mutáveis e reativas + // você pode usar vanilla JS em vez de hooks + likes = 0 -Isso pode parecer errado e ir contra tudo o que você já aprendeu, mas funciona e é mais rápido e flexível. Seu código fica muito mais simples e fácil de entender, as pessoas podem pular rapidamente em sua base de código e começar a contribuir. Os desenvolvedores podem fazer alterações em projetos gigantes sem nenhuma sobrecarga cognitiva. + // funções "static async" rodam no servidor + static async getNumberOfLikes({ database, post }) { + // database is a user defined context key + const sql = 'SELECT COUNT(*) FROM likes WHERE post = ?' + const [likes] = await database.query(sql, [post]) + return likes + } -Nullstack não precisa de um ecossistema, você provavelmente não encontrará bibliotecas "nullstack-*", pois pode simplesmente usar pacotes JavaScript vanilla. Acreditamos que o JavaScript atingiu um nível de maturidade que a criação de um trecho de código que faz exatamente o que você precisa geralmente ocupará menos linhas e levará a menos engenharia excessiva do que configurar uma biblioteca. + async initiate({ post }) { + // Você pode usar o valor retornado das funções do servidor + // Como se fosse uma função regular + this.likes = await this.getNumberOfLikes({ post }) + } -O desenvolvimento orientado a recursos pode não ser para todos, mas o Nullstack oferece liberdade suficiente para usá-lo da maneira que achar melhor. Você ainda pode usar o Nullstack com camadas e abstrações, não estamos aqui para segurar sua mão, você é livre para atirar no seu próprio pé. + // JSX segue os padrões HTML + render() { + return ( + + ) + } -## Próximos passos +} +``` -⚔ Aprenda [como criar um projeto em nullstack](pt-br/comecando). \ No newline at end of file +Isso foi fácil, esse é um recurso, tudo no mais é um problema imaginário. Mas isso foi realmente muito fácil, e se quisermos escrever dados no banco de dados em vez de apenas ler na página carregar? + +Vamos alterar esse span para um botão e verificar os critérios de aceitação do nosso recurso. A qualquer momento, você pode optar por executar funções no servidor e o Nullstack gerará no momento da compilação um microsserviço com uma API apenas para essa função. + + +```jsx +import Nullstack from 'nullstack' + +class LikeButton extends Nullstack { + + // ... + + static async createLike({ request, database, post }) { + const user = request.user.id + const sql = 'INSERT INTO likes (user, post) VALUES (?, ?)' + await database.query(sql, [user, post]) + } + + // Cada client function recebe as props + async like({ post }) { + // Você pode alterar as variáveis e o DOM reflete as mudanças + this.likes++ + // Isso está chamando um ponto de extremidade da API por baixo dos panos + await this.createLike({ post }) + } + + // JSX segue os padrões HTML + render() { + return ( + + ) + } + +} +``` + +Este exemplo é pequeno, mas mostra um pouco da beleza do NullStack. Todo recurso é apenas um componente e os recursos podem ser compostos como você deseja. Este componente pode entrar em um componente post. + +```jsx +function Post({ post }) { + return ( +
+
{post.content}
+ +
+ ) +} +``` + +Você pode até ter aplicativos inteiros como componentes dentro de outro aplicativo. + +```jsx +function Application() { + return ( +
+ dssxs- + + +
+ ) +} +``` + +Qualquer desenvolvedor pode pular direto para o seu projeto com apenas conhecimento do JavaScript e ser produtivo no dia 0, porque não precisa entender uma arquitetura excessivamente complicada ou ter que lidar com um monólito gigante. Os aplicativos Nullstack são apenas pequenos recursos isolados que são divertidos de codificar. \ No newline at end of file From 57b80af63753491635f5f703fea4ee22d1c282e4 Mon Sep 17 00:00:00 2001 From: Brendon Silva Date: Sat, 10 Jun 2023 13:44:59 -0300 Subject: [PATCH 3/8] translate to pt-br --- ...omo-fazer-deploy-de-aplicacao-nullstack.md | 6 +- i18n/pt-BR/articles/o-que-e-nullstack.md | 7 +- i18n/pt-BR/articles/refs.md | 131 ++++++++++++++++++ i18n/pt-BR/components/Documentation.yml | 50 +++---- 4 files changed, 159 insertions(+), 35 deletions(-) create mode 100644 i18n/pt-BR/articles/refs.md diff --git a/i18n/pt-BR/articles/como-fazer-deploy-de-aplicacao-nullstack.md b/i18n/pt-BR/articles/como-fazer-deploy-de-aplicacao-nullstack.md index 132a81e1..169fe709 100644 --- a/i18n/pt-BR/articles/como-fazer-deploy-de-aplicacao-nullstack.md +++ b/i18n/pt-BR/articles/como-fazer-deploy-de-aplicacao-nullstack.md @@ -33,6 +33,8 @@ node .production/server.js Depois de [gerar um site estático](/pt-br/geracao-de-sites-estaticos), tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML. -## Próxima Etapa +## Exemplos -⚔ Aprenda [Como fazer o deploy de uma aplicação Nullstack no Vercel](/pt-br/como-fazer-deploy-vercel). \ No newline at end of file +- [Como fazer deploy no Vercel](/examples/como-fazer-deploy-vercel) +- [Como fazer deploy no GitHub Pages](/examples/como-fazer-deploy-github-pages) +- [Como fazer deploy no Heroku](/examples/como-fazer-deploy-heroku) \ No newline at end of file diff --git a/i18n/pt-BR/articles/o-que-e-nullstack.md b/i18n/pt-BR/articles/o-que-e-nullstack.md index b68a0f9b..66614191 100644 --- a/i18n/pt-BR/articles/o-que-e-nullstack.md +++ b/i18n/pt-BR/articles/o-que-e-nullstack.md @@ -1,9 +1,9 @@ --- title: O que é Nullstack? -description: O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas; em vez disso, você possui pequenos recursos em componentes. +description: O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas, em vez disso, você possui pequenos recursos em componentes. --- -O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas; em vez disso, você possui pequenos recursos em componentes. +O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas, em vez disso, você possui pequenos recursos em componentes. É mais fácil mostrar do que dizer: vamos repassar um componente que permite ver o número de curtidas de uma postagem em 5 minutos! @@ -20,7 +20,7 @@ class LikeButton extends Nullstack { // funções "static async" rodam no servidor static async getNumberOfLikes({ database, post }) { - // database is a user defined context key + // database é uma chave de contexto definida pelo usuário const sql = 'SELECT COUNT(*) FROM likes WHERE post = ?' const [likes] = await database.query(sql, [post]) return likes @@ -48,7 +48,6 @@ Isso foi fácil, esse é um recurso, tudo no mais é um problema imaginário. Ma Vamos alterar esse span para um botão e verificar os critérios de aceitação do nosso recurso. A qualquer momento, você pode optar por executar funções no servidor e o Nullstack gerará no momento da compilação um microsserviço com uma API apenas para essa função. - ```jsx import Nullstack from 'nullstack' diff --git a/i18n/pt-BR/articles/refs.md b/i18n/pt-BR/articles/refs.md new file mode 100644 index 00000000..a8c1770e --- /dev/null +++ b/i18n/pt-BR/articles/refs.md @@ -0,0 +1,131 @@ +--- +title: Refs +description: Refs são uma maneira de controlar elementos do DOM à medida que são renderizados +--- + +Você pode passar a referência a uma variável para qualquer ref e ela definirá o valor dessa variável para o elemento DOM quando o enredo entrar no DOM. + +Você pode passar qualquer variável para o `ref`, desde que seu objeto pai seja mencionado. + +```jsx +import Nullstack from 'nullstack'; + +class Player extends Nullstack { + + video = null + + hydrate() { + // Assumindo que você tenha permissão do navegador + this.video.play() + } + + render() { + return ( +
+
+ ) + } + +} + +export default Player; +``` + +## Refs funcionais + +Refs pode ser a referência a uma função que será acionada quando o nó entrar no DOM + +Uma tecla `element` será adicionada ao contexto quando a função for chamada + +Todas props desse enredo serão mescladas no contexto dessa função. + +```jsx +import Nullstack from 'nullstack'; + +class Toast extends Nullstack { + + visible = false + + startTimer({ element, timeout }) { + console.log(element, `será escondido em ${timeout}ms`) + setTimeout(() => this.visible = false, timeout) + } + + render() { + return ( +
+ {this.visible && +
+ Mensagem muito importante que estava escondida antes +
+ } +
+ ) + } + +} + +export default Toast; +``` + +## Simples components refáveis + +Ref pode ser propagada apenas passando a referência do contexto. + +```jsx +export default function CustomPlayer({ label, ref }) { + return ( +
+
+ ) +} +``` + +```jsx +import Nullstack from 'nullstack'; +import CustomPlayer from './CustomPlayer'; + +class VideoPage extends Nullstack { + + video = null; + + render() { + return ( + + ) + } + +} + +export default VideoPage; +``` + +## Complexos componentes refáveis + +Você pode criar seu próprio componente refável recebendo os atributos que o `ref` gera. + +Ref é um atalho de tempo de transpilação que cria um objeto com as chaves `object` e `property`. + +```jsx +class CustomPlayer extends Nullstack { + + element = null + + hydrate({ ref }) { + ref.object[ref.property] = this.element + } + + render({ audioOnly }) { + return ( +
+ {audioOnly ?
+ ) + } + +} + +export default CustomPlayer; +``` \ No newline at end of file diff --git a/i18n/pt-BR/components/Documentation.yml b/i18n/pt-BR/components/Documentation.yml index 9013c169..c3540e0c 100644 --- a/i18n/pt-BR/components/Documentation.yml +++ b/i18n/pt-BR/components/Documentation.yml @@ -3,12 +3,14 @@ description: "Siga esses passos e se torne um desenvolvedor full stack javascrip heading: "Documentação do Nullstack" tagline: "Siga esses passos e se torne um desenvolvedor full stack javascript!" topics: - - title: "Principais conceitos" + - title: "Sobre o Nullstack" links: - title: "O que é Nullstack?" href: "/pt-br/o-que-e-nullstack" - title: "Começando" href: "/pt-br/comecando" + - title: "Principais conceitos" + links: - title: "Componentes sem estado" href: "/pt-br/componentes-renderizaveis" - title: "Componentes com estado" @@ -19,20 +21,16 @@ topics: href: "/pt-br/funcoes-de-servidor" - title: "Contexto" href: "/pt-br/contexto" - - title: "Rotas e parâmetros" - href: "/pt-br/rotas-e-parametros" - title: "Vínculo bidirecional" href: "/pt-br/vinculo-bidirecional" - title: "Propriedades sublinhadas" href: "/pt-br/propriedades-sublinhadas" - - title: "Conceitos avançados" + - title: "Refs" + href: "/pt-br/refs" + - title: "Chaves de contexto" links: - - title: "Inicialização da aplicação" - href: "/pt-br/inicializacao-da-aplicacao" - - title: "Componentes Funcionais" - href: "/pt-br/componentes-funcionais" - - title: "Componentes Persistentes" - href: "/pt-br/componentes-persistentes" + - title: "Rotas e parâmetros" + href: "/pt-br/rotas-e-parametros" - title: "Contexto data" href: "/pt-br/contexto-data" - title: "Contexto Instances" @@ -47,16 +45,22 @@ topics: href: "/pt-br/contexto-settings" - title: "Contexto Secrets" href: "/pt-br/contexto-secrets" - - title: "self da Instância" - href: "/pt-br/instancia-self" - title: "Requisição e resposta do servidor" href: "/pt-br/requisicao-e-resposta-do-servidor" + - title: "Service Worker" + href: "/pt-br/service-worker" + - title: "Conceitos avançados" + links: + - title: "Inicialização da aplicação" + href: "/pt-br/inicializacao-da-aplicacao" + - title: "Componentes Funcionais" + href: "/pt-br/componentes-funcionais" + - title: "Componentes Persistentes" + href: "/pt-br/componentes-persistentes" - title: "Estilos" href: "/pt-br/estilos" - title: "Extensão de arquivo NJS" href: "/pt-br/extensao-de-arquivo-njs" - - title: "Service Worker" - href: "/pt-br/service-worker" - title: "Como customizar o Webpack" href: "/pt-br/como-customizar-webpack" - title: "Modos de Construção" @@ -67,21 +71,9 @@ topics: href: "/pt-br/geracao-de-sites-estaticos" - title: "Single page applications" href: "/pt-br/aplicacao-de-pagina-unica" - - title: "Exemplos" - links: - - title: "Como usar MongoDB" - href: "/pt-br/como-usar-mongodb-com-nullstack" - - title: "Como usar Google Analytics" - href: "/pt-br/como-usar-google-analytics-no-nullstack" - - title: "Como usar Facebook Pixel" - href: "/pt-br/como-usar-facebook-pixel-no-nullstack" - - title: "Deploy" + - title: "Outros" links: + - title: "Nullstack Logo" + href: "/pt-br/nullstack-logo" - title: "Como fazer deploy" href: "/pt-br/como-fazer-deploy-de-aplicacao-nullstack" - - title: "Como fazer deploy no Vercel" - href: "/pt-br/como-fazer-deploy-vercel" - - title: "Como fazer deploy no GitHub Pages" - href: "/pt-br/como-fazer-deploy-github-pages" - - title: "Como fazer deploy no Heroku" - href: "/pt-br/como-fazer-deploy-heroku" \ No newline at end of file From d3d6420a8ecf31b8ee546d8847877de801258048 Mon Sep 17 00:00:00 2001 From: HallexCosta Date: Thu, 1 Feb 2024 21:37:26 -0300 Subject: [PATCH 4/8] chore: adjust translation removing flag --typescript and --tailwind --- i18n/en-US/articles/getting-started.md | 4 +--- i18n/en-US/components/Home.yml | 2 +- i18n/pt-BR/articles/comecando.md | 2 +- i18n/pt-BR/components/Home.yml | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/i18n/en-US/articles/getting-started.md b/i18n/en-US/articles/getting-started.md index b3d1941b..00102d3b 100644 --- a/i18n/en-US/articles/getting-started.md +++ b/i18n/en-US/articles/getting-started.md @@ -16,9 +16,7 @@ Replace `project-name` with your project name and run the command below to start npx create-nullstack-app@latest project-name ``` -> 💡 If you want to start with a template using .tsx files, add `-ts` or `--typescript` to the end of command - -> 💡 If you want to start with a template using tailwind, add `-tw` or `--tailwind` to the end of command +> 💡 You can use a CLI to select the blank javascript or typescript template or select the template with tailwind css. Change directory to the generated folder: diff --git a/i18n/en-US/components/Home.yml b/i18n/en-US/components/Home.yml index 80d014dd..9b777bc6 100644 --- a/i18n/en-US/components/Home.yml +++ b/i18n/en-US/components/Home.yml @@ -7,7 +7,7 @@ hero: - 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." getStarted: "Get Started" - callToAction: "npx create-nullstack-app --typescript --tailwind" + callToAction: "npx create-nullstack-app" actionLink: '/getting-started' actionCallback: 'Command copied, paste it in the terminal' trinity: diff --git a/i18n/pt-BR/articles/comecando.md b/i18n/pt-BR/articles/comecando.md index fcf1970e..f3946041 100644 --- a/i18n/pt-BR/articles/comecando.md +++ b/i18n/pt-BR/articles/comecando.md @@ -15,7 +15,7 @@ Troque `project-name` com o nome do seu projeto e rode o comanto abaixo para com npx create-nullstack-app@latest project-name ``` -> 💡 Se quiser começar com um template usando arquivos .tsx, adicione `-ts` ou `--typescript` ao fim do comando +> 💡 Você pode usar a CLI para selecionar o modelo javascript ou typescript em branco ou selecionar o modelo com tailwind css. Troque o diretório para a pasta gerada: diff --git a/i18n/pt-BR/components/Home.yml b/i18n/pt-BR/components/Home.yml index f4bdb76e..fe161a32 100644 --- a/i18n/pt-BR/components/Home.yml +++ b/i18n/pt-BR/components/Home.yml @@ -7,7 +7,7 @@ hero: - "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." getStarted: "Comece a usar" - callToAction: "npx create-nullstack-app --typescript --tailwind" + callToAction: "npx create-nullstack-app" actionLink: '/pt-br/comecando' actionCallback: 'Comando copiado, cole no terminal' trinity: From 617cc46ede3c87046f2a4cdbaa4f79750d46ae6b Mon Sep 17 00:00:00 2001 From: HallexCosta Date: Thu, 1 Feb 2024 21:38:12 -0300 Subject: [PATCH 5/8] refactor: adjust copy command from home page --- src/Home.njs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Home.njs b/src/Home.njs index e22c156a..24f4d20a 100644 --- a/src/Home.njs +++ b/src/Home.njs @@ -10,7 +10,7 @@ class Home extends Translatable { async getStarted({ router, action }) { if ('clipboard' in navigator) { - const command = 'npx create-nullstack-app@latest --typescript --tailwind'; + const command = 'npx create-nullstack-app@latest'; await navigator.clipboard.writeText(command); } clearTimeout(this.gettingStarted); From 034257635a56ba55a41cd6bdb8527120f7e28815 Mon Sep 17 00:00:00 2001 From: HallexCosta Date: Thu, 1 Feb 2024 21:40:16 -0300 Subject: [PATCH 6/8] feat: add new dev dependencies http-server --- package.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 2151988f..c675b440 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,15 @@ "author": "", "license": "ISC", "devDependencies": { + "http-server": "^14.1.1", "nullstack": "~0.18.0", - "tailwindcss": "^3.0.0", - "postcss-loader": "^7.0.1" + "postcss-loader": "^7.0.1", + "tailwindcss": "^3.0.0" }, "scripts": { "start": "npx nullstack start", "build": "npx nullstack build --mode=ssg --output=docs", + "start:docs": "npx http-server docs", "reinstall": "rm -rf .development .production package-lock.json node_modules && npm install" }, "dependencies": { @@ -27,4 +29,4 @@ "remarkable-meta": "^1.0.1", "yaml": "^1.10.0" } -} \ No newline at end of file +} From 024442d56432e00d76b3d78099248a85cce63010 Mon Sep 17 00:00:00 2001 From: HallexCosta Date: Thu, 1 Feb 2024 21:40:49 -0300 Subject: [PATCH 7/8] chore: add docs folder on .gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 121147ab..81cf24c6 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ yarn.lock .development .production public/pt-BR.json -public/en-US.json \ No newline at end of file +public/en-US.json +docs From 47e2ffc0665749dd7920e545befb86d76483e3c9 Mon Sep 17 00:00:00 2001 From: HallexCosta Date: Thu, 1 Feb 2024 22:08:28 -0300 Subject: [PATCH 8/8] chore: remove flags --typescript and --tailwind from docs --- i18n/en-US/articles/frequently-asked-questions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/en-US/articles/frequently-asked-questions.md b/i18n/en-US/articles/frequently-asked-questions.md index 9e78c385..a1627f6b 100644 --- a/i18n/en-US/articles/frequently-asked-questions.md +++ b/i18n/en-US/articles/frequently-asked-questions.md @@ -60,4 +60,4 @@ Nulla-Chan is the avatar of Nullstack, it belongs to a category of avatars calle Definitively it was deciding if We should spell it "full stack", "fullstack", or "full-stack". Seriously please tell us on discord which one to pick. ## How can i get started? -Just go to your favorite terminal and type "npx create-nullstack-app app-name", and if you are feeling fancy you can also pass the flags --typescript and --tailwind. \ No newline at end of file +Just go to your favorite terminal and type "npx create-nullstack-app app-name" and use the templates available through the CLI. \ No newline at end of file pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy