@skhema/embed 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -75,6 +75,16 @@ const SHARED_CARD_STYLES = `
   flex-shrink: 0;
 }
 
+.skhema-author-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.skhema-author-link:hover {
+  color: var(--skhema-text);
+  text-decoration: underline;
+}
+
 /* Save button — primary brand color */
 .skhema-save-btn {
   display: inline-flex;
@@ -112,6 +122,40 @@ const SHARED_CARD_STYLES = `
 }
 `;
 const USER_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
+function readAuthorAttribution(element) {
+  const authorName = element.getAttribute("author-name") || element.getAttribute("contributor-name");
+  if (!authorName?.trim()) {
+    return null;
+  }
+  const authorSlug = element.getAttribute("author-slug")?.trim();
+  return {
+    authorName: authorName.trim(),
+    authorSlug: authorSlug || void 0
+  };
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function formatAuthorAttributionHtml(authorName, authorSlug) {
+  const label = `By ${escapeHtml(authorName)}`;
+  if (authorSlug) {
+    return `<a href="https://skhema.com/contributors/${encodeURIComponent(authorSlug)}" class="skhema-author-link" target="_blank" rel="noopener noreferrer">${label}</a>`;
+  }
+  return `<span class="skhema-author-text">${label}</span>`;
+}
+function formatContributorIdFallback(contributorId) {
+  return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function resolveAuthorFooterHtml(element, contributorId) {
+  const attribution = readAuthorAttribution(element);
+  if (attribution) {
+    return formatAuthorAttributionHtml(
+      attribution.authorName,
+      attribution.authorSlug
+    );
+  }
+  return `<span class="skhema-author-text">By ${escapeHtml(formatContributorIdFallback(contributorId))}</span>`;
+}
 const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
 const TRACKING_COOKIE_NAME = "_sk";
 const TRACKING_EXPIRY_HOURS = 24;
@@ -1031,6 +1075,8 @@ class SkhemaComponent extends HTMLElement {
     return [
       "component-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "title",
       "theme",
@@ -1171,8 +1217,7 @@ class SkhemaComponent extends HTMLElement {
     const componentLabel = getComponentTypeLabel(component_type);
     const acronym = getComponentTypeAcronym(component_type);
     const colors = COMPONENT_COLORS[component_type];
-    const contributorName = this.getAttribute("contributor-name");
-    const displayName = contributorName || this.formatContributorName(contributor_id);
+    const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1221,7 +1266,7 @@ class SkhemaComponent extends HTMLElement {
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
               ${USER_ICON_SVG}
-              ${displayName}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1285,9 +1330,6 @@ class SkhemaComponent extends HTMLElement {
     }
     return "light";
   }
-  formatContributorName(contributorId) {
-    return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  }
   addPreconnectHints() {
     if (document.querySelector(
       'link[rel="preconnect"][href*="analytics.skhema.com"]'
@@ -1730,6 +1772,8 @@ class SkhemaElement extends HTMLElement {
     return [
       "element-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "content",
       "source-url",
@@ -1851,8 +1895,7 @@ class SkhemaElement extends HTMLElement {
     );
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
-    const contributorName = this.getAttribute("contributor-name");
-    const displayName = contributorName || this.formatContributorName(contributor_id);
+    const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
     const componentType = resolveComponentType(element_type);
     const acronym = getComponentTypeAcronym(componentType);
     const colors = COMPONENT_COLORS[componentType];
@@ -1880,7 +1923,7 @@ class SkhemaElement extends HTMLElement {
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
               ${USER_ICON_SVG}
-              ${displayName}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1927,9 +1970,6 @@ class SkhemaElement extends HTMLElement {
     }
     return "light";
   }
-  formatContributorName(contributorId) {
-    return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  }
   addPreconnectHints() {
     if (document.querySelector(
       'link[rel="preconnect"][href*="analytics.skhema.com"]'