@beatzball/create-litro 0.1.3 → 0.2.0

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;

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

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { SlTabItem } from './sl-tab-item.js';
+
+/**
+ * <sl-tabs>
+ *   <sl-tab-item label="First">Content A</sl-tab-item>
+ *   <sl-tab-item label="Second">Content B</sl-tab-item>
+ * </sl-tabs>
+ *
+ * Reads slotted <sl-tab-item> elements via the slotchange event.
+ * Renders a tab bar in Shadow DOM; clicking selects the tab.
+ */
+@customElement('sl-tabs')
+export class SlTabs extends LitElement {
+  static override properties = {
+    _labels: { type: Array, state: true },
+    _selectedIndex: { type: Number, state: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+      margin: 1.5rem 0;
+    }
+
+    .tab-bar {
+      display: flex;
+      gap: 0;
+      border-bottom: 2px solid var(--sl-color-border, #e8e8e8);
+      overflow-x: auto;
+    }
+
+    .tab-btn {
+      appearance: none;
+      background: none;
+      border: none;
+      padding: 0.5rem 1rem;
+      font: inherit;
+      font-size: var(--sl-text-sm, 0.875rem);
+      font-weight: 500;
+      cursor: pointer;
+      color: var(--sl-color-gray-4, #757575);
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+      white-space: nowrap;
+      transition: color 0.15s, border-color 0.15s;
+    }
+
+    .tab-btn:hover {
+      color: var(--sl-color-text, #23262f);
+    }
+
+    .tab-btn[aria-selected='true'] {
+      color: var(--sl-color-accent, #7c3aed);
+      border-bottom-color: var(--sl-color-accent, #7c3aed);
+    }
+
+    .tab-content {
+      padding-top: 1rem;
+    }
+  `;
+
+  _labels: string[] = [];
+  _selectedIndex = 0;
+
+  private _items(): SlTabItem[] {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return [];
+    return slot.assignedElements().filter(
+      (el): el is SlTabItem => el.tagName.toLowerCase() === 'sl-tab-item',
+    );
+  }
+
+  private _onSlotChange() {
+    const items = this._items();
+    this._labels = items.map((item) => item.label || `Tab ${items.indexOf(item) + 1}`);
+    this._selectIndex(this._selectedIndex < items.length ? this._selectedIndex : 0, items);
+  }
+
+  private _selectIndex(index: number, items?: SlTabItem[]) {
+    const all = items ?? this._items();
+    this._selectedIndex = index;
+    all.forEach((item, i) => {
+      item.selected = i === index;
+    });
+  }
+
+  override render() {
+    return html`
+      <div class="tab-bar" role="tablist">
+        ${this._labels.map((label, i) => html`
+          <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="${this._selectedIndex === i ? 'true' : 'false'}"
+            @click=${() => this._selectIndex(i)}
+          >${label}</button>
+        `)}
+      </div>
+      <div class="tab-content">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+export default SlTabs;

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

@@ -0,0 +1,152 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+export interface NavItem {
+  label: string;
+  href: string;
+}
+
+/**
+ * <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')
+export class StarlightHeader extends LitElement {
+  static override properties = {
+    siteTitle: { type: String },
+    nav: { type: Array },
+    currentPath: { type: String },
+    _theme: { type: String, state: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      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;
+    }
+
+    .site-title {
+      font-size: var(--sl-text-lg, 1.125rem);
+      font-weight: 700;
+      color: var(--sl-color-text, #23262f);
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .site-title:hover { opacity: 0.85; }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex: 1;
+    }
+
+    nav a {
+      padding: 0.35rem 0.75rem;
+      font-size: var(--sl-text-sm, 0.875rem);
+      font-weight: 500;
+      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;
+    }
+
+    nav a:hover {
+      color: var(--sl-color-text, #23262f);
+      background-color: var(--sl-color-gray-2, #e8e8e8);
+    }
+
+    nav a[aria-current='page'] {
+      color: var(--sl-color-accent, #7c3aed);
+      background-color: var(--sl-color-accent-low, #ede9fe);
+    }
+
+    .theme-toggle {
+      margin-left: auto;
+      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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 1rem;
+      color: var(--sl-color-text, #23262f);
+      transition: background-color 0.15s;
+      flex-shrink: 0;
+    }
+
+    .theme-toggle:hover {
+      background-color: var(--sl-color-gray-2, #e8e8e8);
+    }
+  `;
+
+  siteTitle = '';
+  nav: NavItem[] = [];
+  currentPath = '';
+
+  _theme = 'light';
+
+  override firstUpdated() {
+    const stored = (typeof localStorage !== 'undefined'
+      ? localStorage.getItem('sl-theme')
+      : null) ?? 'light';
+    this._theme = stored;
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', stored);
+    }
+  }
+
+  private _toggleTheme() {
+    const next = this._theme === 'light' ? 'dark' : 'light';
+    this._theme = next;
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('sl-theme', next);
+    }
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', next);
+    }
+  }
+
+  override render() {
+    const icon = this._theme === 'dark' ? '☀️' : '🌙';
+    const label = this._theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+
+    return html`
+      <header>
+        <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>
+          `)}
+        </nav>
+        <button
+          class="theme-toggle"
+          aria-label="${label}"
+          @click="${this._toggleTheme}"
+        >${icon}</button>
+      </header>
+    `;
+  }
+}
+
+export default StarlightHeader;