@beatzball/create-litro 0.1.4 → 0.2.1

package/recipes/starlight/template/public/styles/starlight.css

@@ -0,0 +1,215 @@
+/* Starlight design tokens — light mode defaults */
+:root {
+  --sl-color-white: #fff;
+  --sl-color-black: #23262f;
+  --sl-color-gray-1: #f6f6f6;
+  --sl-color-gray-2: #e8e8e8;
+  --sl-color-gray-3: #bdbdbd;
+  --sl-color-gray-4: #757575;
+  --sl-color-gray-5: #4b4b4b;
+  --sl-color-gray-6: #2a2a2a;
+
+  --sl-color-accent: #7c3aed;
+  --sl-color-accent-high: #5b21b6;
+  --sl-color-accent-low: #ede9fe;
+
+  --sl-color-note: #1d4ed8;
+  --sl-color-tip: #15803d;
+  --sl-color-caution: #b45309;
+  --sl-color-danger: #b91c1c;
+
+  --sl-color-text: var(--sl-color-black);
+  --sl-color-text-accent: var(--sl-color-accent);
+  --sl-color-text-invert: var(--sl-color-white);
+  --sl-color-bg: var(--sl-color-white);
+  --sl-color-bg-sidebar: var(--sl-color-gray-1);
+  --sl-color-bg-nav: var(--sl-color-white);
+  --sl-color-bg-inline-code: var(--sl-color-gray-2);
+  --sl-color-border: var(--sl-color-gray-2);
+
+  --sl-font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --sl-font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
+
+  --sl-text-xs:   0.75rem;
+  --sl-text-sm:   0.875rem;
+  --sl-text-base: 1rem;
+  --sl-text-lg:   1.125rem;
+  --sl-text-xl:   1.25rem;
+  --sl-text-2xl:  1.5rem;
+  --sl-text-3xl:  1.875rem;
+  --sl-text-4xl:  2.25rem;
+
+  --sl-nav-height: 3.5rem;
+  --sl-sidebar-width: 16rem;
+  --sl-toc-width: 14rem;
+  --sl-content-width: 48rem;
+  --sl-content-pad-x: 1.5rem;
+  --sl-content-pad-y: 2rem;
+
+  --sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --sl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
+
+  --sl-border-radius: 0.375rem;
+  --sl-border-radius-sm: 0.25rem;
+}
+
+/* Dark mode overrides */
+[data-theme='dark'] {
+  --sl-color-text: #f0f0f0;
+  --sl-color-bg: #17181c;
+  --sl-color-bg-sidebar: #1e1f24;
+  --sl-color-bg-nav: #17181c;
+  --sl-color-bg-inline-code: #2a2b30;
+  --sl-color-border: #2e2f35;
+
+  --sl-color-gray-1: #2a2b30;
+  --sl-color-gray-2: #35363d;
+  --sl-color-gray-3: #5a5b63;
+  --sl-color-gray-4: #8a8b94;
+  --sl-color-gray-5: #c0c1cb;
+  --sl-color-gray-6: #e8e9f0;
+
+  --sl-color-accent: #a78bfa;
+  --sl-color-accent-high: #c4b5fd;
+  --sl-color-accent-low: #2e1b54;
+
+  --sl-color-note: #60a5fa;
+  --sl-color-tip: #4ade80;
+  --sl-color-caution: #fbbf24;
+  --sl-color-danger: #f87171;
+}
+
+/* Base reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--sl-font-sans);
+  font-size: var(--sl-text-base);
+  color: var(--sl-color-text);
+  background-color: var(--sl-color-bg);
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+/* Typography reset for content areas */
+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); }
+h2 { font-size: var(--sl-text-2xl); border-bottom: 1px solid var(--sl-color-border); padding-bottom: 0.25em; }
+h3 { font-size: var(--sl-text-xl); }
+h4 { font-size: var(--sl-text-lg); }
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  line-height: 1.7;
+}
+
+a {
+  color: var(--sl-color-text-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  font-family: var(--sl-font-mono);
+  font-size: 0.875em;
+  background-color: var(--sl-color-bg-inline-code);
+  border: 1px solid var(--sl-color-border);
+  border-radius: var(--sl-border-radius-sm);
+  padding: 0.15em 0.4em;
+}
+
+pre {
+  background-color: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-1);
+  border-radius: var(--sl-border-radius);
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  font-size: var(--sl-text-sm);
+  line-height: 1.6;
+}
+
+[data-theme='dark'] pre {
+  background-color: #0d0e11;
+  color: #e2e4e9;
+}
+
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: var(--sl-text-sm);
+}
+
+th, td {
+  border: 1px solid var(--sl-color-border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+th {
+  background-color: var(--sl-color-gray-1);
+  font-weight: 600;
+}
+
+[data-theme='dark'] th {
+  background-color: var(--sl-color-gray-1);
+}
+
+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);
+  background-color: var(--sl-color-accent-low);
+  border-radius: 0 var(--sl-border-radius) var(--sl-border-radius) 0;
+}
+
+[data-theme='dark'] blockquote {
+  background-color: var(--sl-color-accent-low);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--sl-color-border);
+  margin: 2rem 0;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

package/recipes/starlight/template/server/middleware/vite-dev.ts

@@ -0,0 +1,29 @@
+import { defineEventHandler, fromNodeMiddleware } from 'h3';
+
+let viteHandlerPromise: Promise<ReturnType<typeof fromNodeMiddleware>> | null = null;
+
+export default defineEventHandler(async (event) => {
+  if (!process.dev || !process.env.NITRO_DEV_WORKER_ID) return;
+
+  if (!viteHandlerPromise) {
+    const httpServer = (event.node.req.socket as import('node:net').Socket & {
+      server?: import('node:http').Server;
+    }).server;
+
+    viteHandlerPromise = import('vite')
+      .then(({ createServer }) =>
+        createServer({
+          server: {
+            middlewareMode: true,
+            hmr: httpServer ? { server: httpServer } : true,
+          },
+          appType: 'custom',
+          root: process.cwd(),
+        }),
+      )
+      .then((server) => fromNodeMiddleware(server.middlewares));
+  }
+
+  const viteHandler = await viteHandlerPromise;
+  return viteHandler(event);
+});

package/recipes/starlight/template/server/routes/[...].ts

@@ -0,0 +1,57 @@
+import { defineEventHandler, setResponseHeader, getRequestURL } from 'h3';
+import { createPageHandler } from '@beatzball/litro/runtime/create-page-handler.js';
+import type { LitroRoute } from '@beatzball/litro';
+import { routes, pageModules } from '#litro/page-manifest';
+
+function matchRoute(
+  pathname: string,
+): { route: LitroRoute; params: Record<string, string> } | undefined {
+  for (const route of routes) {
+    if (route.isCatchAll) return { route, params: {} };
+
+    if (!route.isDynamic) {
+      if (pathname === route.path) return { route, params: {} };
+      continue;
+    }
+
+    const regexStr =
+      '^' +
+      route.path
+        .replace(/:([^/]+)\(\.\*\)\*/g, '(?<$1>.+)')
+        .replace(/:([^/?]+)\?/g, '(?<$1>[^/]*)?')
+        .replace(/:([^/]+)/g, '(?<$1>[^/]+)') +
+      '$';
+
+    try {
+      const match = pathname.match(new RegExp(regexStr));
+      if (match) return { route, params: (match.groups ?? {}) as Record<string, string> };
+    } catch {
+      // malformed pattern — skip
+    }
+  }
+  return undefined;
+}
+
+export default defineEventHandler(async (event) => {
+  const pathname = getRequestURL(event).pathname;
+  const result = matchRoute(pathname);
+
+  if (!result) {
+    setResponseHeader(event, 'content-type', 'text/html; charset=utf-8');
+    return `<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8" /><title>404</title></head>
+<body><h1>404 — Not Found</h1><p>No page matched <code>${pathname}</code>.</p></body>
+</html>`;
+  }
+
+  const { route: matched, params } = result;
+  event.context.params = { ...event.context.params, ...params };
+
+  const mod = pageModules[matched.filePath];
+  const handler = createPageHandler({
+    route: matched,
+    routeMeta: (mod?.routeMeta as { title?: string; head?: string } | undefined),
+    pageModule: mod,
+  });
+  return handler(event);
+});

package/recipes/starlight/template/server/starlight.config.js

@@ -0,0 +1,29 @@
+export const siteConfig = {
+  title: '{{projectName}}',
+  description: 'Documentation and blog powered by Litro',
+  logo: null,
+  editUrlBase: null, // e.g. 'https://github.com/you/repo/edit/main'
+  nav: [
+    { label: 'Docs', href: '/docs/getting-started' },
+    { label: 'Blog', href: '/blog' },
+  ],
+  sidebar: [
+    {
+      label: 'Start Here',
+      items: [
+        { label: 'Getting Started', slug: 'getting-started' },
+        { label: 'Installation',    slug: 'installation' },
+        { label: 'Configuration',   slug: 'configuration' },
+      ],
+    },
+    {
+      label: 'Guides',
+      items: [
+        { label: 'Your First Page', slug: 'guides-first-page' },
+        { label: 'Deploying',       slug: 'guides-deploying' },
+      ],
+    },
+  ],
+};
+
+export default siteConfig;

package/recipes/starlight/template/src/components/sl-aside.ts

@@ -0,0 +1,91 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+type AsideType = 'note' | 'tip' | 'caution' | 'danger';
+
+const ICONS: Record<AsideType, string> = {
+  note:    '&#x2139;&#xFE0F;', // ℹ️
+  tip:     '&#x1F4A1;',        // 💡
+  caution: '&#x26A0;&#xFE0F;', // ⚠️
+  danger:  '&#x1F6A8;',        // 🚨
+};
+
+const LABELS: Record<AsideType, string> = {
+  note:    'Note',
+  tip:     'Tip',
+  caution: 'Caution',
+  danger:  'Danger',
+};
+
+/**
+ * <sl-aside type="tip" title="Custom Title">
+ *   Callout box with an icon and colored left border.
+ *   Slot content is the body.
+ * </sl-aside>
+ */
+@customElement('sl-aside')
+export class SlAside extends LitElement {
+  static override properties = {
+    type: { type: String },
+    title: { type: String },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .aside {
+      margin: 1.5rem 0;
+      padding: 1rem 1.25rem;
+      border-left: 4px solid;
+      border-radius: 0 var(--sl-border-radius, 0.375rem) var(--sl-border-radius, 0.375rem) 0;
+    }
+
+    .aside.note   { border-color: var(--sl-color-note, #1d4ed8);    background-color: color-mix(in srgb, var(--sl-color-note, #1d4ed8) 8%, transparent); }
+    .aside.tip    { border-color: var(--sl-color-tip, #15803d);     background-color: color-mix(in srgb, var(--sl-color-tip, #15803d) 8%, transparent); }
+    .aside.caution{ border-color: var(--sl-color-caution, #b45309); background-color: color-mix(in srgb, var(--sl-color-caution, #b45309) 8%, transparent); }
+    .aside.danger { border-color: var(--sl-color-danger, #b91c1c);  background-color: color-mix(in srgb, var(--sl-color-danger, #b91c1c) 8%, transparent); }
+
+    .aside-title {
+      display: flex;
+      align-items: center;
+      gap: 0.4em;
+      font-size: var(--sl-text-sm, 0.875rem);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      margin-bottom: 0.5rem;
+    }
+
+    .aside-title .icon { font-style: normal; }
+
+    .aside.note    .aside-title { color: var(--sl-color-note, #1d4ed8); }
+    .aside.tip     .aside-title { color: var(--sl-color-tip, #15803d); }
+    .aside.caution .aside-title { color: var(--sl-color-caution, #b45309); }
+    .aside.danger  .aside-title { color: var(--sl-color-danger, #b91c1c); }
+
+    ::slotted(p:last-child) { margin-bottom: 0; }
+  `;
+
+  type: AsideType = 'note';
+  title = '';
+
+  override render() {
+    const t = (['note', 'tip', 'caution', 'danger'].includes(this.type)
+      ? this.type
+      : 'note') as AsideType;
+    const label = this.title || LABELS[t];
+    return html`
+      <aside class="aside ${t}">
+        <p class="aside-title">
+          <em class="icon">${ICONS[t]}</em>
+          ${label}
+        </p>
+        <slot></slot>
+      </aside>
+    `;
+  }
+}
+
+export default SlAside;

package/recipes/starlight/template/src/components/sl-badge.ts

@@ -0,0 +1,76 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+type BadgeVariant = 'note' | 'tip' | 'caution' | 'danger' | 'default';
+
+/**
+ * <sl-badge variant="tip" text="New">
+ *   Inline color-coded chip. Use `text` attribute or slot content.
+ * </sl-badge>
+ */
+@customElement('sl-badge')
+export class SlBadge extends LitElement {
+  static override properties = {
+    variant: { type: String },
+    text: { type: String },
+  };
+
+  static override styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.15em 0.55em;
+      border-radius: 9999px;
+      font-size: var(--sl-text-xs, 0.75rem);
+      font-weight: 600;
+      line-height: 1.5;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .badge.note {
+      background-color: color-mix(in srgb, var(--sl-color-note, #1d4ed8) 15%, transparent);
+      color: var(--sl-color-note, #1d4ed8);
+    }
+
+    .badge.tip {
+      background-color: color-mix(in srgb, var(--sl-color-tip, #15803d) 15%, transparent);
+      color: var(--sl-color-tip, #15803d);
+    }
+
+    .badge.caution {
+      background-color: color-mix(in srgb, var(--sl-color-caution, #b45309) 15%, transparent);
+      color: var(--sl-color-caution, #b45309);
+    }
+
+    .badge.danger {
+      background-color: color-mix(in srgb, var(--sl-color-danger, #b91c1c) 15%, transparent);
+      color: var(--sl-color-danger, #b91c1c);
+    }
+
+    .badge.default {
+      background-color: var(--sl-color-accent-low, #ede9fe);
+      color: var(--sl-color-accent-high, #5b21b6);
+    }
+  `;
+
+  variant: BadgeVariant = 'default';
+  text = '';
+
+  override render() {
+    const cls = ['note', 'tip', 'caution', 'danger'].includes(this.variant)
+      ? this.variant
+      : 'default';
+    return html`
+      <span class="badge ${cls}">
+        ${this.text || html`<slot></slot>`}
+      </span>
+    `;
+  }
+}
+
+export default SlBadge;

package/recipes/starlight/template/src/components/sl-card-grid.ts

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-card-grid>
+ *   Responsive auto-fit grid for <sl-card> elements.
+ *   Single slot — place <sl-card> elements directly inside.
+ * </sl-card-grid>
+ */
+@customElement('sl-card-grid')
+export class SlCardGrid extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      counter-reset: card;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+      gap: 1.25rem;
+    }
+  `;
+
+  override render() {
+    return html`
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+export default SlCardGrid;

package/recipes/starlight/template/src/components/sl-card.ts

@@ -0,0 +1,91 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-card title="Feature" description="Short desc" href="/docs/feature">
+ *   Renders as an <a> when `href` is set, otherwise a <div>.
+ *   Rotating accent color per nth-card via CSS counter.
+ * </sl-card>
+ */
+@customElement('sl-card')
+export class SlCard extends LitElement {
+  static override properties = {
+    title: { type: String },
+    description: { type: String },
+    icon: { type: String },
+    href: { type: String },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+      counter-increment: card;
+    }
+
+    .card {
+      display: block;
+      padding: 1.25rem 1.5rem;
+      border: 1px solid var(--sl-color-border, #e8e8e8);
+      border-radius: var(--sl-border-radius, 0.375rem);
+      background-color: var(--sl-color-bg, #fff);
+      border-top: 4px solid;
+      text-decoration: none;
+      color: inherit;
+      transition: box-shadow 0.15s ease, transform 0.15s ease;
+    }
+
+    /* Rotate accent colors using counter — cycles through 4 variants */
+    :host(:nth-child(4n+1)) .card { border-top-color: var(--sl-color-accent, #7c3aed); }
+    :host(:nth-child(4n+2)) .card { border-top-color: var(--sl-color-note, #1d4ed8); }
+    :host(:nth-child(4n+3)) .card { border-top-color: var(--sl-color-tip, #15803d); }
+    :host(:nth-child(4n+0)) .card { border-top-color: var(--sl-color-caution, #b45309); }
+
+    a.card:hover {
+      box-shadow: var(--sl-shadow-md, 0 4px 16px rgba(0,0,0,.12));
+      transform: translateY(-2px);
+    }
+
+    .card-icon {
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .card-title {
+      font-size: var(--sl-text-lg, 1.125rem);
+      font-weight: 600;
+      color: var(--sl-color-text, #23262f);
+      margin: 0 0 0.4rem;
+    }
+
+    .card-desc {
+      font-size: var(--sl-text-sm, 0.875rem);
+      color: var(--sl-color-gray-4, #757575);
+      margin: 0;
+      line-height: 1.6;
+    }
+
+    .card-slot {
+      margin-top: 0.75rem;
+    }
+  `;
+
+  title = '';
+  description = '';
+  icon = '';
+  href = '';
+
+  override render() {
+    const inner = html`
+      ${this.icon ? html`<div class="card-icon">${this.icon}</div>` : ''}
+      <p class="card-title">${this.title}</p>
+      ${this.description ? html`<p class="card-desc">${this.description}</p>` : ''}
+      <div class="card-slot"><slot></slot></div>
+    `;
+
+    return this.href
+      ? html`<a class="card" href="${this.href}">${inner}</a>`
+      : html`<div class="card">${inner}</div>`;
+  }
+}
+
+export default SlCard;

package/recipes/starlight/template/src/components/sl-tab-item.ts

@@ -0,0 +1,35 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-tab-item label="Tab Label">
+ *   A single tab panel managed by a parent <sl-tabs> element.
+ *   Hidden automatically when not selected.
+ * </sl-tab-item>
+ */
+@customElement('sl-tab-item')
+export class SlTabItem extends LitElement {
+  static override properties = {
+    label: { type: String },
+    selected: { type: Boolean, reflect: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    :host(:not([selected])) {
+      display: none;
+    }
+  `;
+
+  label = '';
+  selected = false;
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+export default SlTabItem;