@commonpub/layer 0.4.12 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "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.15",
+    "@commonpub/editor": "0.5.0",
+    "@commonpub/config": "0.8.0",
+    "@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",
-    "@commonpub/schema": "0.8.14"
+    "@commonpub/protocol": "0.9.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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>