@ansiversa/components 0.0.121 → 0.0.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/resume-templates/ResumeTemplateClassic.astro

@@ -1,6 +1,6 @@
 ---
 import type { ResumeData } from "./typescript-schema";
-import { formatDateRange } from "./typescript-schema";
+import { buildContactEntries, formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -13,27 +13,7 @@ const locationLabel =
   basics.location?.label ||
   [basics.location?.city, basics.location?.country].filter(Boolean).join(", ");
 
-const formatUrlLabel = (value: string) =>
-  value.replace(/^https?:\/\//, "").replace(/\/$/, "");
-
-const contactItems: Array<{ label: string; href?: string }> = [];
-if (locationLabel) contactItems.push({ label: locationLabel });
-if (basics.contact.email) {
-  contactItems.push({ label: basics.contact.email, href: `mailto:${basics.contact.email}` });
-}
-if (basics.contact.phone) {
-  const phoneHref = basics.contact.phone.replace(/\s+/g, "");
-  contactItems.push({ label: basics.contact.phone, href: `tel:${phoneHref}` });
-}
-if (basics.contact.website) {
-  contactItems.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
-}
-for (const link of basics.links ?? []) {
-  const urlLabel = link.url ? formatUrlLabel(link.url) : link.label;
-  if (urlLabel) {
-    contactItems.push({ label: urlLabel, href: link.url });
-  }
-}
+const contactItems = buildContactEntries(basics, locationLabel);
 
 const experienceItems = data.experience ?? [];
 const projectItems = data.projects ?? [];
@@ -47,7 +27,7 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
+<div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
       <header class="av-print-avoid-break flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">

package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro

@@ -1,6 +1,6 @@
 ---
 import type { ResumeData } from "./typescript-schema";
-import { formatDateRange } from "./typescript-schema";
+import { buildContactEntries, formatDateRange, truncateText } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -13,17 +13,7 @@ const locationLabel =
   basics.location?.label ||
   [basics.location?.city, basics.location?.country].filter(Boolean).join(", ");
 
-const formatUrlLabel = (value: string) =>
-  value.replace(/^https?:\/\//, "").replace(/\/$/, "");
-
-const contactChips: string[] = [];
-if (locationLabel) contactChips.push(locationLabel);
-if (basics.contact.email) contactChips.push(basics.contact.email);
-if (basics.contact.phone) contactChips.push(basics.contact.phone);
-if (basics.contact.website) contactChips.push(formatUrlLabel(basics.contact.website));
-for (const link of basics.links ?? []) {
-  contactChips.push(link.label ?? formatUrlLabel(link.url));
-}
+const contactChips = buildContactEntries(basics, locationLabel).map((item) => item.label);
 
 const normalizeSkillLabel = (value?: string) =>
   (value ?? "")
@@ -41,7 +31,7 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
+<div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="rounded-2xl bg-white p-7 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
       <header class="av-print-avoid-break flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
@@ -92,7 +82,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                     {item.bullets && item.bullets.length > 0 && (
                       <ul class="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
                         {item.bullets.map((bullet) => (
-                          <li>{bullet}</li>
+                          <li class="break-words print:line-clamp-2">{truncateText(bullet, 140)}</li>
                         ))}
                       </ul>
                     )}

package/src/resume-templates/ResumeTemplateMinimal.astro

@@ -1,6 +1,6 @@
 ---
 import type { ResumeData } from "./typescript-schema";
-import { formatDateRange } from "./typescript-schema";
+import { buildContactEntries, formatDateRange, truncateText } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -13,23 +13,7 @@ const locationLabel =
   basics.location?.label ||
   [basics.location?.city, basics.location?.country].filter(Boolean).join(", ");
 
-const formatUrlLabel = (value: string) =>
-  value.replace(/^https?:\/\//, "").replace(/\/$/, "");
-
-const contactLinks: Array<{ label: string; href?: string }> = [];
-if (basics.contact.email) {
-  contactLinks.push({ label: basics.contact.email, href: `mailto:${basics.contact.email}` });
-}
-if (basics.contact.phone) {
-  const phoneHref = basics.contact.phone.replace(/\s+/g, "");
-  contactLinks.push({ label: basics.contact.phone, href: `tel:${phoneHref}` });
-}
-if (basics.contact.website) {
-  contactLinks.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
-}
-for (const link of basics.links ?? []) {
-  contactLinks.push({ label: link.label ?? formatUrlLabel(link.url), href: link.url });
-}
+const contactLinks = buildContactEntries(basics, locationLabel);
 
 const headlineLine = [basics.headline, locationLabel].filter(Boolean).join(" · ");
 const experienceItems = data.experience ?? [];
@@ -41,20 +25,7 @@ const showSkillsAs = data.settings?.showSkillsAs ?? "levels";
 const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
-
-<style>
-  @media print {
-    .resume-template a {
-      text-decoration: none;
-      color: inherit;
-    }
-    .resume-template {
-      background: white;
-    }
-  }
-</style>
-
-<div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
+<div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-slate-200 sm:p-12 print:shadow-none print:ring-0">
       <header class="space-y-4">
@@ -67,7 +38,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
             <div class="text-sm text-slate-700 sm:text-right">
               <div class="flex flex-col gap-1">
                 {contactLinks.map((item) => (
-                  <a class="underline underline-offset-4 hover:text-slate-900" href={item.href}>
+                    <a class="underline underline-offset-4 hover:text-slate-900 print:no-underline" href={item.href}>
                     {item.label}
                   </a>
                 ))}
@@ -77,7 +48,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
         </div>
 
         {basics.summary && (
-          <p class="max-w-3xl text-sm leading-7 text-slate-700">{basics.summary}</p>
+          <p class="max-w-3xl text-sm leading-7 text-slate-700">{truncateText(basics.summary, 220)}</p>
         )}
       </header>
 
@@ -99,13 +70,13 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                       <p class="text-sm text-slate-500">{formatDateRange(item)}</p>
                     </div>
                     {item.summary && (
-                      <p class="mt-3 text-sm leading-7 text-slate-700">{item.summary}</p>
+                      <p class="mt-3 text-sm leading-7 text-slate-700">{truncateText(item.summary, 220)}</p>
                     )}
                     {item.bullets && item.bullets.length > 0 && (
                       <ul class="mt-3 space-y-2 text-sm leading-7 text-slate-700">
                         {item.bullets.map((bullet) => (
                           <li>
-                            <span class="font-medium">•</span> {bullet}
+                            <span class="font-medium">•</span> {truncateText(bullet, 140)}
                           </li>
                         ))}
                       </ul>
@@ -141,7 +112,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                       )}
                     </div>
                     {project.summary && (
-                      <p class="mt-2 text-sm leading-7 text-slate-700">{project.summary}</p>
+                      <p class="mt-2 text-sm leading-7 text-slate-700">{truncateText(project.summary, 220)}</p>
                     )}
                     {project.tags && project.tags.length > 0 && (
                       <div class="mt-3 flex flex-wrap gap-2">

package/src/resume-templates/ResumeTemplateModernTwoTone.astro

@@ -1,6 +1,6 @@
 ---
 import type { ResumeData } from "./typescript-schema";
-import { formatDateRange } from "./typescript-schema";
+import { buildContactEntries, formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -17,26 +17,14 @@ const locationLabel =
   basics.location?.label ||
   [basics.location?.city, basics.location?.country].filter(Boolean).join(", ");
 
-const formatUrlLabel = (value: string) =>
-  value.replace(/^https?:\/\//, "").replace(/\/$/, "");
-
-const contactItems: Array<{ label: string; href?: string }> = [];
-if (locationLabel) contactItems.push({ label: locationLabel });
-if (basics.contact.email) {
-  contactItems.push({ label: basics.contact.email, href: `mailto:${basics.contact.email}` });
-}
-if (basics.contact.phone) {
-  const phoneHref = basics.contact.phone.replace(/\s+/g, "");
-  contactItems.push({ label: basics.contact.phone, href: `tel:${phoneHref}` });
-}
-if (basics.contact.website) {
-  contactItems.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
-}
-
-const directContactLine = [basics.contact.email, basics.contact.phone].filter(Boolean).join(" • ");
+const contactItems = buildContactEntries(basics, locationLabel);
+const directContactLine = contactItems
+  .filter((item) => item.kind === "email" || item.kind === "phone")
+  .map((item) => item.label)
+  .join(" • ");
 
 const skills = data.skills ?? [];
-const links = basics.links ?? [];
+const links = contactItems.filter((item) => item.kind === "link");
 const languages = data.languages ?? [];
 const experienceItems = data.experience ?? [];
 const projects = data.projects ?? [];
@@ -46,7 +34,7 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
+<div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 print:shadow-none print:ring-0">
       <div class="grid lg:grid-cols-12 print:grid-cols-1">
@@ -66,7 +54,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                 <div class="space-y-1 text-slate-200 print:text-slate-700">
                   {directContactLine && <div class="font-medium">{directContactLine}</div>}
                   {contactItems
-                    .filter((item) => item.label !== basics.contact.email && item.label !== basics.contact.phone)
+                    .filter((item) => item.kind !== "email" && item.kind !== "phone")
                     .map((item) =>
                     item.href ? (
                       <a class="underline underline-offset-2 print:no-underline" href={item.href}>
@@ -96,9 +84,13 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                 <div class="text-sm font-semibold text-slate-100 print:text-slate-900">LINKS</div>
                 <div class="space-y-1 text-sm text-slate-200 print:text-slate-700">
                   {links.map((link) => (
-                    <a class="underline underline-offset-2 print:no-underline" href={link.url}>
-                      {link.label ?? formatUrlLabel(link.url)}
-                    </a>
+                    link.href ? (
+                      <a class="underline underline-offset-2 print:no-underline" href={link.href}>
+                        {link.label}
+                      </a>
+                    ) : (
+                      <div>{link.label}</div>
+                    )
                   ))}
                 </div>
               </div>

package/src/resume-templates/typescript-schema.ts

@@ -117,3 +117,150 @@ export function formatDateRange(item: {
   const end = item.end.month ? `${m(item.end.month)}/${item.end.year}` : `${item.end.year}`;
   return `${start} — ${end}`;
 }
+
+export type ResumeContactEntryKind = "location" | "email" | "phone" | "website" | "link";
+
+export type ResumeContactEntry = {
+  kind: ResumeContactEntryKind;
+  label: string;
+  href?: string;
+};
+
+const clean = (value?: string | null) => (value ?? "").replace(/\s+/g, " ").trim();
+
+const normalizeEmail = (value?: string | null) => clean(value).toLowerCase();
+
+const normalizePhone = (value?: string | null) => clean(value).replace(/[^\d+]/g, "");
+
+const normalizeUrlHref = (value?: string | null) => {
+  const raw = clean(value);
+  if (!raw) return "";
+  if (/^mailto:/i.test(raw) || /^tel:/i.test(raw)) return raw;
+  const withoutScheme = raw.replace(/^https?:\/\//i, "").replace(/^\/+/, "");
+  if (!withoutScheme) return "";
+  return `https://${withoutScheme}`;
+};
+
+const canonicalUrlKey = (value?: string | null) => {
+  const href = normalizeUrlHref(value);
+  if (!href) return "";
+  if (/^mailto:/i.test(href) || /^tel:/i.test(href)) return href.toLowerCase();
+
+  try {
+    const parsed = new URL(href);
+    const pathname = parsed.pathname === "/" ? "" : parsed.pathname.replace(/\/$/, "");
+    return `${parsed.protocol}//${parsed.hostname.toLowerCase()}${pathname}${parsed.search}`.toLowerCase();
+  } catch {
+    return href.toLowerCase();
+  }
+};
+
+export const formatUrlLabel = (value?: string | null) => {
+  const href = normalizeUrlHref(value);
+  if (!href) return "";
+  if (/^mailto:/i.test(href) || /^tel:/i.test(href)) return href;
+
+  try {
+    const parsed = new URL(href);
+    const pathname = parsed.pathname === "/" ? "" : parsed.pathname.replace(/\/$/, "");
+    return `${parsed.hostname.toLowerCase()}${pathname}${parsed.search}`;
+  } catch {
+    return href.replace(/^https?:\/\//i, "").replace(/\/$/, "");
+  }
+};
+
+export const truncateText = (value?: string | null, max = 160) => {
+  const normalized = clean(value);
+  if (!normalized) return "";
+  if (normalized.length <= max) return normalized;
+  return `${normalized.slice(0, Math.max(0, max - 1)).trimEnd()}…`;
+};
+
+export const buildContactEntries = (
+  basics: ResumeData["basics"],
+  locationLabel?: string,
+): ResumeContactEntry[] => {
+  const seen = new Set<string>();
+  const entries: ResumeContactEntry[] = [];
+
+  const pushEntry = (entry: ResumeContactEntry, key: string) => {
+    if (!entry.label || !key || seen.has(key)) return;
+    seen.add(key);
+    entries.push(entry);
+  };
+
+  const normalizedLocation = clean(locationLabel);
+  if (normalizedLocation) {
+    pushEntry(
+      { kind: "location", label: normalizedLocation },
+      `location:${normalizedLocation.toLowerCase()}`,
+    );
+  }
+
+  const email = normalizeEmail(basics.contact.email);
+  if (email) {
+    pushEntry({ kind: "email", label: email, href: `mailto:${email}` }, `email:${email}`);
+  }
+
+  const phoneLabel = clean(basics.contact.phone);
+  const phone = normalizePhone(basics.contact.phone);
+  if (phoneLabel && phone) {
+    pushEntry({ kind: "phone", label: phoneLabel, href: `tel:${phone}` }, `phone:${phone}`);
+  }
+
+  const websiteHref = normalizeUrlHref(basics.contact.website);
+  if (websiteHref) {
+    const websiteKey = canonicalUrlKey(websiteHref);
+    pushEntry(
+      {
+        kind: "website",
+        label: formatUrlLabel(websiteHref),
+        href: websiteHref,
+      },
+      `url:${websiteKey}`,
+    );
+  }
+
+  for (const link of basics.links ?? []) {
+    const rawLabel = clean(link.label);
+    const href = normalizeUrlHref(link.url);
+
+    if (/^mailto:/i.test(href)) {
+      const linkedEmail = normalizeEmail(href.replace(/^mailto:/i, ""));
+      if (linkedEmail) {
+        pushEntry({ kind: "email", label: linkedEmail, href: `mailto:${linkedEmail}` }, `email:${linkedEmail}`);
+      }
+      continue;
+    }
+
+    if (/^tel:/i.test(href)) {
+      const linkedPhone = normalizePhone(href.replace(/^tel:/i, ""));
+      if (linkedPhone) {
+        pushEntry(
+          { kind: "phone", label: linkedPhone, href: `tel:${linkedPhone}` },
+          `phone:${linkedPhone}`,
+        );
+      }
+      continue;
+    }
+
+    if (href) {
+      const key = canonicalUrlKey(href);
+      pushEntry(
+        {
+          kind: "link",
+          label: rawLabel || formatUrlLabel(href),
+          href,
+        },
+        `url:${key}`,
+      );
+      continue;
+    }
+
+    if (rawLabel) {
+      pushEntry({ kind: "link", label: rawLabel }, `text:${rawLabel.toLowerCase()}`);
+    }
+  }
+
+  return entries;
+};

package/src/styles/global.css

@@ -106,6 +106,15 @@
     scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
   }
 
+  @media print {
+    html,
+    body {
+      background: #fff !important;
+      background-image: none !important;
+      color: #000 !important;
+    }
+  }
+
   body::-webkit-scrollbar {
     width: 8px;
   }
@@ -1980,6 +1989,19 @@
     page-break-inside: avoid;
   }
 
+  @media print {
+    .av-print-hide {
+      display: none !important;
+    }
+
+    .av-print-white {
+      background: #fff !important;
+      color: #000 !important;
+      box-shadow: none !important;
+      background-image: none !important;
+    }
+  }
+
   /* Loading bar utility */
   .av-loading-bar {
     height: 4px;