@commonpub/layer 0.4.3 → 0.4.5

package/components/SiteLogo.vue

@@ -1,14 +1,13 @@
 <template>
   <span class="cpub-site-logo">
-    <!-- Classic logo: shown by default, hidden when Agora active -->
+    <!-- Classic logo -->
     <span class="cpub-logo-classic">
       <span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
       <span class="cpub-logo-name">CommonPub</span>
     </span>
 
-    <!-- Agora logo: hidden by default, shown when Agora active via CSS -->
+    <!-- Agora logo: Town Square mark + Fraunces wordmark -->
     <span class="cpub-logo-agora">
-      <!-- Town Square mark: 4 blocks with content lines + green center -->
       <svg class="cpub-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="22" height="22" aria-hidden="true">
         <rect x="18" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
         <rect x="110" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
@@ -34,7 +33,6 @@
   white-space: nowrap;
 }
 
-/* Classic logo */
 .cpub-logo-classic {
   display: flex;
   align-items: center;
@@ -45,7 +43,7 @@
 .cpub-logo-bracket { color: var(--accent); font-size: 15px; }
 .cpub-logo-name { margin-left: 2px; }
 
-/* Agora logo — hidden by default */
+/* Agora logo hidden by default — shown via agora.css */
 .cpub-logo-agora {
   display: none;
   align-items: center;
@@ -60,15 +58,3 @@
 }
 .cpub-logo-pub { color: var(--accent); }
 </style>
-
-<style>
-/* Switch logos based on data-theme — pure CSS, no JS hydration needed */
-[data-theme="agora"] .cpub-logo-classic,
-[data-theme="agora-dark"] .cpub-logo-classic {
-  display: none !important;
-}
-[data-theme="agora"] .cpub-logo-agora,
-[data-theme="agora-dark"] .cpub-logo-agora {
-  display: flex !important;
-}
-</style>

package/layouts/default.vue

@@ -3,6 +3,7 @@ const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
 const { count: unreadMessages, connect: connectMessages, disconnect: disconnectMessages } = useMessages();
 const { hubs, learning, video, docs, contests, admin, federation } = useFeatures();
+const { isDark, setDarkMode } = useTheme();
 const { enabledTypeMeta } = useContentTypes();
 const runtimeConfig = useRuntimeConfig();
 const siteName = computed(() => (runtimeConfig.public.siteName as string) || 'CommonPub');
@@ -112,6 +113,9 @@ const userUsername = computed(() => user.value?.username ?? '');
               <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
               <NuxtLink to="/dashboard" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
               <NuxtLink to="/settings" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
+              <button class="cpub-dropdown-item" role="menuitem" @click="setDarkMode(!isDark)">
+                <i :class="isDark ? 'fa-solid fa-sun' : 'fa-solid fa-moon'"></i> {{ isDark ? 'Light mode' : 'Dark mode' }}
+              </button>
               <div class="cpub-dropdown-divider" />
               <button class="cpub-dropdown-item" role="menuitem" @click="handleSignOut"><i class="fa-solid fa-right-from-bracket"></i> Sign out</button>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,11 +54,11 @@
     "@commonpub/docs": "0.5.2",
     "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/server": "2.22.0",
-    "@commonpub/protocol": "0.9.5",
+    "@commonpub/ui": "0.8.3",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.8.2",
-    "@commonpub/schema": "0.8.13"
+    "@commonpub/server": "2.22.0",
+    "@commonpub/schema": "0.8.13",
+    "@commonpub/protocol": "0.9.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/settings/index.vue

@@ -1,81 +1,8 @@
 <script setup lang="ts">
-definePageMeta({ middleware: 'auth' });
-useSeoMeta({ title: `Settings — ${useSiteName()}` });
-
-// Redirect bare /settings to /settings/profile on mount
-onMounted(() => {
-  const route = useRoute();
-  if (route.path === '/settings') {
-    navigateTo('/settings/profile', { replace: true });
-  }
-});
+// Default child route — redirect to profile
+navigateTo('/settings/profile', { replace: true });
 </script>
 
 <template>
-  <div class="cpub-settings-page">
-    <div class="cpub-settings-layout">
-      <aside class="cpub-settings-nav">
-        <h2 class="cpub-sidebar-heading">Settings</h2>
-        <nav>
-          <NuxtLink to="/settings/profile" class="cpub-settings-link">
-            <i class="fa-solid fa-user" style="width: 14px"></i> Profile
-          </NuxtLink>
-          <NuxtLink to="/settings/account" class="cpub-settings-link">
-            <i class="fa-solid fa-shield-halved" style="width: 14px"></i> Account
-          </NuxtLink>
-          <NuxtLink to="/settings/notifications" class="cpub-settings-link">
-            <i class="fa-solid fa-bell" style="width: 14px"></i> Notifications
-          </NuxtLink>
-          <NuxtLink to="/settings/appearance" class="cpub-settings-link">
-            <i class="fa-solid fa-palette" style="width: 14px"></i> Appearance
-          </NuxtLink>
-        </nav>
-      </aside>
-      <div class="cpub-settings-content">
-        <NuxtPage />
-      </div>
-    </div>
-  </div>
+  <div />
 </template>
-
-<style scoped>
-.cpub-settings-layout {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 32px;
-}
-
-.cpub-settings-nav nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.cpub-settings-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  font-size: 13px;
-  color: var(--text-dim);
-  text-decoration: none;
-  border: var(--border-width-default) solid transparent;
-}
-
-.cpub-settings-link:hover {
-  background: var(--surface2);
-  color: var(--text);
-}
-
-.cpub-settings-link.router-link-active {
-  background: var(--accent-bg);
-  border-color: var(--accent-border);
-  color: var(--accent);
-}
-
-@media (max-width: 768px) {
-  .cpub-settings-layout {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

package/pages/settings.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+useSeoMeta({ title: `Settings — ${useSiteName()}` });
+</script>
+
+<template>
+  <div class="cpub-settings-page">
+    <div class="cpub-settings-layout">
+      <aside class="cpub-settings-nav">
+        <h2 class="cpub-sidebar-heading">Settings</h2>
+        <nav>
+          <NuxtLink to="/settings/profile" class="cpub-settings-link">
+            <i class="fa-solid fa-user" style="width: 14px"></i> Profile
+          </NuxtLink>
+          <NuxtLink to="/settings/account" class="cpub-settings-link">
+            <i class="fa-solid fa-shield-halved" style="width: 14px"></i> Account
+          </NuxtLink>
+          <NuxtLink to="/settings/notifications" class="cpub-settings-link">
+            <i class="fa-solid fa-bell" style="width: 14px"></i> Notifications
+          </NuxtLink>
+          <NuxtLink to="/settings/appearance" class="cpub-settings-link">
+            <i class="fa-solid fa-palette" style="width: 14px"></i> Appearance
+          </NuxtLink>
+        </nav>
+      </aside>
+      <div class="cpub-settings-content">
+        <NuxtPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-settings-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 32px;
+}
+
+.cpub-settings-nav nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cpub-settings-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--text-dim);
+  text-decoration: none;
+  border: var(--border-width-default) solid transparent;
+}
+
+.cpub-settings-link:hover {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.cpub-settings-link.router-link-active {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+@media (max-width: 768px) {
+  .cpub-settings-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/server/utils/instanceTheme.ts

@@ -6,7 +6,7 @@ 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
+const CACHE_TTL = 300_000; // 5 minutes — admin changes take up to 5 min to propagate
 
 let cached: string | null = null;
 let cacheTime = 0;

package/theme/agora-dark.css

@@ -357,3 +357,7 @@
 [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); }
+
+/* Logo switch */
+[data-theme="agora-dark"] .cpub-logo-classic { display: none !important; }
+[data-theme="agora-dark"] .cpub-logo-agora { display: flex !important; }

package/theme/agora.css

@@ -460,3 +460,13 @@
 [data-theme="agora"] [data-content-type="explainer"] { --badge-color: #2a9d8f; --badge-bg: rgba(42, 157, 143, 0.08); }
 [data-theme="agora"] [data-content-type="video"] { --badge-color: #c4443a; --badge-bg: rgba(196, 68, 58, 0.08); }
 [data-theme="agora"] [data-content-type="tutorial"] { --badge-color: #c4882a; --badge-bg: rgba(196, 136, 42, 0.08); }
+
+
+/* ═══════════════════════════════════════════
+   LOGO SWITCH
+   Hide Classic logo, show Agora Town Square
+   mark + Fraunces wordmark.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-logo-classic { display: none !important; }
+[data-theme="agora"] .cpub-logo-agora { display: flex !important; }