@commonpub/layer 0.4.4 → 0.4.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,9 +55,9 @@
     "@commonpub/docs": "0.5.2",
     "@commonpub/editor": "0.5.0",
     "@commonpub/server": "2.22.0",
-    "@commonpub/ui": "0.8.2",
-    "@commonpub/protocol": "0.9.5",
+    "@commonpub/ui": "0.8.4",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/protocol": "0.9.5",
     "@commonpub/schema": "0.8.13"
   },
   "devDependencies": {

package/pages/index.vue

@@ -157,6 +157,32 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         <div v-if="activeContest?.endDate" class="cpub-hero-aside">
           <CountdownTimer :target-date="activeContest.endDate" />
         </div>
+        <!-- Large Town Square logo — shown for Agora theme when no contest -->
+        <div v-if="!activeContest" class="cpub-hero-aside cpub-hero-logo-aside">
+          <svg class="cpub-hero-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" aria-hidden="true">
+            <rect x="18" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="5.5" stroke-linejoin="round"/>
+            <rect x="110" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="5.5" stroke-linejoin="round"/>
+            <rect x="18" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="5.5" stroke-linejoin="round"/>
+            <rect x="110" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="5.5" stroke-linejoin="round"/>
+            <rect x="90" y="90" width="20" height="20" fill="var(--accent, #3d8b5e)"/>
+            <rect x="84" y="84" width="6" height="6" fill="var(--accent, #3d8b5e)" opacity="0.6"/>
+            <rect x="110" y="84" width="6" height="6" fill="var(--accent, #3d8b5e)" opacity="0.6"/>
+            <rect x="84" y="110" width="6" height="6" fill="var(--accent, #3d8b5e)" opacity="0.6"/>
+            <rect x="110" y="110" width="6" height="6" fill="var(--accent, #3d8b5e)" opacity="0.6"/>
+            <line x1="32" y1="40" x2="76" y2="40" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="32" y1="52" x2="66" y2="52" stroke="var(--accent, #3d8b5e)" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+            <line x1="32" y1="64" x2="72" y2="64" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="124" y1="40" x2="168" y2="40" stroke="var(--accent, #3d8b5e)" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+            <line x1="124" y1="52" x2="158" y2="52" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="124" y1="64" x2="164" y2="64" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="32" y1="132" x2="76" y2="132" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="32" y1="144" x2="62" y2="144" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="32" y1="156" x2="70" y2="156" stroke="var(--accent, #3d8b5e)" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+            <line x1="124" y1="132" x2="168" y2="132" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+            <line x1="124" y1="144" x2="160" y2="144" stroke="var(--accent, #3d8b5e)" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+            <line x1="124" y1="156" x2="152" y2="156" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.15"/>
+          </svg>
+        </div>
       </div>
     </section>
 
@@ -464,6 +490,14 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 
 .cpub-hero-aside { flex-shrink: 0; }
 
+/* Hero logo — hidden by default, shown by Agora theme CSS */
+.cpub-hero-logo-aside { display: none; }
+.cpub-hero-logo {
+  width: 160px;
+  height: 160px;
+  opacity: 0.6;
+}
+
 /* ─── TABS BAR ─── */
 .cpub-tabs-bar {
   position: sticky;

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,10 @@
 [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; }
+
+/* Show Town Square logo in hero section */
+[data-theme="agora-dark"] .cpub-hero-logo-aside { display: flex !important; align-items: center; justify-content: center; }

package/theme/agora.css

@@ -460,3 +460,16 @@
 [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; }
+
+/* Show Town Square logo in hero section */
+[data-theme="agora"] .cpub-hero-logo-aside { display: flex !important; align-items: center; justify-content: center; }