diff --git a/i18n/en-US/components/Examples.yml b/i18n/en-US/components/Examples.yml index 65eeec34..521c3d2f 100644 --- a/i18n/en-US/components/Examples.yml +++ b/i18n/en-US/components/Examples.yml @@ -1,4 +1,4 @@ -title: "Nullstack Examples" +title: "Examples" description: "Check coolest stuff you can do with Nullstack" heading: "Nullstack Examples" tagline: "A collection of application examples with Nullstack." diff --git a/i18n/en-US/components/Header.yml b/i18n/en-US/components/Header.yml index cc15d291..0e824d83 100644 --- a/i18n/en-US/components/Header.yml +++ b/i18n/en-US/components/Header.yml @@ -8,8 +8,6 @@ links: href: "/getting-started" - title: "Examples" href: "/examples" - - title: "Blog" - href: "/blog" - title: "Contributors" href: "/contributors" - title: "F.A.Q" diff --git a/i18n/pt-BR/components/Examples.yml b/i18n/pt-BR/components/Examples.yml index 5c309658..d8961074 100644 --- 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 github repo." +title: "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 github repo." 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: "/pt-br/exemplos/como-fazer-deploy-vercel" + description: "Siga esses passos para fazer deploy no Vercel" + - title: "Como fazer deploy no GitHub Pages" + href: "/pt-br/exemplos/como-fazer-deploy-github-pages" + description: "Siga esses passos para fazer deploy no GitHub Pages" + - title: "Como fazer deploy no Heroku" + href: "/pt-br/exemplos/como-fazer-deploy-heroku" + description: "Siga esses passos para fazer deploy no Heroku" + - title: "Como usar MongoDB" + href: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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: "/pt-br/exemplos/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" + href: "/pt-br/exemplos/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 index 46393c79..f691fcff 100644 --- 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 new file mode 100644 index 00000000..c44d4e2b --- /dev/null +++ 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. \ No newline at end of file diff --git a/i18n/pt-BR/examples/como-fazer-deploy-heroku.md b/i18n/pt-BR/examples/como-fazer-deploy-heroku.md new file mode 100644 index 00000000..6044f80f --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/i18n/pt-BR/examples/como-fazer-deploy-vercel.md b/i18n/pt-BR/examples/como-fazer-deploy-vercel.md new file mode 100644 index 00000000..8fbaf960 --- /dev/null +++ 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" + } + ] +} +``` \ No newline at end of file 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 new file mode 100644 index 00000000..4d682f4b --- /dev/null +++ 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 ( +
+ +
+ ) + } + + +} + +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 ( +
+ +
+ ) + } + + +} + +export default Application; +``` \ No newline at end of file diff --git a/i18n/pt-BR/examples/como-usar-google-analytics-no-nullstack.md b/i18n/pt-BR/examples/como-usar-google-analytics-no-nullstack.md new file mode 100644 index 00000000..49b10e82 --- /dev/null +++ b/i18n/pt-BR/examples/como-usar-google-analytics-no-nullstack.md @@ -0,0 +1,101 @@ +--- +title: Google Analytics +description: Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente. +--- + +De acordo com [analytics.google.com](https://analytics.google.com): + +"O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos." + +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 GTAG dinamicamente. + +O GTAG 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 GoogleAnalytics extends Nullstack { + + hydrate({router, page, id}) { + window.dataLayer = window.dataLayer || []; + function gtag(){ + dataLayer.push(arguments); + } + gtag('js', new Date()); + gtag('config', id, { + page_title: page.title, + page_path: router.url + }); + window.addEventListener(page.event, () => { + gtag('event', 'page_view', { + page_title: page.title, + page_path: router.url + }) + }) + } + + render({id}) { + return ( +