@beatzball/create-litro 0.2.1 → 0.4.0

package/recipes/starlight/template/src/components/starlight-header.ts

@@ -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,31 +10,65 @@ 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 },
   };
 
   static override styles = css`
     :host {
       display: block;
-    }
-
-    header {
       position: sticky;
       top: 0;
       z-index: 100;
+    }
+
+    header {
       height: var(--sl-nav-height, 3.5rem);
       background-color: var(--sl-color-bg-nav, #fff);
       border-bottom: 1px solid var(--sl-color-border, #e8e8e8);
       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>
     `;
   }

package/recipes/starlight/template/src/components/starlight-page.ts

@@ -36,6 +36,7 @@ export class StarlightPage extends LitElement {
     currentSlug: { type: String },
     currentPath: { type: String },
     noSidebar:   { type: Boolean },
+    _navOpen:    { state: true },
   };
 
   static override styles = css`
@@ -86,8 +87,12 @@ export class StarlightPage extends LitElement {
 
     .toc-wrap {
       grid-area: toc;
-      padding: var(--sl-content-pad-y, 2rem) 0 var(--sl-content-pad-y, 2rem) var(--sl-content-pad-x, 1.5rem);
       border-left: 1px solid var(--sl-color-border, #e8e8e8);
+      position: sticky;
+      top: var(--sl-nav-height, 3.5rem);
+      height: calc(100vh - var(--sl-nav-height, 3.5rem));
+      overflow-y: auto;
+      padding: var(--sl-content-pad-y, 2rem) 0 var(--sl-content-pad-y, 2rem) var(--sl-content-pad-x, 1.5rem);
     }
 
     .page-title {
@@ -98,6 +103,14 @@ export class StarlightPage extends LitElement {
       line-height: 1.15;
     }
 
+    .nav-backdrop {
+      position: fixed;
+      inset: 0;
+      top: var(--sl-nav-height, 3.5rem);
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 49;
+    }
+
     /* Responsive: hide sidebar and TOC on narrow screens */
     @media (max-width: 72rem) {
       .body {
@@ -106,7 +119,20 @@ export class StarlightPage extends LitElement {
       }
 
       .sidebar-wrap {
-        display: none;
+        grid-area: unset;
+        position: fixed;
+        top: var(--sl-nav-height, 3.5rem);
+        left: 0;
+        z-index: 50;
+        height: calc(100vh - var(--sl-nav-height, 3.5rem));
+        width: var(--sl-sidebar-width, 16rem);
+        transform: translateX(-100%);
+        transition: transform 0.2s ease;
+        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12);
+      }
+
+      .sidebar-wrap.nav-open {
+        transform: translateX(0);
       }
     }
 
@@ -130,18 +156,40 @@ export class StarlightPage extends LitElement {
   currentSlug = '';
   currentPath = '';
   noSidebar = false;
+  _navOpen = false;
+
+  override updated(changed: Map<string, unknown>) {
+    if (changed.has('currentPath') && this._navOpen) {
+      this._navOpen = false;
+    }
+  }
+
+  private _handleNavToggle() {
+    this._navOpen = !this._navOpen;
+  }
+
+  private _closeNav() {
+    this._navOpen = false;
+  }
 
   override render() {
+    const hasSidebar = !this.noSidebar;
     return html`
       <div class="page-wrap">
         <starlight-header
           siteTitle="${this.siteTitle}"
           .nav="${this.nav}"
           currentPath="${this.currentPath}"
+          .navOpen="${this._navOpen}"
+          .hasSidebar="${hasSidebar}"
+          @sl-nav-toggle="${this._handleNavToggle}"
         ></starlight-header>
+        ${hasSidebar && this._navOpen ? html`
+          <div class="nav-backdrop" @click="${this._closeNav}"></div>
+        ` : ''}
         <div class="body${this.noSidebar ? ' no-sidebar' : ''}">
-          ${!this.noSidebar ? html`
-            <aside class="sidebar-wrap">
+          ${hasSidebar ? html`
+            <aside class="sidebar-wrap${this._navOpen ? ' nav-open' : ''}">
               <starlight-sidebar
                 .groups="${this.sidebar}"
                 currentSlug="${this.currentSlug}"
@@ -154,7 +202,7 @@ export class StarlightPage extends LitElement {
               <slot name="content"></slot>
             </div>
           </main>
-          ${!this.noSidebar ? html`
+          ${hasSidebar ? html`
             <aside class="toc-wrap">
               <starlight-toc .entries="${this.toc}"></starlight-toc>
             </aside>

package/recipes/starlight/template/src/highlight.ts

@@ -0,0 +1,40 @@
+import hljs from 'highlight.js';
+
+const NAMED_ENTITY_MAP: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+};
+
+function decodeEntities(str: string): string {
+  return str.replace(/&#x[0-9a-fA-F]+;|&#[0-9]+;|&amp;|&lt;|&gt;|&quot;|&#39;/g, m => {
+    if (m.startsWith('&#x')) return String.fromCodePoint(parseInt(m.slice(3, -1), 16));
+    if (m.startsWith('&#'))  return String.fromCodePoint(parseInt(m.slice(2, -1), 10));
+    return NAMED_ENTITY_MAP[m]!;
+  });
+}
+
+/**
+ * Post-processes an HTML string, replacing every
+ * <pre><code class="language-*">…</code></pre>
+ * with a syntax-highlighted version produced by highlight.js.
+ *
+ * Must be called server-side only (SSG build time).
+ */
+export function applyHighlighting(html: string): string {
+  return html.replace(
+    /<pre><code class="language-([^"]+)">([\s\S]*?)<\/code><\/pre>/g,
+    (_match, lang: string, encoded: string) => {
+      const code = decodeEntities(encoded);
+      let highlighted: string;
+      try {
+        highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;
+      } catch {
+        highlighted = hljs.highlightAuto(code).value;
+      }
+      return `<pre><code class="hljs language-${lang}">${highlighted}</code></pre>`;
+    },
+  );
+}

package/recipes/starlight/template/src/route-meta.ts

@@ -8,9 +8,12 @@
  *      from localStorage, preventing a flash of the wrong theme on reload.
  */
 export const starlightHead = [
+  '<link rel="stylesheet" href="/shoelace/themes/light.css" />',
   '<link rel="stylesheet" href="/styles/starlight.css" />',
+  '<link rel="stylesheet" href="/styles/highlight.css" />',
   '<script>(function(){',
-  'var t=localStorage.getItem("sl-theme")||"light";',
+  'var s=localStorage.getItem("sl-theme");',
+  'var t=s||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");',
   'document.documentElement.setAttribute("data-theme",t);',
   '})();</script>',
 ].join('');

package/recipes/starlight/template/vite.config.ts

@@ -3,7 +3,7 @@ import litroContentPlugin from '@beatzball/litro/vite';
 
 export default defineConfig({
   plugins: [litroContentPlugin()],
-  base: '/_litro/',
+  base: process.env.LITRO_BASE_PATH ? `${process.env.LITRO_BASE_PATH}/_litro/` : '/_litro/',
   resolve: {
     conditions: ['source', 'browser', 'module', 'import', 'default'],
   },

package/src/scaffold.test.ts

@@ -279,12 +279,12 @@ describe('scaffold', () => {
       expect(existsSync(join(targetDir, 'src/components/starlight-header.ts'))).toBe(true);
       expect(existsSync(join(targetDir, 'src/components/starlight-sidebar.ts'))).toBe(true);
       expect(existsSync(join(targetDir, 'src/components/starlight-toc.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-card.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-card-grid.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-badge.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-aside.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-tabs.ts'))).toBe(true);
-      expect(existsSync(join(targetDir, 'src/components/sl-tab-item.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-card.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-card-grid.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-badge.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-aside.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-tabs.ts'))).toBe(true);
+      expect(existsSync(join(targetDir, 'src/components/litro-tab-item.ts'))).toBe(true);
       // Content
       expect(existsSync(join(targetDir, 'content/docs/.11tydata.json'))).toBe(true);
       expect(existsSync(join(targetDir, 'content/docs/getting-started.md'))).toBe(true);