Front End

Imagens do site

Todas as imagens, incluindo ícones, favicon e elementos gerais estão em next/public.

Código CSS/HTML

Os códigos de configuração visual de elementos do site estão definidos em múltiplos locais:

Configurações globais

• Elementos HTML das páginas no blog (título, etc)
• Configurações de paginação
• Design do formulário de Contato (#form-hbspt)
• ...

Página principal

Dentro da página principal são definidos as diferentes seções, como CatalogNews (catálogo de novidades na BD+), e seus designs.

Páginas Strapi

Configurações globais das páginas do Blog (acredito, depois revisar).

Configurações específicas (elementos)

Explicação do Autor do design Atômico aqui

Átomos

Definição em Java Script dos menores componentes do site (Título, Botão, etc) que exporta um código em HTML

Exemplo: Markdown.js define a fonte em Lato, tamanho, etc, de todo código Markdown que aparece no site.

import { Box } from "@chakra-ui/react";
import { useState } from "react";
import showdown from "showdown";

export function Markdown({ children }) {
  const [converter, _] = useState(new showdown.Converter());
  return (
    <Box
      fontFamily="Lato"
      lineHeight="24px"
      letterSpacing="0.1em"
      fontWeight="400"
      fontSize="14px"
      textAlign="left"
      className="markdown"
      dangerouslySetInnerHTML={{
        __html: converter.makeHtml(children),
      }}
    />
  );
}

Moléculas

Define um conjunto específico que é composto de átomos, como Menu, Footer, etc.

Exemplo: Para construir o Menu, usamos átomos como Botão e Buscador, que são importados no início do arquivo Menu.js.

Templates

• É utilizado em algum lugar??