@commonpub/layer 0.3.38 → 0.4.0

package/pages/privacy.vue

@@ -62,13 +62,14 @@ const { federation: federationEnabled } = useFeatures();
       </section>
 
       <section class="cpub-legal-section">
-        <h2>5. Cookies and Local Storage</h2>
-        <p>We use only <strong>strictly necessary</strong> technologies:</p>
+        <h2>5. Cookies</h2>
+        <p>We use a small number of cookies to provide and improve the service:</p>
         <ul>
-          <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): an authentication cookie that identifies your login session. It is httpOnly (not accessible to JavaScript), secure (HTTPS-only in production), and expires after 7 days. This cookie is strictly necessary for the service to function and does not require consent.</li>
-          <li><strong>Theme preference</strong> (<code>cpub-theme</code> in localStorage): stores your light/dark mode choice in your browser. This is a UI preference, not used for tracking.</li>
+          <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): strictly necessary — authenticates your login session. HttpOnly, secure, 7-day expiry.</li>
+          <li><strong>Consent cookie</strong> (<code>cpub-consent</code>): strictly necessary — stores your cookie consent choice.</li>
+          <li><strong>Color scheme</strong> (<code>cpub-color-scheme</code>): functional — remembers your light/dark mode preference. Set only with your consent.</li>
         </ul>
-        <p>We do not use any analytics, advertising, or tracking cookies. No cookie consent banner is required because we only use strictly necessary cookies.</p>
+        <p>We do not use any advertising or tracking cookies. Your instance operator may add analytics cookies — these require your explicit consent. For the full list of cookies and to manage your preferences, visit our <NuxtLink to="/cookies">Cookie Policy</NuxtLink>.</p>
       </section>
 
       <section v-if="federationEnabled" class="cpub-legal-section">

package/pages/settings/appearance.vue

@@ -1,32 +1,112 @@
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' });
 
-const { themeId: theme, setTheme } = useTheme();
-const themes = [
-  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows, blue accent' },
-  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same offset shadow aesthetic' },
-  { id: 'generics', name: 'Generics', desc: 'Dark minimal with soft glow' },
-];
+const { themeId, isDark, instanceDefault, setDarkMode } = useTheme();
+
+const familyLabels: Record<string, string> = {
+  base: 'Classic',
+  dark: 'Classic',
+  generics: 'Generics',
+  agora: 'Agora',
+  'agora-dark': 'Agora',
+};
+
+const currentFamily = computed(() => familyLabels[instanceDefault.value] ?? 'Classic');
+
+function previewColors(dark: boolean): { bg: string; surface: string; accent: string; text: string; border: string } {
+  // Resolve what theme ID would be for this mode
+  const families: Record<string, { light: string; dark: string }> = {
+    classic: { light: 'base', dark: 'dark' },
+    agora: { light: 'agora', dark: 'agora-dark' },
+    generics: { light: 'generics', dark: 'generics' },
+  };
+  const familyMap: Record<string, string> = {
+    base: 'classic', dark: 'classic', generics: 'generics',
+    agora: 'agora', 'agora-dark': 'agora',
+  };
+  const family = familyMap[instanceDefault.value] ?? 'classic';
+  const id = dark ? families[family]!.dark : families[family]!.light;
+
+  const palette: Record<string, { bg: string; surface: string; accent: string; text: string; border: string }> = {
+    base: { bg: '#fafaf9', surface: '#ffffff', accent: '#5b9cf6', text: '#1a1a1a', border: '#1a1a1a' },
+    dark: { bg: '#111111', surface: '#1a1a1a', accent: '#5b9cf6', text: '#e5e5e3', border: '#444440' },
+    generics: { bg: '#0c0c0b', surface: '#141413', accent: '#5b9cf6', text: '#d8d5cf', border: '#272725' },
+    agora: { bg: '#f7f4ed', surface: '#faf8f3', accent: '#3d8b5e', text: '#1a1a1a', border: '#1a1a1a' },
+    'agora-dark': { bg: '#0d1a12', surface: '#141f17', accent: '#4aa06e', text: '#e8e8e2', border: '#3a4f40' },
+  };
+  return palette[id] ?? palette.base!;
+}
 </script>
 
 <template>
   <div>
     <h2 class="cpub-section-title-lg">Appearance</h2>
 
-    <div class="cpub-theme-grid">
+    <p class="cpub-appearance-note">
+      Your instance uses the <strong>{{ currentFamily }}</strong> theme.
+      Choose your preferred color scheme.
+    </p>
+
+    <div class="cpub-scheme-grid">
+      <button
+        class="cpub-scheme-card"
+        :class="{ active: !isDark }"
+        @click="setDarkMode(false)"
+      >
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(false).bg,
+            borderColor: previewColors(false).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(false).surface,
+              borderColor: previewColors(false).border,
+              boxShadow: `3px 3px 0 ${previewColors(false).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(false).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(false).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(false).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(false).accent }"></div>
+          </div>
+        </div>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Light</span>
+        </div>
+      </button>
+
       <button
-        v-for="t in themes"
-        :key="t.id"
-        class="cpub-theme-card"
-        :class="{ active: theme === t.id }"
-        @click="setTheme(t.id)"
+        class="cpub-scheme-card"
+        :class="{ active: isDark }"
+        @click="setDarkMode(true)"
       >
-        <div class="cpub-theme-preview" :data-theme="t.id">
-          <div class="cpub-theme-swatch"></div>
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(true).bg,
+            borderColor: previewColors(true).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(true).surface,
+              borderColor: previewColors(true).border,
+              boxShadow: `3px 3px 0 ${previewColors(true).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(true).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(true).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(true).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(true).accent }"></div>
+          </div>
         </div>
-        <div class="cpub-theme-info">
-          <span class="cpub-theme-name">{{ t.name }}</span>
-          <span class="cpub-theme-desc">{{ t.desc }}</span>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Dark</span>
         </div>
       </button>
     </div>
@@ -34,48 +114,73 @@ const themes = [
 </template>
 
 <style scoped>
-.cpub-theme-grid {
+.cpub-appearance-note {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-scheme-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+  max-width: 440px;
 }
 
-.cpub-theme-card {
+.cpub-scheme-card {
   background: var(--surface);
   border: var(--border-width-default) solid var(--border2);
-  padding: 12px;
+  padding: 0;
   cursor: pointer;
   text-align: left;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
-.cpub-theme-card.active {
+.cpub-scheme-card.active {
   border-color: var(--accent);
   box-shadow: var(--shadow-accent);
 }
 
-.cpub-theme-card:hover {
+.cpub-scheme-card:hover {
   border-color: var(--border);
+  transform: translate(-1px, -1px);
+  box-shadow: var(--shadow-sm);
 }
 
-.cpub-theme-preview {
-  height: 60px;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border2);
-  margin-bottom: 8px;
+.cpub-scheme-preview {
+  height: 80px;
+  padding: var(--space-3);
+  border-bottom: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.cpub-theme-name {
-  font-size: 13px;
-  font-weight: 600;
-  display: block;
+.cpub-scheme-preview-card {
+  width: 75%;
+  padding: var(--space-2);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.cpub-theme-desc {
-  font-size: 11px;
-  color: var(--text-dim);
+.cpub-preview-heading { height: 5px; width: 55%; }
+.cpub-preview-line { height: 3px; width: 85%; }
+.cpub-preview-line.short { width: 45%; }
+.cpub-preview-btn { height: 12px; width: 35%; margin-top: 3px; }
+
+.cpub-scheme-info {
+  padding: var(--space-3);
+}
+
+.cpub-scheme-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
 }
 
-@media (max-width: 640px) {
-  .cpub-theme-grid { grid-template-columns: 1fr; }
+@media (max-width: 480px) {
+  .cpub-scheme-grid { grid-template-columns: 1fr; }
 }
 </style>

package/plugins/theme.ts

@@ -0,0 +1,32 @@
+// Theme plugin — resolves theme on server (zero flash) and hydrates on client.
+//
+// The admin picks the instance theme (family + default mode).
+// Users only toggle light/dark. Server middleware resolves the final theme ID.
+// This plugin reads that resolved value and sets data-theme on <html>.
+
+export default defineNuxtPlugin(() => {
+  const themeId = useState<string>('cpub-theme', () => 'base');
+  const instanceTheme = useState<string>('cpub-instance-theme', () => 'base');
+  const isDark = useState<boolean>('cpub-dark-mode', () => false);
+
+  if (import.meta.server) {
+    const event = useRequestEvent();
+    if (event?.context) {
+      themeId.value = event.context.resolvedTheme ?? 'base';
+      instanceTheme.value = event.context.instanceTheme ?? 'base';
+      isDark.value = event.context.isDarkMode ?? false;
+    }
+  }
+
+  if (import.meta.client) {
+    // One-time migration: clear old localStorage theme (replaced by server-side resolution)
+    localStorage.removeItem('cpub-theme');
+  }
+
+  // Set data-theme on <html> during SSR — first paint has the correct theme
+  if (themeId.value && themeId.value !== 'base') {
+    useHead({
+      htmlAttrs: { 'data-theme': themeId.value },
+    });
+  }
+});

package/server/api/admin/settings.get.ts

@@ -6,11 +6,15 @@ export default defineEventHandler(async (event) => {
   const db = useDB();
   const config = useConfig();
 
-  // Get DB-stored settings
+  // Get DB-stored settings (returns Map — convert to plain object)
   const dbSettings = await getInstanceSettings(db);
+  const stored: Record<string, unknown> = {};
+  for (const [key, value] of dbSettings) {
+    stored[key] = value;
+  }
 
   // Merge with running config defaults so the UI shows actual values
-  const defaults: Record<string, string> = {
+  const defaults: Record<string, unknown> = {
     'instance.name': config.instance.name,
     'instance.description': config.instance.description,
     'instance.registrationOpen': 'true',
@@ -18,5 +22,5 @@ export default defineEventHandler(async (event) => {
     'instance.contactEmail': config.instance.contactEmail ?? '',
   };
 
-  return { ...defaults, ...dbSettings };
+  return { ...defaults, ...stored };
 });

package/server/api/admin/settings.put.ts

@@ -7,5 +7,10 @@ export default defineEventHandler(async (event): Promise<void> => {
   const db = useDB();
   const input = await parseBody(event, adminSettingSchema);
 
-  return setInstanceSetting(db, input.key, input.value, admin.id);
+  await setInstanceSetting(db, input.key, input.value, admin.id);
+
+  // Invalidate server-side theme cache when the default changes
+  if (input.key === 'theme.default') {
+    invalidateThemeCache();
+  }
 });

package/server/api/auth/delete-user.post.ts

@@ -1,4 +1,4 @@
-import { deleteUser, federateDelete, listContent } from '@commonpub/server';
+import { deleteUser, federateDelete } from '@commonpub/server';
 import { contentItems } from '@commonpub/schema';
 import { eq, and } from 'drizzle-orm';
 

package/server/middleware/theme.ts

@@ -0,0 +1,34 @@
+// Resolves the active theme for SSR and injects it into the event context.
+// Runs before page rendering so the theme plugin can set data-theme on <html>.
+//
+// Admin picks instance theme → user only toggles light/dark → server resolves.
+
+declare module 'h3' {
+  interface H3EventContext {
+    /** Final resolved theme ID for this request */
+    resolvedTheme: string;
+    /** The admin-configured instance default theme */
+    instanceTheme: string;
+    /** Whether the resolved theme is dark */
+    isDarkMode: boolean;
+  }
+}
+
+export default defineEventHandler(async (event) => {
+  // Only resolve theme for SSR page requests — skip API, assets, and internal routes
+  const path = getRequestURL(event).pathname;
+  if (path.startsWith('/api') || path.startsWith('/_nuxt') || path.startsWith('/__nuxt')) return;
+
+  const instanceTheme = await getInstanceDefaultTheme();
+  event.context.instanceTheme = instanceTheme;
+
+  // Read user's light/dark preference from cookie
+  const schemeCookie = getCookie(event, 'cpub-color-scheme');
+  const userScheme = schemeCookie === 'light' || schemeCookie === 'dark'
+    ? schemeCookie
+    : null;
+
+  const resolved = resolveThemeForUser(instanceTheme, userScheme);
+  event.context.resolvedTheme = resolved;
+  event.context.isDarkMode = isDefaultDark(resolved);
+});

package/server/utils/instanceTheme.ts

@@ -0,0 +1,67 @@
+// Cached instance-level theme resolution for SSR.
+// The admin sets a theme (determines family + default mode).
+// Users only toggle light/dark within that family.
+
+import { eq } from 'drizzle-orm';
+import { instanceSettings } from '@commonpub/schema';
+import { THEME_TO_FAMILY, FAMILY_VARIANTS, IS_DARK, VALID_THEME_IDS } from '../../utils/themeConfig';
+
+const CACHE_TTL = 60_000; // 1 minute
+
+let cached: string | null = null;
+let cacheTime = 0;
+
+export async function getInstanceDefaultTheme(): Promise<string> {
+  const now = Date.now();
+  if (cached !== null && now - cacheTime < CACHE_TTL) return cached;
+
+  try {
+    const db = useDB();
+    const [row] = await db
+      .select({ value: instanceSettings.value })
+      .from(instanceSettings)
+      .where(eq(instanceSettings.key, 'theme.default'));
+
+    if (row?.value && typeof row.value === 'string' && VALID_THEME_IDS.has(row.value)) {
+      cached = row.value;
+    } else {
+      cached = 'base';
+    }
+  } catch (err) {
+    console.warn('[theme] Failed to read instance theme from DB, using fallback:', err instanceof Error ? err.message : String(err));
+    cached = 'base';
+  }
+
+  cacheTime = now;
+  return cached;
+}
+
+/**
+ * Resolve the final theme ID given the admin's chosen default and the
+ * user's light/dark preference.
+ */
+export function resolveThemeForUser(
+  adminTheme: string,
+  userScheme: 'light' | 'dark' | null,
+): string {
+  const family = THEME_TO_FAMILY[adminTheme] ?? 'classic';
+  const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
+
+  if (userScheme === null) return adminTheme;
+  return userScheme === 'dark' ? variants.dark : variants.light;
+}
+
+/** Whether a given theme ID is dark */
+export function isDefaultDark(themeId: string): boolean {
+  return IS_DARK[themeId] ?? false;
+}
+
+/** Call after admin changes the instance default theme */
+export function invalidateThemeCache(): void {
+  cached = null;
+  cacheTime = 0;
+}
+
+export function isServerValidThemeId(id: string): boolean {
+  return VALID_THEME_IDS.has(id);
+}

package/theme/agora-dark.css

@@ -0,0 +1,157 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Agora Theme — Dark (Grove)
+   Warm dark surfaces with green-tinted blacks,
+   green accent, serif display font.
+   =========================================== */
+
+[data-theme="agora-dark"] {
+  /* === SURFACES (grove-tinted warm darks) === */
+  --bg: #0d1a12;
+  --surface: #141f17;
+  --surface2: #1a261e;
+  --surface3: #213028;
+
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface2);
+  --color-surface-raised: var(--surface2);
+  --color-surface-overlay: rgba(0, 0, 0, 0.7);
+  --color-surface-overlay-light: rgba(0, 0, 0, 0.6);
+  --color-surface-scrim: rgba(13, 26, 18, 0.85);
+  --color-surface-hover: var(--surface3);
+  --color-bg-subtle: var(--bg);
+
+  /* === TEXT (warm light on dark) === */
+  --text: #e8e8e2;
+  --text-dim: #b0b0a6;
+  --text-faint: #7a7a72;
+
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-dim);
+  --color-text-muted: var(--text-faint);
+  --color-text-inverse: #0d1a12;
+  --color-on-accent: #ffffff;
+  --color-on-primary: #ffffff;
+  --color-primary-hover: #4aa06e;
+
+  /* === BORDERS (grove-tinted) === */
+  --border: #3a4f40;
+  --border2: #2a3a2f;
+
+  --color-border: var(--border2);
+  --color-border-strong: var(--border);
+  --color-border-focus: var(--accent);
+
+  /* === ACCENT (commons green, brighter for dark bg) === */
+  --accent: #4aa06e;
+  --accent-bg: rgba(74, 160, 110, 0.12);
+  --accent-bg-strong: rgba(74, 160, 110, 0.25);
+  --accent-bg-heavy: rgba(74, 160, 110, 0.45);
+  --accent-bg-solid: rgba(74, 160, 110, 0.65);
+  --accent-border: rgba(74, 160, 110, 0.3);
+  --accent-focus-ring: 0 0 0 3px rgba(74, 160, 110, 0.2);
+  --shadow-accent: 4px 4px 0 var(--accent);
+
+  --color-primary: var(--accent);
+  --color-accent: var(--accent);
+  --color-accent-hover: #5ab87e;
+  --color-accent-text: #0d1a12;
+  --color-primary-text: #ffffff;
+  --color-accent-bg: var(--accent-bg);
+  --color-accent-border: var(--accent-border);
+
+  /* === SEMANTIC COLORS (brighter for dark bg) === */
+  --green: #4aa06e;
+  --green-bg: rgba(74, 160, 110, 0.12);
+  --green-border: rgba(74, 160, 110, 0.3);
+
+  --yellow: #daa040;
+  --yellow-bg: rgba(218, 160, 64, 0.12);
+  --yellow-border: rgba(218, 160, 64, 0.3);
+
+  --red: #d85e55;
+  --red-bg: rgba(216, 94, 85, 0.12);
+  --red-border: rgba(216, 94, 85, 0.3);
+
+  --purple: #9a7ec4;
+  --purple-bg: rgba(154, 126, 196, 0.12);
+  --purple-border: rgba(154, 126, 196, 0.3);
+
+  --teal: #3dbcab;
+  --teal-bg: rgba(61, 188, 171, 0.12);
+  --teal-border: rgba(61, 188, 171, 0.3);
+
+  --pink: #d07090;
+  --pink-bg: rgba(208, 112, 144, 0.12);
+  --pink-border: rgba(208, 112, 144, 0.3);
+
+  --color-success: var(--green);
+  --color-warning: var(--yellow);
+  --color-error: var(--red);
+  --color-info: #6a9fd0;
+  --color-success-bg: var(--green-bg);
+  --color-warning-bg: var(--yellow-bg);
+  --color-error-bg: var(--red-bg);
+  --color-info-bg: rgba(106, 159, 208, 0.12);
+
+  /* === OVERLAYS === */
+  --color-badge-overlay: rgba(0, 0, 0, 0.75);
+
+  /* === INTERACTIVE === */
+  --color-link: var(--accent);
+  --color-link-hover: #5ab87e;
+
+  /* === TYPOGRAPHY (warm, distinctive) === */
+  --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+
+  --font-heading: var(--font-display);
+  --font-body: var(--font-sans);
+
+  /* Font Sizes (Agora scale) */
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-md: 1.0625rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 1.875rem;
+  --text-3xl: 2.375rem;
+  --text-4xl: 3rem;
+  --text-5xl: 4rem;
+  --text-label: 0.625rem;
+
+  /* Line Heights */
+  --leading-tight: 1.15;
+  --leading-snug: 1.35;
+  --leading-normal: 1.7;
+  --leading-relaxed: 1.9;
+
+  /* Letter Spacing */
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.06em;
+  --tracking-wider: 0.1em;
+  --tracking-widest: 0.16em;
+
+  /* === SHADOWS (softer for dark mode) === */
+  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.4);
+  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.4);
+  --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.4);
+  --shadow-xl: 8px 8px 0 rgba(0, 0, 0, 0.4);
+
+  /* === FOCUS === */
+  --focus-ring: var(--shadow-accent);
+
+  color-scheme: dark;
+}
+
+/* === CONTENT TYPE BADGE COLORS (Agora dark palette) === */
+[data-theme="agora-dark"] [data-content-type="article"] { --badge-color: #6a9fd0; --badge-bg: rgba(106, 159, 208, 0.12); }
+[data-theme="agora-dark"] [data-content-type="blog"] { --badge-color: #4aa06e; --badge-bg: rgba(74, 160, 110, 0.12); }
+[data-theme="agora-dark"] [data-content-type="project"] { --badge-color: #9a7ec4; --badge-bg: rgba(154, 126, 196, 0.12); }
+[data-theme="agora-dark"] [data-content-type="explainer"] { --badge-color: #3dbcab; --badge-bg: rgba(61, 188, 171, 0.12); }
+[data-theme="agora-dark"] [data-content-type="video"] { --badge-color: #d85e55; --badge-bg: rgba(216, 94, 85, 0.12); }
+[data-theme="agora-dark"] [data-content-type="tutorial"] { --badge-color: #daa040; --badge-bg: rgba(218, 160, 64, 0.12); }
+}