Skip to content

Commit 98b6a44

Browse files
BrendonSSilvaBrendonSSilva
committed
translated to pt-br
1 parent 82bb1b9 commit 98b6a44

19 files changed

+502
-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: "/como-fazer-deploy-vercel"
9+
description: "Siga esses passos para fazer deploy no Vercel"
10+
- title: "Como fazer deploy no GitHub Pages"
11+
href: "/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: "/como-fazer-deploy-heroku"
15+
description: "Siga esses passos para fazer deploy no Heroku"
16+
- title: "Como usar MongoDB"
17+
href: "/como-usar-mongodb-com-nullstack"
18+
description: "Siga esses passos para fazer deploy no Heroku"
19+
- title: "Como usar o Google Analytics"
20+
href: "/examples/como-usar-google-analytics-com-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-com-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: "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."
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-usar-facebook-pixel-com-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 chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o Pixel.
4+
---
5+
6+
De acordo com [developers.facebook.com](https://developers.facebook.com/docs/facebook-pixel/):
7+
8+
"O Pixel da Metal é um trecho de código JavaScript que permite a você rastrear a atividade dos visitantes do seu site."
9+
10+
Aproveite as [chaves de contexto](/contexto) e [eventos personalizados](/contexto-page) para criar um componente que envie eventos de forma dinâmica para o Pixel.
11+
12+
O Facebook Pixel só pode ser chamado depois do [`hydrate`](/ciclo-de-vida-full-stack) para garantir de que está rodando no client.
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="TROQUE_PARA_SEU_ID_DO_FACEBOOK_PIXEL" />
62+
</main>
63+
)
64+
}
65+
66+
67+
}
68+
69+
export default Application;
70+
```
71+
72+
## Usando Wrapper
73+
74+
Como outra alternativa, 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="TROQUE_PARA_SEU_ID_DO_FACEBOOK_PIXEL" />
92+
</main>
93+
)
94+
}
95+
96+
97+
}
98+
99+
export default Application;
100+
```

‎i18n/pt-BR/examples/como-usar-google-analytics-com-nullstack.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Google Analytics
3+
description: Aproveite as chaves de contexto e eventos personalizados para criar um componente que envie eventos de forma dinâmica para o GTAG.
4+
---
5+
6+
De acordo com [analytics.google.com](https://analytics.google.com):
7+
8+
"O Google Analytics permite que você meça o retorno do investimento em publicidade, além de rastrear seus anúncios em Flash, vídeo e sites e aplicativos de redes sociais."
9+
10+
Aproveite as [chaves de contexto](/contexto) e [eventos personalizados](/contexto-page) para criar um componente que envie eventos de forma dinâmica para o GTAG.
11+
12+
O GTAG só pode ser chamado depois do [`hydrate`](/ciclo-de-vida-full-stack) para garantir de que está rodando no client.
13+
14+
```jsx
15+
import Nullstack from 'nullstack';
16+
17+
class GoogleAnalytics extends Nullstack {
18+
19+
hydrate({router, page, id}) {
20+
window.dataLayer = window.dataLayer || [];
21+
function gtag(){
22+
dataLayer.push(arguments);
23+
}
24+
gtag('js', new Date());
25+
gtag('config', id, {
26+
page_title: page.title,
27+
page_path: router.url
28+
});
29+
window.addEventListener(page.event, () => {
30+
gtag('event', 'page_view', {
31+
page_title: page.title,
32+
page_path: router.url
33+
})
34+
})
35+
}
36+
37+
render({id}) {
38+
return (
39+
<script
40+
async
41+
src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
42+
/>
43+
)
44+
}
45+
46+
}
47+
48+
export default GoogleAnalytics;
49+
```
50+
51+
```jsx
52+
import Nullstack from 'nullstack';
53+
import GoogleAnalytics from './GoogleAnalytics';
54+
55+
class Application extends Nullstack {
56+
57+
// ...
58+
59+
render() {
60+
return (
61+
<main>
62+
<GoogleAnalytics id="TROQUE_PARA_SEU_ID_DO_ANALYTICS" />
63+
</main>
64+
)
65+
}
66+
67+
68+
}
69+
70+
export default Application;
71+
```
72+
73+
## Usando Wrapper
74+
75+
Como outra alternativa, você pode instalar [nullstack-google-analytics](https://github.com/Mortaro/nullstack-google-analytics) como uma dependência:
76+
77+
```sh
78+
npm install nullstack-google-analytics
79+
```
80+
81+
```jsx
82+
import Nullstack from 'nullstack';
83+
import GoogleAnalytics from 'nullstack-google-analytics';
84+
85+
class Application extends Nullstack {
86+
87+
// ...
88+
89+
render() {
90+
return (
91+
<main>
92+
<GoogleAnalytics id="TROQUE_PARA_SEU_ID_DO_ANALYTICS" />
93+
</main>
94+
)
95+
}
96+
97+
98+
}
99+
100+
export default Application;
101+
```

‎i18n/pt-BR/examples/copiando-arquivos-estaticos-para-pasta-public-durante-o-build.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: "Copiando arquivos estaticos para pasta public durante o build"
3-
description: "Copiando arquivos estaticos para pasta public, como arquivos de schema, css, js e outros arquivos que vem com certos pacotes"
2+
title: "Copiando arquivos estáticos para a pasta public durante o build"
3+
description: "Copiando arquivos estáticos para a pasta public, como arquivos de schema, css, js e outros arquivos que vem com certos pacotes"
44
---
55

6-
To copy static files to the public folder you need to create a custom webpack override.
6+
Para copiar arquivos estáticos para a pasta pública você precisa criar um webpack personalizado e sobrepor eles.
77

8-
In order to modify the webpack config that comes in the Nullstack bundle, you can create a `webpack.config.js` as mentioned in the documentation ["How to customize Webpack"](/how-to-customize-webpack).
8+
Para modificar a configuração do webpack que vem no pacote do Nullstack, você pode criar um arquivo `webpack.config.js`, conforme mencionado na documentação ["Como customizar o webpack"](/como-customizar-webpack).
99

1010
```js
1111
// webpack.config.js
@@ -29,8 +29,7 @@ function customServer(...args) {
2929

3030
module.exports = [customServer, client];
3131
```
32-
33-
In case you need to serve these files, you can use `context.server` to create a route and `express.static` to point to the files you want to serve.
32+
Se você precisar destes arquivos, você pode usar `context.server` para criar uma rota e `express.static` para criar onde você quer servir os arquivos.
3433

3534
```js
3635
// server.js

‎i18n/pt-BR/examples/how-to-deploy-to-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 hospedar um aplicativo Nullstack em qualquer lugar. Faça deploy no Vercel, Heroku, AWS, Azure, GitHub Pages ou em qualquer outro lugar.
4+
---
5+
6+
Altere o script de construção no arquivo `package.json` para construir com `--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 qual `branch` vai servir os arquivos estáticos
15+
- Configurar qual pasta vai servir os arquivos estáticos
16+
17+
Para as configurações abaixo, escolha master como a branch que deseja usar e a pasta raiz / como a pasta que você deseja usar.
18+
19+
Crie um arquivo `.github/workflows/ssg-build.yml` (assumindo que a branch `main` vai iniciar uma nova implementação).
20+
21+
Na construção abaixo, atualize as variáveis de ambiente para fazer executar o build coretamente.
22+
23+
- `NULLSTACK_PROJECT_NAME` - nome do seu projeto
24+
- `NULLSTACK_PROJECT_DOMAIN` - domínio, necessário para renderizar corretamente as metatags
25+
- Se você tem um domínio personaliado, você deve também criar um arquivo `public/CNAME` contendo seu domínio
26+
- `NULLSTACK_PROJECT_COLOR` - cor da sua aplicação para quando for exibida nos dispositivos
27+
28+
> ✨ Você também pode salvar esses valores nas configurações 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+
Essa ação vai executar o build da sua aplicação no modo SSG e gerar uma pasta com o site estático. O último comando vai fazer a deploy do arquivo estático para sua branch `master` permitindo que o conteúdo estático seja servido vindo da raiz.

‎i18n/pt-BR/examples/how-to-deploy-to-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 hospedar um aplicativo Nullstack em qualquer lugar. Faça deploy no Vercel, Heroku, AWS, Azure, GitHub Pages ou em qualquer outro lugar.
4+
---
5+
6+
Use o Buildpack `heroku/nodejs`.
7+
8+
Crie um `Procfile` na raiz da sua aplicação com:
9+
10+
```
11+
web: node .production/server.js
12+
```

0 commit comments

Comments
 (0)