Identidade visual

A identidade visual controla os elementos que os leitores veem primeiro: logotipos, favicons e links de navegação. Tudo oferece variantes para os modos claro e escuro.

Logotipo

Adicione seu logotipo ao cabeçalho de navegação:

{
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp",
    "href": "https://yourcompany.com"
  }
}

Dimensões do logotipo

Os logotipos são exibidos com largura máxima de 120px. Para melhores resultados:

• Largura: 120-240px
• Altura: 30-40px
• Formato: SVG é recomendado

Favicon

Uma imagem para os dois modos:

{
  "favicon": "/images/favicon.svg"
}

Ou uma variante separada para cada modo:

{
  "favicon": {
    "light": "/images/favicon.svg",
    "dark": "/images/favicon-dark.svg"
  }
}

O favicon light é exibido no modo claro; dark é exibido no modo escuro. dark é opcional. Se omitido, light é usado nos dois modos. O Jamdesk gera um <link rel="icon"> para o favicon principal e um segundo link com media="(prefers-color-scheme: dark)" para a variante escura.

Formatos compatíveis: SVG, PNG, ICO.

Nome do site

O campo name aparece nas guias do navegador e nos resultados de busca:

{
  "name": "Acme Docs",
  "description": "Documentation for the Acme API"
}

Combine-o com uma description para que os resultados de busca e as prévias de links exibam um texto específico em vez de uma alternativa genérica.

Descrição

O campo description é o resumo de SEO padrão do seu site. Os mecanismos de busca o exibem abaixo do título do site, e as plataformas sociais o usam nas prévias de links:

{
  "description": "Build, ship, and scale documentation with the Acme platform."
}

Procure escrever de 50 a 160 caracteres para leitores que estão decidindo se clicam no link. Páginas que definem sua própria propriedade description no frontmatter usam esse valor; a descrição do site se aplica a todo o restante.

Links de navegação

Adicione links à barra de navegação:

{
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://yourcompany.com/blog" },
      { "label": "Pricing", "href": "https://yourcompany.com/pricing" }
    ],
    "primary": {
      "type": "button",
      "label": "Get Started",
      "href": "https://app.yourcompany.com/signup"
    }
  }
}

Opções de link

Botão principal

O campo primary cria um botão de chamada para ação em destaque:

{
  "primary": {
    "type": "button",
    "label": "Dashboard",
    "href": "https://app.yourcompany.com"
  }
}

Em tablets e computadores, os links e o botão principal aparecem no cabeçalho. Em celulares, não há espaço para eles no cabeçalho, então aparecem no menu, com o botão principal fixado na parte inferior. O Pulsar não exibe links de navegação nem o botão principal.

Rodapé

Adicione links de redes sociais e colunas de links personalizados ao rodapé da documentação.

Links sociais

Exiba ícones de redes sociais na parte inferior de cada página:

{
  "footer": {
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany",
      "discord": "https://discord.gg/yourserver",
      "linkedin": "https://linkedin.com/company/yourcompany"
    }
  }
}

Plataformas compatíveis

Colunas de links

Adicione grupos de links organizados acima dos ícones de redes sociais:

{
  "footer": {
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://yourcompany.com/blog" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "About", "href": "https://yourcompany.com/about" },
          { "label": "Careers", "href": "https://yourcompany.com/careers" }
        ]
      }
    ],
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany"
    }
  }
}

Ocultar o rodapé em páginas específicas

Use o frontmatter para ocultar o rodapé em páginas individuais:

---
title: Landing Page
hideFooter: true
---

Isso é útil em páginas de destino personalizadas ou páginas nas quais o rodapé causaria distração.

Identidade visual do Jamdesk

Por padrão, um link "Powered by Jamdesk" aparece no rodapé das páginas da sua documentação. Esse link ajuda outras equipes a descobrir o Jamdesk. Você pode removê-lo se preferir.

Ocultar a identidade visual

Para remover a identidade visual do Jamdesk:

1. Acesse Settings no seu dashboard do Jamdesk
2. Localize a seção Build Settings
3. Desative Show Jamdesk Branding
4. Inicie um novo build

Exemplo completo de identidade visual

Veja uma configuração completa de identidade visual:

{
  "name": "Acme Documentation",
  "description": "Build amazing products with Acme",
  "theme": "jam",
  "colors": {
    "primary": "#6366F1",
    "light": "#818CF8",
    "dark": "#4F46E5"
  },
  "favicon": "/images/favicon.svg",
  "logo": {
    "light": "/images/logo-dark.webp",
    "dark": "/images/logo-light.webp",
    "href": "https://acme.com"
  },
  "navbar": {
    "links": [
      { "label": "API", "href": "/api/overview" },
      { "label": "Blog", "href": "https://acme.com/blog" }
    ],
    "primary": {
      "type": "button",
      "label": "Sign Up",
      "href": "https://app.acme.com/signup"
    }
  },
  "footer": {
    "socials": {
      "github": "https://github.com/acme",
      "x": "https://x.com/acme",
      "discord": "https://discord.gg/acme"
    },
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://acme.com/blog" },
          { "label": "Status", "href": "https://status.acme.com" }
        ]
      }
    ]
  }
}

Domínio personalizado

Adicione seu domínio no dashboard do Jamdesk:

1. Acesse Settings → Domains
2. Adicione seu domínio (por exemplo, docs.yourcompany.com)
3. Configure o DNS conforme indicado
4. Aguarde a verificação

Sua documentação ficará disponível no domínio personalizado com SSL automático.

O que vem a seguir?