Skip to content
@staticbolt/docs

Layout

The project owns the layout. It links the project stylesheet, loads sv-accordion, and places the theme’s parts. This is the layout of this site, copy it to sources/layouts/document.layout.html and edit the names:

sources/layouts/document.layout.html
<!doctype html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="light dark" name="color-scheme" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <link bundle href="@styles/docs.css" rel="stylesheet" />
    <link type="image/svg" href="@assets/favicon.svg" rel="icon" />
    <meta content="Documentation theme for staticbolt sites: sidebar, search, code blocks, callouts, math, and diagrams." name="description" />
    <meta content="website" property="og:type" />
    <meta content="@staticbolt/docs" property="og:site_name" />
    <meta content="@staticbolt/docs" property="og:title" />
    <meta content="Documentation theme for staticbolt sites: sidebar, search, code blocks, callouts, math, and diagrams." property="og:description" />
    <meta content="summary" name="twitter:card" />
    <title>@staticbolt/docs</title>


    <!-- ::: sv-accordion: sidebar, mobile table of contents, collapsible callouts ::: -->
    <script src="@staticview/ui/accordion"></script>
  </head>


  <body>
    <a class="skip-content-link" href="">Skip to content</a>


    <part src="@staticbolt/docs/parts/header/header.part.html" title="@staticbolt/docs">
      <part slot="icons" src="@parts/social-icons/social-icons.part.html"></part>
    </part>


    <div class="markdown-layout">
      <part src="@staticbolt/docs/parts/sidebar/sidebar.part.html">
        <part slot="icons" src="@parts/social-icons/social-icons.part.html"></part>
      </part>


      <div class="markdown-wrapper">
        <part src="@staticbolt/docs/parts/table-of-content/table-of-content-mobile.part.html"></part>


        <div class="markdown-body">
          <main data-pagefind-body>
            <slot />
          </main>


          <footer>
            <part src="@staticbolt/docs/parts/pagination-links/pagination-links.part.html"></part>
          </footer>
        </div>
      </div>


      <part
        maxHeading="{{ $data.maxHeading ?? 3 }}"
        minHeading="{{ $data.minHeading ?? 2 }}"
        src="@staticbolt/docs/parts/table-of-content/table-of-content-desktop.part.html"
      ></part>
    </div>


    <part src="@staticbolt/docs/parts/callouts/callouts.part.html"></part>
    <part src="@staticbolt/docs/parts/mermaid/mermaid.part.html"></part>
  </body>
</html>


<!-- ::: Page title and skip link ::: -->
<script build-time>
  const heading = document.querySelector("h1[id]");
  const title = document.querySelector("title");
  const ogTitle = document.querySelector('meta[property="og:title"]');
  const skipContent = document.querySelector("a.skip-content-link");


  if (heading && title && heading.textContent !== title.textContent) {
    const fullTitle = `${heading.textContent} | ${title.textContent}`;
    title.textContent = fullTitle;
    ogTitle?.setAttribute("content", fullTitle);
  }


  if (heading && skipContent) {
    skipContent.setAttribute("href", `#${heading.id}`);
  }
</script>

Pieces

  • data-pagefind-body on <main> tells Pagefind what to index.
  • .markdown-layout, .markdown-wrapper, and .markdown-body carry the grid, the theme’s document.css styles them.
  • minHeading and maxHeading on the desktop table of contents default to 2 and 3 and can be set per page in front matter.
  • The build-time script at the end runs once per page and writes the page title into <title> and og:title.

Social icons

@parts/social-icons/social-icons.part.html is the project’s own part, one link per icon:

sources/parts/social-icons/social-icons.part.html
<div class="social-icon">
  <a href="https://codeberg.org/Plant/staticbolt-docs" target="_blank" title="Codeberg Repository">
    <svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M12.2399 7.22022C12.2271 7.22034 12.2146 7.22253 12.2031 7.22667C12.1916 7.2308 12.1816 7.23678 12.1735 7.24415C12.1655 7.25153 12.1596 7.26015 12.1565 7.26938C12.1534 7.27861 12.1528 7.28821 12.1551 7.29757L16.0106 21.7489C17.8759 20.9455 19.4528 19.5937 20.5315 17.873L12.3161 7.25228C12.3083 7.24241 12.2972 7.23426 12.2838 7.22863C12.2705 7.223 12.2553 7.22009 12.2399 7.22022Z"
        fill="var(--sb-color-gray-4)"
      />
      <path
        d="M11.9907 2.55933C6.46333 2.55933 1.98267 7.04001 1.98267 12.5672C1.98267 14.4474 2.51218 16.2896 3.51093 17.8827L11.8552 7.09529C11.915 7.01737 12.066 7.01737 12.1259 7.09529L20.4701 17.8831C21.4689 16.2899 21.9988 14.4476 21.9988 12.5672C21.9988 7.04001 17.5182 2.55933 11.9907 2.55933Z"
        fill="var(--sb-color-gray-0)"
      />
    </svg>
  </a>
</div>

Both icon slots are optional, drop the nested <part slot="icons"> to leave them empty.