@beatzball/create-litro 0.3.0 → 0.4.1

package/dist/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`
@@ -102,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 {
@@ -110,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);
       }
     }
 
@@ -134,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}"
@@ -158,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/dist/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/dist/recipes/starlight/template/src/route-meta.ts

@@ -10,6 +10,7 @@
 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 s=localStorage.getItem("sl-theme");',
   'var t=s||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beatzball/create-litro",
-  "version": "0.3.0",
-  "description": "Create a new Litro app",
+  "version": "0.4.1",
+  "description": "Scaffold a new Litro app — fullstack SSR, Markdown blog, or docs site. Built on Lit web components and Nitro server.",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -15,6 +15,20 @@
   "bin": {
     "create-litro": "./dist/src/index.js"
   },
+  "keywords": [
+    "create",
+    "scaffold",
+    "cli",
+    "lit",
+    "web-components",
+    "fullstack",
+    "ssr",
+    "ssg",
+    "nitro",
+    "starter",
+    "template",
+    "typescript"
+  ],
   "devDependencies": {
     "@types/node": "^22.0.0",
     "typescript": "^5.7.3",

package/recipes/starlight/template/package.json

@@ -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/recipes/starlight/template/pages/docs/[slug].ts

@@ -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/recipes/starlight/template/public/styles/highlight.css

@@ -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/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,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>
     `;
   }