@commonpub/layer 0.82.0 → 0.83.0

package/components/editors/ProjectEditor.vue

@@ -14,6 +14,9 @@ function updateMeta(key: string, value: unknown): void {
   emit('update:metadata', { ...props.metadata, [key]: value });
 }
 
+const { uploadFile } = useFileUpload();
+const toast = useToast();
+
 const blockTypes: BlockTypeGroup[] = [
   {
     name: 'Basic',
@@ -75,12 +78,12 @@ function onCoverUpload(event: Event): void {
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'cover');
-  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile(file, 'cover')
     .then((res) => { updateMeta('coverImageUrl', res.url); })
-    .catch(() => { /* silent fallback */ });
+    .catch((err: unknown) => {
+      const msg = (err as { data?: { statusMessage?: string } })?.data?.statusMessage;
+      toast.error(msg || 'Cover image upload failed');
+    });
 }
 
 function onCoverUrl(): void {
@@ -100,12 +103,12 @@ function onBannerUpload(event: Event): void {
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'cover');
-  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile(file, 'cover')
     .then((res) => { updateMeta('bannerUrl', res.url); })
-    .catch(() => {});
+    .catch((err: unknown) => {
+      const msg = (err as { data?: { statusMessage?: string } })?.data?.statusMessage;
+      toast.error(msg || 'Banner image upload failed');
+    });
 }
 
 function removeBanner(): void {

package/components/homepage/CustomHtmlSection.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HomepageSectionConfig } from '@commonpub/server';
+import { sanitizeRichHtml } from '../../composables/useSanitize';
 
 const props = defineProps<{
   config: HomepageSectionConfig;
   title?: string;
 }>();
+
+// Admin-authored raw HTML renders on the PUBLIC homepage with v-html; strip
+// scripts/event-handlers/javascript: before injecting (CSP allows unsafe-inline,
+// so this is the only XSS barrier). (audit session 204 — P1)
+const safeHtml = computed(() =>
+  typeof props.config.html === 'string' ? sanitizeRichHtml(props.config.html) : '',
+);
 </script>
 
 <template>
-  <section v-if="config.html" class="cpub-custom-section">
+  <section v-if="safeHtml" class="cpub-custom-section">
     <h2 v-if="title" class="cpub-custom-title">{{ title }}</h2>
-    <div class="cpub-custom-content" v-html="config.html" />
+    <div class="cpub-custom-content" v-html="safeHtml" />
   </section>
 </template>
 

package/components/hub/HubProducts.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{ 'product-created': [] }>();
+const toast = useToast();
 
 const canManage = computed(() => ['owner', 'admin', 'moderator'].includes(props.currentUserRole ?? ''));
 const showForm = ref(false);
@@ -29,8 +30,9 @@ async function handleCreate(): Promise<void> {
     formPurchaseUrl.value = '';
     showForm.value = false;
     emit('product-created');
-  } catch { /* toast error */ }
-  finally { creating.value = false; }
+  } catch {
+    toast.error('Failed to create product');
+  } finally { creating.value = false; }
 }
 </script>
 

package/components/nav/NavDropdown.vue

@@ -47,7 +47,6 @@ function handleKeydown(e: KeyboardEvent): void {
       class="cpub-nav-link cpub-nav-trigger"
       :class="{ 'cpub-nav-trigger--open': open }"
       :aria-label="`${item.label} menu`"
-      aria-haspopup="true"
       :aria-expanded="open"
       @click.stop="emit('toggle')"
       @keydown.enter.stop="emit('toggle')"
@@ -56,12 +55,11 @@ function handleKeydown(e: KeyboardEvent): void {
       <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
       <i class="fa-solid fa-chevron-down cpub-nav-caret" />
     </button>
-    <div v-if="open" class="cpub-nav-panel" role="menu">
+    <div v-if="open" class="cpub-nav-panel">
       <template v-for="child in visibleChildren" :key="child.id">
         <span
           v-if="child.disabled"
           class="cpub-nav-panel-item cpub-nav-panel-item--disabled"
-          role="menuitem"
           aria-disabled="true"
         >
           <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
@@ -72,7 +70,6 @@ function handleKeydown(e: KeyboardEvent): void {
           target="_blank"
           rel="noopener"
           class="cpub-nav-panel-item"
-          role="menuitem"
           @click="emit('close')"
         >
           <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
@@ -82,7 +79,6 @@ function handleKeydown(e: KeyboardEvent): void {
           v-else-if="child.route"
           :to="child.route"
           class="cpub-nav-panel-item"
-          role="menuitem"
           @click="emit('close')"
         >
           <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}

package/components/nav/NavLink.vue

@@ -26,6 +26,8 @@ const isExternal = computed(() => props.item.type === 'external' && props.item.h
     v-else-if="item.route"
     :to="item.route"
     class="cpub-nav-link"
+    :active-class="item.route === '/' ? '' : undefined"
+    :exact-active-class="item.route === '/' ? 'router-link-active' : undefined"
   >
     <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
   </NuxtLink>

package/components/views/ArticleView.vue

@@ -117,8 +117,7 @@ useJsonLd({
       <!-- AUTHOR ROW -->
       <div class="cpub-author-row">
         <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" style="text-decoration:none;">
-          <img v-if="content.author?.avatarUrl" :src="content.author.avatarUrl" :alt="content.author?.displayName ?? content.author?.username ?? ''" class="cpub-av cpub-av-lg" style="object-fit:cover;border:2px solid var(--border);" />
-          <div v-else class="cpub-av cpub-av-lg">{{ content.author?.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
+          <ContentAvatar :src="content.author?.avatarUrl" :name="content.author?.displayName ?? content.author?.username ?? ''" :size="44" :font-size="14" />
         </NuxtLink>
         <div class="cpub-author-info">
           <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-author-name">
@@ -239,8 +238,7 @@ useJsonLd({
 
       <!-- AUTHOR CARD -->
       <div v-if="content.author" class="cpub-author-card">
-        <img v-if="content.author.avatarUrl" :src="content.author.avatarUrl" :alt="content.author.displayName ?? content.author.username ?? ''" class="cpub-av cpub-av-xl" style="object-fit:cover;border:2px solid var(--border);" />
-        <div v-else class="cpub-av cpub-av-xl">{{ content.author.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
+        <ContentAvatar :src="content.author.avatarUrl" :name="content.author.displayName ?? content.author.username ?? ''" :size="64" :font-size="18" />
         <div class="cpub-author-card-info">
           <div class="cpub-author-card-label">Written by</div>
           <div class="cpub-author-card-name">
@@ -419,58 +417,7 @@ useJsonLd({
   font-weight: 400;
 }
 
-/* ── AVATARS ──
- * Two render modes share the .cpub-av class:
- *   <img class="cpub-av cpub-av-lg" ...>     ← avatar photo
- *   <div class="cpub-av cpub-av-lg">JD</div>  ← initials fallback when no avatar
- *
- * Sizing + border-radius is shared. But `display: flex` MUST NOT apply to
- * the <img> — when a replaced element gets `display: flex` set, browsers
- * (notably Chromium) treat the img content render-box inconsistently and
- * the inline `object-fit: cover` is silently dropped, producing a squished
- * (stretched-to-box) image instead of a center-cropped one. Visible on
- * deveco.io blog pages where author avatars are vertical photos (e.g.
- * 816×1456) rendered into a 44×44 square.
- *
- * Fix: scope display:flex centering to the div variant only.
- */
-.cpub-av {
-  --cpub-av-size: 28px;
-  width: var(--cpub-av-size);
-  height: var(--cpub-av-size);
-  /* Hard-lock to a square. Without min/max clamps, a global img reset or a
-     dropped dimension lets the <img> fall back to its intrinsic aspect ratio,
-     so a portrait photo renders as a tall oval (the deveco blog-avatar bug -
-     visible even on wide viewports, so it's not flex compression). min/max on
-     BOTH axes clamp the used size regardless of what sets width/height. */
-  min-width: var(--cpub-av-size);
-  max-width: var(--cpub-av-size);
-  min-height: var(--cpub-av-size);
-  max-height: var(--cpub-av-size);
-  border-radius: 50%;
-  background: var(--surface3);
-  border: var(--border-width-default) solid var(--border);
-  flex-shrink: 0;
-}
-
-div.cpub-av {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-}
-
-/* Defensive: even when consumers forget the inline `object-fit:cover`,
-   img.cpub-av crops instead of stretching. */
-img.cpub-av {
-  object-fit: cover;
-}
-
-.cpub-av-lg { --cpub-av-size: 44px; font-size: 14px; }
-.cpub-av-xl { --cpub-av-size: 64px; font-size: 18px; }
+/* Author avatar lives in <ContentAvatar> (its .cpub-av CSS travels with it). */
 
 /* ── AUTHOR ROW ── */
 .cpub-author-row {

package/components/views/ExplainerView.vue

@@ -345,6 +345,10 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
             </div>
           </div>
         </div>
+
+        <!-- Discussion — explainers are a federating content type like projects/blogs,
+             so readers can comment (parity with ProjectView/ArticleView). -->
+        <CommentSection :target-type="content.type" :target-id="content.id" :federated-content-id="federatedId" />
       </main>
     </div>
   </div>

package/components/views/ProjectView.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import type { ContentViewData } from '../../composables/useEngagement';
+import {
+  extractParts,
+  extractBuildSteps,
+  extractCodeBlocks,
+  extractDownloadFiles,
+  extractTocEntries,
+} from '../../utils/projectBlocks';
+// Explicit import (not Nuxt auto-import): ProjectView.test.ts mounts the SFC with
+// no Nuxt transform, so an auto-imported composable would be undefined there.
+import { useScrollSpy } from '../../composables/useScrollSpy';
 
 const { hubs: hubsEnabled } = useFeatures();
 const { user: authUser } = useAuth();
@@ -36,6 +46,23 @@ const tabs = computed(() => {
   return result;
 });
 
+// Roving-tabindex keyboard nav for the tablist (WCAG 4.1.2 / APG tabs pattern):
+// Arrow keys move + activate the adjacent tab, Home/End jump to the ends.
+function onTabKeydown(e: KeyboardEvent, idx: number): void {
+  const count = tabs.value.length;
+  let next = -1;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (idx + 1) % count;
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (idx - 1 + count) % count;
+  else if (e.key === 'Home') next = 0;
+  else if (e.key === 'End') next = count - 1;
+  else return;
+  e.preventDefault();
+  const tab = tabs.value[next];
+  if (!tab) return;
+  activeTab.value = tab.value;
+  nextTick(() => document.getElementById(`cpub-tab-${tab.value}`)?.focus());
+}
+
 const contentId = computed(() => props.content?.id);
 const contentType = computed(() => props.content?.type ?? 'project');
 const fedId = computed(() => props.federatedId);
@@ -43,6 +70,7 @@ const { liked, bookmarked, likeCount, isFederated, toggleLike, toggleBookmark, s
 
 onMounted(() => {
   fetchInitialState(props.content?.likeCount ?? 0);
+  hydrateBuildState();
 });
 
 const config = useRuntimeConfig();
@@ -93,203 +121,27 @@ const formattedDate = computed(() => {
   return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
 });
 
-// Extract parts list blocks from content for BOM tab
-interface PartItem {
-  name: string;
-  quantity: number;
-  productId?: string;
-  notes?: string;
-}
-
-const partsFromBlocks = computed<PartItem[]>(() => {
-  const blocks = props.content?.content;
-  if (!Array.isArray(blocks)) return [];
-  const items: PartItem[] = [];
-  for (const block of blocks) {
-    const [type, data] = block as [string, Record<string, unknown>];
-    if (type === 'partsList' && Array.isArray(data.parts)) {
-      for (const part of data.parts as Array<Record<string, unknown>>) {
-        items.push({
-          name: (part.name as string) || 'Unknown',
-          quantity: (part.qty as number) ?? (part.quantity as number) ?? 1,
-          productId: part.productId as string | undefined,
-          notes: (part.notes as string) || '',
-        });
-      }
-    }
-  }
-  return items;
-});
-
-// Extract build steps from content
-interface BuildStep {
-  number: number;
-  title: string;
-  children: Array<[string, Record<string, unknown>]>;
-  time?: string;
-}
-
-const buildStepsFromBlocks = computed<BuildStep[]>(() => {
-  const blocks = props.content?.content;
-  if (!Array.isArray(blocks)) return [];
-  const steps: BuildStep[] = [];
-  let stepNum = 0;
-  for (const block of blocks) {
-    const [type, data] = block as [string, Record<string, unknown>];
-    if (type === 'buildStep') {
-      stepNum++;
-      // Migrate old format (instructions + image) to children
-      let children: Array<[string, Record<string, unknown>]> = [];
-      if (data.children && Array.isArray(data.children) && data.children.length > 0) {
-        children = data.children as Array<[string, Record<string, unknown>]>;
-      } else {
-        const instructions = data.instructions as string | undefined;
-        if (instructions && instructions.trim()) {
-          const html = instructions.startsWith('<') ? instructions : `<p>${instructions}</p>`;
-          children.push(['paragraph', { html }]);
-        }
-        const image = data.image as string | undefined;
-        if (image && image.trim()) {
-          children.push(['image', { src: image, alt: `Step ${stepNum}`, caption: '' }]);
-        }
-      }
-      steps.push({
-        number: (data.stepNumber as number) || stepNum,
-        title: (data.title as string) || `Step ${stepNum}`,
-        children,
-        time: data.time as string | undefined,
-      });
-    }
-  }
-  return steps;
-});
-
-// Extract code blocks for code tab
-interface CodeSnippet {
-  language: string;
-  filename: string;
-  code: string;
-}
-
-const codeBlocks = computed<CodeSnippet[]>(() => {
-  const blocks = props.content?.content;
-  if (!Array.isArray(blocks)) return [];
-  const snippets: CodeSnippet[] = [];
-  for (const block of blocks) {
-    const [type, data] = block as [string, Record<string, unknown>];
-    if (type === 'code_block' || type === 'codeBlock') {
-      snippets.push({
-        language: (data.language as string) || '',
-        filename: (data.filename as string) || '',
-        code: (data.code as string) || '',
-      });
-    }
-  }
-  return snippets;
-});
-
-// Extract download blocks for files tab
-interface FileItem {
-  name: string;
-  url: string;
-  size?: string;
-}
-
-const downloadFiles = computed<FileItem[]>(() => {
-  const blocks = props.content?.content;
-  if (!Array.isArray(blocks)) return [];
-  const files: FileItem[] = [];
-  for (const block of blocks) {
-    const [type, data] = block as [string, Record<string, unknown>];
-    if (type === 'downloads' && Array.isArray(data.files)) {
-      for (const file of data.files as Array<Record<string, unknown>>) {
-        files.push({
-          name: (file.name as string) || 'Unknown',
-          url: (file.url as string) || '',
-          size: (file.size as string) || '',
-        });
-      }
-    }
-  }
-  return files;
-});
-
-// Extract headings from content for table of contents
-interface TocEntry { id: string; text: string; level: number }
-const tocEntries = computed<TocEntry[]>(() => {
-  const blocks = props.content?.content;
-  if (!Array.isArray(blocks)) return [];
-  const entries: TocEntry[] = [];
-  for (const block of blocks) {
-    const [type, data] = block as [string, Record<string, unknown>];
-    if (type === 'heading' && data.text) {
-      const text = String(data.text).replace(/<[^>]+>/g, '');
-      if (text.trim()) {
-        entries.push({
-          id: text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''),
-          text: text.trim(),
-          level: (data.level as number) ?? 2,
-        });
-      }
-    }
-  }
-  return entries;
-});
-
-const tocActiveId = ref('');
-
-function scrollToHeading(id: string): void {
-  const el = document.getElementById(id);
-  if (el) {
-    // CSS scroll-behavior is reduced-motion-gated in base.css, but the JS
-    // smooth option ignores that — honour the preference explicitly.
-    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    el.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' });
-    tocActiveId.value = id;
-  }
-}
-
-// Scroll-spy: highlight active TOC entry based on which heading is in view
-let observer: IntersectionObserver | null = null;
-
-onMounted(() => {
-  nextTick(() => {
-    setupScrollSpy();
-  });
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
+// Structured views of the project's block content. The parsing lives in the
+// pure, unit-tested helpers in utils/projectBlocks.ts (imported above); the BOM,
+// build-steps, code, files, and TOC tabs all read from these computeds.
+const partsFromBlocks = computed(() => extractParts(props.content?.content));
+const buildStepsFromBlocks = computed(() => extractBuildSteps(props.content?.content));
+const codeBlocks = computed(() => extractCodeBlocks(props.content?.content));
+const downloadFiles = computed(() => extractDownloadFiles(props.content?.content));
+const tocEntries = computed(() => extractTocEntries(props.content?.content));
+
+// TOC scroll-spy + smooth scroll, shared with the docs viewer via useScrollSpy.
+// Re-observes when the heading set changes (the inline version never did, so the
+// highlight went stale on content change) and disconnects on unmount.
+const { activeId: tocActiveId, scrollTo: scrollToHeading } = useScrollSpy({
+  source: () => tocEntries.value,
+  getHeadingElements: () =>
+    tocEntries.value
+      .map((e) => document.getElementById(e.id))
+      .filter((el): el is HTMLElement => !!el),
+  rootMargin: '-80px 0px -70% 0px',
 });
 
-function setupScrollSpy(): void {
-  if (!tocEntries.value.length) return;
-  observer?.disconnect();
-
-  const headingEls = tocEntries.value
-    .map((e) => document.getElementById(e.id))
-    .filter((el): el is HTMLElement => !!el);
-
-  if (!headingEls.length) return;
-
-  observer = new IntersectionObserver(
-    (entries) => {
-      // Find the topmost visible heading
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          tocActiveId.value = entry.target.id;
-          break;
-        }
-      }
-    },
-    { rootMargin: '-80px 0px -70% 0px', threshold: 0 },
-  );
-
-  for (const el of headingEls) {
-    observer.observe(el);
-  }
-}
-
 // Fork
 const forking = ref(false);
 async function handleFork(): Promise<void> {
@@ -310,6 +162,21 @@ async function handleFork(): Promise<void> {
 // I Built This
 const buildMarked = ref(false);
 const localBuildCount = ref(props.content?.buildCount ?? 0);
+
+// Hydrate the "I Built This" state on load — without this the button always
+// renders inactive after a reload and a re-click un-marks + decrements.
+async function hydrateBuildState(): Promise<void> {
+  if (!props.content?.id && !props.federatedId) return;
+  const url = isFederated.value
+    ? `/api/federation/content/${props.federatedId}/build`
+    : `/api/content/${props.content.id}/build`;
+  try {
+    const res = await $fetch<{ marked: boolean }>(url);
+    buildMarked.value = res.marked;
+  } catch {
+    // logged-out (401) or not-found → leave unmarked
+  }
+}
 const buildToggling = ref(false);
 async function handleBuild(): Promise<void> {
   buildToggling.value = true;
@@ -371,13 +238,12 @@ async function handleBuild(): Promise<void> {
         <!-- Author Row -->
         <div class="cpub-author-row">
           <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-av-link">
-            <img
-              v-if="content.author?.avatarUrl"
-              :src="content.author.avatarUrl"
-              :alt="content.author?.displayName || content.author?.username"
-              class="cpub-av cpub-av-lg cpub-av-img"
+            <ContentAvatar
+              :src="content.author?.avatarUrl"
+              :name="content.author?.displayName || content.author?.username || ''"
+              :size="36"
+              :font-size="12"
             />
-            <div v-else class="cpub-av cpub-av-lg">{{ content.author?.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
           </NuxtLink>
           <div>
             <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-author-name cpub-author-link">
@@ -416,13 +282,19 @@ async function handleBuild(): Promise<void> {
 
     <!-- STICKY TABS -->
     <div class="cpub-tabs-sticky">
-      <div class="cpub-tabs-inner">
+      <div class="cpub-tabs-inner" role="tablist" aria-label="Project sections">
         <button
-          v-for="tab in tabs"
+          v-for="(tab, idx) in tabs"
           :key="tab.value"
+          :id="`cpub-tab-${tab.value}`"
           class="cpub-tab"
           :class="{ active: activeTab === tab.value }"
+          role="tab"
+          :aria-selected="activeTab === tab.value"
+          aria-controls="cpub-project-tabpanel"
+          :tabindex="activeTab === tab.value ? 0 : -1"
           @click="activeTab = tab.value"
+          @keydown="onTabKeydown($event, idx)"
         >
           {{ tab.label }}
           <span v-if="tab.count" class="cpub-tab-badge">{{ tab.count }}</span>
@@ -452,7 +324,13 @@ async function handleBuild(): Promise<void> {
         </nav>
 
         <!-- CENTER: CONTENT -->
-        <div class="cpub-content-col">
+        <div
+          class="cpub-content-col"
+          role="tabpanel"
+          id="cpub-project-tabpanel"
+          :aria-labelledby="`cpub-tab-${activeTab}`"
+          tabindex="0"
+        >
           <!-- OVERVIEW TAB -->
           <template v-if="activeTab === 'overview'">
             <!-- Cover photo (in-body featured image) -->
@@ -763,41 +641,7 @@ async function handleBuild(): Promise<void> {
   flex-wrap: wrap;
 }
 
-/* See ArticleView.vue's .cpub-av comment for why display:flex is scoped
- * to the div-variant only — stops img-variant from squishing portrait
- * avatars (object-fit:cover gets dropped on flex-set replaced elements). */
-.cpub-av {
-  --cpub-av-size: 28px;
-  width: var(--cpub-av-size);
-  height: var(--cpub-av-size);
-  /* Hard-lock to a square (min/max on both axes) so a portrait photo can't
-     render as an oval if a global reset or dropped dimension lets the <img>
-     take its intrinsic aspect ratio. See ArticleView.vue. */
-  min-width: var(--cpub-av-size);
-  max-width: var(--cpub-av-size);
-  min-height: var(--cpub-av-size);
-  max-height: var(--cpub-av-size);
-  border-radius: 50%;
-  background: var(--surface3);
-  border: var(--border-width-default) solid var(--border);
-  flex-shrink: 0;
-}
-
-div.cpub-av {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-}
-
-img.cpub-av {
-  object-fit: cover;
-}
-
-.cpub-av-lg { --cpub-av-size: 36px; font-size: 12px; }
+/* Author avatar lives in <ContentAvatar> (its .cpub-av CSS travels with it). */
 
 .cpub-author-name {
   font-size: 13px;
@@ -814,12 +658,6 @@ img.cpub-av {
 .cpub-av-link {
   text-decoration: none;
 }
-.cpub-av-img {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border: var(--border-width-default) solid var(--border);
-}
 
 .cpub-author-meta-row {
   display: flex;