@commonpub/layer 0.3.38 → 0.4.0

package/components/CookieConsent.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const { hasConsented, hasNonEssentialCookies, acceptAll, acceptEssential } = useCookieConsent();
+
+const visible = computed(() => !hasConsented.value && hasNonEssentialCookies.value);
+</script>
+
+<template>
+  <Transition name="cpub-consent-slide">
+    <div v-if="visible" class="cpub-consent" role="dialog" aria-label="Cookie consent">
+      <div class="cpub-consent-inner">
+        <p class="cpub-consent-text">
+          This site uses cookies for essential functionality and to remember your preferences.
+          <NuxtLink to="/cookies" class="cpub-consent-link">Learn more</NuxtLink>
+        </p>
+        <div class="cpub-consent-actions">
+          <button class="cpub-btn cpub-btn-sm" @click="acceptEssential">
+            Essential only
+          </button>
+          <button class="cpub-btn cpub-btn-sm cpub-btn-primary" @click="acceptAll">
+            Accept all
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.cpub-consent {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-toast);
+  background: var(--surface);
+  border-top: var(--border-width-default) solid var(--border);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.cpub-consent-inner {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.cpub-consent-text {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: var(--leading-snug);
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-consent-link {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.cpub-consent-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+/* Slide-up transition */
+.cpub-consent-slide-enter-active,
+.cpub-consent-slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.cpub-consent-slide-enter-from,
+.cpub-consent-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+@media (max-width: 640px) {
+  .cpub-consent-inner {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--space-4);
+  }
+  .cpub-consent-actions { justify-content: stretch; }
+  .cpub-consent-actions .cpub-btn { flex: 1; }
+}
+</style>

package/composables/useCookieConsent.ts

@@ -0,0 +1,117 @@
+import type { CookieDefinition } from '@commonpub/config';
+
+/**
+ * Built-in CommonPub cookies. Instance operators add theirs via
+ * `cookies` in commonpub.config.ts — those are merged at runtime.
+ */
+const BUILTIN_COOKIES: CookieDefinition[] = [
+  {
+    name: 'better-auth.session_token',
+    category: 'essential',
+    description: 'Authenticates your login session. HttpOnly and secure.',
+    duration: '7 days',
+  },
+  {
+    name: 'cpub-consent',
+    category: 'essential',
+    description: 'Stores your cookie consent choice.',
+    duration: '1 year',
+  },
+  {
+    name: 'cpub-color-scheme',
+    category: 'functional',
+    description: 'Remembers your light/dark mode preference across visits.',
+    duration: '1 year',
+  },
+];
+
+export type ConsentLevel = 'all' | 'essential' | null;
+
+/**
+ * Cookie consent composable.
+ *
+ * Manages consent state via an essential cookie (`cpub-consent`).
+ * Provides the full registry of cookies (built-in + instance-custom)
+ * and guards for checking whether a category is allowed.
+ */
+export function useCookieConsent(): {
+  /** Whether the user has made a consent choice */
+  hasConsented: ComputedRef<boolean>;
+  /** Current consent level */
+  consentLevel: Ref<ConsentLevel>;
+  /** Whether functional cookies are allowed */
+  allowsFunctional: ComputedRef<boolean>;
+  /** Whether analytics cookies are allowed */
+  allowsAnalytics: ComputedRef<boolean>;
+  /** Accept all cookie categories */
+  acceptAll: () => void;
+  /** Accept only essential cookies */
+  acceptEssential: () => void;
+  /** Reset consent (re-shows banner) */
+  resetConsent: () => void;
+  /** Full cookie registry (built-in + custom) */
+  cookies: ComputedRef<CookieDefinition[]>;
+  /** Whether the banner has non-essential cookies to ask about */
+  hasNonEssentialCookies: ComputedRef<boolean>;
+} {
+  const consentCookie = useCookie<string | null>('cpub-consent', {
+    maxAge: 31536000,
+    path: '/',
+    sameSite: 'lax',
+  });
+
+  const consentLevel = computed<ConsentLevel>({
+    get: () => {
+      const val = consentCookie.value;
+      if (val === 'all' || val === 'essential') return val;
+      return null;
+    },
+    set: (v: ConsentLevel) => {
+      consentCookie.value = v;
+    },
+  });
+
+  const hasConsented = computed(() => consentLevel.value !== null);
+  const allowsFunctional = computed(() => consentLevel.value === 'all');
+  const allowsAnalytics = computed(() => consentLevel.value === 'all');
+
+  // Merge built-in cookies with instance-custom cookies from runtime config
+  const runtimeConfig = useRuntimeConfig();
+  const customCookies = computed<CookieDefinition[]>(() => {
+    const raw = (runtimeConfig.public as Record<string, unknown>).instanceCookies;
+    return Array.isArray(raw) ? raw as CookieDefinition[] : [];
+  });
+
+  const cookies = computed<CookieDefinition[]>(() => [
+    ...BUILTIN_COOKIES,
+    ...customCookies.value,
+  ]);
+
+  const hasNonEssentialCookies = computed(() =>
+    cookies.value.some((c) => c.category !== 'essential'),
+  );
+
+  function acceptAll(): void {
+    consentCookie.value = 'all';
+  }
+
+  function acceptEssential(): void {
+    consentCookie.value = 'essential';
+  }
+
+  function resetConsent(): void {
+    consentCookie.value = null;
+  }
+
+  return {
+    hasConsented,
+    consentLevel,
+    allowsFunctional,
+    allowsAnalytics,
+    acceptAll,
+    acceptEssential,
+    resetConsent,
+    cookies,
+    hasNonEssentialCookies,
+  };
+}

package/composables/useTheme.ts

@@ -1,34 +1,55 @@
-import { applyThemeToElement, isValidThemeId } from '@commonpub/ui';
-
-const STORAGE_KEY = 'cpub-theme';
+import { applyThemeToElement } from '@commonpub/ui';
+import { THEME_TO_FAMILY, FAMILY_VARIANTS } from '../utils/themeConfig';
 
+/**
+ * Theme composable — SSR-safe, server-resolved.
+ *
+ * The admin picks the instance theme (via admin panel). Users only toggle
+ * between light and dark mode within that theme's family. The server middleware
+ * resolves the correct theme on every request — no theme-selection cookie needed.
+ *
+ * The dark mode preference cookie (`cpub-color-scheme`) is only persisted
+ * when the user has accepted functional cookies via the consent banner.
+ */
 export function useTheme(): {
+  /** Current active theme ID (resolved from instance default + dark mode) */
   themeId: Ref<string>;
-  setTheme: (id: string) => void;
+  /** Whether dark mode is active */
+  isDark: Ref<boolean>;
+  /** The admin-configured instance theme */
+  instanceDefault: Ref<string>;
+  /** Toggle dark mode — persists preference in cookie if consent given */
+  setDarkMode: (dark: boolean) => void;
 } {
-  // Use useState so SSR and client agree on 'base' initially
-  const themeId = useState('cpub-theme', () => 'base');
+  const themeId = useState<string>('cpub-theme', () => 'base');
+  const instanceDefault = useState<string>('cpub-instance-theme', () => 'base');
+  const isDark = useState<boolean>('cpub-dark-mode', () => false);
+  const schemeCookie = useCookie('cpub-color-scheme', {
+    maxAge: 31536000,
+    path: '/',
+    sameSite: 'lax',
+  });
+  const { allowsFunctional } = useCookieConsent();
 
-  // 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 setDarkMode(dark: boolean): void {
+    isDark.value = dark;
+
+    // Only persist to cookie if user consented to functional cookies
+    if (allowsFunctional.value) {
+      schemeCookie.value = dark ? 'dark' : 'light';
+    }
+
+    // Resolve the correct variant for this family + mode
+    const family = THEME_TO_FAMILY[instanceDefault.value] ?? 'classic';
+    const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
+    const newTheme = dark ? variants.dark : variants.light;
+
+    themeId.value = newTheme;
 
-  function setTheme(id: string): void {
-    if (isValidThemeId(id)) {
-      themeId.value = id;
-      if (import.meta.client) {
-        applyThemeToElement(document.documentElement, id);
-        localStorage.setItem(STORAGE_KEY, id);
-      }
+    if (import.meta.client) {
+      applyThemeToElement(document.documentElement, newTheme);
     }
   }
 
-  return { themeId, setTheme };
+  return { themeId, isDark, instanceDefault, setDarkMode };
 }

package/layouts/admin.vue

@@ -31,6 +31,7 @@ const sidebarOpen = ref(false);
           <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/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</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>

package/layouts/default.vue

@@ -184,6 +184,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <NuxtLink to="/about" class="cpub-footer-link">About</NuxtLink>
           <NuxtLink v-if="docs" to="/docs" class="cpub-footer-link">Docs</NuxtLink>
           <NuxtLink to="/privacy" class="cpub-footer-link">Privacy Policy</NuxtLink>
+          <NuxtLink to="/cookies" class="cpub-footer-link">Cookie Policy</NuxtLink>
           <NuxtLink to="/terms" class="cpub-footer-link">Terms of Service</NuxtLink>
           <a href="/feed.xml" class="cpub-footer-link">RSS Feed</a>
         </nav>
@@ -192,6 +193,9 @@ const userUsername = computed(() => user.value?.username ?? '');
         <span>&copy; {{ new Date().getFullYear() }} {{ siteName }}. Open source under MIT.</span>
       </div>
     </footer>
+
+    <!-- Cookie consent banner -->
+    <CookieConsent />
   </div>
 </template>
 

package/nuxt.config.ts

@@ -20,12 +20,28 @@ export default defineNuxtConfig({
           href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
           crossorigin: 'anonymous',
         },
+        {
+          rel: 'preconnect',
+          href: 'https://fonts.googleapis.com',
+        },
+        {
+          rel: 'preconnect',
+          href: 'https://fonts.gstatic.com',
+          crossorigin: 'anonymous',
+        },
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Work+Sans:ital,wght@0,300..800;1,300..800&display=swap',
+        },
       ],
     },
   },
   css: [
     uiTheme('base.css'),
     uiTheme('dark.css'),
+    uiTheme('generics.css'),
+    uiTheme('agora.css'),
+    uiTheme('agora-dark.css'),
     uiTheme('components.css'),
     uiTheme('prose.css'),
     uiTheme('layouts.css'),
@@ -71,6 +87,7 @@ export default defineNuxtConfig({
       },
       contentTypes: 'project,article,blog,explainer',
       contestCreation: 'admin',
+      instanceCookies: [] as Array<{ name: string; category: string; description: string; duration: string; provider?: string }>,
     },
   },
   routeRules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.38",
+  "version": "0.4.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -16,6 +16,7 @@
     "server",
     "theme",
     "types",
+    "utils",
     "!**/__tests__/",
     "!**/*.test.ts",
     "!**/*.spec.ts",
@@ -49,15 +50,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/config": "0.8.0",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/config": "0.7.1",
-    "@commonpub/docs": "0.5.2",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/docs": "0.5.2",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/protocol": "0.9.5",
-    "@commonpub/server": "2.21.0",
+    "@commonpub/ui": "0.8.0",
+    "@commonpub/server": "2.22.0",
     "@commonpub/schema": "0.8.13",
-    "@commonpub/ui": "0.7.1"
+    "@commonpub/protocol": "0.9.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",