docs_page.html in HTML

A documentation page: skip link, sidebar, a table of contents, and content that reads in order.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Installing typestar - Docs</title>
    <meta name="description" content="Install typestar and run it locally.">
    <link rel="canonical" href="https://typestar.io/docs/install">
    <link rel="stylesheet" href="/docs.css">
  </head>
  <body>
    <a class="skip" href="#main">Skip to content</a>

    <header>
      <a href="/" class="brand">typestar</a>
      <nav aria-label="Primary">
        <a href="/docs">Docs</a>
        <a href="/tours">Tours</a>
        <a href="/changelog">Changelog</a>
      </nav>
      <search>
        <form action="/docs/search" method="get" role="search">
          <label for="q" class="visually-hidden">Search the docs</label>
          <input type="search" id="q" name="q" placeholder="Search">
        </form>
      </search>
    </header>

    <div class="shell">
      <nav aria-label="Documentation" class="sidebar">
        <h2>Getting started</h2>
        <ul>
          <li><a href="/docs/install" aria-current="page">Install</a></li>
          <li><a href="/docs/first-run">First run</a></li>
          <li><a href="/docs/tours">Tours</a></li>
        </ul>
      </nav>

      <main id="main">
        <nav aria-label="Breadcrumb">
          <ol>
            <li><a href="/docs">Docs</a></li>
            <li><a href="/docs/start">Getting started</a></li>
            <li aria-current="page">Install</li>
          </ol>
        </nav>

        <h1>Installing typestar</h1>
        <p>
          Published <time datetime="2026-07-30">30 July 2026</time> by
          <a href="/authors/ada">Ada Lovelace</a>.
        </p>

        <h2 id="requirements">Requirements</h2>
        <ul>
          <li>Python 3.11 or newer</li>
          <li>A terminal you like</li>
        </ul>

        <h2 id="install">Install</h2>
        <pre><code>pip install typestar
typestar serve --port 8080</code></pre>
        <p>It prints <samp>listening on 8080</samp> when it is ready.</p>

        <h2 id="troubleshooting">Troubleshooting</h2>
        <details name="trouble">
          <summary>The port is already in use</summary>
          <p>Pass <code>--port</code> with any free number.</p>
        </details>
        <details name="trouble">
          <summary>Nothing loads in the browser</summary>
          <p>Check that the address is <code>127.0.0.1</code>.</p>
        </details>
      </main>
    </div>

    <footer>
      <address>
        Questions: <a href="mailto:hi@typestar.io">hi@typestar.io</a>
      </address>
    </footer>
  </body>
</html>

How it works

The skip link is the first focusable thing on the page.
Two navs, each with its own label, so they are told apart.
The headings form the outline the table of contents mirrors.

The run, in numbers

Lines: 83
Characters to type: 2134
Tokens: 599
Three-star pace: 75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 479 seconds.

Type this snippet

Step 2 of 2 in Encore, step 28 of 28 in Document structure.

← Previous