@commonpub/layer 0.4.12 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/docs": "0.5.2",
-    "@commonpub/config": "0.8.0",
-    "@commonpub/explainer": "0.5.3",
     "@commonpub/auth": "0.5.0",
+    "@commonpub/config": "0.8.0",
+    "@commonpub/docs": "0.6.0",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/explainer": "0.6.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.8.4",
-    "@commonpub/server": "2.23.0",
-    "@commonpub/protocol": "0.9.5",
-    "@commonpub/schema": "0.8.14"
+    "@commonpub/protocol": "0.9.6",
+    "@commonpub/schema": "0.8.15",
+    "@commonpub/server": "2.23.1",
+    "@commonpub/ui": "0.8.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/[slug]/edit.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
+import { isExplainerDocument, createEmptyDocument } from '@commonpub/explainer';
+import type { ExplainerDocument } from '@commonpub/explainer';
+import { ExplainerSectionEditor } from '@commonpub/explainer/vue';
 definePageMeta({ layout: false, middleware: 'auth' });
 
 const route = useRoute();
@@ -29,9 +32,23 @@ const { extract: extractError } = useApiError();
 const mode = ref<'write' | 'preview' | 'code'>('write');
 const contentId = ref<string | null>(null);
 
-// --- Block editor ---
+// --- Block editor (articles, blogs, projects) ---
 const blockEditor = useBlockEditor();
 
+// --- Explainer document (explainers only) ---
+const isExplainer = computed(() => contentType.value === 'explainer');
+// The prop passed to ExplainerSectionEditor — set once on load, not updated on edits
+const explainerDocInit = ref<ExplainerDocument | null>(null);
+// The latest version from the editor — used for saving
+const explainerDocLatest = ref<ExplainerDocument | null>(null);
+
+function getContentForSave(): unknown {
+  if (isExplainer.value) {
+    return explainerDocLatest.value ?? explainerDocInit.value;
+  }
+  return blockEditor.toBlockTuples();
+}
+
 // --- Content save composable ---
 const {
   saving,
@@ -50,7 +67,7 @@ const {
   isNew,
   contentId,
   isDirty,
-  getBlockTuples: () => blockEditor.toBlockTuples(),
+  getBlockTuples: getContentForSave as () => BlockTuple[],
   extractError,
   onAfterSave: syncBOM,
 });
@@ -59,7 +76,7 @@ const {
 const { errors: publishErrors, showErrors: showPublishErrors, validate, dismiss: dismissPublishErrors } = usePublishValidation({
   title,
   metadata,
-  getBlockTuples: () => blockEditor.toBlockTuples(),
+  getBlockTuples: getContentForSave as () => BlockTuple[],
 });
 
 // --- Specialized editor component map ---
@@ -80,7 +97,18 @@ if (!isNew.value) {
     const d = data.value as Record<string, unknown>;
     contentId.value = d.id as string;
     title.value = d.title as string;
-    if (Array.isArray(d.content)) {
+    if (isExplainer.value && isExplainerDocument(d.content)) {
+      // Load ExplainerDocument for explainers
+      const doc = d.content as unknown as ExplainerDocument;
+      // Sync: prefer row-level title if hero title is empty
+      if (!doc.hero.title && title.value) {
+        doc.hero.title = title.value;
+      } else if (doc.hero.title) {
+        title.value = doc.hero.title;
+      }
+      explainerDocInit.value = doc;
+      explainerDocLatest.value = JSON.parse(JSON.stringify(doc));
+    } else if (Array.isArray(d.content)) {
       blockEditor.fromBlockTuples(d.content as [string, Record<string, unknown>][]);
     }
     metadata.value = {
@@ -115,7 +143,42 @@ watch(title, (newTitle) => {
 
 // --- Dirty tracking + autosave ---
 watch(() => blockEditor.blocks.value, () => { isDirty.value = true; }, { deep: true });
-initAutoSave([() => blockEditor.blocks.value, title, metadata]);
+watch(explainerDocLatest, () => { isDirty.value = true; }, { deep: true });
+initAutoSave([() => blockEditor.blocks.value, () => explainerDocLatest.value, title, metadata]);
+
+// --- Explainer document events ---
+function handleExplainerUpdate(doc: ExplainerDocument): void {
+  // Store latest for saving — DON'T update explainerDocInit (would cause editor re-render loop)
+  explainerDocLatest.value = doc;
+  // Sync title from hero
+  if (doc.hero.title) title.value = doc.hero.title;
+  // Sync metadata
+  if (doc.meta.description) metadata.value = { ...metadata.value, description: doc.meta.description };
+  if (doc.meta.difficulty) metadata.value = { ...metadata.value, difficulty: doc.meta.difficulty };
+  if (doc.meta.estimatedMinutes) metadata.value = { ...metadata.value, estimatedMinutes: doc.meta.estimatedMinutes };
+  if (doc.meta.tags?.length) metadata.value = { ...metadata.value, tags: doc.meta.tags };
+  if (doc.hero.coverImageUrl) metadata.value = { ...metadata.value, coverImageUrl: doc.hero.coverImageUrl };
+  isDirty.value = true;
+}
+
+function handleExplainerSave(doc: ExplainerDocument): void {
+  handleExplainerUpdate(doc);
+  silentSave();
+}
+
+// --- Init new explainer ---
+if (isNew.value && isExplainer.value) {
+  const emptyDoc = createEmptyDocument();
+  explainerDocInit.value = emptyDoc;
+  explainerDocLatest.value = JSON.parse(JSON.stringify(emptyDoc));
+}
+
+// Sync starter form title to explainer doc hero
+watch(title, (newTitle) => {
+  if (isExplainer.value && explainerDocInit.value && !explainerDocLatest.value?.hero.title) {
+    explainerDocInit.value.hero.title = newTitle;
+  }
+});
 
 function handleMetadataUpdate(newMetadata: Record<string, unknown>): void {
   if (newMetadata.title !== undefined && typeof newMetadata.title === 'string') {
@@ -344,8 +407,17 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
 
     <div v-if="error" class="cpub-editor-error" role="alert">{{ error }}</div>
 
-    <!-- Write mode with specialized editor -->
-    <template v-if="mode === 'write' && hasSpecializedEditor">
+    <!-- Explainer: section-oriented editor -->
+    <template v-if="mode === 'write' && isExplainer && explainerDocInit">
+      <ExplainerSectionEditor
+        :document="explainerDocInit"
+        @update:document="handleExplainerUpdate"
+        @save="handleExplainerSave"
+      />
+    </template>
+
+    <!-- Write mode with specialized editor (articles, blogs, projects) -->
+    <template v-else-if="mode === 'write' && hasSpecializedEditor && !isExplainer">
       <component
         :is="editorComponent"
         :block-editor="blockEditor"

package/pages/settings/profile.vue

@@ -35,6 +35,10 @@ const socialLinks = ref({
   github: '',
   twitter: '',
   linkedin: '',
+  youtube: '',
+  instagram: '',
+  mastodon: '',
+  discord: '',
 });
 const pronouns = ref('');
 const experience = ref<Array<{ title: string; company: string; startDate: string; endDate: string; description: string }>>([]);
@@ -79,9 +83,14 @@ if (profile.value) {
   }
   pronouns.value = p.pronouns || '';
   if (p.socialLinks) {
-    socialLinks.value.github = p.socialLinks.github || '';
-    socialLinks.value.twitter = p.socialLinks.twitter || '';
-    socialLinks.value.linkedin = p.socialLinks.linkedin || '';
+    const sl = p.socialLinks as Record<string, string | undefined>;
+    socialLinks.value.github = sl.github || '';
+    socialLinks.value.twitter = sl.twitter || '';
+    socialLinks.value.linkedin = sl.linkedin || '';
+    socialLinks.value.youtube = sl.youtube || '';
+    socialLinks.value.instagram = sl.instagram || '';
+    socialLinks.value.mastodon = sl.mastodon || '';
+    socialLinks.value.discord = sl.discord || '';
   }
   const profileRecord = p as Record<string, unknown>;
   if (Array.isArray(profileRecord.experience)) {
@@ -419,6 +428,26 @@ async function handleSave(): Promise<void> {
           />
         </div>
 
+        <div class="cpub-form-group">
+          <label for="social-youtube" class="cpub-form-label">YouTube</label>
+          <input id="social-youtube" v-model="socialLinks.youtube" type="url" class="cpub-input" placeholder="https://youtube.com/@channel" />
+        </div>
+
+        <div class="cpub-form-group">
+          <label for="social-instagram" class="cpub-form-label">Instagram</label>
+          <input id="social-instagram" v-model="socialLinks.instagram" type="url" class="cpub-input" placeholder="https://instagram.com/username" />
+        </div>
+
+        <div class="cpub-form-group">
+          <label for="social-mastodon" class="cpub-form-label">Mastodon</label>
+          <input id="social-mastodon" v-model="socialLinks.mastodon" type="url" class="cpub-input" placeholder="https://mastodon.social/@username" />
+        </div>
+
+        <div class="cpub-form-group">
+          <label for="social-discord" class="cpub-form-label">Discord</label>
+          <input id="social-discord" v-model="socialLinks.discord" type="url" class="cpub-input" placeholder="https://discord.gg/invite" />
+        </div>
+
       </div>
 
       <!-- Experience -->
@@ -742,58 +771,6 @@ async function handleSave(): Promise<void> {
   margin-bottom: var(--space-3);
 }
 
-.cpub-skill-name {
-  flex: 1;
-  min-width: 0;
-}
-
-.cpub-skill-slider {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 180px;
-  flex-shrink: 0;
-}
-
-.cpub-range {
-  flex: 1;
-  appearance: none;
-  height: 4px;
-  background: var(--border2);
-  outline: none;
-  cursor: pointer;
-}
-
-.cpub-range::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  background: var(--accent);
-  border: var(--border-width-default) solid var(--accent);
-  cursor: pointer;
-}
-
-.cpub-range::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: var(--accent);
-  border: var(--border-width-default) solid var(--accent);
-  cursor: pointer;
-}
-
-.cpub-range:focus-visible::-webkit-slider-thumb {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.cpub-skill-value {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-dim);
-  min-width: 36px;
-  text-align: right;
-}
-
 /* ─── Buttons ─── */
 .cpub-btn-icon {
   width: 32px;
@@ -972,12 +949,8 @@ async function handleSave(): Promise<void> {
 
 @media (max-width: 768px) {
   .cpub-settings-form { padding: 0 var(--space-1); }
-  .cpub-skill-slider { width: 120px; }
   .cpub-experience-dates { grid-template-columns: 1fr; }
   .cpub-banner-upload { height: 100px; }
 }
 
-@media (max-width: 480px) {
-  .cpub-skill-slider { width: 80px; }
-}
 </style>

package/pages/u/[username]/index.vue

@@ -6,6 +6,8 @@ useSeoMeta({
   title: `${username} — ${useSiteName()}`,
   ogTitle: `${username} — ${useSiteName()}`,
   ogImage: '/og-default.png',
+  ogType: 'profile',
+  twitterCard: 'summary',
 });
 
 const { explainers: explainersEnabled, learning: learningEnabled, federation: federationEnabled } = useFeatures();
@@ -372,12 +374,12 @@ async function handleReport(): Promise<void> {
             </div>
 
             <!-- Experience -->
-            <div v-if="(p as Record<string, unknown>).experience && ((p as Record<string, unknown>).experience as Array<Record<string, string>>).length > 0" class="cpub-experience-section">
+            <div v-if="p.experience?.length" class="cpub-experience-section">
               <div class="cpub-sec-head">
                 <h2><i class="fa-solid fa-briefcase" style="color: var(--purple); margin-right: 6px"></i>Experience</h2>
               </div>
               <div class="cpub-experience-list">
-                <div v-for="(exp, idx) in ((p as Record<string, unknown>).experience as Array<Record<string, string>>)" :key="idx" class="cpub-experience-item">
+                <div v-for="(exp, idx) in p.experience" :key="idx" class="cpub-experience-item">
                   <div class="cpub-exp-header">
                     <strong>{{ exp.title }}</strong>
                     <span v-if="exp.company" class="cpub-exp-company">{{ exp.company }}</span>