Rota

As peças que são uma resposta inteira e não um pedaço de uma.

Cada exemplo funciona de verdade, mas as suas ligações não levam a lado nenhum. HTML mostra a marcação para copiar.

error-page

O corpo inteiro de uma resposta de erro: o estado, uma frase honesta, um caminho de volta e referências de 500 que um administrador pode usar.

404: não encontrado

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>Não encontrámos essa página</h1>
  <p rst-error-body>A ligação pode estar desatualizada ou a página pode ter mudado. Verifique o endereço ou volte ao início.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
  </p>
</div>

{{template "error-page" dict "Status" 404 "HomeHref" "/"}}

403: proibido

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>Não pode ver isto</h1>
  <p rst-error-body>A sua conta não tem acesso aqui. Se acha que devia ter, fale com quem gere este site.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
    <a rst-btn href="/posts">Voltar</a>
  </p>
</div>

{{template "error-page" dict "Status" 403 "HomeHref" "/" "BackHref" "/posts"}}

422: não processável

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>Não foi possível enviar</h1>
  <p rst-error-body>Algo no que foi enviado não estava certo. Volte atrás e tente de novo; nada foi guardado.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
    <a rst-btn href="/posts/1/edit">Voltar</a>
  </p>
</div>

{{template "error-page" dict
    "Status" 422
    "HomeHref" "/"
    "BackHref" "/posts/1/edit"}}

500: erro do servidor

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>Algo correu mal do nosso lado</h1>
  <p rst-error-body>A culpa não é sua. O problema foi registado. Tente de novo daqui a pouco; se continuar a acontecer, indique a referência abaixo.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
  </p>
  <p class="rst-mono" rst-error-ref dir="auto">Referência: k3f9tq</p>
</div>

{{template "error-page" dict "Status" 500 "HomeHref" "/" "Ref" "k3f9tq"}}

O 500 é o único estado com referência: quem opera o sistema pode procurá-la com grep nos registos.

503: indisponível

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>Estamos indisponíveis por instantes</h1>
  <p rst-error-body>O site está a ser atualizado ou está ocupado. Tente de novo dentro de um minuto.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
  </p>
</div>

{{template "error-page" dict "Status" 503 "HomeHref" "/"}}

Qualquer outro caso: o par genérico

Computador Telemóvel HTML Template

<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>Algo não está certo</h1>
  <p rst-error-body>Não foi possível concluir esse pedido. Volte atrás e tente de novo.</p>
  <p rst-error-cta>
    <a rst-btn="primary" href="/">Página inicial</a>
  </p>
</div>

{{template "error-page" dict "Status" 418 "HomeHref" "/"}}

Cinco estados estão redigidos no catálogo da framework. Um sexto recorre ao par genérico em vez de mostrar a quem lê o nome de uma chave que falta.

back-nav

A ligação para subir um nível, por cima de um ecrã de detalhe ou de edição.

Voltar a um registo

Computador Telemóvel HTML Template

<nav rst-back-nav>
  <a href="/orders/1">← Encomenda AB3PX</a>
</nav>

{{template "back-nav" dict "Href" "/orders/1" "Label" "Encomenda AB3PX"}}

locale-menu

O seletor de idioma: um menu details com formulários POST de um só campo para /_locale, para que a escolha fique no cookie de idioma e quem lê se mantenha no mesmo caminho.

Doze idiomas, com o atual destacado.

Computador Telemóvel HTML Template

<details rst-dropdown rst-locale name="rst-menus">
  <summary>
    Idioma
    <span rst-caret aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </span>
  </summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="en">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="en">English</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="ga">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="ga">Gaeilge</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="zh-Hans">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="zh-Hans">简体中文</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="es">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="es">Español</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="hi">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="hi">हिन्दी</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="pt-PT">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="pt-PT" aria-current="true">Português</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="bn">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="bn">বাংলা</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="ru">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="ru">Русский</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="ja">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="ja">日本語</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="yue">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="yue">廣東話</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="vi">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="vi">Tiếng Việt</button>
    </form>
    <form method="post" action="/_locale">
      <input type="hidden" name="locale" value="ar">
      <input type="hidden" name="return" value="/">
      <button type="submit" lang="ar">العربية</button>
    </form>
  </div>
</details>

{{template "locale-menu" dict "Items" .Locales "Return" "/"}}

Este envia para /_locale, por isso precisa de um servidor. Os seus Items vêm de rastrillo.LocaleItems(r). O seletor no cabeçalho desta página é a versão só com ligações.

scheme-menu

O seletor de esquema de cores: um menu details de formulários POST de um só campo para /_theme, para Claro, Escuro e Sistema, de modo que a escolha fica no cookie de esquema e o leitor continua na mesma página.

Três opções, com Escuro como atual.

Computador Telemóvel HTML Template

<details rst-dropdown rst-scheme name="rst-menus">
  <summary>
    Esquema de cores
    <span rst-caret aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </span>
  </summary>
  <div rst-dropdown-menu role="group" aria-label="Esquema de cores">
    <form method="post" action="/_theme">
      <input type="hidden" name="scheme" value="light">
      <input type="hidden" name="return" value="/">
      <button type="submit">Claro</button>
    </form>
    <form method="post" action="/_theme">
      <input type="hidden" name="scheme" value="dark">
      <input type="hidden" name="return" value="/">
      <button type="submit" aria-current="true">Escuro</button>
    </form>
    <form method="post" action="/_theme">
      <input type="hidden" name="scheme" value="system">
      <input type="hidden" name="return" value="/">
      <button type="submit">Sistema</button>
    </form>
  </div>
</details>

{{template "scheme-menu" dict "Scheme" "dark" "Return" "/"}}

Este envia para /_theme, por isso precisa de um servidor. O seu Scheme vem de rastrillo.SchemeFrom(r); ui.ForRequest transporta-o. O seletor na barra desta página é o da própria galeria.

api-tokens

A página de tokens a partir do PageData do apitoken: a revelação única, o formulário de criação, a lista e os botões de revogar.

Quatro tokens, dois deles ativos

Computador Telemóvel HTML Template

<div rst-tokens>
  <section rst-box>
    <form rst-form method="post" action="/tokens">
      <div rst-field>
        <label rst-field-label for="agent">Nome do agente</label>
        <input rst-input type="text" id="agent" name="agent" maxlength="40">
      </div>
      <label rst-switch>
        <input type="checkbox" name="for_self" value="on">
        <span rst-switch-track aria-hidden="true"></span>
        Este token é para mim, não para um agente
      </label>
      <fieldset rst-choice>
        <legend>Acesso</legend>
        <div rst-choice-cards>
          <label>
            <input type="radio" name="access" value="write" checked>
            <span>
              <span rst-choice-title>Leitura e escrita</span>
            </span>
          </label>
          <label>
            <input type="radio" name="access" value="read">
            <span>
              <span rst-choice-title>Só leitura</span>
            </span>
          </label>
        </div>
      </fieldset>
      <div rst-field>
        <label rst-field-label for="expiry">Expira</label>
        <select rst-input="short" id="expiry" name="expiry">
          <option value="30">30 dias</option>
          <option value="90" selected>90 dias</option>
          <option value="365">1 ano</option>
          <option value="never">Nunca</option>
        </select>
      </div>
      <div rst-form-foot>
        <button rst-btn="primary lg" type="submit">Criar token</button>
      </div>
    </form>
  </section>
  <div rst-card rst-tokens-list>
    <div rst-lrow="head">
      <span>Token</span>
      <span class="rst-m-hide">Acesso</span>
      <span class="rst-m-hide">Criado</span>
      <span class="rst-m-hide">Última utilização</span>
      <span class="rst-m-hide">Expira</span>
      <span></span>
      <span></span>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Claude para Grace Hopper</span>
        <small>
          <code>k3Jx9QpL2mWa</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Leitura e escrita</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span><time datetime="2026-08-11">2026-08-11</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span><time datetime="2026-10-31">2026-10-31</time></span>
      <span rst-tokens-state></span>
      <details rst-row-menu name="rst-menus">
        <summary aria-label="Ações para Claude para Grace Hopper">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
        </summary>
        <div rst-row-menu-panel>
          <form method="post" action="/tokens/revoke">
            <input type="hidden" name="id" value="k3Jx9QpL2mWa">
            <button type="submit">Revogar</button>
          </form>
        </div>
      </details>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Grace Hopper</span>
        <small>
          <code>Qm2vR8sT4xYb</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Só leitura</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span>Nunca</span>
      <span rst-tokens-state></span>
      <details rst-row-menu name="rst-menus">
        <summary aria-label="Ações para Grace Hopper">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
        </summary>
        <div rst-row-menu-panel>
          <form method="post" action="/tokens/revoke">
            <input type="hidden" name="id" value="Qm2vR8sT4xYb">
            <button type="submit">Revogar</button>
          </form>
        </div>
      </details>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Codex para Grace Hopper</span>
        <small>
          <code>Zp7wN1cH6kLd</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Leitura e escrita</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span>Nunca</span>
      <span rst-tokens-state><span rst-status rst-tone="neutral">Revogado</span></span>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Nightly import para Grace Hopper</span>
        <small>
          <code>Vb4tG9yK3nMe</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Só leitura</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span><time datetime="2026-08-11">2026-08-11</time></span>
      <span rst-tokens-state><span rst-status rst-tone="warning">Expirado</span></span>
    </div>
  </div>
  <div rst-tokens-revoke>
    <form method="post" action="/tokens/revoke-agent">
      <input type="hidden" name="agent" value="Claude">
      <button rst-btn type="submit">Revogar todos deste agente: Claude</button>
    </form>
    <form method="post" action="/tokens/revoke-all">
      <button rst-btn="danger" type="submit">Revogar todos os tokens</button>
    </form>
  </div>
</div>

{{template "api-tokens" dict "Page" .Page "Path" "/tokens"}}

Passe o que Handlers entrega a Render como Page, e o caminho da própria página como Path. Os formulários de revogar enviam para Path/revoke, Path/revoke-agent e Path/revoke-all; defina RevokePath, RevokeAgentPath ou RevokeAllPath para mudar um deles.

Acabado de criar: o segredo, mostrado uma vez

Computador Telemóvel HTML Template

<div rst-tokens>
  <div rst-callout rst-tone="positive" tabindex="-1" autofocus>
    <span rst-callout-ic aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
    </span>
    <div rst-callout-body>
      <strong>Copie este token agora. Não voltará a ser mostrado.</strong>
      <p>
        <code rst-tokens-secret>harbour_k3Jx9QpL2mWa_6bD2qK9xWz4rT8vN1mP3sL7yF5hJ0cG2aE4uB</code>
      </p>
    </div>
  </div>
  <section rst-box>
    <form rst-form method="post" action="/tokens">
      <div rst-field>
        <label rst-field-label for="agent">Nome do agente</label>
        <input rst-input type="text" id="agent" name="agent" maxlength="40">
      </div>
      <label rst-switch>
        <input type="checkbox" name="for_self" value="on">
        <span rst-switch-track aria-hidden="true"></span>
        Este token é para mim, não para um agente
      </label>
      <fieldset rst-choice>
        <legend>Acesso</legend>
        <div rst-choice-cards>
          <label>
            <input type="radio" name="access" value="write" checked>
            <span>
              <span rst-choice-title>Leitura e escrita</span>
            </span>
          </label>
          <label>
            <input type="radio" name="access" value="read">
            <span>
              <span rst-choice-title>Só leitura</span>
            </span>
          </label>
        </div>
      </fieldset>
      <div rst-field>
        <label rst-field-label for="expiry">Expira</label>
        <select rst-input="short" id="expiry" name="expiry">
          <option value="30">30 dias</option>
          <option value="90" selected>90 dias</option>
          <option value="365">1 ano</option>
          <option value="never">Nunca</option>
        </select>
      </div>
      <div rst-form-foot>
        <button rst-btn="primary lg" type="submit">Criar token</button>
      </div>
    </form>
  </section>
  <div rst-card rst-tokens-list>
    <div rst-lrow="head">
      <span>Token</span>
      <span class="rst-m-hide">Acesso</span>
      <span class="rst-m-hide">Criado</span>
      <span class="rst-m-hide">Última utilização</span>
      <span class="rst-m-hide">Expira</span>
      <span></span>
      <span></span>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Claude para Grace Hopper</span>
        <small>
          <code>k3Jx9QpL2mWa</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Leitura e escrita</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span><time datetime="2026-08-11">2026-08-11</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span><time datetime="2026-10-31">2026-10-31</time></span>
      <span rst-tokens-state></span>
      <details rst-row-menu name="rst-menus">
        <summary aria-label="Ações para Claude para Grace Hopper">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
        </summary>
        <div rst-row-menu-panel>
          <form method="post" action="/tokens/revoke">
            <input type="hidden" name="id" value="k3Jx9QpL2mWa">
            <button type="submit">Revogar</button>
          </form>
        </div>
      </details>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Grace Hopper</span>
        <small>
          <code>Qm2vR8sT4xYb</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Só leitura</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span>Nunca</span>
      <span rst-tokens-state></span>
      <details rst-row-menu name="rst-menus">
        <summary aria-label="Ações para Grace Hopper">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
        </summary>
        <div rst-row-menu-panel>
          <form method="post" action="/tokens/revoke">
            <input type="hidden" name="id" value="Qm2vR8sT4xYb">
            <button type="submit">Revogar</button>
          </form>
        </div>
      </details>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Codex para Grace Hopper</span>
        <small>
          <code>Zp7wN1cH6kLd</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Leitura e escrita</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span>Nunca</span>
      <span rst-tokens-state><span rst-status rst-tone="neutral">Revogado</span></span>
    </div>
    <div rst-lrow>
      <span class="rst-nm"><span rst-actor>Nightly import para Grace Hopper</span>
        <small>
          <code>Vb4tG9yK3nMe</code>
        </small>
      </span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Acesso</span>Só leitura</span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Criado</span><time datetime="2026-08-02">2026-08-02</time></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Última utilização</span></span>
      <span rst-tokens-fact><span rst-tokens-fact-label>Expira</span><time datetime="2026-08-11">2026-08-11</time></span>
      <span rst-tokens-state><span rst-status rst-tone="warning">Expirado</span></span>
    </div>
  </div>
  <div rst-tokens-revoke>
    <form method="post" action="/tokens/revoke-agent">
      <input type="hidden" name="agent" value="Claude">
      <button rst-btn type="submit">Revogar todos deste agente: Claude</button>
    </form>
    <form method="post" action="/tokens/revoke-all">
      <button rst-btn="danger" type="submit">Revogar todos os tokens</button>
    </form>
  </div>
</div>

{{template "api-tokens" dict "Page" .Page "Path" "/tokens"}}

Renderize a resposta do formulário de criação com Created definido, e não a redirecione: o segredo está nessa resposta e em mais lado nenhum.

Ainda não há tokens

Computador Telemóvel HTML Template

<div rst-tokens>
  <section rst-box>
    <form rst-form method="post" action="/tokens">
      <div rst-field>
        <label rst-field-label for="agent">Nome do agente</label>
        <input rst-input type="text" id="agent" name="agent" maxlength="40">
      </div>
      <label rst-switch>
        <input type="checkbox" name="for_self" value="on">
        <span rst-switch-track aria-hidden="true"></span>
        Este token é para mim, não para um agente
      </label>
      <fieldset rst-choice>
        <legend>Acesso</legend>
        <div rst-choice-cards>
          <label>
            <input type="radio" name="access" value="write" checked>
            <span>
              <span rst-choice-title>Leitura e escrita</span>
            </span>
          </label>
          <label>
            <input type="radio" name="access" value="read">
            <span>
              <span rst-choice-title>Só leitura</span>
            </span>
          </label>
        </div>
      </fieldset>
      <div rst-field>
        <label rst-field-label for="expiry">Expira</label>
        <select rst-input="short" id="expiry" name="expiry">
          <option value="30">30 dias</option>
          <option value="90" selected>90 dias</option>
          <option value="365">1 ano</option>
          <option value="never">Nunca</option>
        </select>
      </div>
      <div rst-form-foot>
        <button rst-btn="primary lg" type="submit">Criar token</button>
      </div>
    </form>
  </section>
  <div rst-empty>
    <p rst-empty-body>Ainda não há tokens.</p>
  </div>
</div>

{{template "api-tokens" dict "Page" .Page "Path" "/tokens"}}