Skip to content

Commit 592bda2

Browse files
MortaroMortaro
authored
Merge pull request #265 from BrendonSSilva/brendon-changes
Translate to pt-bt
2 parents 82bb1b9 + be93ee9 commit 592bda2

19 files changed

+503
-103
lines changed

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

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,41 @@
1-
title: "Nullstack Examples"
2-
description: "Check coolest stuff you can do with Nullstack"
3-
heading: "Nullstack Examples"
4-
tagline: "A collection of application examples with Nullstack."
5-
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>."
1+
title: "Nullstack Exemplos"
2+
description: "Confira algumas das incríveis coisas que o Nullstack pode fazer!"
3+
heading: "Nullstack Exemplos"
4+
tagline: "Uma coleção de exemplos de aplicações com Nullstack."
5+
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>."
66
posts:
7-
- title: "Using Nullstack as a Web API"
8-
href: "/examples/using-nullstack-as-a-web-api"
9-
description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
10-
- title: "Using Nullstack to build a Chrome Extension"
11-
href: "/examples/using-nullstack-to-build-a-chrome-extension"
12-
description: "Nullstack can be used to build a Chrome Extension."
13-
- title: "Using Nullstack to build a Desktop Application"
14-
href: "/examples/using-nullstack-to-build-a-desktop-application"
15-
description: "Nullstack can be used to build a Desktop Application."
16-
- title: "Using Nullstack to build a Mobile Application"
17-
href: "/examples/using-nullstack-to-build-a-mobile-application"
18-
description: "Nullstack can be used to build a Mobile Application."
19-
- title: "Using Nullstack to build a personal Portfolio on GitHub"
20-
href: "/examples/using-nullstack-to-build-a-personal-portfolio-on-github"
21-
description: "Nullstack can be used to build a personal Portfolio on GitHub."
7+
- title: "Como fazer deploy no Vercel"
8+
href: "/examples/como-fazer-deploy-vercel"
9+
description: "Siga esses passos para fazer deploy no Vercel"
10+
- title: "Como fazer deploy no GitHub Pages"
11+
href: "/examples/como-fazer-deploy-github-pages"
12+
description: "Siga esses passos para fazer deploy no GitHub Pages"
13+
- title: "Como fazer deploy no Heroku"
14+
href: "/examples/como-fazer-deploy-heroku"
15+
description: "Siga esses passos para fazer deploy no Heroku"
16+
- title: "Como usar MongoDB"
17+
href: "/examples/como-usar-mongodb-com-nullstack"
18+
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."
19+
- title: "Como usar o Google Analytics"
20+
href: "/examples/como-usar-google-analytics-no-nullstack"
21+
description: "Aproveite as chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o GTAG."
22+
- title: "Como usar o Facebook Pixel"
23+
href: "/examples/como-usar-facebook-pixel-no-nullstack"
24+
description: "Aproveite as chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o Pixel"
25+
- title: "Usando o Nullstack como uma API"
26+
href: "/examples/usando-nullstack-como-uma-api"
27+
description: "O Nullstack pode ser usado como uma API web, você escreve os seus próprios endpoints ou pode expor suas server functions."
28+
- title: "Usando o Nullstack para construir uma extensão para o Chrome"
29+
href: "/examples/usando-nullstack-para-construir-uma-extensao-para-o-chrome"
30+
description: "O Nullstack pode ser usado para construir uma extensão para o Chrome."
31+
- title: "Usando o Nullstack para construir uma Aplicação de Desktop"
32+
href: "/examples/usando-nullstack-para-constuir-uma-aplicacao-de-desktop"
33+
description: "Nullstack pode ser usado para construir uma Aplicação de Desktop."
34+
- title: "Usando o Nullstack para construir uma Aplicação Mobile"
35+
href: "/examples/usando-nullstack-para-constuir-uma-aplicacao-mobile"
36+
description: "Nullstack pode ser usado para construir uma Aplicação Mobile."
37+
- title: "Usando o Nullstack para construir um portfólio pessoal no GitHub"
38+
href: "/examples/usando-nullstack-para-constuir-um-portfolio-pessoal-no-github"
39+
description: "O Nullstack pode ser usado para construir um portfólio pessoal no GitHub"
2240
- title: "Copiando arquivos estaticos para pasta public durante o build"
2341
href: "/examples/copiando-arquivos-estaticos-para-pasta-public-durante-o-build"

‎i18n/pt-BR/examples/404.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Page Not Found
3-
description: Sorry, this is not the page you are looking for.
2+
title: Página não encontrada
3+
description: Desculpe, esta não é a página que você está procurando.
44
status: 404
55
---
66

7-
Perhaps you want to learn more about [Nullstack](/what-is-nullstack)?
7+
Talvez você queira aprender mais sobre [Nullstack](/o-que-e-nullstack)?
88

9-
Or do you want to contribute to our [blog](/blog)?
9+
Ou você está querendo contribuir para o nosso [blog](/blog)?

‎i18n/pt-BR/examples/como-fazer-deploy-github-pages.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Como fazer deploy de uma aplicação Nullstack no GitHub Pages
3+
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.
4+
---
5+
6+
Altere seu script build no `package.json` para incluir `--mode=ssg`:
7+
8+
```json
9+
"build": "npx nullstack build --mode=ssg",
10+
```
11+
12+
No seu repositório em `/settings/pages` você pode:
13+
14+
- configurar em qual branch você vai servir arquivos estáticos
15+
- configurar em qual pasta você vai servir arquivos estáticos
16+
17+
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.
18+
19+
Crie o arquivo `.github/workflows/ssg-build.yml` (sendo `main` o branch que vai causar o deploy).
20+
21+
Na parte de build abaixo, atualize as variáveis de ambiente para construir a aplicação com as configurações corretas.
22+
23+
- `NULLSTACK_PROJECT_NAME` - nome do seu projeto
24+
- `NULLSTACK_PROJECT_DOMAIN` - domínio, necessário para mostrar as meta tags corretamente
25+
- se você tiver um domínio diferente, você também deve criar o arquivo `public/CNAME` contendo o nome do seu domínio
26+
- `NULLSTACK_PROJECT_COLOR` - cor da sua aplicação
27+
28+
> ✨ Você pode alternativamente guardar estes valores de ambiente na seção de segredos do GitHub.
29+
30+
```yml
31+
name: Nullstack SSG Build and Deploy
32+
33+
on:
34+
push:
35+
branches: [main]
36+
37+
jobs:
38+
build:
39+
runs-on: ubuntu-latest
40+
41+
steps:
42+
- uses: actions/checkout@v3
43+
44+
- name: Cache dependencies
45+
uses: actions/cache@v3
46+
with:
47+
path: |
48+
**/node_modules
49+
**/yarn.lock
50+
**/.production
51+
key: node_modules-${{ hashFiles('**/package.json') }}
52+
53+
- name: Install deps
54+
run: yarn
55+
56+
- name: Build
57+
env:
58+
NULLSTACK_PROJECT_NAME: 'Nullstack Project Name'
59+
NULLSTACK_PROJECT_DOMAIN: 'some-awesome-nullstack-project.com'
60+
NULLSTACK_PROJECT_COLOR: '#D22365'
61+
run: yarn build --cache
62+
63+
- name: Deploy 🚀
64+
uses: JamesIves/[email protected]
65+
with:
66+
branch: master
67+
folder: built
68+
```
69+
70+
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.

‎i18n/pt-BR/examples/como-fazer-deploy-heroku.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Como fazer deploy de uma aplicação Nullstack no Heroku
3+
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.
4+
---
5+
6+
Use o Buildpack `heroku/nodejs`.
7+
8+
Crie um arquivo `Procfile` na raíz da aplicação com o seguinte:
9+
10+
```
11+
web: node .production/server.js
12+
```

‎i18n/pt-BR/examples/como-fazer-deploy-vercel.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Como fazer deploy de uma aplicação Nullstack no Vercel
3+
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.
4+
---
5+
6+
Crie o arquivo `api/nullstack.js` para exportar o servidor de produção.
7+
8+
```js
9+
import application from '../.production/server'
10+
11+
export default application.server;
12+
```
13+
14+
Adicione a seguinte configuração no `vercel.json` na raiz da sua aplicação para redirecionar todos requests do nullstack:
15+
16+
```json
17+
{
18+
"version": 2,
19+
"functions": {
20+
"api/nullstack.js": {
21+
"includeFiles": ".production/**"
22+
}
23+
},
24+
"routes": [
25+
{
26+
"handle": "filesystem"
27+
},
28+
{
29+
"src": "(.*)",
30+
"dest": "api/nullstack.js"
31+
}
32+
]
33+
}
34+
```

‎i18n/pt-BR/examples/como-usar-facebook-pixel-no-nullstack.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: Facebook Pixel
3+
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.
4+
---
5+
6+
De acordo com [developers.facebook.com](https://developers.facebook.com/docs/facebook-pixel/):
7+
8+
"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."
9+
10+
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.
11+
12+
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.
13+
14+
```jsx
15+
import Nullstack from 'nullstack';
16+
17+
class FacebookPixel extends Nullstack {
18+
19+
async hydrate({page, id}) {
20+
! function(f, b, e, v, n, t, s) {
21+
if (f.fbq) return;
22+
n = f.fbq = function() {
23+
n.callMethod ?
24+
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
25+
};
26+
if (!f._fbq) f._fbq = n;
27+
n.push = n;
28+
n.loaded = !0;
29+
n.version = '2.0';
30+
n.queue = [];
31+
t = b.createElement(e);
32+
t.async = !0;
33+
t.src = v;
34+
s = b.getElementsByTagName(e)[0];
35+
s.parentNode.insertBefore(t, s)
36+
}(window, document, 'script',
37+
'https://connect.facebook.net/en_US/fbevents.js');
38+
fbq('init', id);
39+
fbq('track', 'PageView');
40+
window.addEventListener(page.event, () => {
41+
fbq('init', id);
42+
fbq('track', 'PageView');
43+
})
44+
}
45+
}
46+
47+
export default FacebookPixel;
48+
```
49+
50+
```jsx
51+
import Nullstack from 'nullstack';
52+
import FacebookPixel from './FacebookPixel';
53+
54+
class Application extends Nullstack {
55+
56+
// ...
57+
58+
render() {
59+
return (
60+
<main>
61+
<FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
62+
</main>
63+
)
64+
}
65+
66+
67+
}
68+
69+
export default Application;
70+
```
71+
72+
## Usando um Wrapper
73+
74+
Alternativamente, você pode instalar [nullstack-facebook-pixel](https://github.com/Mortaro/nullstack-facebook-pixel) como uma dependência:
75+
76+
```sh
77+
npm install nullstack-facebook-pixel
78+
```
79+
80+
```jsx
81+
import Nullstack from 'nullstack';
82+
import FacebookPixel from 'nullstack-facebook-pixel';
83+
84+
class Application extends Nullstack {
85+
86+
// ...
87+
88+
render() {
89+
return (
90+
<main>
91+
<FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
92+
</main>
93+
)
94+
}
95+
96+
97+
}
98+
99+
export default Application;
100+
```

0 commit comments

Comments
 (0)