Interface — Visão Geral

Como esta documentação é construída por dentro: arquitetura em 3 camadas, convenções e fluxo pra adicionar página nova. É documentação puro front-end — HTML/CSS/JS estático, sem build step, servido localmente.

Arquitetura em 3 camadas +

Toda página HTML carrega 1 único script e o resto é injetado em runtime. Isso mantém cada página HTML curta — só conteúdo, sem boilerplate de head/nav/footer.

Camada	Arquivo	Responsabilidade
Esqueleto	`js/layout.js`	Injeta CSS, monta topbar/drawer/footer, gera breadcrumb, inicializa componentes
Estilo	`css/docs.css`	Todo o visual — cards, accordion, audio-player, TOC, etc.
Conteúdo	`pages/*/.html`	Só conteúdo — sem <head> próprio, sem nav, sem footer

layout.js — o cérebro +

É o ÚNICO <script> que cada HTML precisa carregar. Faz tudo:

Injeta CSS (docs.css, highlight.js, font-awesome)
Monta topbar + drawer lateral + content-inner + footer
Gera breadcrumb automaticamente a partir do path da URL
Monta o menu lateral a partir do array MENU definido no topo
Inicializa componentes (audio, carrossel, highlight, TOC, accordion)
Restaura estado (drawer aberto/fechado, tema, zoom) do localStorage

O array MENU no topo do arquivo descreve toda a navegação — cada grupo com subgrupos, items, parent, hidden, pasta. Quem manda na estrutura de páginas é esse array.

var MENU = [
    {
        grupo: 'FUNDAMENTOS',
        pagina: 'fundamentos.html',
        subgrupos: [
            { label: 'JAVA', href: '1-java/java.html', pasta: '1-java' },
            { label: 'SQL',  href: '2-sql/sql.html',   pasta: '2-sql' }
        ],
        pasta: '1-fundamentos'
    }
    // ...
];

docs.css — o visual +

Único stylesheet. Todo o visual mora aqui. Lista dos componentes reutilizáveis disponíveis:

Componente	Pra que serve
`home-grid` + `card`	Grid de cards clicáveis (variantes card-image e card-video)
`info-accordion`	Seções colapsáveis
`audio-player`	Player de áudio dos podcasts NotebookLM
`page-toc`	Table of Contents lateral
`xt-template`	Bloco de código com highlight customizado
`overview-box`	Box de destaque estilo Apple
`table-wrap`	Wrapper de tabela com scroll horizontal em mobile
`carousel`	Carrossel de imagens

pages/ — o conteúdo +

97 HTMLs organizados por tópico. Cada pasta é um grupo do menu, cada HTML é uma página.

documentacao/
├── index.html              ← hub raiz (cards principais)
├── grafo.html              ← grafo de páginas (vis-network)
├── css/docs.css            ← estilo único
├── js/layout.js            ← esqueleto único
└── pages/
    ├── 1-fundamentos/      ← Java, SQL, OSI, HTML/CSS/JS, Hardware, Git
    ├── 2-jasap/            ← framework Jasap (Manager, novo-modulo, crud)
    ├── 2-crud/             ← funcionalidades transversais
    ├── 3-nexus/            ← projeto Nexus
    ├── 7-interface/        ← esta meta-doc
    └── img-video/          ← vídeos dos cards do index

Cada pasta de página tem audio/ (m4a do NotebookLM) e img/ próprios — material auto-contido por página.

Convenções de naming +

Item	Padrão	Exemplo
Pasta numerada	`N-nome-kebab/`	`1-visao-geral/`
HTML da página	mesmo nome da pasta	`1-visao-geral.html`
Hub de grupo	`grupo.html` sem prefixo	`java.html`, `sql.html`
Áudio	`audio/nome.m4a`	`audio/visao-geral.m4a`
Imagens	`img/N.png` ou nome livre	`img/1.png`, `img/diagrama.png`

Páginas XT/Jasap usam o prefixo Departamento* nos exemplos de código; páginas de fundamentos (e esta meta-doc) usam nomes genéricos.

Adicionar uma página nova +

Criar a pasta numerada e o HTML com mesmo nome dentro de pages/<grupo>/
Subir audio/ e img/ dentro da pasta da página
No topo do HTML, único script: <script src="../../../js/layout.js"> — contar ../ até documentacao/
Adicionar entrada no array MENU de js/layout.js
Se for hub do grupo, adicionar card no index.html (card-image ou card-video)

O resto (head, breadcrumb, menu lateral, footer, highlight, TOC) é montado em runtime pelo layout.js.