From 97a99c5ea353a73b6bf8698510fd58ecaa87cca4 Mon Sep 17 00:00:00 2001 From: Gabriel Marinho Date: Fri, 17 Jul 2020 20:47:20 -0300 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20adiciona=20tradu=C3=A7=C3=A3o=20par?= =?UTF-8?q?a=20local=20https?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/local-https.md | 45 +++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/docs/docs/local-https.md b/docs/docs/local-https.md index 79cc643c8..067f0e17b 100644 --- a/docs/docs/local-https.md +++ b/docs/docs/local-https.md @@ -1,57 +1,54 @@ --- -title: Local HTTPS +title: HTTPS Local --- +Gatsby fornece um jeito fácil de utilizar um servidor HTTPS local durante o desenvolvimento, graças ao [devcert](https://github.com/davewasmer/devcert). Quando você habilita a opção `https`, uma chave privada e um arquivo de certificado serão criados para o seu projeto e usados pelo servidor de desenvolvimento. -Gatsby provides an easy way to use a local HTTPS server during development, thanks to [devcert](https://github.com/davewasmer/devcert). When you enable the `https` option, a private key and certificate file will be created for your project and used by the development server. +## Uso (HTTPS automático) -## Usage (Automatic HTTPS) - -Start the development server using `npm run develop` as usual, and add either the `-S` or `--https` flag. +Comece o servidor de desenvolvimento usando `npm run develop` como usualmente, e adicione as flags `-S` ou `--https`. $ npm run develop -- --https -## Setup +## Configuração -When setting up a development SSL certificate for the first time, you may be asked to type in your password after starting the development environment: +Quando você estiver configurando o certificado SSL pela primeira vez, você pode ser solicitado para digitar sua senha depois de iniciar o ambiente de desenvolvimento: - info setting up SSL certificate (may require sudo) + informações de configuração do certificado SSL (pode necessitar do sudo) Password: -This is _only_ required the first time you are using Gatsby's HTTPS feature on your machine. After that, certificates will be created on the fly. +Isso é necessário _somente_ na primeira vez em que você usa o recurso HTTPS do Gatsby em seu computador. Depois disso, os certificados serão criados em tempo real. -After typing in your password, `devcert` will attempt to install some software necessary to tell Firefox (and Chrome, only on Linux) to trust your development certificates. +Após digitar sua senha, o `devcert` tentará instalar algum software necessário para informar ao Firefox (e Chrome, somente no Linux) que confie nos seus certificados de desenvolvimento. Unable to automatically install SSL certificate - please follow the prompts at http://localhost:52175 in Firefox to trust the root certificate See https://github.com/davewasmer/devcert#how-it-works for more details -- Press once you finish the Firefox prompts -- -If you wish to support Firefox (or Chrome on Linux), visit `http://localhost:52175` in Firefox and follow the point-and-click wizard. Otherwise, you may press enter without following the prompts. **Reminder: you'll only need to do this once per machine.** +Se você deseja oferecer suporte ao Firefox (ou Chrome no Linux), visite `http://localhost:52175` no Firefox e siga as instruções do assistente. Aliás, você pode pressionar enter sem seguir as instruções. **Lembrete: você somente irá fazer isso uma vez por computador.** -Now open the development server at `https://localhost:8000` and enjoy the HTTPS goodness ✨. Of course, you may change the port according to your setup. +Agora abra o servidor de desenvolvimento em `https://localhost:8000` e aproveite o HTTPS ✨. Claro, você pode alterar a porta de acordo com suas configurações. -Find out more about [how devcert works](https://github.com/davewasmer/devcert#how-it-works). +Saiba mais sobre [como o devcert funciona](https://github.com/davewasmer/devcert#how-it-works). -## Custom Key and Certificate Files +## Chaves e arquivos de certificados customizados -You may find that you need a custom key and certificate file for https if you use multiple -machines for development (or if your dev environment is containerized in Docker). +Você pode precisar de uma chave personalizada e um arquivo de certificado para HTTPS se usar várias máquinas para desenvolvimento (ou se o seu ambiente de desenvolvimento estiver em container no Docker). -If you need to use a custom https setup, you can pass the `--https`, `--key-file` and -`--cert-file` flags to `npm run develop`. +Se você precisar usar uma configuração HTTPS customizada, você pode passar as flags `--https`, `--key-file` e +`--cert-file` no comando `npm run develop`. -- `--cert-file` [relative path to ssl certificate file] -- `--key-file` [relative path to ssl key file] +- `--cert-file` [relativo ao caminho do arquivo de certificado SSL] +- `--key-file` [relativo ao caminho do arquivo de chave SSL] -See the example command: +Veja o comando de exemplo: ```shell gatsby develop --https --key-file ../relative/path/to/key.key --cert-file ../relative/path/to/cert.crt ``` -in most cases, the `--https` passed by itself is easier and more convenient to get local https. +na maioria dos casos, o `--https` passado por si só é mais fácil e mais conveniente para obter o HTTPS local. --- - -Keep in mind that the automatic certificates issued with the `--https` flag are explicitly issued to `localhost` and will only be accepted there. Using it together with the `--host` option will likely result in browser warnings. +Tenha em mente que certificados automáticos marcados com a flag `--https` são emitidos unicamente para o `localhost` e serão aceitos somente lá. Usá-lo junto com a opção `--host` provavelmente resultará em avisos do navegador. From 9b263887da97411ffd6e9888382337f81dcd9085 Mon Sep 17 00:00:00 2001 From: Ana Tarrisse Date: Thu, 30 Jul 2020 09:53:27 -0300 Subject: [PATCH 2/2] feat: traducao ptbr gatsby-link --- docs/docs/gatsby-link.md | 183 +++++++++++++++++++-------------------- 1 file changed, 88 insertions(+), 95 deletions(-) diff --git a/docs/docs/gatsby-link.md b/docs/docs/gatsby-link.md index f24ca64b4..0b52a9295 100644 --- a/docs/docs/gatsby-link.md +++ b/docs/docs/gatsby-link.md @@ -2,22 +2,22 @@ title: Gatsby Link API --- -For internal navigation, Gatsby includes a built-in `` component as well as a `navigate` function which is used for programmatic navigation. +Para navegação interna o Gatbsy disponibiliza o componente ``, assim como a função `navigate` que ajuda na navegação programática. -Gatsby's `` component enables linking to internal pages as well as a powerful performance feature called preloading. Preloading is used to prefetch resources so that the resources are fetched by the time the user navigates with this component. We use an `IntersectionObserver` to fetch a low-priority request when the `Link` is in the viewport and then use an `onMouseOver` event to trigger a high-priority request when it is likely that a user will navigate to the requested resource. +O `` possibilita conectar páginas internas, além de permitir o uso de um poderoso recurso de desempenho chamado _preloading_ (pré-carregamento). O preloading faz um pré-carregamento de recursos para que esses já estejam disponíveis no momento que o usuário precisar. Um `IntersectionObserver` é utilizado para fazer uma requisição de baixa prioridade quando o `` está visível na tela enquanto que um evento de `onMouseOver` é responsável por disparar uma requisição de alta prioridade quando for identificada a probabilidade de que o usuário fará tal navegação. -The component is a wrapper around [@reach/router's Link component](https://reach.tech/router/api/Link) that adds useful enhancements specific to Gatsby. All props are passed through to @reach/router's `Link` component. +O `` é um encapsulamento do [componente de Link do @reach/router](https://reach.tech/router/api/Link), adicionando funcionalidades específicas para o Gatsby. Todas as props são passadas para o componente de `Link` do @reach/router. -## How to use Gatsby Link +## Como usar Gatsby Link -### Replace `a` tags with the `Link` tag for local links +### Substitua as tags `a` pela tag `Link` em links locais -In any situation where you want to link between pages on the same site, use the `Link` component instead of an `a` tag. +Em qualquer situação que você queira criar um link entre páginas dentro do mesmo site, use o componente `Link` ao invés da tag `a`. ```jsx import React from "react" @@ -28,31 +28,31 @@ const Page = () => (

{/* highlight-next-line */} - Check out my blog! + Confira o meu blog!

{/* Note that external links still use `a` tags. */} - Follow me on Twitter! + Siga-me no Twitter!

) ``` -### Add custom styles for the currently active link +### Personalize o link ativo -It’s often a good idea to show which page is currently being viewed by visually changing the link matching the current page. +Por vezes, quer-se indicar a página que está sendo visualizada no momento através de alterações visuais no link correspondente a mesma. -`Link` provides two options for adding styles to the active link: +O `Link` tem duas opções de estilização de links ativos: -- `activeStyle` — a style object that will only be applied when the current item is active -- `activeClassName` — a class name that will only be added to the `Link` when the current item is active +- `activeStyle` - estilos que são aplicados ao `Link` quando seu endereço estiver ativo +- `activeClassName` - classe que será aplicada ao `Link` quando seu endereço estiver ativo -For example, to turn the active link red, either of the following approaches is valid: +Por exemplo, para tornar o link ativo vermelho, qualquer uma das seguintes abordagens é válida: ```jsx import React from "react" @@ -63,42 +63,42 @@ const SiteNavigation = () => ( Home - About + Sobre ) ``` -### Use `getProps` for advanced link styling +### Use `getProps` para estilização avançada de links -Gatsby's `` component comes with a `getProps` prop, which can be useful for advanced styling. It passes you an object with the following properties: +O componente `` do Gatsby tem uma prop chamada `getProps` que pode ser útil para estilos avançados. Ela passa um objeto com as seguintes propriedades: -- `isCurrent` — true if the `location.pathname` is exactly the same as the `` component's `to` prop -- `isPartiallyCurrent` — true if the `location.pathname` starts with the `` component's `to` prop -- `href` — the value of the `to` prop -- `location` — the page's `location` object +- `isCurrent` - true se o`location.pathname` for exatamente o mesmo que o `to` do `Link` +- `isPartiallyCurrent` - true se o`location.pathname` começar com a prop `to` do `Link` +- `href` - o valor da prop `to` +- `location` - o objeto `location` da página -You can read more about it on [`@reach/router`'s documentation](https://reach.tech/router/api/Link). +Mais informações estão disponíveis na [`documentação do @reach/router`](https://reach.tech/router/api/Link). -### Show active styles for partially matched and parent links +### Mostrar estilos ativos para links parciais e links pais -By default the `activeStyle` and `activeClassName` props will only be set on a `` component if the current URL matches its `to` prop _exactly_. Sometimes, you may want to style a `` as active even if it partially matches the current URL. For example: +Por padrão, os props `activeStyle` e`activeClassName` são configurados no componente `` apenas se a URL atual for _exatamente_ igual a sua prop `to`. Às vezes, convém estilizar um `` como ativo, caso sua prop `to` corresponda parcialmente à URL atual. Por exemplo: -- You may want `/blog/hello-world` to match `` -- Or `/gatsby-link/#passing-state-through-link-and-navigate` to match `` +- Você pode querer que `` fique ativo quando estiver na URL `/blog/hello-world` +- Ou que `` fique ativo no endereço `/gatsby-link/#passing-state-through-link-and-navigate` -In instances like these, just add the `partiallyActive` prop to your `` component and the style will also be applied even if the `to` prop only is a partial match: +Em casos como esses, adicione a prop `partiallyActive` ao componente `` e o estilo também será aplicado, mesmo que a prop `to` seja parcialmente equivalente: ```jsx import React from "react" @@ -111,32 +111,32 @@ const Header = <> {/* highlight-next-line */} partiallyActive={true} > - Articles + Artigos ; ``` -_**Note:** Available from Gatsby V2.1.31, if you are experiencing issues please check your version and/or update._ +_**Nota:** Disponível no Gatsby V2.1.31. Se você encontrar problemas, verifique sua versão e/ou atualização._ -### Pass state as props to the linked page +### Passe o estado como props para as páginas linkadas -Sometimes you'll want to pass data from the source page to the linked page. You can do this by passing a `state` prop to the `Link` component or on a call to the `navigate` function. The linked page will have a `location` prop containing a nested `state` object structure containing the passed data. +Às vezes, você deseja passar dados da página de origem para a página de destino. Você pode fazer isso passando um prop `state` para o componente `Link` ou chamando a função `navigate`. A página clicada terá um objeto `location` contendo uma propriedade `state` que contém os dados passados. ```jsx const PhotoFeedItem = ({ id }) => (
- {/* (skip the feed item markup for brevity) */} + {/* (ignorando o markup do item de feed por brevidade) */} - View Photo + Ver Foto
) @@ -152,16 +152,16 @@ const Photo = ({ location, photoId }) => { } ``` -### Replace history to change “back” button behavior +### Substitua o histórico para alterar o comportamento do botão "voltar" -There are a few cases where it might make sense to modify the “back” button’s behavior. For example, if you build a page where you choose something, then see an “are you sure?” page to make sure it’s what you really wanted, and finally see a confirmation page, it may be desirable to skip the “are you sure?” page if the “back” button is clicked. +Existem alguns casos em que pode fazer sentido modificar o comportamento do botão "voltar". Por exemplo, se você criar um fluxo no qual o usuário possa escolher algo, e então seja direcionado para outra página que pergunte "você tem certeza?". Ao confirmar o usuário é finalmente direcionado para uma página de confirmação. Nesse caso pode ser desejável pular a página "você tem certeza?" no fluxo de retorno do botão "voltar". -In those cases, use the `replace` prop to replace the current URL in history with the target of the `Link`. +Nesse caso use o objeto `replace` para substituir o URL atual no histórico pelo destino do `Link`. ```jsx import React from "react" @@ -173,31 +173,31 @@ const AreYouSureLink = () => ( {/* highlight-next-line */} replace > - Yes, I’m sure + Sim, tenho certeza ) ``` -## How to use the `navigate` helper function +## Como usar a função `navigate` -Sometimes you need to navigate to pages programmatically, such as during form submissions. In these cases, `Link` won’t work. +Às vezes, você precisa navegar para as páginas programaticamente, como durante o envio de formulários. Nesses casos, o `Link` não funcionará. -_**Note:** `navigate` was previously named `navigateTo`. `navigateTo` is deprecated in Gatsby v2 and will be removed in the next major release._ +_**Note:** `navigate` era chamado de `navigateTo` originalmente. O `navigateTo` foi descontinuado no Gatsby v2 e será removido na próxima versão principal._ -Instead, Gatsby exports a `navigate` helper function that accepts `to` and `options` arguments. +Em vez disso, o Gatsby exporta uma função `navigate` que aceita os argumentos `to` e `options`. -| Argument | Required | Description | -| ----------------- | -------- | ----------------------------------------------------------------------------------------------- | -| `to` | yes | The page to navigate to (e.g. `/blog/`). | -| `options.state` | no | An object. Values passed here will be available in `location.state` in the target page’s props. | -| `options.replace` | no | A boolean value. If true, replaces the current URL in history. | +| Argumento | Obrigatório | Descrição | +| ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------- | +| `to` | sim | A página de destino (e.g. `/blog/`). | +| `options.state` | não | Um objeto. Os valores aqui passados estarão disponíveis em `location.state` dentre as props da página de destino. | +| `options.replace` | não | Valor booleano. Se true, sobrescreve o valor da URL atual no histórico. | -By default, `navigate` operates the same way as a clicked `Link` component. +Por padrão, o `navigate` opera da mesma maneira que o clique no`Link`. ```jsx import React from "react" @@ -208,19 +208,19 @@ const Form = () => ( onSubmit={event => { event.preventDefault() - // TODO: do something with form values + // TODO: fazer algo com os valores do form // highlight-next-line navigate("/form-submitted/") }} > - {/* (skip form inputs for brevity) */} + {/* (ignorando os inputs do form por brevidade) */} ) ``` -### Add state to programmatic navigation +### Adicionar estado à navegação programática -To include state information, add an `options` object and include a `state` prop with the desired state. +Para incluir informações de estado, inclua um objeto com uma propriedade `state` com os valores desejados. ```jsx import React from "react" @@ -231,7 +231,7 @@ const Form = () => ( onSubmit={event => { event.preventDefault() - // Implementation of this function is an exercise for the reader. + // A implementação desta função é um exercício para o leitor. const formValues = getFormValues() navigate( @@ -244,16 +244,16 @@ const Form = () => ( ) }} > - {/* (skip form inputs for brevity) */} + {/* (ignorando os inputs do form por brevidade) */} ) ``` -Then from the receiving page you can access the `location` state as demonstrated in [Pass state as props to the linked page](#pass-state-as-props-to-the-linked-page). +A partir da página de destino é possível acessar o estado `location`, conforme demonstrado em [Passe o estado como props para as páginas linkadas](#passe-o-estado-como-props-para-as-paginas-linkadas). -### Replace history during programmatic navigation +### Substitua o histórico na programação programática -If the navigation should replace history instead of pushing a new entry into the navigation history, add the `replace` prop with a value of `true` to the `options` argument of `navigate`. +Se o objetivo na navegação é substituir o histórico ao invés de inserir uma nova entrada, adicione o objeto `replace` com um valor de `true` ao argumento `options` de `navigate`. ```jsx import React from "react" @@ -264,7 +264,7 @@ const Form = () => ( onSubmit={event => { event.preventDefault() - // TODO: do something with form values + // TODO: fazer algo com os valores do form navigate( "/form-submitted/", // highlight-next-line @@ -272,17 +272,16 @@ const Form = () => ( ) }} > - {/* (skip form inputs for brevity) */} + {/* (ignorando os inputs do form por brevidade) */} ) ``` -## Add the path prefix to paths using `withPrefix` +## Adicione prefixo aos endereços usando `withPrefix` -It is common to host sites in a sub-directory of a site. Gatsby lets you [set -the path prefix for your site](/docs/path-prefix/). After doing so, Gatsby's `` component will automatically handle constructing the correct URL in development and production. +É comum hospedar sites em um subdiretório de um site. Gatsby permite que você [defina o prefixo do caminho do seu site](/docs/path-prefix/). Após fazer isso, o componente `` de Gatsby manipulará automaticamente a construção da URL correta em desenvolvimento e produção. -For pathnames you construct manually, there's a helper function, `withPrefix` that prepends your path prefix in production (but doesn't during development where paths don't need prefixed). +Para endereços construídos manualmente, há uma função auxiliar, `withPrefix`, que adicina o prefixo nos endereços em produção (mas não durante o desenvolvimento, pois os endereços não precisam ser prefixados). ```jsx import { withPrefix } from "gatsby" @@ -292,40 +291,34 @@ const IndexLayout = ({ children, location }) => { return (
-

Welcome {isHomepage ? "home" : "aboard"}!

+

Bem vindo {isHomepage ? "home" : "a bordo"}!

{children}
) } ``` -## Reminder: use `` only for internal links! +## Lembrete: use `` apenas para links internos! -This component is intended _only_ for links to pages handled by Gatsby. For links to pages on other domains or pages on the same domain not handled by the current Gatsby site, use the normal `` element. +O uso desse componente destina-se apenas para páginas internas, pois estas são tratadas pelo Gatsby. Para links extenrnos (páginas em outros domínios ou páginas no mesmo domínio não tratadas pelo site atual do Gatsby), use o elemento `` normal. -Sometimes you won't know ahead of time whether a link will be internal or not, -such as when the data is coming from a CMS. -In these cases you may find it useful to make a component which inspects the -link and renders either with Gatsby's `` or with a regular `` tag -accordingly. +Às vezes, você não saberá com antecedência se um link será interno ou não, como quando os dados são provenientes de um CMS. Nesses casos, pode ser útil criar um componente que inspecione o endereço e determine se este deverá ser renderizado com o `` de Gatsby ou com uma tag ``. -Since deciding whether a link is internal or not depends on the site in -question, you may need to customize the heuristic to your environment, but the -following may be a good starting point: +A decisão se um link é interno ou não depende do site em questão. Pode ser necessário personalizar a heurística para o seu ambiente, mas o exemplo a seguir pode ser um bom ponto de partida: ```jsx import { Link as GatsbyLink } from "gatsby" -// Since DOM elements cannot receive activeClassName -// and partiallyActive, destructure the prop here and -// pass it only to GatsbyLink +// Como os elementos DOM não podem receber activeClassName +// e parcialmenteActive, desestruture a prop aqui e +// passe apenas para o GatsbyLink const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => { - // Tailor the following test to your environment. - // This example assumes that any internal link (intended for Gatsby) - // will start with exactly one slash, and that anything else is external. + // Adapte o seguinte teste ao seu ambiente. + // Esse exemplo supõe que qualquer link interno (destinado ao Gatsby) + // começará exatamente com uma barra e qualquer outra coisa é externa. const internal = /^\/(?!\/)/.test(to) - // Use Gatsby Link for internal links, and for others + // Use o Link do Gatsby para links internos e para outros if (internal) { return ( { export default Link ``` -### File Downloads +### Download de arquivos -You can similarly check for file downloads: +Você pode também verificar se o link concerne download de algum arquivo. ```jsx const file = /\.[0-9a-z]+$/i.test(to) @@ -373,9 +366,9 @@ You can similarly check for file downloads: } ``` -## Recommendations for programmatic, in-app navigation +## Recomendações para navegação programática no aplicativo -Neither `` nor `navigate` can be used for in-route navigation with a hash or query parameter. If you need this behavior, you should either use an anchor tag or import the `@reach/router` package--which Gatsby already depends upon--to make use of its `navigate` function, like so: +Nem `` nem `navigate` podem ser usados para navegação na própria página usando hash ou parâmetro de consulta. Se você precisar desse comportamento, use uma âncora ou importe o pacote `@reach/router` - que já é uma dependência do Gatsby - e utilize sua função `navigate`, da seguinte forma: ```jsx import { navigate } from '@reach/router'; @@ -389,8 +382,8 @@ onClick = () => { } ``` -## Additional resources +## Recursos adicionais -- [Authentication tutorial for client-only routes](/tutorial/authentication-tutorial/) -- [Routing: Getting Location Data from Props](/docs/location-data-from-props/) -- [`gatsby-plugin-catch-links`](https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/) to automatically intercept local links in Markdown files for `gatsby-link` like behavior +- [Tutorial de autenticação para rotas do cliente](/tutorial/authentication-tutorial/) +- [Roteamento: Obtendo dados de localização das props](/docs/location-data-from-props/) +- [`gatsby-plugin-catch-links`](https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/) identificar automaticamente links locais em arquivos Markdown e substitui seu comportamento para o mesmo utilizado pela função `navigate` do `gatsby-link`