@commonpub/layer 0.4.11 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,14 +51,14 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/editor": "0.5.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.8.14",
+    "@commonpub/schema": "0.8.15",
+    "@commonpub/editor": "0.5.0",
     "@commonpub/config": "0.8.0",
-    "@commonpub/explainer": "0.5.3",
     "@commonpub/docs": "0.5.2",
+    "@commonpub/explainer": "0.5.3",
+    "@commonpub/server": "2.23.1",
     "@commonpub/ui": "0.8.4",
-    "@commonpub/server": "2.23.0",
     "@commonpub/protocol": "0.9.5"
   },
   "devDependencies": {

package/pages/settings/profile.vue

@@ -30,14 +30,18 @@ const form = ref({
   bannerUrl: '',
 });
 
-const skills = ref<Array<{ name: string; proficiency: number }>>([]);
+const skills = ref<string[]>([]);
 const socialLinks = ref({
   github: '',
   twitter: '',
   linkedin: '',
-  website: '',
+  youtube: '',
+  instagram: '',
+  mastodon: '',
+  discord: '',
 });
-const experience = ref<Array<{ id: string; title: string; company: string; startDate: string; endDate: string; description: string }>>([]);
+const pronouns = ref('');
+const experience = ref<Array<{ title: string; company: string; startDate: string; endDate: string; description: string }>>([]);
 
 const emailNotifications = ref<{
   digest: 'daily' | 'weekly' | 'none';
@@ -75,19 +79,28 @@ if (profile.value) {
   form.value.bannerUrl = p.bannerUrl || '';
 
   if (Array.isArray(p.skills)) {
-    skills.value = p.skills.map((s) =>
-      typeof s === 'string' ? { name: s, proficiency: 3 } : s,
-    );
+    skills.value = p.skills.filter((s): s is string => typeof s === 'string');
   }
+  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 || '';
-    socialLinks.value.website = (p.socialLinks as Record<string, string | undefined>).website || '';
+    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)) {
-    experience.value = (profileRecord.experience as Array<Record<string, unknown>>).map((e) => ({ ...e }) as typeof experience.value[number]);
+    experience.value = (profileRecord.experience as Array<Record<string, unknown>>).map((e) => ({
+      title: String(e.title || ''),
+      company: String(e.company || ''),
+      startDate: String(e.startDate || ''),
+      endDate: String(e.endDate || ''),
+      description: String(e.description || ''),
+    }));
   }
   if (profileRecord.emailNotifications && typeof profileRecord.emailNotifications === 'object') {
     const en = profileRecord.emailNotifications as Record<string, unknown>;
@@ -104,25 +117,20 @@ if (profile.value) {
 // Watch for form changes AFTER initial data is loaded (nextTick avoids false positive)
 onMounted(() => {
   nextTick(() => {
-    watch([form, skills, socialLinks, experience, emailNotifications], () => { isDirty.value = true; }, { deep: true });
+    watch([form, skills, pronouns, socialLinks, experience, emailNotifications], () => { isDirty.value = true; }, { deep: true });
   });
 });
 
 function addSkill(): void {
-  skills.value.push({ name: '', proficiency: 50 });
+  skills.value.push('');
 }
 
 function removeSkill(index: number): void {
   skills.value.splice(index, 1);
 }
 
-function generateId(): string {
-  return `exp-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-}
-
 function addExperience(): void {
   experience.value.push({
-    id: generateId(),
     title: '',
     company: '',
     startDate: '',
@@ -170,8 +178,9 @@ async function handleSave(): Promise<void> {
       method: 'PUT',
       body: {
         ...form.value,
-        skills: skills.value.filter((s) => s.name.trim()).map((s) => s.name),
+        skills: skills.value.filter((s) => s.trim()),
         experience: experience.value.filter((e) => e.title.trim()),
+        pronouns: pronouns.value || undefined,
         socialLinks: socialLinks.value,
         ...(emailNotificationsEnabled.value ? { emailNotifications: emailNotifications.value } : {}),
       },
@@ -330,39 +339,42 @@ async function handleSave(): Promise<void> {
         </div>
       </div>
 
+      <!-- Pronouns -->
+      <div class="cpub-form-section">
+        <span class="cpub-form-section-label">Identity</span>
+
+        <div class="cpub-form-group">
+          <label for="pronouns" class="cpub-form-label">Pronouns</label>
+          <input
+            id="pronouns"
+            v-model="pronouns"
+            type="text"
+            class="cpub-input"
+            placeholder="e.g., they/them, she/her, he/him"
+          />
+        </div>
+      </div>
+
       <!-- Skills -->
       <div class="cpub-form-section">
         <span class="cpub-form-section-label">Skills</span>
 
         <div
-          v-for="(skill, index) in skills"
+          v-for="(_skill, index) in skills"
           :key="index"
           class="cpub-skill-row"
         >
-          <div class="cpub-skill-name">
-            <input
-              v-model="skill.name"
-              type="text"
-              class="cpub-input"
-              placeholder="Skill name"
-              :aria-label="`Skill ${index + 1} name`"
-            />
-          </div>
-          <div class="cpub-skill-slider">
-            <input
-              v-model.number="skill.proficiency"
-              type="range"
-              min="0"
-              max="100"
-              class="cpub-range"
-              :aria-label="`Skill ${index + 1} proficiency`"
-            />
-            <span class="cpub-skill-value">{{ skill.proficiency }}%</span>
-          </div>
+          <input
+            v-model="skills[index]"
+            type="text"
+            class="cpub-input"
+            placeholder="Skill name"
+            :aria-label="`Skill ${index + 1}`"
+          />
           <button
             type="button"
             class="cpub-btn-icon cpub-btn-danger"
-            :aria-label="`Remove skill ${skill.name || index + 1}`"
+            :aria-label="`Remove skill ${skills[index] || index + 1}`"
             @click="removeSkill(index)"
           >
             <i class="fa-solid fa-xmark" aria-hidden="true"></i>
@@ -417,15 +429,25 @@ async function handleSave(): Promise<void> {
         </div>
 
         <div class="cpub-form-group">
-          <label for="social-website" class="cpub-form-label">Website URL</label>
-          <input
-            id="social-website"
-            v-model="socialLinks.website"
-            type="url"
-            class="cpub-input"
-            placeholder="https://..."
-          />
+          <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 -->
@@ -434,7 +456,7 @@ async function handleSave(): Promise<void> {
 
         <div
           v-for="(entry, index) in experience"
-          :key="entry.id"
+          :key="index"
           class="cpub-experience-card"
         >
           <div class="cpub-experience-header">
@@ -451,9 +473,9 @@ async function handleSave(): Promise<void> {
 
           <div class="cpub-experience-fields">
             <div class="cpub-form-group">
-              <label :for="`exp-title-${entry.id}`" class="cpub-form-label">Title</label>
+              <label :for="`exp-title-${index}`" class="cpub-form-label">Title</label>
               <input
-                :id="`exp-title-${entry.id}`"
+                :id="`exp-title-${index}`"
                 v-model="entry.title"
                 type="text"
                 class="cpub-input"
@@ -462,9 +484,9 @@ async function handleSave(): Promise<void> {
             </div>
 
             <div class="cpub-form-group">
-              <label :for="`exp-company-${entry.id}`" class="cpub-form-label">Company</label>
+              <label :for="`exp-company-${index}`" class="cpub-form-label">Company</label>
               <input
-                :id="`exp-company-${entry.id}`"
+                :id="`exp-company-${index}`"
                 v-model="entry.company"
                 type="text"
                 class="cpub-input"
@@ -474,18 +496,18 @@ async function handleSave(): Promise<void> {
 
             <div class="cpub-experience-dates">
               <div class="cpub-form-group">
-                <label :for="`exp-start-${entry.id}`" class="cpub-form-label">Start Date</label>
+                <label :for="`exp-start-${index}`" class="cpub-form-label">Start Date</label>
                 <input
-                  :id="`exp-start-${entry.id}`"
+                  :id="`exp-start-${index}`"
                   v-model="entry.startDate"
                   type="month"
                   class="cpub-input"
                 />
               </div>
               <div class="cpub-form-group">
-                <label :for="`exp-end-${entry.id}`" class="cpub-form-label">End Date</label>
+                <label :for="`exp-end-${index}`" class="cpub-form-label">End Date</label>
                 <input
-                  :id="`exp-end-${entry.id}`"
+                  :id="`exp-end-${index}`"
                   v-model="entry.endDate"
                   type="month"
                   class="cpub-input"
@@ -495,9 +517,9 @@ async function handleSave(): Promise<void> {
             </div>
 
             <div class="cpub-form-group">
-              <label :for="`exp-desc-${entry.id}`" class="cpub-form-label">Description</label>
+              <label :for="`exp-desc-${index}`" class="cpub-form-label">Description</label>
               <textarea
-                :id="`exp-desc-${entry.id}`"
+                :id="`exp-desc-${index}`"
                 v-model="entry.description"
                 class="cpub-textarea"
                 rows="3"
@@ -749,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;
@@ -979,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();
@@ -370,6 +372,25 @@ async function handleReport(): Promise<void> {
                 <p class="cpub-empty-state-title">No skills listed yet</p>
               </div>
             </div>
+
+            <!-- Experience -->
+            <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.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>
+                  </div>
+                  <div v-if="exp.startDate" class="cpub-exp-dates">
+                    {{ exp.startDate }}{{ exp.endDate ? ` — ${exp.endDate}` : ' — Present' }}
+                  </div>
+                  <p v-if="exp.description" class="cpub-exp-desc">{{ exp.description }}</p>
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- Sidebar -->
@@ -709,6 +730,20 @@ async function handleReport(): Promise<void> {
   margin-bottom: 8px;
 }
 
+/* Experience */
+.cpub-experience-section { margin-top: 24px; }
+.cpub-experience-list { display: flex; flex-direction: column; gap: 16px; }
+.cpub-experience-item {
+  padding: 12px 16px;
+  border: var(--border-width-default) solid var(--border2);
+  background: var(--surface);
+}
+.cpub-exp-header { display: flex; flex-direction: column; gap: 2px; }
+.cpub-exp-header strong { font-size: var(--text-sm); }
+.cpub-exp-company { font-size: var(--text-xs); color: var(--text-dim); }
+.cpub-exp-dates { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); margin-top: 4px; }
+.cpub-exp-desc { font-size: var(--text-sm); color: var(--text-dim); margin-top: 8px; line-height: var(--leading-normal); }
+
 /* About grid */
 .cpub-about-grid {
   display: grid;