@commonpub/layer 0.4.11 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "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/editor": "0.5.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.8.14",
-    "@commonpub/config": "0.8.0",
-    "@commonpub/explainer": "0.5.3",
-    "@commonpub/docs": "0.5.2",
     "@commonpub/ui": "0.8.4",
     "@commonpub/server": "2.23.0",
-    "@commonpub/protocol": "0.9.5"
+    "@commonpub/protocol": "0.9.5",
+    "@commonpub/schema": "0.8.14"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/settings/profile.vue

@@ -30,14 +30,14 @@ const form = ref({
   bannerUrl: '',
 });
 
-const skills = ref<Array<{ name: string; proficiency: number }>>([]);
+const skills = ref<string[]>([]);
 const socialLinks = ref({
   github: '',
   twitter: '',
   linkedin: '',
-  website: '',
 });
-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 +75,23 @@ 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 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 +108,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 +169,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 +330,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>
@@ -416,16 +419,6 @@ 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://..."
-          />
-        </div>
       </div>
 
       <!-- Experience -->
@@ -434,7 +427,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 +444,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 +455,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 +467,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 +488,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"

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

@@ -370,6 +370,25 @@ async function handleReport(): Promise<void> {
                 <p class="cpub-empty-state-title">No skills listed yet</p>
               </div>
             </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 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 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 +728,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;