npm - @beatzball/create-litro - Versions diffs - 0.3.0 → 0.4.1 - Mend

@beatzball/create-litro 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,24 @@
 # create-litro
+## 0.4.1
+### Patch Changes
+- 619ec3c: feat(seo): inject seoHead and seoTitle from pageData into HTML shell
+  Pages can now return `seoHead` (a string of meta/JSON-LD tags) and `seoTitle` from `definePageData()`. The framework extracts these at request time and injects them into the actual `<head>` element of the HTML response — not buried in the `__litro_data__` JSON blob.
+  Also bumps the `h3` dependency to `>=1.15.6` to patch CVE GHSA-22cc-p3c6-wpvm.
+  Also improves npm discoverability: updated descriptions and keywords for all three packages, and rewrote the framework README with a Hello World example, comparison table, and SEO section.
+## 0.4.0
+### Minor Changes
+- 1cd1e7f: Add syntax highlighting to the starlight recipe. Code blocks in Markdown docs are now automatically highlighted at SSG build time using `highlight.js` with the fire palette theme (dark background, orange keywords, sky-blue strings, amber numbers). The `DocPage` component includes `static override styles` with all `.hljs-*` token rules so highlighting works correctly inside the Lit shadow DOM.
+- 1a84fad: Add responsive hamburger menu to the starlight recipe. A hamburger button appears to the left of the site logo on screens ≤72rem where the sidebar is hidden. Clicking it opens/closes the sidebar as a fixed drawer overlay with a backdrop. The nav auto-closes on route change.
 ## 0.3.0
 ### Minor Changes

package/LICENSE CHANGED Viewed

@@ -32,9 +32,10 @@
       not limited to compiled object code, generated documentation,
       and conversions to other media types.
-      "Work" shall mean the work of authorship made available under
-      the License, as indicated by a copyright notice that is included in
-      or attached to the work (an example is provided in the Appendix below).
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
       "Derivative Works" shall mean any work, whether in Source or Object
       form, that is based on (or derived from) the Work and for which the
@@ -44,21 +45,23 @@
       separable from, or merely link (or bind by name) to the interfaces of,
       the Work and Derivative Works thereof.
-      "Contribution" shall mean, as submitted to the Licensor for inclusion
-      in the Work by the copyright owner or by an individual or Legal Entity
-      authorized to submit on behalf of the copyright owner. For the purposes
-      of this definition, "submitted" means any form of electronic, verbal,
-      or written communication sent to the Licensor or its representatives,
-      including but not limited to communication on electronic mailing lists,
-      source code control systems, and issue tracking systems that are managed
-      by, or on behalf of, the Licensor for the purpose of discussing and
-      improving the Work, but excluding communication that is conspicuously
-      marked or otherwise designated in writing by the copyright owner as
-      "Not a Contribution."
-      "Contributor" shall mean Licensor and any Legal Entity on behalf of
-      whom a Contribution has been received by the Licensor and subsequently
-      incorporated within the Work.
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
    2. Grant of Copyright License. Subject to the terms and conditions of
       this License, each Contributor hereby grants to You a perpetual,
@@ -76,20 +79,20 @@
       by such Contributor that are necessarily infringed by their
       Contribution(s) alone or by combination of their Contribution(s)
       with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a cross-claim
-      or counterclaim in a lawsuit) alleging that the Work or any
-      Contribution incorporated within the Work constitutes direct or
-      contributory patent infringement, then any patent licenses granted to
-      You under this License for that Work shall terminate as of the date
-      such litigation is filed.
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
    4. Redistribution. You may reproduce and distribute copies of the
       Work or Derivative Works thereof in any medium, with or without
       modifications, and in Source or Object form, provided that You
       meet the following conditions:
-      (a) You must give any other recipients of the Work or Derivative
-          Works a copy of this License; and
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
       (b) You must cause any modified files to carry prominent notices
           stating that You changed the files; and
@@ -101,26 +104,28 @@
           the Derivative Works; and
       (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, You must include a readable copy of the
-          attribution notices contained within such NOTICE file, in
-          at least one of the following places: within a NOTICE text
-          file distributed as part of the Derivative Works; within
-          the Source form or documentation, if provided along with the
-          Derivative Works; or, within a display generated by the
-          Derivative Works, if and wherever such third-party notices
-          normally appear. The contents of the NOTICE file are for
-          informational purposes only and do not modify the License.
-          You may add Your own attribution notices within Derivative
-          Works that You distribute, alongside or in addition to the
-          NOTICE text from the Work, provided that such additional
-          attribution notices cannot be construed as modifying the License.
-      You may add Your own license statement for Your modifications and
-      may provide additional grant of rights to use, reproduce, modify,
-      and distribute Your modifications, or for such Derivative Works as
-      a whole, under terms and conditions of Your choice, provided Your
-      use, reproduction, modification, and distribution of the Work
-      otherwise complies with the conditions stated in this License.
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
    5. Submission of Contributions. Unless You explicitly state otherwise,
       any Contribution intentionally submitted for inclusion in the Work
@@ -142,7 +147,7 @@
       implied, including, without limitation, any warranties or conditions
       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
       PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or reproducing the Work and assume any
+      appropriateness of using or redistributing the Work and assume any
       risks associated with Your exercise of permissions under this License.
    8. Limitation of Liability. In no event and under no legal theory,
@@ -150,26 +155,37 @@
       unless required by applicable law (such as deliberate and grossly
       negligent acts) or agreed to in writing, shall any Contributor be
       liable to You for damages, including any direct, indirect, special,
-      incidental, or exemplary damages of any character arising as a
+      incidental, or consequential damages of any character arising as a
       result of this License or out of the use or inability to use the
       Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or all other
-      commercial damages or losses), even if such Contributor has been
-      advised of the possibility of such damages.
-   9. Accepting Warranty or Liability. While redistributing the Work or
-      Derivative Works thereof, You may choose to offer, and charge a fee
-      for, acceptance of support, warranty, indemnity, or other liability
-      obligations and/or rights consistent with this License. However, in
-      accepting such obligations, You may offer such obligations only on
-      Your own behalf and on Your sole responsibility, not on behalf of
-      any other Contributor, and only if You agree to indemnify, defend,
-      and hold each Contributor harmless for any liability incurred by, or
-      claims asserted against, such Contributor by reason of your accepting
-      any such warranty or additional liability.
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
    END OF TERMS AND CONDITIONS
+   APPENDIX: How to apply the Apache License to your work.
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
    Copyright 2026 beatzball
    Licensed under the Apache License, Version 2.0 (the "License");

package/dist/recipes/starlight/template/package.json CHANGED Viewed

@@ -15,6 +15,7 @@
   "dependencies": {
     "@beatzball/litro": "latest",
     "@shoelace-style/shoelace": "^2.19.0",
+    "highlight.js": "^11.10.0",
     "lit": "^3.2.1",
     "@lit-labs/ssr": "^3.3.0",
     "@lit-labs/ssr-client": "^1.1.7",

package/dist/recipes/starlight/template/pages/docs/[slug].ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, css } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement } from 'lit/decorators.js';
 import { LitroPage } from '@beatzball/litro/runtime';
@@ -8,6 +8,7 @@ import type { Post } from 'litro:content';
 import { getPosts } from 'litro:content';
 import { siteConfig } from '../../server/starlight.config.js';
 import { extractHeadings, addHeadingIds } from '../../src/extract-headings.js';
+import { applyHighlighting } from '../../src/highlight.js';
 import { starlightHead } from '../../src/route-meta.js';
 // Register components used in render()
@@ -55,7 +56,7 @@ export const pageData = definePageData(async (event) => {
   }
   const toc = extractHeadings(doc.rawBody);
-  const body = addHeadingIds(doc.body);
+  const body = applyHighlighting(addHeadingIds(doc.body));
   const { prevDoc, nextDoc } = computePrevNext(siteConfig.sidebar, slug);
   const editUrl = siteConfig.editUrlBase
     ? `${siteConfig.editUrlBase}/content/docs/${slug}.md`
@@ -89,6 +90,78 @@ export const routeMeta = {
 @customElement('page-docs-slug')
 export class DocPage extends LitroPage {
+  /**
+   * Styles injected into page-docs-slug's shadow root so they reach the
+   * <div slot="content"> subtree. Global stylesheets (starlight.css,
+   * highlight.css) cannot pierce shadow DOM boundaries.
+   */
+  static override styles = css`
+    /* ── Typography for slotted doc content ─────────────────────────── */
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 1.5em; margin-bottom: 0.5em;
+      font-weight: 600; line-height: 1.25;
+      color: var(--sl-color-text);
+    }
+    h1 { font-size: var(--sl-text-4xl, 2.25rem); }
+    h2 { font-size: var(--sl-text-2xl, 1.5rem); border-bottom: 1px solid var(--sl-color-border, #e8e8e8); padding-bottom: 0.25em; }
+    h3 { font-size: var(--sl-text-xl, 1.25rem); }
+    h4 { font-size: var(--sl-text-lg, 1.125rem); }
+    p  { margin-top: 0; margin-bottom: 1rem; line-height: 1.7; }
+    a  { color: var(--sl-color-text-accent, var(--sl-color-accent)); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    code {
+      font-family: var(--sl-font-mono, ui-monospace, monospace);
+      font-size: 0.875em;
+      background-color: var(--sl-color-bg-inline-code, #e8e8e8);
+      border: 1px solid var(--sl-color-border, #e8e8e8);
+      border-radius: 0.25rem;
+      padding: 0.15em 0.4em;
+    }
+    pre {
+      background-color: #0d0e11;
+      color: #e2e4e9;
+      border-radius: 0.375rem;
+      padding: 1rem 1.25rem;
+      overflow-x: auto;
+      margin: 1.5rem 0;
+      font-size: var(--sl-text-sm, 0.875rem);
+      line-height: 1.6;
+    }
+    pre code { background: none; border: none; padding: 0; font-size: inherit; }
+    ul, ol { padding-left: 1.5rem; margin: 0 0 1rem; }
+    li { margin-bottom: 0.25rem; line-height: 1.7; }
+    blockquote {
+      margin: 1.5rem 0; padding: 0.75rem 1rem;
+      border-left: 4px solid var(--sl-color-accent, #ea580c);
+      background-color: var(--sl-color-accent-low, #fff7ed);
+      border-radius: 0 0.375rem 0.375rem 0;
+    }
+    hr { border: none; border-top: 1px solid var(--sl-color-border, #e8e8e8); margin: 2rem 0; }
+    img { max-width: 100%; height: auto; }
+    table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--sl-text-sm, 0.875rem); }
+    th, td { border: 1px solid var(--sl-color-border, #e8e8e8); padding: 0.5rem 0.75rem; text-align: left; }
+    th { background-color: var(--sl-color-gray-1, #f6f6f6); font-weight: 600; }
+    /* ── highlight.js fire theme ─────────────────────────────────────── */
+    pre:has(.hljs) { background-color: #0d0d10; color: #cbd5e1; }
+    .hljs { color: #cbd5e1; background: transparent; }
+    .hljs-keyword, .hljs-selector-tag, .hljs-tag { color: #f97316; }
+    .hljs-string, .hljs-attr, .hljs-attribute { color: #38bdf8; }
+    .hljs-number, .hljs-literal { color: #fbbf24; }
+    .hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-built_in { color: #fb923c; }
+    .hljs-comment { color: #6b7280; font-style: italic; }
+    .hljs-variable, .hljs-params { color: #cbd5e1; }
+    .hljs-operator, .hljs-punctuation { color: #94a3b8; }
+    .hljs-meta, .hljs-meta .hljs-keyword { color: #38bdf8; }
+    .hljs-type { color: #fb923c; }
+    .hljs-deletion { color: #f87171; background: rgba(248,113,113,.1); }
+    .hljs-addition { color: #4ade80; background: rgba(74,222,128,.1); }
+    .hljs-section, .hljs-selector-class, .hljs-selector-id { color: #fb923c; }
+    .hljs-symbol, .hljs-bullet, .hljs-link { color: #38bdf8; }
+    .hljs-emphasis { font-style: italic; }
+    .hljs-strong { font-weight: bold; }
+  `;
   override render() {
     const data = this.serverData as DocPageData | null;
     if (!data?.doc) return html`<p>Loading&hellip;</p>`;

package/dist/recipes/starlight/template/public/styles/highlight.css ADDED Viewed

@@ -0,0 +1,108 @@
+/* highlight.js — fire theme (always dark background) */
+pre:has(.hljs) {
+  background-color: #0d0d10;
+  color: #cbd5e1;
+}
+[data-theme="dark"] pre:has(.hljs) {
+  background-color: #0d0d10;
+  color: #cbd5e1;
+}
+.hljs {
+  color: #cbd5e1;
+  background: transparent;
+}
+/* Keywords: const, let, if, class, return … */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag {
+  color: #f97316;
+}
+/* Strings and attribute values */
+.hljs-string,
+.hljs-attr,
+.hljs-attribute {
+  color: #38bdf8;
+}
+/* Numbers and boolean literals */
+.hljs-number,
+.hljs-literal {
+  color: #fbbf24;
+}
+/* Function/class names, built-ins */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.function_,
+.hljs-built_in {
+  color: #fb923c;
+}
+/* Comments */
+.hljs-comment {
+  color: #6b7280;
+  font-style: italic;
+}
+/* Variables and parameters */
+.hljs-variable,
+.hljs-params {
+  color: #cbd5e1;
+}
+/* Operators and punctuation */
+.hljs-operator,
+.hljs-punctuation {
+  color: #94a3b8;
+}
+/* Meta / imports / decorators */
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: #38bdf8;
+}
+/* Type annotations */
+.hljs-type {
+  color: #fb923c;
+}
+/* Diff deletions */
+.hljs-deletion {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.1);
+}
+/* Diff additions */
+.hljs-addition {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+}
+/* Section / selector */
+.hljs-section,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: #fb923c;
+}
+/* Symbol / bullet */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #38bdf8;
+}
+/* Emphasis */
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: bold;
+}

package/dist/recipes/starlight/template/src/components/starlight-header.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
 export interface NavItem {
   label: string;
@@ -10,12 +10,14 @@ export interface NavItem {
  * <starlight-header siteTitle="My Docs" .nav=${nav} currentPath="/docs/getting-started">
  *   Top navigation bar with site title, nav links, and dark/light theme toggle.
  */
-@customElement('starlight-header')
+@customElement("starlight-header")
 export class StarlightHeader extends LitElement {
   static override properties = {
     siteTitle: { type: String },
     nav: { type: Array },
     currentPath: { type: String },
+    navOpen: { type: Boolean },
+    hasSidebar: { type: Boolean },
     _theme: { type: String, state: true },
   };
@@ -34,7 +36,39 @@ export class StarlightHeader extends LitElement {
       display: flex;
       align-items: center;
       padding: 0 var(--sl-content-pad-x, 1.5rem);
-      gap: 1.5rem;
+      gap: 1rem;
+    }
+    .menu-btn {
+      display: none;
+      appearance: none;
+      background: none;
+      border: 1px solid var(--sl-color-border, #e8e8e8);
+      border-radius: var(--sl-border-radius, 0.375rem);
+      width: 2.25rem;
+      height: 2.25rem;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--sl-color-text, #23262f);
+      transition: background-color 0.15s;
+      flex-shrink: 0;
+      padding: 0;
+    }
+    .menu-btn:hover {
+      background-color: var(--sl-color-gray-2, #e8e8e8);
+    }
+    .menu-btn svg {
+      width: 1.1rem;
+      height: 1.1rem;
+    }
+    @media (max-width: 72rem) {
+      .menu-btn {
+        display: flex;
+      }
     }
     .site-title {
@@ -45,7 +79,9 @@ export class StarlightHeader extends LitElement {
       white-space: nowrap;
     }
-    .site-title:hover { opacity: 0.85; }
+    .site-title:hover {
+      opacity: 0.85;
+    }
     nav {
       display: flex;
@@ -61,7 +97,9 @@ export class StarlightHeader extends LitElement {
       color: var(--sl-color-gray-5, #4b4b4b);
       text-decoration: none;
       border-radius: var(--sl-border-radius, 0.375rem);
-      transition: color 0.15s, background-color 0.15s;
+      transition:
+        color 0.15s,
+        background-color 0.15s;
     }
     nav a:hover {
@@ -69,7 +107,7 @@ export class StarlightHeader extends LitElement {
       background-color: var(--sl-color-gray-2, #e8e8e8);
     }
-    nav a[aria-current='page'] {
+    nav a[aria-current="page"] {
       color: var(--sl-color-accent, #7c3aed);
       background-color: var(--sl-color-accent-low, #ede9fe);
     }
@@ -97,53 +135,111 @@ export class StarlightHeader extends LitElement {
     }
   `;
-  siteTitle = '';
+  siteTitle = "";
   nav: NavItem[] = [];
-  currentPath = '';
+  currentPath = "";
+  navOpen = false;
+  hasSidebar = false;
-  _theme = 'light';
+  _theme = "light";
   override firstUpdated() {
-    const stored = (typeof localStorage !== 'undefined'
-      ? localStorage.getItem('sl-theme')
-      : null) ?? 'light';
+    const stored =
+      (typeof localStorage !== "undefined"
+        ? localStorage.getItem("sl-theme")
+        : null) ?? "light";
     this._theme = stored;
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-theme', stored);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", stored);
     }
   }
   private _toggleTheme() {
-    const next = this._theme === 'light' ? 'dark' : 'light';
+    const next = this._theme === "light" ? "dark" : "light";
     this._theme = next;
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem('sl-theme', next);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem("sl-theme", next);
     }
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-theme', next);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", next);
     }
   }
+  private _toggleNav() {
+    this.dispatchEvent(
+      new CustomEvent("sl-nav-toggle", { bubbles: true, composed: true }),
+    );
+  }
   override render() {
-    const icon = this._theme === 'dark' ? '☀️' : '🌙';
-    const label = this._theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+    const icon = this._theme === "dark" ? "☀️" : "🌙";
+    const label =
+      this._theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
     return html`
       <header>
+        ${this.hasSidebar
+          ? html`
+              <button
+                class="menu-btn"
+                aria-label="${this.navOpen
+                  ? "Close navigation"
+                  : "Open navigation"}"
+                aria-expanded="${this.navOpen}"
+                @click="${this._toggleNav}"
+              >
+                ${this.navOpen
+                  ? html`
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        aria-hidden="true"
+                      >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
+                    `
+                  : html`
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        aria-hidden="true"
+                      >
+                        <line x1="3" y1="6" x2="21" y2="6" />
+                        <line x1="3" y1="12" x2="21" y2="12" />
+                        <line x1="3" y1="18" x2="21" y2="18" />
+                      </svg>
+                    `}
+              </button>
+            `
+          : ""}
         <a class="site-title" href="/">${this.siteTitle}</a>
         <nav aria-label="Main navigation">
-          ${this.nav.map(item => html`
-            <a
-              href="${item.href}"
-              aria-current="${this.currentPath.startsWith(item.href) ? 'page' : 'false'}"
-            >${item.label}</a>
-          `)}
+          ${this.nav.map(
+            (item) => html`
+              <a
+                href="${item.href}"
+                aria-current="${this.currentPath.startsWith(item.href)
+                  ? "page"
+                  : "false"}"
+                >${item.label}</a
+              >
+            `,
+          )}
         </nav>
         <button
           class="theme-toggle"
           aria-label="${label}"
           @click="${this._toggleTheme}"
-        >${icon}</button>
+        >
+          ${icon}
+        </button>
       </header>
     `;
   }