@commonpub/layer 0.18.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.18.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.3",
-    "@commonpub/server": "^2.47.0",
+    "@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,11 +53,11 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.1",
     "@commonpub/docs": "0.6.2",
+    "@commonpub/auth": "0.5.1",
     "@commonpub/config": "0.11.0",
-    "@commonpub/learning": "0.5.1",
     "@commonpub/editor": "0.7.9",
+    "@commonpub/learning": "0.5.1",
     "@commonpub/protocol": "0.9.9",
     "@commonpub/ui": "0.8.5"
   },

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/middleware/security.ts

@@ -1,9 +1,15 @@
 // Security middleware — rate limiting + security headers + CSP
-import { checkRateLimit, createRateLimitStore, shouldSkipRateLimit, getSecurityHeaders, buildCspHeader, buildCspDirectives } from '@commonpub/server';
+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.
-const store = createRateLimitStore({ redisUrl: process.env.NUXT_REDIS_URL });
+// `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(async (event) => {

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>');
+}