Home Artigos técnicos O New Layer0 (Edgio) Docs é o início de um novo começo
Applications

O New Layer0 (Edgio) Docs é o início de um novo começo

About The Author

Outline

A mudança é inevitável, e de vez em quando ela vem ao redor. Nos últimos anos, há mudanças que nos foram forçadas, mudanças que não tínhamos controle direto. Mas no Layer0/Edgio, a mudança recente é de nossa própria criação, uma que era muito necessária: Uma reescrita completa e redesenho da documentação do Edgio.

Esta revisão foi feita para ser fundamental e controlável. A verdade é que queríamos tomar as coisas em nossas próprias mãos como nunca fizemos antes. E assim, fortemente inspirados nos documentos beta do React, nós nos colocamos nos ombros de gigantes criando uma instância do repositório base e ajustando-a para nosso caso de uso específico.‍

Primeiro coisas

O primeiro passo foi o canal Discórdia Reactiflux. Simplificando, a comunidade ajudou a identificar o repositório de documentação beta do React.

O React beta repo como um head-start

Passamos alguns dias pesquisando como o site beta do React docs foi construído, quais tecnologias ele usa e como podemos aproveitar e construir em cima dessa pilha para atender às nossas necessidades específicas. Nosso palpite sobre MDX e Next.js estava certo e nos encontramos com um head-start.

Tecnologias

Aqui estão algumas das principais tecnologias utilizadas:

  • MDX: Marcação funcional com componentes React incorporados
  • Next.js: React framework
  • Webpack: Agrupamento de módulos
  • Componentes estilizados: Styling
  • Algolia: Pesquisar
  • Prisma: Realce da sintaxe do código

MDX: MDX é uma forma estendida de Markdown para a era do componente. Ele torna o markdown funcional, permitindo que você incorpore JSX em qualquer documento de markdown, levando a criação de conteúdo com markdown a um novo nível.

Já sabíamos o que era MDX e quão poderoso pode ser de artigos como MDX, o ingrediente secreto e a documentação de front-end, guias de estilo e a ascensão do MDX. Isso abriu caminho para alguns dos componentes personalizados que criamos.

Next.js: Emparelhar o MDX com o Next.js não é algo novo, então o primeiro instinto foi ler a documentação oficial ou este post no blog. Existem algumas abordagens para obter markdown em páginas do Next.js, como ter um documento markdown local e transformá-lo em HTML usando pacotes como o REmark e o REmark-html dentro de um dos getStaticProps, getStaticPaths ou getServerSideProps

Outra abordagem é definir um arquivo “mdm” ou “mdx” diretamente como páginas Next.js com o pacote “next/mdx”, ou se você gosta de lidar com as coisas de nível inferior, siga a abordagem da equipe do React e DIY.

Webpack: Next.config.js (ou next.config.mjs) é usado pelo servidor Next.js e fases de compilação. É aqui que você pode configurar o Next.js para casos de uso avançados, como deixar markdown ler extensões de arquivo “.mdx” no diretório Pages e carregá-las como páginas Next.js.

O Webpack usa carregadores para pré-processar arquivos. Um dos casos de uso mais comuns é a transpificação e um desses pacotes comuns é o babel-loader (carrega código ES2015 e transpila para ES5 usando Babel). Para carregar arquivos .mdx com Webpack em Next.js, é usado o arquivo mdx-js/loader.

O rico ecossistema de plugins de observação/rehype pode ser chamado para obter ajuda por mdx-js/loader para uma transformação de grãos finos de markdown para html.

Componentes estilizados: Embora haja uma infinidade de maneiras de escrever CSS no Next.js, escolhemos componentes estilizados. Com componentes estilizados, somos capazes de criar estilos de componentes de uma forma mais colocada, modular, acoplada e menos intrusiva. Saiba como usar componentes estilizados no React ou explore o Happy Path de componentes estilizados para obter mais informações sobre componentes estilizados.

Algolia: Atualizamos para a versão mais recente do DocSearch v3, que é construído sobre o Algolia Autocomplete, fornecendo melhorias na acessibilidade e capacidade de resposta, proporcionando uma experiência mais suave tanto em dispositivos desktop quanto em dispositivos móveis. Juntamente com isso é o Algolia Crawler para extrair as informações mais relevantes ao realizar sua pesquisa.

Prisma: Prisma é o marcador de sintaxe de código bem testado e confiável. Não é apenas mais fácil começar, ele também tem um ecossistema de plugins rico, e é extensível com padrões sensatos para operações como o theming.

Caraterísticas

Enquanto o redesign apresenta uma grande mudança cosmética no valor facial, existem outros recursos como:

Uma nova página inicial com detalhes importantes

Comece com os quatro pilares da plataforma Layer0/Edgio e construa seu caminho para cima e para mais recursos que Layer0/Edgio tem para oferecer.

Theming

Alternar entre temas é apenas um clique de distância. Passe do modo claro para o modo escuro ou vice-versa ou deixe o seu sistema operativo decidir.

Navegação melhorada

Os dois principais modos de navegação – menu (à esquerda) e tabela de conteúdo (à direita) – foram redesenhados para uma melhor navegação e digitalização. Um novo controle de paginação (na parte inferior) ajuda você a saber qual guia é o próximo e qual vem antes.

Blocos de código melhorados

Com PrismJS, realce e personalização de sintaxe é simples.

Pesquisa melhorada

A busca de Algolia foi atualizada para v3, o que nos dá muito mais controle sobre o conteúdo indexado para resultados. Isso também funciona em dispositivos móveis.

Mas espere, há mais

O React beta docs repo tem muito a acontecer, e conseguimos aproveitar o poder do open-source aqui. Há algumas coisas que ficamos quase fora da caixa, como tabela de conteúdo, paginação de documentos, breadcrumbs, SEO etc. Alguns desses nós nos ajustamos para melhor servir nosso contexto, e alguns ainda estamos explorando.

Contribuindo

Para nós, esta é a nova documentação é um passo na direção certa e no início de um novo começo. Queremos que você se junte a nós nesta jornada enquanto continuamos a ajudá-lo a tornar seus sites mais rápidos e seguros sem comprometer a experiência do desenvolvedor. O código-fonte para os documentos do desenvolvedor Layer0 está em um repositório aberto no GitHub e recebemos feedback e solicitações de recebimento. Se você encontrou um erro de digitação ou uma maneira melhor de explicar algo, por favor, envie um pull request ou envie um problema! Além disso, veja nossas diretrizes de contribuição.