{"componentChunkName":"component---src-templates-single-template-tsx","path":"/customizando-a-mensagem-noscript-no-gatsby","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Introdução

\n

O Gatsby é uma ótima ferramenta para desenvolver lindos projetos utilizando React e unindo o recurso de SSR e SPA, sem contar que ele é um gerador de arquivos estáticos, que facilita muito SEO e acessibilidade do seu site.

\n

O Gatsby, assim como é uma boa prática em todos os projetos SPA, usa o recurso da tag <noscript> para exibir uma mensagem para o usuário informando que o site funciona melhor com o JavaScript habilitado no navegador.

\n

E nesse artigo vou explicar commo customizar essa mensagem usando o Customizing html.js recurso do próprio Gatsby para alterar o HTML base da aplicação.

\n

\n \n \nimport PropTypes from 'prop-types'\n\nexport default function HTML(props) {\n return (\n <html {...props.htmlAttributes}>\n <head>\n <meta charSet=\"utf-8\" />\n <meta httpEquiv=\"x-ua-compatible\" content=\"ie=edge\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n />\n {props.headComponents}\n </head>\n <body {...props.bodyAttributes}>\n {props.preBodyComponents}\n <noscript key=\"noscript\" id=\"gatsby-noscript\">\n This app works best with JavaScript enabled.\n </noscript>\n <div\n key={`body`}\n id=\"___gatsby\"\n dangerouslySetInnerHTML={{ __html: props.body }}\n />\n {props.postBodyComponents}\n </body>\n </html>\n )\n}\n\nHTML.propTypes = {\n htmlAttributes: PropTypes.object,\n headComponents: PropTypes.array,\n bodyAttributes: PropTypes.object,\n preBodyComponents: PropTypes.array,\n body: PropTypes.string,\n postBodyComponents: PropTypes.array,\n}\n

Se o seu arquivo está igual a esse código acima então encontre a tag <noscript> e adicione a classe gatsby-noscript, lembrando que é um arquivo JavaScript React, então não é class, mas className.

\n
<noscript key=\"noscript\" id=\"gatsby-noscript\" className=\"gatsby-noscript\">\n  This app works best with JavaScript enabled.\n</noscript>
\n

Adicionando o CSS

\n

Para adicionar o CSS vamos criar uma variável chamada noscriptStyle entre os imports e o início da função, e iremos atribuir a ela nossos estilos.

\n

Seria algo como isso:

\n
const noscriptStyle = `\n  .gatsby-noscript {\n    /* adicionamos os CSS para a mensagem aqui... */\n    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;\n    font-size: 16px;\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    display: block;\n    padding: 15px;\n    background: #f00;\n    color: #fff;\n    z-index: 10000;\n  }\n`
\n

Feito isso vamos inserir essa variável dentro da tag <noscript>, junto com a mensagem.

\n
<noscript key=\"noscript\" id=\"gatsby-noscript\" className=\"gatsby-noscript\">\n  <style>{noscriptStyle}</style>\n  This app works best with JavaScript enabled.\n</noscript>
\n

Demonstração

\n

Para ver como ficou basta desativar o javascript do seu navegador aqui mesmo nessa página que a mensagem vai aparecer.

\n

\n \n \n \n \n \n \n \n \n
Customizando mensagem da tag noscript no Gatsby - Demonstração
\n

\n

Bônus

\n

Você pode editar qualquer coisa nesse template JavaScript, só atenção para as variáveis props htmlAttributes, headComponents, bodyAttributes, preBodyComponents, postBodyComponents e body, essas props fazem o Gatsby funcionar corretamente.

\n

Eu mesmo dei uma modificada para deixar dentro do padrão (eslint) do meu projeto, pode ver o código-fonte do meu html customizado aqui no repositório do meu site.

\n

Quanto ao CSS, use e abuse, você pode mudar bastante coisa no seu site com ele, como eu tenho o header fixo no topo tive que mover ele 55px do topo para posicionar a mensagem.

\n

É isso ai, divirta-se!

\n

{goodbye}

","excerpt":"Introdução O Gatsby é uma ótima ferramenta para desenvolver lindos projetos utilizando React e unindo o recurso de SSR e SPA, sem contar que ele é um…","timeToRead":3,"frontmatter":{"category":["Gatsby"],"date":"há 8 anos","datePublished":"2019-03-19T00:00:00.000Z","description":"Nesse artigo vou explicar como customizar a mensagem da tag noscript usando o recurso do próprio Gatsby para alterar o HTML base da aplicação.","path":"/customizando-a-mensagem-noscript-no-gatsby","tags":["Dicas","Gatsby","React"],"title":"Customizando mensagem da tag noscript no Gatsby","image":{"publicURL":"/static/customizando-a-mensagem-noscript-no-gatsby-466dc6f262ac64d3289b052750d55f09.png","name":"customizando-a-mensagem-noscript-no-gatsby"}},"fields":{"readingTime":{"words":565}}}},"pageContext":{}}}