@commonpub/layer 0.1.0

package/composables/useNotifications.ts

@@ -0,0 +1,73 @@
+/** Composable for real-time notification count via SSE */
+export function useNotifications() {
+  const count = useState<number>('notification-count', () => 0);
+  const connected = useState<boolean>('notification-connected', () => false);
+
+  let eventSource: EventSource | null = null;
+  let retryDelay = 5000;
+  let retryTimer: ReturnType<typeof setTimeout> | null = null;
+  const MAX_RETRY_DELAY = 60_000;
+
+  function connect(): void {
+    if (import.meta.server || eventSource) return;
+
+    eventSource = new EventSource('/api/notifications/stream');
+    connected.value = true;
+
+    eventSource.onopen = () => {
+      retryDelay = 5000; // Reset backoff on successful connection
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as { type: string; count?: number };
+        if (data.type === 'count' && typeof data.count === 'number') {
+          count.value = data.count;
+        }
+      } catch {
+        // Ignore malformed messages
+      }
+    };
+
+    eventSource.onerror = () => {
+      connected.value = false;
+      // EventSource readyState 2 = CLOSED (server rejected, e.g. 401)
+      const wasClosed = eventSource?.readyState === 2;
+      eventSource?.close();
+      eventSource = null;
+      // If the connection was fully closed (auth error, 401, etc.), don't retry
+      if (wasClosed) return;
+      // Exponential backoff: 5s → 10s → 20s → 40s → 60s cap
+      retryTimer = setTimeout(connect, retryDelay);
+      retryDelay = Math.min(retryDelay * 2, MAX_RETRY_DELAY);
+    };
+  }
+
+  function disconnect(): void {
+    if (retryTimer) {
+      clearTimeout(retryTimer);
+      retryTimer = null;
+    }
+    eventSource?.close();
+    eventSource = null;
+    connected.value = false;
+    retryDelay = 5000;
+  }
+
+  function decrement(): void {
+    if (count.value > 0) count.value--;
+  }
+
+  function reset(): void {
+    count.value = 0;
+  }
+
+  return {
+    count: readonly(count),
+    connected: readonly(connected),
+    connect,
+    disconnect,
+    decrement,
+    reset,
+  };
+}

package/composables/usePublishValidation.ts

@@ -0,0 +1,65 @@
+/**
+ * Publish validation composable — checks required fields before publishing content.
+ * Returns an array of human-readable error strings. Empty array = ready to publish.
+ */
+import type { BlockTuple } from '@commonpub/editor';
+
+export interface PublishValidationOptions {
+  title: Ref<string>;
+  metadata: Ref<Record<string, unknown>>;
+  getBlockTuples: () => BlockTuple[];
+  /** Override which fields are required. Defaults to title, description, cover, tags, content. */
+  requiredFields?: Array<'title' | 'description' | 'coverImageUrl' | 'tags' | 'content'>;
+}
+
+export interface PublishValidationReturn {
+  errors: Ref<string[]>;
+  showErrors: Ref<boolean>;
+  /** Run validation and return errors. Also updates errors ref. */
+  validate: () => string[];
+  /** Dismiss the error modal */
+  dismiss: () => void;
+}
+
+const DEFAULT_REQUIRED: Array<'title' | 'description' | 'coverImageUrl' | 'tags' | 'content'> = [
+  'title', 'description', 'coverImageUrl', 'tags', 'content',
+];
+
+export function usePublishValidation(opts: PublishValidationOptions): PublishValidationReturn {
+  const errors = ref<string[]>([]);
+  const showErrors = ref(false);
+  const required = opts.requiredFields ?? DEFAULT_REQUIRED;
+
+  function validate(): string[] {
+    const errs: string[] = [];
+
+    if (required.includes('title') && !opts.title.value.trim()) {
+      errs.push('Title is required');
+    }
+    if (required.includes('description') && !(opts.metadata.value.description as string)?.trim()) {
+      errs.push('Description is required');
+    }
+    if (required.includes('coverImageUrl') && !(opts.metadata.value.coverImageUrl as string)?.trim()) {
+      errs.push('Cover image is required');
+    }
+    if (required.includes('tags')) {
+      const tags = opts.metadata.value.tags as string[];
+      if (!tags || tags.length === 0) {
+        errs.push('At least one tag is required');
+      }
+    }
+    if (required.includes('content') && opts.getBlockTuples().length === 0) {
+      errs.push('Content is empty — add at least one block');
+    }
+
+    errors.value = errs;
+    if (errs.length > 0) showErrors.value = true;
+    return errs;
+  }
+
+  function dismiss(): void {
+    showErrors.value = false;
+  }
+
+  return { errors, showErrors, validate, dismiss };
+}

package/composables/useSanitize.ts

@@ -0,0 +1,34 @@
+// HTML sanitization for v-html bindings — defense-in-depth against stored XSS.
+// Uses DOMPurify (via isomorphic-dompurify for SSR compatibility).
+import DOMPurify from 'isomorphic-dompurify';
+
+// Allow the subset of HTML that TipTap produces for block content
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- DOMPurify.Config is not directly exported
+const PURIFY_CONFIG: any = {
+  ALLOWED_TAGS: [
+    'p', 'br', 'strong', 'em', 'u', 's', 'code', 'pre',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'ul', 'ol', 'li',
+    'a', 'img',
+    'blockquote', 'figure', 'figcaption',
+    'span', 'div', 'sub', 'sup', 'mark',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+    'hr',
+  ],
+  ALLOWED_ATTR: [
+    'href', 'src', 'alt', 'title', 'class', 'id', 'target', 'rel',
+    'style', 'width', 'height', 'loading',
+    'colspan', 'rowspan',
+  ],
+  ALLOW_DATA_ATTR: false,
+};
+
+/** Sanitize HTML for safe rendering via v-html */
+export function sanitizeBlockHtml(html: string): string {
+  return DOMPurify.sanitize(html, PURIFY_CONFIG) as unknown as string;
+}
+
+/** Composable wrapper for template use */
+export function useSanitize(): { sanitize: (html: string) => string } {
+  return { sanitize: sanitizeBlockHtml };
+}

package/composables/useSiteName.ts

@@ -0,0 +1,4 @@
+/** Returns the configured site name from runtime config (defaults to 'CommonPub'). */
+export function useSiteName(): string {
+  return (useRuntimeConfig().public.siteName as string) || 'CommonPub';
+}

package/composables/useTheme.ts

@@ -0,0 +1,34 @@
+import { applyThemeToElement, isValidThemeId } from '@commonpub/ui';
+
+const STORAGE_KEY = 'cpub-theme';
+
+export function useTheme(): {
+  themeId: Ref<string>;
+  setTheme: (id: string) => void;
+} {
+  // Use useState so SSR and client agree on 'base' initially
+  const themeId = useState('cpub-theme', () => 'base');
+
+  // On client mount, read persisted theme and apply if different
+  if (import.meta.client) {
+    onMounted(() => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored && isValidThemeId(stored) && stored !== themeId.value) {
+        themeId.value = stored;
+        applyThemeToElement(document.documentElement, stored);
+      }
+    });
+  }
+
+  function setTheme(id: string): void {
+    if (isValidThemeId(id)) {
+      themeId.value = id;
+      if (import.meta.client) {
+        applyThemeToElement(document.documentElement, id);
+        localStorage.setItem(STORAGE_KEY, id);
+      }
+    }
+  }
+
+  return { themeId, setTheme };
+}

package/composables/useToast.ts

@@ -0,0 +1,35 @@
+// Simple toast notification composable
+
+export interface Toast {
+  id: number;
+  message: string;
+  type: 'success' | 'error' | 'info';
+}
+
+let nextId = 0;
+
+export function useToast() {
+  const toasts = useState<Toast[]>('toasts', () => []);
+
+  function show(message: string, type: Toast['type'] = 'info', duration = 3000): void {
+    const id = nextId++;
+    toasts.value.push({ id, message, type });
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+  }
+
+  function success(message: string): void {
+    show(message, 'success');
+  }
+
+  function error(message: string): void {
+    show(message, 'error', 5000);
+  }
+
+  function dismiss(id: number): void {
+    toasts.value = toasts.value.filter((t) => t.id !== id);
+  }
+
+  return { toasts: readonly(toasts), show, success, error, dismiss };
+}

package/error.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+const props = defineProps<{
+  error: {
+    statusCode: number;
+    statusMessage?: string;
+    message?: string;
+  };
+}>();
+
+useSeoMeta({ title: `${props.error.statusCode} — CommonPub` });
+
+const isNotFound = computed(() => props.error.statusCode === 404);
+
+function handleBack(): void {
+  clearError({ redirect: '/' });
+}
+</script>
+
+<template>
+  <div class="cpub-error-page">
+    <div class="cpub-error-grid" />
+    <div class="cpub-error-inner">
+      <div class="cpub-error-code">{{ error.statusCode }}</div>
+      <h1 class="cpub-error-title">
+        {{ isNotFound ? 'Page not found' : 'Something went wrong' }}
+      </h1>
+      <p class="cpub-error-desc">
+        {{ isNotFound ? "The page you're looking for doesn't exist or has been moved." : (error.statusMessage || error.message || 'An unexpected error occurred.') }}
+      </p>
+      <div class="cpub-error-actions">
+        <button class="cpub-error-btn cpub-error-btn-primary" @click="handleBack">
+          <i class="fa-solid fa-house"></i> Go Home
+        </button>
+        <NuxtLink to="/search" class="cpub-error-btn">
+          <i class="fa-solid fa-magnifying-glass"></i> Search
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-error-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg, #fafaf9);
+  position: relative;
+  overflow: hidden;
+}
+
+.cpub-error-grid {
+  position: absolute; inset: 0;
+  background-image:
+    linear-gradient(var(--border2, #d4d4d0) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border2, #d4d4d0) 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.15;
+}
+
+.cpub-error-inner {
+  position: relative; z-index: 1;
+  text-align: center;
+  padding: 32px;
+  max-width: 480px;
+}
+
+.cpub-error-code {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-size: 80px;
+  font-weight: 700;
+  color: var(--accent, #5b9cf6);
+  line-height: 1;
+  margin-bottom: 12px;
+  letter-spacing: -0.04em;
+}
+
+.cpub-error-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text, #1a1a1a);
+  margin-bottom: 10px;
+}
+
+.cpub-error-desc {
+  font-size: 13px;
+  color: var(--text-dim, #6b6b66);
+  line-height: 1.6;
+  margin-bottom: 28px;
+}
+
+.cpub-error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.cpub-error-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  font-size: 12px;
+  font-weight: 500;
+  border: var(--border-width-default) solid var(--border, #1a1a1a);
+  background: var(--surface, #fff);
+  color: var(--text, #1a1a1a);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+
+.cpub-error-btn:hover {
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-error-btn-primary {
+  background: var(--accent, #5b9cf6);
+  color: #fff;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-error-btn-primary:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translate(-1px, -1px);
+}
+</style>

package/layouts/admin.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+const { isAdmin } = useAuth();
+const { admin: adminEnabled } = useFeatures();
+const runtimeConfig = useRuntimeConfig();
+const siteName = computed(() => (runtimeConfig.public.siteName as string) || 'CommonPub');
+const sidebarOpen = ref(false);
+</script>
+
+<template>
+  <div v-if="!adminEnabled" class="admin-denied">
+    <h1>Not Available</h1>
+    <p>The admin panel is not enabled on this instance.</p>
+  </div>
+  <div v-else class="admin-layout">
+    <header class="admin-topbar">
+      <div class="admin-topbar-inner">
+        <button class="admin-menu-btn" aria-label="Toggle sidebar" @click="sidebarOpen = !sidebarOpen">
+          <i :class="sidebarOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'"></i>
+        </button>
+        <NuxtLink to="/" class="admin-brand">{{ siteName }}</NuxtLink>
+        <span class="admin-badge">Admin</span>
+        <NuxtLink to="/" class="admin-back"><i class="fa-solid fa-arrow-left"></i> Back to site</NuxtLink>
+      </div>
+    </header>
+
+    <div class="admin-body">
+      <aside class="admin-sidebar" :class="{ open: sidebarOpen }" aria-label="Admin navigation">
+        <nav class="admin-nav">
+          <NuxtLink to="/admin" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
+          <NuxtLink to="/admin/users" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-users"></i> Users</NuxtLink>
+          <NuxtLink to="/admin/content" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-newspaper"></i> Content</NuxtLink>
+          <NuxtLink to="/admin/reports" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-flag"></i> Reports</NuxtLink>
+          <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
+          <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
+          <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
+        </nav>
+      </aside>
+
+      <main class="admin-main">
+        <div v-if="isAdmin">
+          <slot />
+        </div>
+        <div v-else class="admin-denied">
+          <h1>Access Denied</h1>
+          <p>You need admin privileges to access this area.</p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.admin-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+
+.admin-topbar {
+  height: var(--nav-height);
+  border-bottom: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.admin-topbar-inner {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--space-3);
+}
+
+.admin-menu-btn {
+  display: none;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+
+.admin-brand {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-lg);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.admin-badge {
+  padding: var(--space-1) var(--space-2);
+  background: var(--accent);
+  color: var(--color-on-primary);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+}
+
+.admin-back {
+  margin-left: auto;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.admin-back:hover {
+  color: var(--accent);
+}
+
+.admin-body {
+  display: flex;
+  flex: 1;
+}
+
+.admin-sidebar {
+  width: 200px;
+  border-right: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  padding: var(--space-4) var(--space-2);
+  flex-shrink: 0;
+}
+
+.admin-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.admin-nav-link {
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  padding: var(--space-2) var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: color 0.12s, background 0.12s;
+}
+
+.admin-nav-link i {
+  width: 16px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.admin-nav-link:hover {
+  color: var(--text);
+  background: var(--surface2);
+}
+
+.admin-nav-link.router-link-exact-active {
+  color: var(--accent);
+  background: var(--accent-bg);
+  font-weight: 600;
+}
+
+.admin-nav-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.admin-main {
+  flex: 1;
+  padding: var(--space-6);
+  min-width: 0;
+}
+
+.admin-denied {
+  text-align: center;
+  padding: var(--space-10) 0;
+  color: var(--text-dim);
+}
+
+.admin-denied h1 {
+  font-size: var(--text-xl);
+  margin-bottom: var(--space-2);
+}
+
+@media (max-width: 768px) {
+  .admin-menu-btn { display: flex; }
+  .admin-sidebar {
+    position: fixed;
+    top: var(--nav-height);
+    left: 0;
+    bottom: 0;
+    z-index: 40;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: none;
+    width: 220px;
+  }
+  .admin-sidebar.open {
+    transform: translateX(0);
+    box-shadow: var(--shadow-lg);
+  }
+  .admin-main { padding: var(--space-4); }
+}
+</style>

package/layouts/auth.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// Auth layout — minimal centered layout for login/register
+</script>
+
+<template>
+  <div class="auth-layout">
+    <main class="auth-content">
+      <NuxtLink to="/" class="auth-brand" aria-label="Return to homepage">
+        <SiteLogo />
+      </NuxtLink>
+      <div class="auth-card">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.auth-layout {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  padding: var(--space-4);
+}
+
+.auth-content {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.auth-brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--text);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.auth-bracket {
+  color: var(--accent);
+  font-size: 20px;
+}
+
+.auth-card {
+  width: 100%;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-6);
+}
+</style>