@webstir-io/webstir 0.1.0

package/assets/templates/ssg/src/frontend/app/scripts/components/menu.ts

@@ -0,0 +1,75 @@
+import { createDrawer } from './drawer.js';
+
+const menu = document.querySelector<HTMLElement>('[data-app-menu]');
+const toggle = menu?.querySelector<HTMLButtonElement>('.app-menu__toggle');
+
+function resolveBackdrop(root: HTMLElement | null): HTMLElement | null {
+  if (!root) {
+    return null;
+  }
+
+  const existing = root.querySelector<HTMLElement>('.ws-drawer-backdrop')
+    ?? document.querySelector<HTMLElement>('[data-drawer="menu"]');
+  if (existing) {
+    return existing;
+  }
+
+  const created = document.createElement('div');
+  created.className = 'ws-drawer-backdrop';
+  created.setAttribute('data-drawer', 'menu');
+  created.setAttribute('data-drawer-close', '');
+  created.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(created);
+  return created;
+}
+
+const backdrop = resolveBackdrop(menu);
+
+if (menu && toggle) {
+  const mobileQuery = window.matchMedia('(max-width: 40rem)');
+
+  const drawer = createDrawer({
+    root: menu,
+    openAttribute: null,
+    openClass: 'is-open',
+    bodyClass: 'webstir-menu-open',
+    overlay: {
+      headerSelector: '.app-header',
+      target: backdrop ?? document.body,
+      varName: '--ws-drawer-top'
+    },
+    isActive: () => mobileQuery.matches,
+    closeOnEscape: true,
+    closeOnOutside: true,
+    closeSelectors: ['.app-nav a', '.app-nav button:not([data-docs-folder])', '[data-drawer-close]'],
+    onOpen: () => toggle.setAttribute('aria-expanded', 'true'),
+    onClose: () => toggle.setAttribute('aria-expanded', 'false')
+  });
+
+  const syncMode = () => {
+    if (!mobileQuery.matches) {
+      drawer.close();
+      return;
+    }
+
+    drawer.close();
+    drawer.syncOverlayOffset();
+  };
+
+  syncMode();
+  mobileQuery.addEventListener('change', syncMode);
+
+  toggle.addEventListener('click', () => {
+    if (!mobileQuery.matches) {
+      return;
+    }
+
+    drawer.toggle();
+  });
+
+  window.addEventListener('resize', () => {
+    if (drawer.isOpen() && mobileQuery.matches) {
+      drawer.syncOverlayOffset();
+    }
+  });
+}

package/assets/templates/ssg/src/frontend/app/styles/base.css

@@ -0,0 +1,77 @@
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
+
+  html {
+    scroll-padding-top: calc(
+      var(--ws-header-sticky-offset, 0px) + var(--ws-space-4)
+    );
+  }
+
+  body {
+    font-family: var(--ws-font-sans);
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--ws-fg);
+    background: var(--ws-bg);
+    padding-top: var(--ws-header-sticky-offset, 0px);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--ws-fg);
+    line-height: 1.25;
+    margin: 0 0 0.5rem 0;
+  }
+
+  p {
+    margin: 0 0 1rem 0;
+  }
+
+  a {
+    color: var(--ws-accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  a:hover {
+    text-decoration-thickness: 0.12em;
+  }
+
+  a:focus-visible {
+    outline: 3px solid var(--ws-focus);
+    outline-offset: 2px;
+    border-radius: var(--ws-radius-1);
+  }
+
+  code {
+    font-family: var(--ws-font-mono);
+    font-size: 0.95em;
+    padding: 0.12em 0.4em;
+    border-radius: var(--ws-radius-1);
+    border: 1px solid var(--ws-border);
+    background: rgba(17, 24, 39, 0.06);
+    background: color-mix(in srgb, var(--ws-fg) 6%, transparent);
+  }
+
+  pre {
+    padding: 12px 14px;
+    border-radius: var(--ws-radius-2);
+    border: 1px solid var(--ws-border);
+    background: rgba(17, 24, 39, 0.04);
+    background: color-mix(in srgb, var(--ws-fg) 4%, transparent);
+    overflow-x: auto;
+  }
+
+  pre code {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/components/buttons.css

@@ -0,0 +1,108 @@
+@layer components {
+  /* Buttons */
+  :where([data-ui="btn"]),
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ws-space-3) var(--ws-space-4);
+    border-radius: var(--ws-radius-2);
+    border: 1px solid var(--ws-border);
+    background: var(--ws-bg);
+    color: var(--ws-fg);
+    text-decoration: none;
+    font-weight: 650;
+    transition: background-color 120ms ease, border-color 120ms ease, filter 120ms ease;
+    cursor: pointer;
+  }
+
+  .ws-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ws-header-control-size, 2.6rem);
+    height: var(--ws-header-control-size, 2.6rem);
+    padding: 0;
+    border-radius: var(--ws-radius-1);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--ws-fg);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 140ms ease, border-color 140ms ease;
+  }
+
+  .ws-icon-button svg {
+    width: var(--ws-icon-size, 20px);
+    height: var(--ws-icon-size, 20px);
+  }
+
+  .ws-icon-button:hover {
+    background: rgba(17, 24, 39, 0.04);
+  }
+
+  [data-theme="dark"] .ws-icon-button:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .ws-icon-button:focus-visible {
+    outline: 0.1875rem solid var(--ws-focus);
+    outline-offset: 0.125rem;
+    border-radius: var(--ws-radius-1);
+  }
+
+  .ws-icon-button[aria-expanded="true"] {
+    border-color: rgba(37, 99, 235, 0.35);
+    background: rgba(37, 99, 235, 0.06);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ws-icon-button {
+      transition: none;
+    }
+  }
+
+  :where([data-ui="btn"]):focus-visible,
+  .button:focus-visible {
+    outline: 0.1875rem solid var(--ws-focus);
+    outline-offset: 0.125rem;
+  }
+
+  :where([data-ui="btn"]):hover,
+  .button:hover {
+    text-decoration: none;
+    background: rgba(17, 24, 39, 0.03);
+  }
+
+  :where([data-ui="btn"][data-variant="solid"][data-tone="accent"]),
+  .button--primary {
+    background: var(--ws-accent);
+    color: #ffffff;
+    border-color: var(--ws-accent);
+  }
+
+  :where([data-ui="btn"][data-variant="solid"][data-tone="accent"]):hover,
+  .button--primary:hover {
+    background: var(--ws-accent-hover);
+    border-color: var(--ws-accent-hover);
+  }
+
+  :where([data-ui="btn"][data-variant="ghost"]) {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :where([data-ui="btn"][data-variant="ghost"]):hover {
+    background: rgba(17, 24, 39, 0.04);
+  }
+
+  :where([data-ui="btn"][data-size="sm"]) {
+    padding: var(--ws-space-2) var(--ws-space-3);
+    font-size: 0.95rem;
+  }
+
+  :where([data-ui="btn"][data-size="lg"]) {
+    padding: 0.875rem 1.125rem;
+    font-size: 1.05rem;
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/components/drawer.css

@@ -0,0 +1,12 @@
+@layer components {
+  .ws-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    top: var(--ws-drawer-top, 0px);
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(0.75rem);
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/components/header.css

@@ -0,0 +1,164 @@
+@layer components {
+  /* App header + primary nav */
+  .app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 30;
+    border-bottom: 1px solid var(--ws-border);
+    background: var(--ws-bg);
+  }
+
+  .app-header__inner {
+    --ws-container: var(--ws-shell-container, var(--ws-container));
+    display: flex;
+    align-items: center;
+    gap: var(--ws-space-5);
+    padding-block: var(--ws-header-block-padding, var(--ws-space-3));
+    position: relative;
+  }
+
+  .app-brand {
+    flex: 0 0 auto;
+    color: var(--ws-fg);
+    text-decoration: none;
+    font-weight: 700;
+  }
+
+  .app-brand:hover {
+    text-decoration: none;
+  }
+
+  .app-brand:focus-visible {
+    outline: 0.1875rem solid var(--ws-focus);
+    outline-offset: 0.125rem;
+    border-radius: var(--ws-radius-2);
+  }
+
+  .app-menu {
+    margin-left: auto;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--ws-space-2);
+  }
+
+
+  .app-menu__toggle.ws-icon-button {
+    display: none;
+  }
+
+  .app-menu__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    opacity: 0.9;
+  }
+
+  .app-menu__icon svg {
+    width: var(--ws-icon-size, 20px);
+    height: var(--ws-icon-size, 20px);
+  }
+
+  .app-menu__icon--close {
+    display: none;
+  }
+
+  .app-nav {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--ws-space-2);
+    min-width: 0;
+    order: 0;
+  }
+
+  .webstir-search__trigger {
+    order: 1;
+  }
+
+  .app-theme-toggle {
+    order: 2;
+  }
+
+  .app-menu__toggle {
+    order: 3;
+  }
+
+  .app-nav a {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--ws-header-control-size, 2.6rem);
+    color: var(--ws-fg);
+    text-decoration: none;
+    font-weight: 600;
+    padding: 0.5rem 0.625rem;
+    border-radius: var(--ws-radius-1);
+  }
+
+  .app-nav a:hover {
+    text-decoration: none;
+    background: rgba(17, 24, 39, 0.04);
+  }
+
+  .app-nav a:focus-visible {
+    outline: 0.1875rem solid var(--ws-focus);
+    outline-offset: 0.125rem;
+    border-radius: var(--ws-radius-1);
+  }
+
+  @media (max-width: 40rem) {
+    body.webstir-menu-open {
+      overflow: hidden;
+    }
+
+    .app-menu__toggle.ws-icon-button {
+      display: inline-flex;
+    }
+
+    .webstir-search__trigger {
+      order: -1;
+    }
+
+    .app-nav {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      flex-wrap: nowrap;
+      gap: var(--ws-space-1);
+    }
+
+    .app-menu.is-open .app-nav {
+      position: absolute;
+      inset-inline: 0;
+      top: 100%;
+      display: flex;
+      padding: var(--ws-space-2);
+      border: 1px solid var(--ws-border);
+      background: var(--ws-bg);
+      box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.28);
+      z-index: 20;
+    }
+
+    body.webstir-menu-open .ws-drawer-backdrop[data-drawer="menu"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .app-menu.is-open .app-menu__icon--open {
+      display: none;
+    }
+
+    .app-menu.is-open .app-menu__icon--close {
+      display: inline-flex;
+    }
+
+    .app-menu.is-open .app-nav a,
+    .app-menu.is-open .app-nav button {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/components/markdown.css

@@ -0,0 +1,25 @@
+@layer components {
+  /* Markdown content pages (main > article) */
+  main > article {
+    max-width: var(--ws-container);
+    margin: 0 auto;
+    padding: 3rem var(--ws-container-pad, 1rem) 6rem;
+  }
+
+  main > article h1 {
+    margin-bottom: 1rem;
+  }
+
+  main > article h2 {
+    margin-top: 2rem;
+  }
+
+  main > article ul,
+  main > article ol {
+    padding-left: 1.25rem;
+  }
+
+  main > article li {
+    margin: 0.625rem 0;
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/layout.css

@@ -0,0 +1,41 @@
+@layer layout {
+  .ws-container {
+    width: 100%;
+    max-width: var(--ws-container);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: max(var(--ws-container-pad, var(--ws-space-4)), env(safe-area-inset-left));
+    padding-right: max(var(--ws-container-pad, var(--ws-space-4)), env(safe-area-inset-right));
+  }
+
+  .ws-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ws-gap, var(--ws-space-6));
+  }
+
+  .ws-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ws-gap, var(--ws-space-3));
+  }
+
+  .ws-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ws-grid-min, 16rem)), 1fr));
+    gap: var(--ws-gap, var(--ws-space-4));
+  }
+
+  .ws-sidebar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ws-gap, var(--ws-space-6));
+  }
+
+  @media (min-width: 48rem) {
+    .ws-sidebar {
+      grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--ws-sidebar, 20rem));
+    }
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/reset.css

@@ -0,0 +1,56 @@
+@layer reset {
+  /* Basic CSS Reset */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  ul[role='list'],
+  ol[role='list'] {
+    list-style: none;
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  img,
+  picture {
+    max-width: 100%;
+    display: block;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/tokens.css

@@ -0,0 +1,72 @@
+@layer tokens {
+  :root {
+    color-scheme: light;
+
+    --ws-bg: #ffffff;
+    --ws-fg: #111827;
+    --ws-muted: #6b7280;
+    --ws-border: #e5e7eb;
+
+    --ws-accent: #2563eb;
+    --ws-accent-hover: #1d4ed8;
+    --ws-focus: rgba(37, 99, 235, 0.35);
+
+    --ws-radius-1: 8px;
+    --ws-radius-2: 10px;
+    --ws-radius-3: 12px;
+
+    --ws-gutter: clamp(1rem, 2.4vw, 2rem);
+    --ws-container-pad: calc(var(--ws-gutter) + var(--ws-space-2));
+
+    --ws-header-control-size: 2.6rem;
+    --ws-icon-size: 20px;
+    --ws-header-block-padding: var(--ws-space-3);
+    --ws-header-sticky-offset: calc(
+      var(--ws-header-control-size) + (var(--ws-header-block-padding) * 2) + 1px
+    );
+    --ws-sticky-gap: var(--ws-space-4);
+
+    /* Layout sizing (prefer rem for consistency across zoom/devices) */
+    --ws-container: 72rem;
+    --ws-shell-container: 80rem;
+    --ws-article: 72ch;
+    --ws-docs-sidebar: 16.25rem;
+    --ws-docs-toc: 15rem;
+
+    --ws-space-1: 0.25rem;
+    --ws-space-2: 0.5rem;
+    --ws-space-3: 0.75rem;
+    --ws-space-4: 1rem;
+    --ws-space-5: 1.25rem;
+    --ws-space-6: 1.5rem;
+    --ws-space-7: 1.75rem;
+    --ws-space-8: 2rem;
+
+    --ws-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+      Arial, sans-serif;
+    --ws-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+  }
+
+  @media (min-width: 68.75rem) {
+    :root {
+      --ws-container: 96rem;
+      --ws-shell-container: 104rem;
+      --ws-article: 88ch;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    --ws-bg: #0b1220;
+    --ws-fg: #e5e7eb;
+    --ws-muted: #94a3b8;
+    --ws-border: rgba(148, 163, 184, 0.24);
+
+    --ws-accent: #60a5fa;
+    --ws-accent-hover: #3b82f6;
+    --ws-focus: rgba(96, 165, 250, 0.35);
+  }
+}

package/assets/templates/ssg/src/frontend/app/styles/utilities.css

@@ -0,0 +1,14 @@
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/assets/templates/ssg/src/frontend/content/_sidebar.json

@@ -0,0 +1,14 @@
+{
+  "pages": [
+    {
+      "path": "/docs/content-pipeline/",
+      "title": "Content pipeline",
+      "order": 1
+    },
+    {
+      "path": "/docs/hosting/",
+      "title": "Deploying your site",
+      "order": 2
+    }
+  ]
+}