@commonpub/layer 0.1.0

package/server/utils/validate.ts

@@ -0,0 +1,82 @@
+/**
+ * API route validation helpers.
+ *
+ * Eliminates Zod .safeParse + createError boilerplate from 42+ route files.
+ */
+import type { H3Event } from 'h3';
+import type { ZodType } from 'zod';
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const SLUG_REGEX = /^[a-z0-9][a-z0-9-]*$/;
+
+type ParamType = 'uuid' | 'slug' | 'string';
+
+/** Parse and validate request body against a Zod schema. Throws 400 on failure. */
+export async function parseBody<T>(event: H3Event, schema: ZodType<T>): Promise<T> {
+  const body = await readBody(event);
+  const parsed = schema.safeParse(body);
+  if (!parsed.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Validation failed',
+      data: { errors: parsed.error.flatten().fieldErrors },
+    });
+  }
+  return parsed.data;
+}
+
+/** Parse and validate query string against a Zod schema. Throws 400 on failure. */
+export function parseQueryParams<T>(event: H3Event, schema: ZodType<T>): T {
+  const query = getQuery(event);
+  const parsed = schema.safeParse(query);
+  if (!parsed.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid query parameters',
+      data: { errors: parsed.error.flatten().fieldErrors },
+    });
+  }
+  return parsed.data;
+}
+
+/** Require a feature flag to be enabled. Throws 404 if disabled. */
+export function requireFeature(feature: string): void {
+  const config = useConfig();
+  const flags = config.features as unknown as Record<string, boolean>;
+  if (!flags[feature]) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+  }
+}
+
+/**
+ * Extract and validate route parameters.
+ *
+ * @example
+ * const { id } = parseParams(event, { id: 'uuid' });
+ * const { slug } = parseParams(event, { slug: 'slug' });
+ * const { siteSlug, pageId } = parseParams(event, { siteSlug: 'string', pageId: 'uuid' });
+ */
+export function parseParams<T extends Record<string, ParamType>>(
+  event: H3Event,
+  spec: T,
+): { [K in keyof T]: string } {
+  const result = {} as { [K in keyof T]: string };
+
+  for (const [name, type] of Object.entries(spec)) {
+    const value = getRouterParam(event, name);
+    if (!value) {
+      throw createError({ statusCode: 400, statusMessage: `Missing parameter: ${name}` });
+    }
+
+    if (type === 'uuid' && !UUID_REGEX.test(value)) {
+      throw createError({ statusCode: 400, statusMessage: `Invalid ${name} format` });
+    }
+    if (type === 'slug' && !SLUG_REGEX.test(value)) {
+      throw createError({ statusCode: 400, statusMessage: `Invalid ${name} format` });
+    }
+
+    (result as Record<string, string>)[name] = value;
+  }
+
+  return result;
+}

package/theme/base.css

@@ -0,0 +1,283 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Token Contract — base.css
+   Design: unified-v2 aesthetic + hack.build readability
+   Sharp corners, 2px borders, offset shadows,
+   JetBrains Mono labels, blue accent.
+   =========================================== */
+
+:root {
+  /* === SURFACES === */
+  --bg: #fafaf9;
+  --surface: #ffffff;
+  --surface2: #f4f4f2;
+  --surface3: #eaeae7;
+
+  /* Aliases for backwards compat */
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface2);
+  --color-surface-raised: var(--surface);
+  --color-surface-overlay: rgba(0, 0, 0, 0.5);
+  --color-surface-overlay-light: rgba(0, 0, 0, 0.4);
+  --color-surface-scrim: rgba(250, 250, 249, 0.75);
+  --color-surface-hover: var(--surface2);
+  --color-bg-subtle: var(--bg);
+
+  /* === TEXT === */
+  --text: #1a1a1a;
+  --text-dim: #6b6b66;
+  --text-faint: #a3a39e;
+
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-dim);
+  --color-text-muted: var(--text-faint);
+  --color-text-inverse: #ffffff;
+
+  /* === BORDERS === */
+  --border: #1a1a1a;
+  --border2: #d4d4d0;
+
+  --color-border: var(--border2);
+  --color-border-strong: var(--border);
+  --color-border-focus: var(--accent);
+
+  /* === ACCENT (blue) === */
+  --accent: #5b9cf6;
+  --accent-bg: rgba(91, 156, 246, 0.08);
+  --accent-bg-strong: rgba(91, 156, 246, 0.2);
+  --accent-bg-heavy: rgba(91, 156, 246, 0.4);
+  --accent-bg-solid: rgba(91, 156, 246, 0.6);
+  --accent-border: rgba(91, 156, 246, 0.25);
+  --accent-focus-ring: 0 0 0 3px rgba(91, 156, 246, 0.12);
+
+  --color-primary: var(--accent);
+  --color-primary-hover: #4a8be5;
+  --color-primary-text: #ffffff;
+  --color-on-primary: #ffffff;
+  --color-accent: var(--accent);
+  --color-accent-hover: #4a8be5;
+  --color-accent-text: #ffffff;
+  --color-on-accent: #ffffff;
+  --color-accent-bg: var(--accent-bg);
+  --color-accent-border: var(--accent-border);
+
+  /* === SEMANTIC COLORS === */
+  --green: #22c55e;
+  --green-bg: rgba(34, 197, 94, 0.08);
+  --green-border: rgba(34, 197, 94, 0.25);
+
+  --yellow: #f59e0b;
+  --yellow-bg: rgba(245, 158, 11, 0.08);
+  --yellow-border: rgba(245, 158, 11, 0.25);
+
+  --red: #ef4444;
+  --red-bg: rgba(239, 68, 68, 0.08);
+  --red-border: rgba(239, 68, 68, 0.25);
+
+  --purple: #8b5cf6;
+  --purple-bg: rgba(139, 92, 246, 0.08);
+  --purple-border: rgba(139, 92, 246, 0.25);
+
+  --teal: #14b8a6;
+  --teal-bg: rgba(20, 184, 166, 0.08);
+  --teal-border: rgba(20, 184, 166, 0.25);
+
+  --pink: #ec4899;
+  --pink-bg: rgba(236, 72, 153, 0.08);
+  --pink-border: rgba(236, 72, 153, 0.25);
+
+  --color-success: var(--green);
+  --color-warning: var(--yellow);
+  --color-error: var(--red);
+  --color-info: var(--accent);
+  --color-success-bg: var(--green-bg);
+  --color-warning-bg: var(--yellow-bg);
+  --color-error-bg: var(--red-bg);
+  --color-info-bg: var(--accent-bg);
+
+  /* === OVERLAYS === */
+  --color-badge-overlay: rgba(0, 0, 0, 0.75);
+
+  /* === INTERACTIVE === */
+  --color-link: var(--accent);
+  --color-link-hover: #4a8be5;
+
+  /* === TYPOGRAPHY === */
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --font-heading: var(--font-sans);
+  --font-body: var(--font-sans);
+
+  /* Font Sizes — bumped +2px from unified-v2 mockup for readability */
+  --text-xs: 0.75rem;     /* 12px (was 10px) */
+  --text-sm: 0.875rem;    /* 14px (was 12px) */
+  --text-base: 1rem;      /* 16px (was 14px) */
+  --text-md: 1.125rem;    /* 18px */
+  --text-lg: 1.25rem;     /* 20px */
+  --text-xl: 1.375rem;    /* 22px */
+  --text-2xl: 1.75rem;    /* 28px */
+  --text-3xl: 2.25rem;    /* 36px */
+  --text-4xl: 3rem;       /* 48px */
+  --text-5xl: 3.75rem;    /* 60px */
+  --text-6xl: 4.5rem;     /* 72px */
+  --text-label: 0.6875rem; /* 11px — monospace UI labels */
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights — increased for readability */
+  --leading-tight: 1.2;
+  --leading-snug: 1.4;
+  --leading-normal: 1.7;  /* was 1.5, bumped for hack.build readability */
+  --leading-relaxed: 1.9;
+
+  /* Letter Spacing */
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-wider: 0.08em;
+  --tracking-widest: 0.12em;  /* for uppercase mono labels */
+
+  /* === SPACING (4px base) === */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;     /* 24px — card body padding (increased from 20px) */
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;       /* 48px section padding */
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;       /* 72px section spacing */
+
+  /* === SHAPE === */
+  --radius: 0px;           /* sharp corners — the commonpub signature */
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-md: 0;          /* override: sharp corners */
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-2xl: 0;
+  --radius-full: 50%;      /* avatars only */
+
+  --border-width-thin: 1px;
+  --border-width-default: 2px;  /* strong 2px borders — the commonpub signature */
+  --border-width-thick: 3px;
+
+  /* === SHADOWS (offset, no blur — the commonpub signature) === */
+  --shadow-sm: 2px 2px 0 var(--border);
+  --shadow-md: 4px 4px 0 var(--border);
+  --shadow-lg: 6px 6px 0 var(--border);
+  --shadow-xl: 8px 8px 0 var(--border);
+  --shadow-accent: 4px 4px 0 var(--accent);
+
+  /* === TRANSITIONS === */
+  --transition-fast: 0.1s ease;
+  --transition-default: 0.15s ease;
+  --transition-slow: 0.3s ease;
+
+  /* === Z-INDEX SCALE === */
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 500;
+  --z-modal-backdrop: 900;
+  --z-modal: 1000;
+  --z-toast: 1050;
+  --z-tooltip: 1100;
+
+  /* === LAYOUT === */
+  --nav-height: 3rem;       /* 48px topbar */
+  --subnav-height: 2.75rem;
+  --sidebar-width: 12.5rem; /* 200px fixed sidebar */
+  --content-max-width: 60rem; /* 960px */
+  --content-wide-max-width: 75rem;
+
+  /* === FOCUS === */
+  --focus-ring: var(--shadow-accent);
+}
+
+/* === BASE STYLES === */
+body {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text);
+  background-color: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-radius: var(--radius);
+}
+
+/* === ACCESSIBILITY === */
+
+/* Skip-to-content link */
+.cpub-skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--space-4);
+  z-index: var(--z-tooltip);
+  padding: var(--space-2) var(--space-4);
+  background: var(--accent);
+  color: var(--color-on-accent);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-skip-link:focus {
+  top: var(--space-2);
+}
+
+/* Focus-visible ring for all interactive elements */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Screen reader only utility */
+.cpub-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* === CONTENT TYPE BADGE COLORS === */
+[data-content-type="article"] { --badge-color: var(--accent); --badge-bg: var(--accent-bg); }
+[data-content-type="blog"] { --badge-color: var(--green); --badge-bg: var(--green-bg); }
+[data-content-type="project"] { --badge-color: var(--purple); --badge-bg: var(--purple-bg); }
+[data-content-type="explainer"] { --badge-color: var(--teal); --badge-bg: var(--teal-bg); }
+[data-content-type="video"] { --badge-color: var(--red); --badge-bg: var(--red-bg); }
+[data-content-type="tutorial"] { --badge-color: var(--yellow); --badge-bg: var(--yellow-bg); }
+}

package/theme/components.css

@@ -0,0 +1,322 @@
+@layer commonpub {
+/* ═══ CommonPub Shared Component Styles ═══
+ * Canonical definitions for primitives used across all pages.
+ * Imported globally via nuxt.config.ts — DO NOT duplicate in scoped styles.
+ */
+
+/* ─── BUTTONS ─── */
+.cpub-btn {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 6px 14px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.cpub-btn:hover { background: var(--surface2); }
+.cpub-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.cpub-btn-primary {
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  box-shadow: 4px 4px 0 var(--border);
+}
+
+.cpub-btn-primary:hover {
+  box-shadow: 2px 2px 0 var(--border);
+}
+
+.cpub-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.cpub-btn-sm { padding: 4px 10px; font-size: 11px; min-height: 44px; }
+.cpub-btn-lg { padding: 12px 24px; font-size: 14px; font-weight: 600; }
+
+.cpub-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-faint);
+}
+
+.cpub-btn-ghost:hover { color: var(--text-dim); background: transparent; }
+
+/* ─── TAGS ─── */
+.cpub-tag {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--text-xs, 12px);
+  font-family: var(--font-mono);
+  padding: 2px 8px;
+  border: 1px solid var(--border2);
+  color: var(--text-dim);
+  background: var(--surface2);
+}
+
+.cpub-tag-accent { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); }
+.cpub-tag-green { border-color: var(--green-border); color: var(--green); background: var(--green-bg); }
+.cpub-tag-red { border-color: var(--red-border); color: var(--red); background: var(--red-bg); }
+.cpub-tag-yellow { border-color: var(--yellow-border); color: var(--yellow); background: var(--yellow-bg); }
+.cpub-tag-purple { border-color: var(--purple-border); color: var(--purple); background: var(--purple-bg); }
+.cpub-tag-teal { border-color: var(--teal-border); color: var(--teal); background: var(--teal-bg); }
+
+.cpub-tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
+
+/* ─── EMPTY STATES ─── */
+.cpub-empty-state { text-align: center; padding: 48px 16px; }
+.cpub-empty-state-icon { font-size: 32px; color: var(--text-faint); margin-bottom: 12px; }
+.cpub-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
+.cpub-empty-state-desc { font-size: 12px; color: var(--text-faint); }
+
+/* ─── SIDEBAR CARDS ─── */
+.cpub-sb-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 16px;
+  margin-bottom: 12px;
+  box-shadow: 4px 4px 0 var(--border);
+}
+
+.cpub-sb-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border2);
+}
+
+/* ─── SECTION HEADERS ─── */
+.cpub-section-head,
+.cpub-sec-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-section-head h2,
+.cpub-section-head h3,
+.cpub-sec-head h2 {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+}
+
+/* ─── SECTION TITLE (large) ─── */
+.cpub-section-title-lg {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+/* ─── PAGINATION ─── */
+.cpub-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 24px;
+  margin-bottom: 16px;
+}
+
+.cpub-page-btn {
+  min-width: 44px;
+  min-height: 44px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.cpub-page-btn:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
+.cpub-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.cpub-page-btn.active {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
+  box-shadow: 2px 2px 0 var(--border);
+}
+
+.cpub-page-ellipsis {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+/* ─── LINKS ─── */
+.cpub-link { color: var(--accent); text-decoration: none; }
+.cpub-link:hover { text-decoration: underline; }
+
+/* ─── BACK LINK ─── */
+.cpub-back-link {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.cpub-back-link:hover { color: var(--accent); }
+
+/* ─── HERO EYEBROW ─── */
+.cpub-hero-eyebrow {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--accent);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+/* ─── SECTION SUB / HEAD RIGHT ─── */
+.cpub-sec-sub { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-sec-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+
+/* ─── FORM LAYOUT ─── */
+.cpub-form-error {
+  padding: 10px 14px;
+  background: var(--red-bg);
+  color: var(--red);
+  border: var(--border-width-default) solid var(--red);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.cpub-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.cpub-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.cpub-form-hint {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-input {
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.cpub-input:focus { border-color: var(--accent); }
+.cpub-input::placeholder { color: var(--text-faint); }
+
+.cpub-textarea {
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.5;
+  transition: border-color 0.15s;
+}
+
+.cpub-textarea:focus { border-color: var(--accent); }
+.cpub-textarea::placeholder { color: var(--text-faint); }
+
+/* ─── LOADING STATE ─── */
+.cpub-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 64px 16px;
+  color: var(--text-faint);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.cpub-loading::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border: var(--border-width-default) solid var(--border);
+  border-top-color: var(--accent);
+  animation: cpub-spin 0.6s linear infinite;
+}
+
+@keyframes cpub-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── ERROR STATE ─── */
+.cpub-fetch-error {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--red);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.cpub-fetch-error-icon {
+  font-size: 24px;
+  margin-bottom: 12px;
+}
+
+.cpub-fetch-error-msg {
+  margin-bottom: 12px;
+  color: var(--text-dim);
+}
+
+.cpub-fetch-error .cpub-btn {
+  margin-top: 8px;
+}
+
+/* ─── DELETE BUTTON ─── */
+.cpub-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px 6px; font-size: 12px; }
+.cpub-delete-btn:hover { color: var(--red); }
+.cpub-delete-btn-sm { font-size: 10px; padding: 2px 4px; }
+
+/* ─── DIVIDERS ─── */
+.cpub-divider { border: none; border-top: var(--border-width-default) solid var(--border); }
+}