@commonpub/layer 0.17.0 → 0.18.1

package/components/homepage/HeroSection.vue

@@ -11,7 +11,13 @@ const activeContest = computed(() => {
   return items?.find((c) => c.status === 'active') ?? null;
 });
 
-const heroDismissed = ref(false);
+// Shared via useState so the dismiss sticks across component remounts.
+// HomepageSectionRenderer's v-if wrappers can remount HeroSection when the
+// `sections` useFetch revalidates on hydration or when feature flags flip
+// (they're async on first load). A local ref would reset on remount and
+// the user would see the banner "come back" after dismissing — which also
+// fails the navigation.spec.ts e2e test.
+const heroDismissed = useState('cpub:hero-dismissed', () => false);
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -29,8 +29,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.12",
-    "@commonpub/schema": "^0.14.1",
-    "@commonpub/server": "^2.45.1",
+    "@commonpub/schema": "^0.14.4",
+    "@commonpub/server": "^2.47.2",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,12 +53,12 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/editor": "0.7.9",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/auth": "0.5.1",
-    "@commonpub/protocol": "0.9.9",
     "@commonpub/docs": "0.6.2",
+    "@commonpub/auth": "0.5.1",
     "@commonpub/config": "0.11.0",
+    "@commonpub/editor": "0.7.9",
+    "@commonpub/learning": "0.5.1",
+    "@commonpub/protocol": "0.9.9",
     "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {

package/pages/docs/[siteSlug]/[...pagePath].vue

@@ -254,13 +254,15 @@ useSeoMeta({
           </div>
           <div v-if="searchOpen && searchResults?.length" class="docs-search-results">
             <NuxtLink
-              v-for="r in (searchResults as Array<{ id: string; title: string; slug: string }>)"
+              v-for="r in (searchResults as Array<{ id: string; title: string; slug: string; snippet?: string | null }>)"
               :key="r.id"
               :to="`/docs/${siteSlug}/${r.slug}`"
               class="docs-search-result"
               @click="searchOpen = false; searchQuery = ''"
             >
-              {{ r.title }}
+              <span class="docs-search-result-title">{{ r.title }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — see highlightSnippet docstring. -->
+              <span v-if="r.snippet" class="docs-search-result-snippet" v-html="highlightSnippet(r.snippet)" />
             </NuxtLink>
           </div>
         </div>
@@ -481,7 +483,7 @@ useSeoMeta({
   border: var(--border-width-default) solid var(--border);
   box-shadow: var(--shadow-md);
   z-index: 50;
-  max-height: 200px;
+  max-height: 280px;
   overflow-y: auto;
 }
 
@@ -496,6 +498,10 @@ useSeoMeta({
 
 .docs-search-result:last-child { border-bottom: none; }
 .docs-search-result:hover { background: var(--surface2); color: var(--accent); }
+.docs-search-result-title { display: block; color: var(--text); font-weight: 500; }
+.docs-search-result-snippet { display: block; margin-top: 2px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }
+.docs-search-result-snippet :deep(b) { background: var(--accent-soft, rgba(91, 156, 246, 0.18)); color: var(--text); font-weight: 600; padding: 0 2px; border-radius: 2px; }
+.docs-search-result:hover .docs-search-result-title { color: var(--accent); }
 
 /* Nav Tree */
 .docs-nav { padding: 0; }

package/pages/docs/[siteSlug]/index.vue

@@ -147,13 +147,17 @@ useSeoMeta({
           </div>
           <div v-if="searchOpen && searchResults?.length" class="docs-search-results">
             <NuxtLink
-              v-for="r in (searchResults as Array<{ id: string; title: string; slug: string }>)"
+              v-for="r in (searchResults as Array<{ id: string; title: string; slug: string; snippet?: string | null }>)"
               :key="r.id"
               :to="`/docs/${siteSlug}/${r.slug}`"
               class="docs-search-result"
               @click="searchOpen = false; searchQuery = ''"
             >
-              {{ r.title }}
+              <span class="docs-search-result-title">{{ r.title }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — snippet is ts_headline
+                   output, sanitized by highlightSnippet (escapes everything,
+                   restores only <b> and </b>). -->
+              <span v-if="r.snippet" class="docs-search-result-snippet" v-html="highlightSnippet(r.snippet)" />
             </NuxtLink>
           </div>
         </div>
@@ -267,10 +271,14 @@ useSeoMeta({
 .docs-search-input { width: 100%; padding: 6px 8px 6px 26px; font-size: 12px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); }
 .docs-search-input::placeholder { color: var(--text-faint); }
 .docs-search-input:focus { border-color: var(--accent); outline: none; }
-.docs-search-results { position: absolute; top: 100%; left: 16px; right: 16px; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); z-index: 50; max-height: 200px; overflow-y: auto; }
+.docs-search-results { position: absolute; top: 100%; left: 16px; right: 16px; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); z-index: 50; max-height: 280px; overflow-y: auto; }
 .docs-search-result { display: block; padding: 8px 12px; font-size: 12px; color: var(--text-dim); text-decoration: none; border-bottom: var(--border-width-default) solid var(--border2); }
 .docs-search-result:last-child { border-bottom: none; }
 .docs-search-result:hover { background: var(--surface2); color: var(--accent); }
+.docs-search-result-title { display: block; color: var(--text); font-weight: 500; }
+.docs-search-result-snippet { display: block; margin-top: 2px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }
+.docs-search-result-snippet :deep(b) { background: var(--accent-soft, rgba(91, 156, 246, 0.18)); color: var(--text); font-weight: 600; padding: 0 2px; border-radius: 2px; }
+.docs-search-result:hover .docs-search-result-title { color: var(--accent); }
 
 .docs-nav { padding: 0; }
 .docs-nav-item { border-bottom: var(--border-width-default) solid var(--border2); }

package/pages/index.vue

@@ -74,7 +74,9 @@ const { data: contests, pending: contestsPending } = await useFetch<{ items: Con
   query: { limit: 3 },
 });
 
-const heroDismissed = ref(false);
+// Shared with HeroSection.vue via the same useState key so the dismiss
+// persists across the configurable-renderer and legacy code paths.
+const heroDismissed = useState('cpub:hero-dismissed', () => false);
 const joinedHubs = ref(new Set<string>());
 
 // Active contest for hero banner

package/server/api/learn/[slug]/[lessonSlug]/complete.post.ts

@@ -1,13 +1,29 @@
 import { getLessonBySlug, markLessonComplete } from '@commonpub/server';
+import { completeLessonSchema } from '@commonpub/learning';
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event);
   const db = useDB();
   const { slug, lessonSlug } = parseParams(event, { slug: 'string', lessonSlug: 'string' });
-  const body = await readBody(event).catch(() => ({}));
+
+  // Validate body. Strip any client-supplied quizScore/quizPassed (the schema
+  // is `.strict()` and only whitelists `answers`) — server is the source of
+  // truth for whether a quiz passed. Accept empty body for non-quiz lessons.
+  const input = await parseBody(event, completeLessonSchema);
 
   const result = await getLessonBySlug(db, slug, lessonSlug);
   if (!result) throw createError({ statusCode: 404, statusMessage: 'Lesson not found' });
 
-  return markLessonComplete(db, user.id, result.lesson.id, body?.quizScore, body?.quizPassed);
+  try {
+    return await markLessonComplete(db, user.id, result.lesson.id, input.answers);
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (msg.includes('Quiz lessons require answers')) {
+      throw createError({ statusCode: 400, statusMessage: msg });
+    }
+    if (msg.includes('Not enrolled')) {
+      throw createError({ statusCode: 403, statusMessage: msg });
+    }
+    throw err;
+  }
 });

package/server/api/learn/[slug]/[lessonSlug]/index.get.ts

@@ -1,5 +1,6 @@
 import { getLessonBySlug } from '@commonpub/server';
 import { renderMarkdown } from '@commonpub/docs';
+import { redactQuizAnswers } from '@commonpub/learning';
 
 function blocksToHtml(blocks: unknown): string {
   if (!Array.isArray(blocks)) return '';
@@ -39,6 +40,7 @@ function blocksToHtml(blocks: unknown): string {
 export default defineEventHandler(async (event) => {
   const db = useDB();
   const { slug, lessonSlug } = parseParams(event, { slug: 'string', lessonSlug: 'string' });
+  const user = getOptionalUser(event);
 
   const result = await getLessonBySlug(db, slug, lessonSlug);
   if (!result) {
@@ -64,5 +66,13 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  return { ...result, renderedHtml };
+  // Quiz lessons: strip `correctOptionId` + `explanation` from each question
+  // unless the caller is the path author. Without this, anyone enrolled (or
+  // anonymous) could fetch the answer key directly from the lesson content.
+  const isAuthor = !!user && user.id === result.pathAuthorId;
+  const safeLesson = isAuthor
+    ? result.lesson
+    : { ...result.lesson, content: redactQuizAnswers(result.lesson.content as Record<string, unknown>) };
+
+  return { ...result, lesson: safeLesson, renderedHtml };
 });

package/server/api/realtime/stream.get.ts

@@ -1,9 +1,20 @@
-import { getUnreadCount, getUnreadMessageCount } from '@commonpub/server';
+import { getUnreadCount, getUnreadMessageCount, subscribeSseEvents } from '@commonpub/server';
 
 /**
  * Unified SSE stream for notification and message counts.
- * Replaces the separate /api/notifications/stream and /api/messages/stream endpoints.
- * Sends both counts in a single event, halving DB polls and open connections.
+ *
+ * Two delivery paths layered together:
+ *   1. Pub/sub — the server emits on a per-user channel whenever a
+ *      notification or message is written. When `NUXT_REDIS_URL` is set,
+ *      events cross Nitro processes; without Redis, fanout is in-process
+ *      only (same behavior as before session 130).
+ *   2. Polling — every 30 s we re-query counts as a safety net, so a
+ *      missed publish (Redis blip, connection drop) resolves itself in
+ *      one poll tick instead of until the client reconnects.
+ *
+ * Both paths converge on `sendCounts()`, which fetches fresh counts from
+ * the DB. The pub/sub payload is a nudge; we never trust it as the source
+ * of truth.
  */
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event);
@@ -14,20 +25,43 @@ export default defineEventHandler(async (event) => {
   const stream = new ReadableStream({
     async start(controller) {
       let closed = false;
+      let unsubscribe: (() => void) | null = null;
+      let sending = false;
+      let pendingSend = false;
+
       function cleanup(): void {
         if (closed) return;
         closed = true;
         clearInterval(interval);
         clearInterval(keepalive);
+        if (unsubscribe) {
+          try { unsubscribe(); } catch { /* ignore */ }
+          unsubscribe = null;
+        }
         try { controller.close(); } catch { /* already closed */ }
       }
 
       async function sendCounts(): Promise<void> {
-        const [notifications, messages] = await Promise.all([
-          getUnreadCount(db, userId),
-          getUnreadMessageCount(db, userId),
-        ]);
-        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'counts', notifications, messages })}\n\n`));
+        if (closed) return;
+        // Coalesce overlapping triggers — if a pub/sub event fires while
+        // a previous sendCounts is still resolving, set pendingSend and
+        // run one more round after the current call returns. Prevents a
+        // burst of publishes from piling up N DB queries.
+        if (sending) { pendingSend = true; return; }
+        sending = true;
+        try {
+          do {
+            pendingSend = false;
+            const [notifications, messages] = await Promise.all([
+              getUnreadCount(db, userId),
+              getUnreadMessageCount(db, userId),
+            ]);
+            if (closed) return;
+            controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'counts', notifications, messages })}\n\n`));
+          } while (pendingSend && !closed);
+        } finally {
+          sending = false;
+        }
       }
 
       // Send initial counts — if DB is unavailable, send zeros and let polling retry
@@ -37,14 +71,27 @@ export default defineEventHandler(async (event) => {
         controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'counts', notifications: 0, messages: 0 })}\n\n`));
       }
 
-      // Poll every 10 seconds
+      // Pub/sub subscription — nudges the send path whenever a
+      // notification or message is written for this user.
+      try {
+        unsubscribe = await subscribeSseEvents(userId, () => {
+          sendCounts().catch(() => {});
+        });
+      } catch {
+        // Pub/sub unavailable — polling alone still works, just slower.
+        unsubscribe = null;
+      }
+
+      // Polling fallback at 30 s (was 10 s). The pub/sub path is the
+      // primary delivery mechanism; polling only guards against missed
+      // events (Redis restart, subscriber dropped).
       const interval = setInterval(async () => {
         try {
           await sendCounts();
         } catch {
           cleanup();
         }
-      }, 10000);
+      }, 30000);
 
       // Keepalive every 30 seconds
       const keepalive = setInterval(() => {

package/server/middleware/public-api-auth.ts

@@ -77,7 +77,7 @@ export default defineEventHandler(async (event) => {
 
   // Per-key rate limit (separate store from IP-based rate limit so a noisy
   // public-API consumer can't DoS the web UI for their own home IP).
-  const rl = apiKeyRateLimit.check(key.id, key.rateLimitPerMinute);
+  const rl = await apiKeyRateLimit.check(key.id, key.rateLimitPerMinute);
   setResponseHeader(event, 'X-RateLimit-Limit', String(rl.limit));
   setResponseHeader(event, 'X-RateLimit-Remaining', String(rl.remaining));
   setResponseHeader(event, 'X-RateLimit-Reset', String(rl.resetAt));

package/server/middleware/security.ts

@@ -1,10 +1,18 @@
 // Security middleware — rate limiting + security headers + CSP
-import { RateLimitStore, checkRateLimit, shouldSkipRateLimit, getSecurityHeaders, buildCspHeader, buildCspDirectives } from '@commonpub/server';
-
-const store = new RateLimitStore();
+import { checkRateLimit, createRateLimitStore, createRedisFailOpenLogger, shouldSkipRateLimit, getSecurityHeaders, buildCspHeader, buildCspDirectives } from '@commonpub/server';
+
+// Selects a Redis-backed store when NUXT_REDIS_URL is set, otherwise the
+// in-process memory store. Unset env = byte-identical behavior to pre-0.6.
+// `onRedisError` is rate-limited: first event logs immediately, subsequent
+// events roll up into a one-per-minute summary so a Redis outage doesn't
+// flood the log at real traffic.
+const store = createRateLimitStore({
+  redisUrl: process.env.NUXT_REDIS_URL,
+  onRedisError: createRedisFailOpenLogger({ scope: 'ratelimit:ip' }),
+});
 const isDev = process.env.NODE_ENV !== 'production';
 
-export default defineEventHandler((event) => {
+export default defineEventHandler(async (event) => {
   const url = getRequestURL(event);
   const pathname = url.pathname;
 
@@ -18,7 +26,7 @@ export default defineEventHandler((event) => {
       || 'unknown';
 
     const userId = event.context.auth?.user?.id as string | undefined;
-    const { result, headers: rlHeaders } = checkRateLimit(store, ip, pathname, userId);
+    const { result, headers: rlHeaders } = await checkRateLimit(store, ip, pathname, userId);
 
     for (const [key, value] of Object.entries(rlHeaders)) {
       setResponseHeader(event, key, value);

package/utils/highlightSnippet.ts

@@ -0,0 +1,29 @@
+/**
+ * Render a Postgres `ts_headline` snippet safely.
+ *
+ * `ts_headline` wraps matched tokens in `<b>...</b>` (and nothing else by
+ * default). The input text has already been HTML-tag-stripped on the
+ * server (see packages/server/src/docs/docs.ts `searchDocsPages` — the
+ * `extracted.text_content` CTE uses `regexp_replace` to pull tags out
+ * before tokenization). So the only HTML we should ever see in the
+ * returned string is the `<b>` markers ts_headline itself emits.
+ *
+ * To be safe anyway: HTML-escape the whole string, then restore exactly
+ * `<b>` and `</b>`. Anything else — including attributes on `<b>` or any
+ * other tag that somehow slipped through — becomes harmless escaped text.
+ *
+ * Return value is intended for `v-html`.
+ */
+export function highlightSnippet(snippet: string | null | undefined): string {
+  if (!snippet) return '';
+  const escaped = snippet
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+  // Restore only bare <b> / </b> (no attributes, no whitespace variants).
+  return escaped
+    .replace(/&lt;b&gt;/g, '<b>')
+    .replace(/&lt;\/b&gt;/g, '</b>');
+}