@commonpub/layer 0.81.0 → 0.83.0

package/components/editors/ArticleEditor.vue

@@ -14,6 +14,8 @@ function updateMeta(key: string, value: unknown): void {
   emit('update:metadata', { ...props.metadata, [key]: value });
 }
 
+const { uploadFile } = useFileUpload();
+
 const blockTypes: BlockTypeGroup[] = [
   {
     name: 'Text',
@@ -130,10 +132,7 @@ function onAssetUpload(event: Event): void {
   }
 
   uploading.value = true;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'content');
-  $fetch<{ url: string; originalName: string; sizeBytes: number; mimeType: string }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile<{ url: string; originalName: string; sizeBytes: number; mimeType: string }>(file, 'content')
     .then((res) => {
       uploadedFiles.value.unshift({
         name: res.originalName || file.name,
@@ -181,12 +180,9 @@ 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 })
-    .then((res) => { updateMeta('coverImageUrl', res.url); })
-    .catch(() => { /* silent fallback */ });
+  uploadFile(file, 'cover')
+    .then((res) => { updateMeta('coverImageUrl', res.url); uploadError.value = ''; })
+    .catch((err) => { uploadError.value = err?.data?.statusMessage || 'Cover image upload failed'; });
 }
 
 function onCoverUrl(): void {
@@ -206,12 +202,9 @@ 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 })
-    .then((res) => { updateMeta('bannerUrl', res.url); })
-    .catch(() => {});
+  uploadFile(file, 'cover')
+    .then((res) => { updateMeta('bannerUrl', res.url); uploadError.value = ''; })
+    .catch((err) => { uploadError.value = err?.data?.statusMessage || 'Banner image upload failed'; });
 }
 
 function removeBanner(): void {

package/components/editors/ExplainerEditor.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 activeLeftTab = ref<'modules' | 'structure' | 'assets'>('modules');
 
 // Interactive blocks FIRST — they're the core of an explainer
@@ -118,10 +121,7 @@ function onAssetUpload(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', 'content');
-  $fetch<{ url: string; originalName: string; size: number }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile<{ url: string; originalName: string; size: number }>(file, 'content')
     .then((res) => {
       uploadedFiles.value.unshift({
         name: res.originalName || file.name,
@@ -129,7 +129,10 @@ function onAssetUpload(event: Event): void {
         type: file.type.startsWith('image/') ? 'image' : 'file',
       });
     })
-    .catch(() => { /* silent */ });
+    .catch((err: unknown) => {
+      const msg = (err as { data?: { statusMessage?: string } })?.data?.statusMessage;
+      toast.error(msg || 'Upload failed');
+    });
 }
 
 const openSections = ref<Record<string, boolean>>({

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>