nullstack · Mortaro · Jun 1, 2023 · May 30, 2023 · May 31, 2023 · May 31, 2023
diff --git a/i18n/pt-BR/components/Examples.yml b/i18n/pt-BR/components/Examples.yml
@@ -1,23 +1,41 @@
-title: "Nullstack Examples"
-description: "Check coolest stuff you can do with Nullstack"
-heading: "Nullstack Examples"
-tagline: "A collection of application examples with Nullstack."
-contribute: "We accept guest examples! You can write it up in markdown and open a PR to our <a href='https://github.com/nullstack/nullstack.github.io/pulls'>github repo</a>."
+title: "Nullstack Exemplos"
+description: "Confira algumas das incríveis coisas que o Nullstack pode fazer!"
+heading: "Nullstack Exemplos"
+tagline: "Uma coleção de exemplos de aplicações com Nullstack."
+contribute: "Estamos aceitando mais exemplos! Você pode escrevê-lo em markdown e fazer uma PR em <a href='https://github.com/nullstack/nullstack.github.io/pulls'>github repo</a>."
 posts:
-  - title: "Using Nullstack as a Web API"
-    href: "/examples/using-nullstack-as-a-web-api"
-    description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
-  - title: "Using Nullstack to build a Chrome Extension"
-    href: "/examples/using-nullstack-to-build-a-chrome-extension"
-    description: "Nullstack can be used to build a Chrome Extension."
-  - title: "Using Nullstack to build a Desktop Application"
-    href: "/examples/using-nullstack-to-build-a-desktop-application"
-    description: "Nullstack can be used to build a Desktop Application."
-  - title: "Using Nullstack to build a Mobile Application"
-    href: "/examples/using-nullstack-to-build-a-mobile-application"
-    description: "Nullstack can be used to build a Mobile Application."
-  - title: "Using Nullstack to build a personal Portfolio on GitHub"
-    href: "/examples/using-nullstack-to-build-a-personal-portfolio-on-github"
-    description: "Nullstack can be used to build a personal Portfolio on GitHub."
+  - title: "Como fazer deploy no Vercel"
+    href: "/examples/como-fazer-deploy-vercel"
+    description: "Siga esses passos para fazer deploy no Vercel"
+  - title: "Como fazer deploy no GitHub Pages"
+    href: "/examples/como-fazer-deploy-github-pages"
+    description: "Siga esses passos para fazer deploy no GitHub Pages"
+  - title: "Como fazer deploy no Heroku"
+    href: "/examples/como-fazer-deploy-heroku"
+    description: "Siga esses passos para fazer deploy no Heroku"  
+  - title: "Como usar MongoDB"
+    href: "/examples/como-usar-mongodb-com-nullstack"
+    description: "Você pode usar qualquer banco de dados com o Nullstack, mas a integração com JavaScript e a flexibilidade do MongoDB são especificamente melhores com aplicações Nullstack."  
+  - title: "Como usar o Google Analytics"
+    href: "/examples/como-usar-google-analytics-no-nullstack"
+    description: "Aproveite as chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o GTAG."
+  - title: "Como usar o Facebook Pixel"
+    href: "/examples/como-usar-facebook-pixel-no-nullstack"
+    description: "Aproveite as chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o Pixel"
+  - title: "Usando o Nullstack como uma API"
+    href: "/examples/usando-nullstack-como-uma-api"
+    description: "O Nullstack pode ser usado como uma API web, você escreve os seus próprios endpoints ou pode expor suas server functions."
+  - title: "Usando o Nullstack para construir uma extensão para o Chrome"
+    href: "/examples/usando-nullstack-para-construir-uma-extensao-para-o-chrome"
+    description: "O Nullstack pode ser usado para construir uma extensão para o Chrome."
+  - title: "Usando o Nullstack para construir uma Aplicação de Desktop"
+    href: "/examples/usando-nullstack-para-constuir-uma-aplicacao-de-desktop"
+    description: "Nullstack pode ser usado para construir uma Aplicação de Desktop."
+  - title: "Usando o Nullstack para construir uma Aplicação Mobile"
+    href: "/examples/usando-nullstack-para-constuir-uma-aplicacao-mobile"
+    description: "Nullstack pode ser usado para construir uma Aplicação Mobile."
+  - title: "Usando o Nullstack para construir um portfólio pessoal no GitHub"
+    href: "/examples/usando-nullstack-para-constuir-um-portfolio-pessoal-no-github"
+    description: "O Nullstack pode ser usado para construir um portfólio pessoal no GitHub"
   - title: "Copiando arquivos estaticos para pasta public durante o build"
     href: "/examples/copiando-arquivos-estaticos-para-pasta-public-durante-o-build"
diff --git a/i18n/pt-BR/examples/404.md b/i18n/pt-BR/examples/404.md
@@ -1,9 +1,9 @@
 ---
-title: Page Not Found
-description: Sorry, this is not the page you are looking for.
+title: Página não encontrada
+description: Desculpe, esta não é a página que você está procurando.
 status: 404
 ---
 
-Perhaps you want to learn more about [Nullstack](/what-is-nullstack)?
+Talvez você queira aprender mais sobre [Nullstack](/o-que-e-nullstack)?
 
-Or do you want to contribute to our [blog](/blog)?
+Ou você está querendo contribuir para o nosso [blog](/blog)?
diff --git a/i18n/pt-BR/examples/como-fazer-deploy-github-pages.md b/i18n/pt-BR/examples/como-fazer-deploy-github-pages.md
@@ -0,0 +1,70 @@
+---
+title: Como fazer deploy de uma aplicação Nullstack no GitHub Pages
+description: Você pode colocar uma aplicação Nullstack em qualquer lugar. Faça deploy da sua aplicação no Vercel, Heroku, AWS, Azure, GitHub pages, ou em qualquer outro lugar.
+---
+
+Altere seu script build no `package.json` para incluir `--mode=ssg`:
+
+```json
+"build": "npx nullstack build --mode=ssg",
+```
+
+No seu repositório em `/settings/pages` você pode:
+
+- configurar em qual branch você vai servir arquivos estáticos
+- configurar em qual pasta você vai servir arquivos estáticos
+
+Para as configurações abaixo, escolha `master` como o branch que você vai usar e a pasta raiz `/` como a pasta que você quer usar.
+
+Crie o arquivo `.github/workflows/ssg-build.yml` (sendo `main` o branch que vai causar o deploy).
+
+Na parte de build abaixo, atualize as variáveis de ambiente para construir a aplicação com as configurações corretas.
+
+- `NULLSTACK_PROJECT_NAME` - nome do seu projeto
+- `NULLSTACK_PROJECT_DOMAIN` - domínio, necessário para mostrar as meta tags corretamente
+  - se você tiver um domínio diferente, você também deve criar o arquivo `public/CNAME` contendo o nome do seu domínio
+- `NULLSTACK_PROJECT_COLOR` - cor da sua aplicação
+
+> ✨ Você pode alternativamente guardar estes valores de ambiente na seção de segredos do GitHub.
+
+```yml
+name: Nullstack SSG Build and Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+            **/yarn.lock
+            **/.production
+          key: node_modules-${{ hashFiles('**/package.json') }}
+
+      - name: Install deps
+        run: yarn
+
+      - name: Build
+        env:
+          NULLSTACK_PROJECT_NAME: 'Nullstack Project Name'
+          NULLSTACK_PROJECT_DOMAIN: 'some-awesome-nullstack-project.com'
+          NULLSTACK_PROJECT_COLOR: '#D22365'
+        run: yarn build --cache
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.3.3
+        with:
+          branch: master
+          folder: built
+```
+
+Esta ação irá construir sua aplicação em modo SSG e irá gerar a pasta contendo seu site estático, o último comando vai pegar a pasta estática e jogar no branch `master` permitindo o GitHub servir o conteúdo estático diretamente da pasta raiz.
diff --git a/i18n/pt-BR/examples/como-fazer-deploy-heroku.md b/i18n/pt-BR/examples/como-fazer-deploy-heroku.md
@@ -0,0 +1,12 @@
+---
+title: Como fazer deploy de uma aplicação Nullstack no Heroku
+description: Você pode colocar uma aplicação Nullstack em qualquer lugar. Faça deploy da sua aplicação no Vercel, Heroku, AWS, Azure, GitHub pages, ou em qualquer outro lugar.
+---
+
+Use o Buildpack `heroku/nodejs`.
+
+Crie um arquivo `Procfile` na raíz da aplicação com o seguinte:
+
+```
+web: node .production/server.js
+```
diff --git a/i18n/pt-BR/examples/como-fazer-deploy-vercel.md b/i18n/pt-BR/examples/como-fazer-deploy-vercel.md
@@ -0,0 +1,34 @@
+---
+title: Como fazer deploy de uma aplicação Nullstack no Vercel
+description: Você pode colocar uma aplicação Nullstack em qualquer lugar. Faça deploy da sua aplicação no Vercel, Heroku, AWS, Azure, GitHub pages, ou em qualquer outro lugar.
+---
+
+Crie o arquivo `api/nullstack.js` para exportar o servidor de produção.
+
+```js
+import application from '../.production/server'
+
+export default application.server;
+```
+
+Adicione a seguinte configuração no `vercel.json` na raiz da sua aplicação para redirecionar todos requests do nullstack:
+
+```json
+{
+  "version": 2,
+  "functions": {
+    "api/nullstack.js": {
+      "includeFiles": ".production/**"
+    }
+  },
+  "routes": [
+    {
+      "handle": "filesystem"
+    },
+    {
+      "src": "(.*)",
+      "dest": "api/nullstack.js"
+    }
+  ]
+}
+```
diff --git a/i18n/pt-BR/examples/como-usar-facebook-pixel-no-nullstack.md b/i18n/pt-BR/examples/como-usar-facebook-pixel-no-nullstack.md
@@ -0,0 +1,100 @@
+---
+title: Facebook Pixel
+description: Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente.
+---
+
+De acordo com [developers.facebook.com](https://developers.facebook.com/docs/facebook-pixel/):
+
+"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."
+
+Você pode aproveitar as vantagens do [contexto](/pt-br/contexto) e dos [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente.
+
+O Facebook Pixel só pode ser chamado depois de [`hydrate`](/pt-br/ciclo-de-vida-full-stack) para garantir que está sendo executado no cliente.
+
+```jsx
+import Nullstack from 'nullstack';
+
+class FacebookPixel extends Nullstack {
+
+  async hydrate({page, id}) {
+    ! function(f, b, e, v, n, t, s) {
+      if (f.fbq) return;
+      n = f.fbq = function() {
+          n.callMethod ?
+              n.callMethod.apply(n, arguments) : n.queue.push(arguments)
+      };
+      if (!f._fbq) f._fbq = n;
+      n.push = n;
+      n.loaded = !0;
+      n.version = '2.0';
+      n.queue = [];
+      t = b.createElement(e);
+      t.async = !0;
+      t.src = v;
+      s = b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t, s)
+    }(window, document, 'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+    fbq('init', id);
+    fbq('track', 'PageView');
+    window.addEventListener(page.event, () => {
+      fbq('init', id);
+      fbq('track', 'PageView');
+    })
+  }
+}
+
+export default FacebookPixel;
+```
+
+```jsx
+import Nullstack from 'nullstack';
+import FacebookPixel from './FacebookPixel';
+
+class Application extends Nullstack {
+
+  // ...
+
+  render() {
+    return (
+      <main>
+        <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
+      </main>
+    )
+  }
+
+
+}
+
+export default Application;
+```
+
+## Usando um Wrapper
+
+Alternativamente, você pode instalar [nullstack-facebook-pixel](https://github.com/Mortaro/nullstack-facebook-pixel) como uma dependência:
+
+```sh
+npm install nullstack-facebook-pixel
+```
+
+```jsx
+import Nullstack from 'nullstack';
+import FacebookPixel from 'nullstack-facebook-pixel';
+
+class Application extends Nullstack {
+
+  // ...
+
+  render() {
+    return (
+      <main>
+        <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
+      </main>
+    )
+  }
+
+
+}
+
+export default Application;
+```