@takuhon/api 1.3.0 → 1.4.0

package/dist/index.js

@@ -54,7 +54,7 @@ import {
 import { Hono } from "hono";
 
 // src/html/build-html.ts
-import { generateJsonLd, renderActivitySvg } from "@takuhon/core";
+import { generateJsonLd, renderActivitySvg, SECTION_KEYS } from "@takuhon/core";
 
 // src/html/html-helpers.ts
 import { formatDate, getPresentLabel } from "@takuhon/core";
@@ -74,10 +74,10 @@ function presentLabel(locale) {
   return escapeHtml(getPresentLabel(locale));
 }
 function dateRange(start, opts) {
-  const { end, isCurrent, locale } = opts;
+  const { end, isCurrent, locale, separator = " \u2013 " } = opts;
   const left = start ? timeTag(start, locale) : "";
   const right = isCurrent === true || end === null ? presentLabel(locale) : end ? timeTag(end, locale) : "";
-  if (left && right) return `${left} \u2013 ${right}`;
+  if (left && right) return `${left}${separator}${right}`;
   return left || right;
 }
 function nonEmpty(values, separator) {
@@ -86,7 +86,7 @@ function nonEmpty(values, separator) {
 }
 
 // src/html/brand-icons.ts
-var BRAND_ICONS = {
+var GLYPHS = {
   github: {
     viewBox: "0 0 24 24",
     path: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
@@ -130,18 +130,143 @@ var BRAND_ICONS = {
   rss: {
     viewBox: "0 0 24 24",
     path: "M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"
+  },
+  npm: {
+    viewBox: "0 0 24 24",
+    path: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+  },
+  linktree: {
+    viewBox: "0 0 24 24",
+    path: "m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z"
+  },
+  wakatime: {
+    viewBox: "0 0 24 24",
+    path: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2.824a9.176 9.176 0 1 1 0 18.352 9.176 9.176 0 0 1 0-18.352zm5.097 5.058c-.327 0-.61.19-.764.45-1.025 1.463-2.21 3.162-3.288 4.706l-.387-.636a.897.897 0 0 0-.759-.439.901.901 0 0 0-.788.492l-.357.581-1.992-2.943a.897.897 0 0 0-.761-.446c-.514 0-.903.452-.903.96a1 1 0 0 0 .207.61l2.719 3.96c.152.272.44.47.776.47a.91.91 0 0 0 .787-.483c.046-.071.23-.368.314-.504l.324.52c-.035-.047.076.113.087.13.024.031.054.059.078.085.019.019.04.036.058.052.036.033.08.056.115.08.025.016.052.028.076.04.029.015.06.024.088.035.058.025.122.027.18.04.031.004.064.003.092.005.29 0 .546-.149.707-.36 1.4-2 2.842-4.055 4.099-5.849A.995.995 0 0 0 18 8.842c0-.508-.389-.96-.903-.96"
+  },
+  wordpress: {
+    viewBox: "0 0 24 24",
+    path: "M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"
   }
 };
-var BRAND_ICON_ALIASES = {
+var TYPE_GLYPHS = {
+  github: "github",
+  gitlab: "gitlab",
+  linkedin: "linkedin",
+  x: "x",
+  mastodon: "mastodon",
+  bluesky: "bluesky",
+  instagram: "instagram",
+  youtube: "youtube",
+  threads: "threads",
+  facebook: "facebook",
+  rss: "rss",
   blog: "rss"
 };
-function brandIconSvg(type) {
-  const icon = BRAND_ICONS[BRAND_ICON_ALIASES[type] ?? type];
+var HOST_GLYPHS = {
+  "github.com": "github",
+  "gitlab.com": "gitlab",
+  "linkedin.com": "linkedin",
+  "x.com": "x",
+  "twitter.com": "x",
+  "instagram.com": "instagram",
+  "youtube.com": "youtube",
+  "threads.net": "threads",
+  "facebook.com": "facebook",
+  "bsky.app": "bluesky",
+  "npmjs.com": "npm",
+  "linktr.ee": "linktree",
+  "wakatime.com": "wakatime",
+  "wordpress.org": "wordpress"
+};
+function hostGlyph(url) {
+  let host;
+  try {
+    host = new URL(url, "https://takuhon.invalid").hostname.toLowerCase();
+  } catch {
+    return null;
+  }
+  for (const [domain, glyph] of Object.entries(HOST_GLYPHS)) {
+    if (host === domain || host.endsWith(`.${domain}`)) return glyph;
+  }
+  return null;
+}
+function renderGlyph(name) {
+  const icon = GLYPHS[name];
   if (!icon) return "";
   return `<svg class="brand-icon" viewBox="${icon.viewBox}" width="18" height="18" fill="currentColor" aria-hidden="true" focusable="false"><path d="${escapeHtml(icon.path)}"/></svg>`;
 }
+function brandIconForLink(link) {
+  const glyph = link.type === "custom" ? hostGlyph(link.url) : TYPE_GLYPHS[link.type];
+  return glyph ? renderGlyph(glyph) : "";
+}
+function brandIconForPlatform(platform, url) {
+  const key = platform.trim().toLowerCase();
+  const named = key === "blog" ? "rss" : Object.hasOwn(GLYPHS, key) ? key : null;
+  const glyph = named ?? hostGlyph(url);
+  return glyph ? renderGlyph(glyph) : "";
+}
+function brandIconForHost(url) {
+  const glyph = hostGlyph(url);
+  return glyph ? renderGlyph(glyph) : "";
+}
 
 // src/html/build-html.ts
+var LABELS_EN = {
+  about: "About",
+  careers: "Experience",
+  projects: "Projects",
+  volunteering: "Volunteering",
+  skills: "Skills",
+  activity: "Developer activity",
+  education: "Education",
+  certifications: "Certifications",
+  publications: "Publications",
+  honors: "Honors & awards",
+  memberships: "Memberships",
+  courses: "Courses",
+  patents: "Patents",
+  testScores: "Test scores",
+  languages: "Languages",
+  recommendations: "Recommendations",
+  highlights: "Selected posts",
+  contact: "Contact",
+  skipLink: "Skip to main content",
+  localeNav: "Language",
+  featuredLinks: "Featured links",
+  otherLinks: "Links",
+  poweredBy: "Powered by"
+};
+var LABELS_JA = {
+  about: "\u81EA\u5DF1\u7D39\u4ECB",
+  careers: "\u7D4C\u6B74",
+  projects: "\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8",
+  volunteering: "\u30DC\u30E9\u30F3\u30C6\u30A3\u30A2",
+  skills: "\u30B9\u30AD\u30EB",
+  activity: "\u958B\u767A\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",
+  education: "\u5B66\u6B74",
+  certifications: "\u8CC7\u683C\u30FB\u8A8D\u5B9A",
+  publications: "\u51FA\u7248\u7269",
+  honors: "\u53D7\u8CDE\u30FB\u6804\u8A89",
+  memberships: "\u6240\u5C5E",
+  courses: "\u8B1B\u5EA7",
+  patents: "\u7279\u8A31",
+  testScores: "\u30C6\u30B9\u30C8\u30B9\u30B3\u30A2",
+  languages: "\u8A00\u8A9E",
+  recommendations: "\u63A8\u85A6",
+  highlights: "\u30D4\u30C3\u30AF\u30A2\u30C3\u30D7\u6295\u7A3F",
+  contact: "\u9023\u7D61\u5148",
+  skipLink: "\u30E1\u30A4\u30F3\u30B3\u30F3\u30C6\u30F3\u30C4\u3078\u30B9\u30AD\u30C3\u30D7",
+  localeNav: "\u8A00\u8A9E",
+  featuredLinks: "\u4E3B\u8981\u30EA\u30F3\u30AF",
+  otherLinks: "\u305D\u306E\u4ED6\u306E\u30EA\u30F3\u30AF",
+  poweredBy: "Powered by"
+};
+function isJapaneseLocale(resolvedLocale) {
+  return resolvedLocale.toLowerCase().split(/[-_]/)[0] === "ja";
+}
+function pickLabelPack(resolvedLocale) {
+  return isJapaneseLocale(resolvedLocale) ? LABELS_JA : LABELS_EN;
+}
 function escapeJsonLd(json) {
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -154,6 +279,7 @@ var DEFAULT_TOKENS = {
   "--takuhon-color-primary": "#2563eb",
   "--takuhon-color-primary-contrast": "#ffffff",
   "--takuhon-color-accent": "#4f46e5",
+  "--takuhon-color-heading": "#1e1888",
   "--takuhon-font-family": "system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif"
 };
 var DEFAULT_TOKENS_DARK = {
@@ -164,7 +290,8 @@ var DEFAULT_TOKENS_DARK = {
   "--takuhon-color-border": "#334155",
   "--takuhon-color-primary": "#60a5fa",
   "--takuhon-color-primary-contrast": "#0f172a",
-  "--takuhon-color-accent": "#818cf8"
+  "--takuhon-color-accent": "#818cf8",
+  "--takuhon-color-heading": "#c7d2fe"
 };
 var INTERNAL_TOKENS = {
   "--takuhon-space-1": "4px",
@@ -193,7 +320,8 @@ var COLOR_TOKEN_VARS = {
   border: "--takuhon-color-border",
   accent: "--takuhon-color-accent",
   primary: "--takuhon-color-primary",
-  primaryContrast: "--takuhon-color-primary-contrast"
+  primaryContrast: "--takuhon-color-primary-contrast",
+  heading: "--takuhon-color-heading"
 };
 var SAFE_COLOR = /^(?:#[0-9A-Fa-f]{3,8}|[A-Za-z]+|(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color)\([A-Za-z0-9.,%/\s-]*\))$/;
 var SAFE_FONT = /^[A-Za-z0-9\s,'"._-]+$/;
@@ -242,6 +370,8 @@ body{margin:0;color:var(--takuhon-color-text);background:var(--takuhon-color-bg)
 main{max-width:var(--takuhon-max-content-width);margin:0 auto;padding:var(--takuhon-space-6) var(--takuhon-space-4)}
 a{color:var(--takuhon-color-primary)}
 a:focus-visible{outline:2px solid var(--takuhon-color-accent);outline-offset:2px;border-radius:var(--takuhon-radius-sm)}
+.skip-link{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
+.skip-link:focus{position:fixed;left:var(--takuhon-space-2);top:var(--takuhon-space-2);width:auto;height:auto;padding:var(--takuhon-space-2) var(--takuhon-space-4);background:var(--takuhon-color-primary);color:var(--takuhon-color-primary-contrast);border-radius:var(--takuhon-radius-sm);z-index:100}
 h1{font-size:var(--takuhon-font-size-2xl);font-weight:700;line-height:1.2;margin:0 0 var(--takuhon-space-2)}
 h2{font-size:var(--takuhon-font-size-xl);margin:0 0 var(--takuhon-space-3);padding-bottom:var(--takuhon-space-2);border-bottom:1px solid var(--takuhon-color-border)}
 h3{font-size:var(--takuhon-font-size-lg);font-weight:600;margin:0}
@@ -249,44 +379,111 @@ header{margin-bottom:var(--takuhon-space-6);display:flow-root}
 header .avatar{width:96px;height:96px;border-radius:var(--takuhon-radius-full);object-fit:cover;float:left;margin:0 var(--takuhon-space-3) var(--takuhon-space-3) 0;shape-outside:circle();border:1px solid var(--takuhon-color-border)}
 .tagline{font-size:var(--takuhon-font-size-lg);color:var(--takuhon-color-text-muted);margin:0 0 var(--takuhon-space-2)}
 .location{font-size:var(--takuhon-font-size-sm);color:var(--takuhon-color-text-muted);margin:0}
-.bio{margin:var(--takuhon-space-3) 0 0}
 section{margin:0 0 var(--takuhon-space-6)}
+.bio-body h3{font-size:var(--takuhon-font-size-lg);font-weight:600;color:var(--takuhon-color-heading);margin:var(--takuhon-space-5) 0 var(--takuhon-space-2)}
+.bio-body h4{font-size:var(--takuhon-font-size-base);font-weight:600;color:var(--takuhon-color-heading);margin:var(--takuhon-space-4) 0 var(--takuhon-space-2)}
+.bio-body p{margin:0 0 var(--takuhon-space-3)}
+.bio-body ul{list-style:disc;margin:0 0 var(--takuhon-space-3);padding-left:var(--takuhon-space-5)}
+.bio-body li{margin:0 0 var(--takuhon-space-1)}
+.bio-body hr{border:0;border-top:1px solid var(--takuhon-color-border);margin:var(--takuhon-space-5) 0}
 ul{padding:0;margin:0;list-style:none}
 .entries>li{margin:0 0 var(--takuhon-space-4)}
 .entries--timeline>li{position:relative;display:flex;flex-direction:column;margin:0 0 0 var(--takuhon-space-2);padding:0 0 var(--takuhon-space-5) var(--takuhon-space-4);border-left:2px solid var(--takuhon-color-border)}
 .entries--timeline>li:last-child{padding-bottom:0}
-.entries--timeline>li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:var(--takuhon-radius-full);background:var(--takuhon-color-primary)}
+.entries--timeline>li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:var(--takuhon-radius-full);background:var(--takuhon-color-text-muted)}
 .entries--timeline>li.is-current::before{background:var(--takuhon-color-accent)}
 .entries--timeline .meta{order:-1;margin:0 0 var(--takuhon-space-1)}
+.entries--timeline>li>h3{font-size:var(--takuhon-font-size-base);font-weight:600;margin:0}
 .entries--cards{display:grid;gap:var(--takuhon-space-3)}
 .entries--cards>li{margin:0;padding:var(--takuhon-space-4);border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-md);background:var(--takuhon-color-surface)}
 .entries--cards>li.is-highlighted{border-color:var(--takuhon-color-accent)}
-.sub{margin:var(--takuhon-space-1) 0 0;font-weight:600}
+.entries h3 a{color:inherit;text-decoration:none}
+.entries h3 a:hover{color:var(--takuhon-color-primary);text-decoration:underline}
+.sub{margin:var(--takuhon-space-1) 0 0;color:var(--takuhon-color-text-muted)}
+.sub a{color:inherit;text-decoration:none}
+.sub a:hover{color:var(--takuhon-color-primary);text-decoration:underline}
+.role-badge{margin:var(--takuhon-space-1) 0 0;font-size:var(--takuhon-font-size-sm);font-weight:600;letter-spacing:.02em;color:var(--takuhon-color-accent)}
+.desc{margin:var(--takuhon-space-2) 0 0}
+.entries--timeline .desc{white-space:pre-wrap}
+.external-icon{width:.72em;height:.72em;margin-left:.35em;vertical-align:-.05em;opacity:.55}
 .meta{margin:var(--takuhon-space-1) 0 0;color:var(--takuhon-color-text-muted);font-size:var(--takuhon-font-size-sm)}
 .featured-links,.other-links{margin:0 0 var(--takuhon-space-6)}
 .featured-links>ul,.other-links>ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--takuhon-space-2)}
 .featured-links>ul{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
-.featured-links a,.other-links a{display:flex;align-items:center;gap:var(--takuhon-space-2);min-height:var(--takuhon-tap-target);padding:var(--takuhon-space-2) var(--takuhon-space-3);background:var(--takuhon-color-surface);color:var(--takuhon-color-text);text-decoration:none;border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-md)}
+.featured-links a,.other-links a{display:flex;align-items:center;justify-content:space-between;gap:var(--takuhon-space-2);min-height:var(--takuhon-tap-target);padding:var(--takuhon-space-2) var(--takuhon-space-3);background:var(--takuhon-color-surface);color:var(--takuhon-color-text);text-decoration:none;border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-md)}
 .featured-links a:hover,.other-links a:hover{border-color:var(--takuhon-color-accent)}
 .link-main{display:inline-flex;align-items:center;gap:var(--takuhon-space-2);min-width:0}
+.link-type{font-size:var(--takuhon-font-size-sm);color:var(--takuhon-color-text-muted)}
 .brand-icon{width:1.15em;height:1.15em;flex:none;opacity:.85}
 .skills,.tags{display:flex;flex-wrap:wrap;gap:var(--takuhon-space-2)}
 .skills>li,.tags>li{background:var(--takuhon-color-surface);border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-full);padding:var(--takuhon-space-1) var(--takuhon-space-3);font-size:var(--takuhon-font-size-sm)}
+.entries--cards .tags{margin-top:var(--takuhon-space-2)}
+.tags>li{background:var(--takuhon-color-bg);color:var(--takuhon-color-text-muted);padding:2px var(--takuhon-space-2)}
 .skills-groups{display:grid;gap:var(--takuhon-space-4)}
 .skill-group h3{font-size:var(--takuhon-font-size-base);margin:0 0 var(--takuhon-space-2);color:var(--takuhon-color-text-muted);text-transform:uppercase;letter-spacing:.04em}
+.vol-list{display:grid;gap:var(--takuhon-space-2)}
+.vol{padding:var(--takuhon-space-3) 0;border-bottom:1px solid var(--takuhon-color-border)}
+.vol:last-child{border-bottom:0}
+.vol-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--takuhon-space-1) var(--takuhon-space-3)}
+.vol-org{font-size:var(--takuhon-font-size-lg)}
+.vol-org a{color:inherit;text-decoration:none}
+.vol-org a:hover{color:var(--takuhon-color-primary);text-decoration:underline}
+.vol-role{color:var(--takuhon-color-text-muted);font-size:var(--takuhon-font-size-sm)}
+.vol-desc{margin:var(--takuhon-space-1) 0 0;font-size:var(--takuhon-font-size-sm)}
+.vol-secondary{display:inline-flex;align-items:center;gap:var(--takuhon-space-1);margin-top:var(--takuhon-space-2);padding:2px var(--takuhon-space-2);font-size:var(--takuhon-font-size-sm);background:var(--takuhon-color-surface);border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-full);color:var(--takuhon-color-text-muted);text-decoration:none}
+.vol-secondary:hover{color:var(--takuhon-color-text);border-color:var(--takuhon-color-accent)}
+.vol-secondary .brand-icon{width:1em;height:1em;opacity:.85}
 .rec{margin:0 0 var(--takuhon-space-4)}
 .rec blockquote{margin:0;padding-left:var(--takuhon-space-3);border-left:3px solid var(--takuhon-color-border)}
 .rec figcaption{color:var(--takuhon-color-text-muted);font-size:var(--takuhon-font-size-sm);margin-top:var(--takuhon-space-2)}
-nav.locales{display:flex;gap:var(--takuhon-space-3);margin-bottom:var(--takuhon-space-4);font-size:var(--takuhon-font-size-sm)}
-.activity svg{max-width:100%;height:auto}
-footer.powered{max-width:var(--takuhon-max-content-width);margin:0 auto;padding:var(--takuhon-space-5) var(--takuhon-space-4);color:var(--takuhon-color-text-muted);font-size:var(--takuhon-font-size-sm)}`;
+nav.locales{display:flex;justify-content:flex-end;gap:var(--takuhon-space-3);margin-bottom:var(--takuhon-space-4);font-size:var(--takuhon-font-size-sm)}
+nav.locales a,nav.locales [aria-current]{padding:var(--takuhon-space-1) var(--takuhon-space-2);border-radius:var(--takuhon-radius-sm);text-transform:uppercase}
+nav.locales a{color:var(--takuhon-color-primary);text-decoration:none}
+nav.locales a:hover{text-decoration:underline}
+nav.locales [aria-current]{color:var(--takuhon-color-text);font-weight:700;background:var(--takuhon-color-surface)}
+.activity svg{width:100%;height:auto}
+footer.powered{max-width:var(--takuhon-max-content-width);margin:var(--takuhon-space-6) auto 0;padding:var(--takuhon-space-4) var(--takuhon-space-4) var(--takuhon-space-6);border-top:1px solid var(--takuhon-color-border);text-align:center;color:var(--takuhon-color-text-muted);font-size:var(--takuhon-font-size-sm)}
+footer.powered p{margin:0 0 var(--takuhon-space-2)}
+footer.powered p:last-child{margin-bottom:0}
+footer.powered .powered-by a{color:var(--takuhon-color-primary);text-decoration:none}
+footer.powered .powered-by a:hover{text-decoration:underline}
+.highlights .highlights-intro{color:var(--takuhon-color-text-muted);margin:0 0 var(--takuhon-space-3)}
+.highlights-track{display:flex;gap:var(--takuhon-space-3);list-style:none;margin:0;padding:0 0 var(--takuhon-space-2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--takuhon-space-1);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
+.highlight-card{position:relative;flex:0 0 85%;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--takuhon-color-surface);border:1px solid var(--takuhon-color-border);border-radius:var(--takuhon-radius-md);overflow:hidden}
+@media (min-width:640px){.highlight-card{flex-basis:calc((100% - var(--takuhon-space-3)) / 2)}}
+@media (min-width:960px){.highlight-card{flex-basis:calc((100% - 2 * var(--takuhon-space-3)) / 3)}}
+.highlight-card:hover{border-color:var(--takuhon-color-accent)}
+.highlight-card:focus-within{outline:2px solid var(--takuhon-color-accent);outline-offset:2px}
+.highlight-thumb{aspect-ratio:1 / 1;background:var(--takuhon-color-bg)}
+.highlight-thumb img{display:block;width:100%;height:100%;object-fit:cover}
+.highlight-body{padding:var(--takuhon-space-3);display:flex;flex-direction:column;gap:var(--takuhon-space-2)}
+.highlight-body>*{margin:0}
+.highlight-badge{display:inline-flex;align-items:center;gap:var(--takuhon-space-1);font-size:var(--takuhon-font-size-sm);color:var(--takuhon-color-text-muted)}
+.highlight-badge .brand-icon{width:1em;height:1em;opacity:.85}
+.highlight-title{font-size:var(--takuhon-font-size-base)}
+.highlight-title a{color:var(--takuhon-color-text);text-decoration:none}
+.highlight-title a:hover{color:var(--takuhon-color-primary)}
+.highlight-title a::after{content:"";position:absolute;inset:0}
+.highlight-title a:focus-visible{outline:none}
+.highlight-date{font-size:var(--takuhon-font-size-sm);color:var(--takuhon-color-text-muted)}
+.highlight-desc{font-size:var(--takuhon-font-size-sm)}
+.highlight-cta{font-size:var(--takuhon-font-size-sm);font-weight:600;color:var(--takuhon-color-primary)}`;
+var EXTERNAL_ICON = '<svg class="external-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+function externalLink(url, innerEscaped) {
+  return `<a href="${escapeHtml(url)}" rel="noopener">${innerEscaped}${EXTERNAL_ICON}</a>`;
+}
 function renderEntry(entry) {
-  const href = entry.url ? safeUrl(entry.url) : void 0;
-  const heading = href ? `<a href="${escapeHtml(href)}">${escapeHtml(entry.heading)}</a>` : escapeHtml(entry.heading);
+  const headHref = entry.url ? safeUrl(entry.url) : void 0;
+  const heading = headHref ? externalLink(headHref, escapeHtml(entry.heading)) : escapeHtml(entry.heading);
   const parts = [`<h3>${heading}</h3>`];
-  if (entry.sub) parts.push(`<p class="sub">${escapeHtml(entry.sub)}</p>`);
+  if (entry.role) parts.push(`<p class="role-badge">${escapeHtml(entry.role)}</p>`);
+  if (entry.sub) {
+    const subHref = entry.subUrl ? safeUrl(entry.subUrl) : void 0;
+    const sub = subHref ? externalLink(subHref, escapeHtml(entry.sub)) : escapeHtml(entry.sub);
+    parts.push(`<p class="sub">${sub}</p>`);
+  }
   if (entry.dates) parts.push(`<p class="meta">${entry.dates}</p>`);
-  if (entry.body) parts.push(`<p>${escapeHtml(entry.body)}</p>`);
+  if (entry.body) parts.push(`<p class="desc">${escapeHtml(entry.body)}</p>`);
   if (entry.tags && entry.tags.length > 0) {
     parts.push(
       `<ul class="tags">${entry.tags.map((t) => `<li>${escapeHtml(t)}</li>`).join("")}</ul>`
@@ -300,8 +497,65 @@ function entryList(title, entries, variant) {
   const cls = variant ? `entries entries--${variant}` : "entries";
   return `<section><h2>${escapeHtml(title)}</h2><ul class="${cls}">${entries.map(renderEntry).join("")}</ul></section>`;
 }
-function renderHeader(p) {
+function renderInline(text) {
+  return escapeHtml(text).replace(/\*\*([^*]+?)\*\*/g, "<strong>$1</strong>");
+}
+function renderMarkdown(input) {
+  const lines = input.split("\n");
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const trimmed = (lines[i] ?? "").trim();
+    if (trimmed === "") {
+      i++;
+      continue;
+    }
+    if (trimmed === "---") {
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("### ")) {
+      out.push(`<h4>${renderInline(trimmed.slice(4))}</h4>`);
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("## ")) {
+      out.push(`<h3>${renderInline(trimmed.slice(3))}</h3>`);
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("- ")) {
+      const items = [];
+      while (i < lines.length) {
+        const cur = (lines[i] ?? "").trim();
+        if (!cur.startsWith("- ")) break;
+        items.push(`<li>${renderInline(cur.slice(2))}</li>`);
+        i++;
+      }
+      out.push(`<ul>${items.join("")}</ul>`);
+      continue;
+    }
+    const para = [];
+    while (i < lines.length) {
+      const cur = (lines[i] ?? "").trim();
+      if (cur === "" || cur === "---" || cur.startsWith("## ") || cur.startsWith("### ") || cur.startsWith("- ")) {
+        break;
+      }
+      para.push(cur);
+      i++;
+    }
+    if (para.length > 0) out.push(`<p>${renderInline(para.join(" "))}</p>`);
+  }
+  return out.join("\n");
+}
+function renderBio(bio, heading) {
+  if (!bio) return "";
+  return `<section class="bio"><h2>${escapeHtml(heading)}</h2><div class="bio-body">${renderMarkdown(bio)}</div></section>`;
+}
+function renderHeader(p, localeNavHtml) {
   const parts = [];
+  if (localeNavHtml) parts.push(localeNavHtml);
   const avatarSrc = p.avatar?.url ? safeUrl(p.avatar.url) : void 0;
   if (avatarSrc) {
     parts.push(
@@ -311,33 +565,55 @@ function renderHeader(p) {
   parts.push(`<h1>${escapeHtml(p.displayName)}</h1>`);
   if (p.tagline) parts.push(`<p class="tagline">${escapeHtml(p.tagline)}</p>`);
   if (p.location?.display) parts.push(`<p class="location">${escapeHtml(p.location.display)}</p>`);
-  if (p.bio) parts.push(`<p class="bio">${escapeHtml(p.bio)}</p>`);
   return `<header>${parts.join("")}</header>`;
 }
+var LINK_TYPE_DISPLAY = {
+  website: "Website",
+  blog: "Blog",
+  github: "GitHub",
+  gitlab: "GitLab",
+  linkedin: "LinkedIn",
+  x: "X (Twitter)",
+  mastodon: "Mastodon",
+  bluesky: "Bluesky",
+  instagram: "Instagram",
+  youtube: "YouTube",
+  threads: "Threads",
+  facebook: "Facebook",
+  email: "Email",
+  rss: "RSS"
+};
+function linkTypePill(link, label) {
+  const display = LINK_TYPE_DISPLAY[link.type];
+  if (!display || display === label) return "";
+  return `<span class="link-type">${escapeHtml(display)}</span>`;
+}
 function renderLinkItem(link) {
-  const label = escapeHtml(link.label ?? link.url);
-  const main = `<span class="link-main">${brandIconSvg(link.type)}<span>${label}</span></span>`;
+  const label = link.label ?? link.url;
+  const main = `<span class="link-main">${brandIconForLink(link)}<span>${escapeHtml(label)}</span></span>`;
+  const pill = link.label == null ? linkTypePill(link, label) : "";
   const href = safeUrl(link.url);
-  return href ? `<li><a href="${escapeHtml(href)}" rel="me noopener">${main}</a></li>` : `<li>${main}</li>`;
+  return href ? `<li><a href="${escapeHtml(href)}" rel="me noopener">${main}${pill}</a></li>` : `<li>${main}${pill}</li>`;
 }
 function byOrder(a, b) {
   return (a.order ?? 0) - (b.order ?? 0);
 }
-function renderLinks(links) {
-  if (links.length === 0) return "";
+function renderFeaturedLinks(links, ariaLabel) {
   const featured = links.filter((l) => l.featured === true).sort(byOrder);
+  if (featured.length === 0) return "";
+  return `<nav class="featured-links" aria-label="${escapeHtml(ariaLabel)}"><ul>${featured.map(renderLinkItem).join("")}</ul></nav>`;
+}
+function renderOtherLinks(links, heading) {
   const others = links.filter((l) => l.featured !== true).sort(byOrder);
-  const group = (cls, ariaLabel, items) => items.length === 0 ? "" : `<nav class="${cls}" aria-label="${ariaLabel}"><ul>${items.map(renderLinkItem).join("")}</ul></nav>`;
-  return [
-    group("featured-links", "Featured links", featured),
-    group("other-links", "Links", others)
-  ].filter(Boolean).join("\n");
+  if (others.length === 0) return "";
+  return `<section class="other-links"><h2>${escapeHtml(heading)}</h2><ul>${others.map(renderLinkItem).join("")}</ul></section>`;
 }
-function renderSkills(skills, categories) {
+function renderSkills(skills, categories, heading) {
   if (skills.length === 0) return "";
+  const h = escapeHtml(heading);
   const chips = (list) => `<ul class="skills">${list.map((s) => `<li>${escapeHtml(s.label)}</li>`).join("")}</ul>`;
   if (!categories || categories.length === 0) {
-    return `<section><h2>Skills</h2>${chips(skills)}</section>`;
+    return `<section><h2>${h}</h2>${chips(skills)}</section>`;
   }
   const UNCAT = "";
   const buckets = /* @__PURE__ */ new Map();
@@ -347,7 +623,7 @@ function renderSkills(skills, categories) {
     arr.push(s);
     buckets.set(key, arr);
   }
-  const group = (heading, list) => `<div class="skill-group">${heading !== void 0 ? `<h3>${escapeHtml(heading)}</h3>` : ""}${chips(list)}</div>`;
+  const group = (heading2, list) => `<div class="skill-group">${heading2 !== void 0 ? `<h3>${escapeHtml(heading2)}</h3>` : ""}${chips(list)}</div>`;
   const seen = /* @__PURE__ */ new Set();
   const groups = [];
   for (const cat of categories) {
@@ -362,14 +638,41 @@ function renderSkills(skills, categories) {
   }
   const uncategorized = buckets.get(UNCAT);
   if (uncategorized && uncategorized.length > 0) groups.push(group(void 0, uncategorized));
-  return `<section><h2>Skills</h2><div class="skills-groups">${groups.join("")}</div></section>`;
+  return `<section><h2>${h}</h2><div class="skills-groups">${groups.join("")}</div></section>`;
 }
-function renderLanguages(languages) {
+function hostLabel(url) {
+  try {
+    const host = new URL(url).hostname.replace(/^www\./, "");
+    return host || url;
+  } catch {
+    return url;
+  }
+}
+function secondaryLinkPill(link) {
+  const label = escapeHtml(link.label ?? hostLabel(link.url));
+  const href = safeUrl(link.url);
+  const glyph = href ? brandIconForHost(link.url) : "";
+  const inner = `${glyph}<span>${label}</span>`;
+  return href ? `<a class="vol-secondary" href="${escapeHtml(href)}" rel="noopener">${inner}</a>` : `<span class="vol-secondary">${inner}</span>`;
+}
+function renderVolunteering(items, heading) {
+  if (items.length === 0) return "";
+  const li = (v) => {
+    const orgHref = v.url ? safeUrl(v.url) : void 0;
+    const org = orgHref ? externalLink(orgHref, escapeHtml(v.organization)) : escapeHtml(v.organization);
+    const role = v.role ? `<span class="vol-role">${escapeHtml(v.role)}</span>` : "";
+    const desc = v.description ? `<p class="vol-desc">${escapeHtml(v.description)}</p>` : "";
+    const secondary = v.secondaryLink ? secondaryLinkPill(v.secondaryLink) : "";
+    return `<li class="vol"><div class="vol-head"><span class="vol-org">${org}</span>${role}</div>${desc}${secondary}</li>`;
+  };
+  return `<section><h2>${escapeHtml(heading)}</h2><ul class="vol-list">${items.map(li).join("")}</ul></section>`;
+}
+function renderLanguages(languages, heading) {
   if (languages.length === 0) return "";
   const items = languages.map((l) => `<li>${escapeHtml(`${l.displayName ?? l.language} \u2014 ${l.proficiency}`)}</li>`).join("");
-  return `<section><h2>Languages</h2><ul class="entries">${items}</ul></section>`;
+  return `<section><h2>${escapeHtml(heading)}</h2><ul class="entries">${items}</ul></section>`;
 }
-function renderRecommendations(recs) {
+function renderRecommendations(recs, heading) {
   if (recs.length === 0) return "";
   const items = recs.map((r) => {
     const authorHref = r.author.url ? safeUrl(r.author.url) : void 0;
@@ -378,9 +681,9 @@ function renderRecommendations(recs) {
     const rel = r.relationship ? ` (${escapeHtml(r.relationship)})` : "";
     return `<figure class="rec"><blockquote>${escapeHtml(r.body)}</blockquote><figcaption>\u2014 ${caption}${rel}</figcaption></figure>`;
   }).join("");
-  return `<section><h2>Recommendations</h2>${items}</section>`;
+  return `<section><h2>${escapeHtml(heading)}</h2>${items}</section>`;
 }
-function renderContact(contact) {
+function renderContact(contact, heading) {
   const items = [];
   if (contact.email) {
     items.push(
@@ -392,33 +695,97 @@ function renderContact(contact) {
     items.push(`<li><a href="${escapeHtml(formHref)}">Contact form</a></li>`);
   }
   if (items.length === 0) return "";
-  return `<section><h2>Contact</h2><ul class="entries">${items.join("")}</ul></section>`;
+  return `<section><h2>${escapeHtml(heading)}</h2><ul class="entries">${items.join("")}</ul></section>`;
+}
+var PLATFORM_DISPLAY = {
+  instagram: "Instagram",
+  x: "X",
+  linkedin: "LinkedIn",
+  github: "GitHub",
+  gitlab: "GitLab",
+  youtube: "YouTube",
+  threads: "Threads",
+  facebook: "Facebook",
+  mastodon: "Mastodon",
+  bluesky: "Bluesky",
+  zenn: "Zenn",
+  qiita: "Qiita",
+  note: "note",
+  blog: "Blog",
+  event: "Event",
+  artwork: "Artwork",
+  project: "Project"
+};
+function platformDisplay(platform) {
+  const label = PLATFORM_DISPLAY[platform.trim().toLowerCase()];
+  return typeof label === "string" ? label : platform;
+}
+function highlightBadge(h) {
+  return `<span class="highlight-badge">${brandIconForPlatform(h.platform, h.url)}<span>${escapeHtml(platformDisplay(h.platform))}</span></span>`;
+}
+function renderHighlightCard(h, locale) {
+  const imgSrc = h.image ? safeUrl(h.image) : void 0;
+  const img = imgSrc ? `<div class="highlight-thumb"><img src="${escapeHtml(imgSrc)}" alt="${escapeHtml(h.alt)}" loading="lazy" decoding="async"></div>` : "";
+  const href = h.url ? safeUrl(h.url) : void 0;
+  const name = platformDisplay(h.platform);
+  const cta = isJapaneseLocale(locale) ? `${name}\u3067\u898B\u308B` : `View on ${name}`;
+  const title = escapeHtml(h.title);
+  const titleEl = href ? `<h3 class="highlight-title"><a href="${escapeHtml(href)}" rel="noopener" aria-label="${escapeHtml(`${h.title} \u2014 ${cta}`)}">${title}</a></h3>` : `<h3 class="highlight-title">${title}</h3>`;
+  const date = h.postedAt ? `<p class="highlight-date">${timeTag(h.postedAt, locale)}</p>` : "";
+  const desc = h.description ? `<p class="highlight-desc">${escapeHtml(h.description)}</p>` : "";
+  const tags = h.tags && h.tags.length > 0 ? `<ul class="tags">${h.tags.map((t) => `<li>${escapeHtml(t)}</li>`).join("")}</ul>` : "";
+  const ctaEl = href ? `<span class="highlight-cta" aria-hidden="true">${escapeHtml(cta)} \u2192</span>` : "";
+  return `<li class="highlight-card">${img}<div class="highlight-body">${highlightBadge(h)}${titleEl}${date}${desc}${tags}${ctaEl}</div></li>`;
+}
+function renderHighlights(items, heading, intro, locale) {
+  if (items.length === 0) return "";
+  const introEl = intro ? `<p class="highlights-intro">${escapeHtml(intro)}</p>` : "";
+  const cards = items.map((h) => renderHighlightCard(h, locale)).join("");
+  return `<section class="highlights"><h2>${escapeHtml(heading)}</h2>${introEl}<ul class="highlights-track" role="list">${cards}</ul></section>`;
 }
-function renderActivity(snapshot) {
+function renderActivity(snapshot, heading) {
   if (!snapshot) return "";
   const svg = renderActivitySvg(snapshot);
   if (svg === "") return "";
-  return `<section class="activity"><h2>Activity</h2>${svg}</section>`;
+  return `<section class="activity"><h2>${escapeHtml(heading)}</h2>${svg}</section>`;
 }
 function renderJsonLdScript(data) {
   const payload = JSON.stringify(generateJsonLd(data));
   return `<script type="application/ld+json">${escapeJsonLd(payload)}</script>`;
 }
-function renderLocaleNav(localeNav) {
+function renderLocaleNav(localeNav, ariaLabel) {
   const items = localeNav.map(
     (l) => l.current ? `<span aria-current="true">${escapeHtml(l.locale)}</span>` : `<a href="${escapeHtml(l.href)}">${escapeHtml(l.locale)}</a>`
   ).join("");
-  return `<nav class="locales" aria-label="Language">${items}</nav>`;
+  return `<nav class="locales" aria-label="${escapeHtml(ariaLabel)}">${items}</nav>`;
 }
+var DATE_SEPARATOR_JA = " \u301C ";
+var DATE_SEPARATOR_DEFAULT = " \u2013 ";
 function renderProfileHtml(input) {
   const d = input.localized;
   const p = d.profile;
+  const locale = d.resolvedLocale;
   const description = p.tagline ?? p.bio ?? "";
+  const L = {
+    ...pickLabelPack(locale),
+    ...d.settings.sectionLabels ?? {},
+    ...input.labels
+  };
+  const omit = new Set(input.omitSections ?? []);
+  const keep = (key, html) => omit.has(key) ? "" : html;
+  const dateSeparator = isJapaneseLocale(locale) ? DATE_SEPARATOR_JA : DATE_SEPARATOR_DEFAULT;
+  const dates = (start, opts) => dateRange(start, { ...opts, locale, separator: dateSeparator });
   const head = [
     '<meta charset="utf-8">',
     '<meta name="viewport" content="width=device-width, initial-scale=1">',
     `<title>${escapeHtml(p.displayName)}</title>`,
     description ? `<meta name="description" content="${escapeHtml(description.slice(0, 300))}">` : "",
+    // Data-derived Open Graph tags (the renderer owns these; asset tags like
+    // og:image and PWA/theme-color are the host's, via the `head` slot).
+    '<meta property="og:type" content="profile">',
+    `<meta property="og:title" content="${escapeHtml(p.displayName)}">`,
+    description ? `<meta property="og:description" content="${escapeHtml(description.slice(0, 300))}">` : "",
+    input.canonicalUrl ? `<meta property="og:url" content="${escapeHtml(input.canonicalUrl)}">` : "",
     input.canonicalUrl ? `<link rel="canonical" href="${escapeHtml(input.canonicalUrl)}">` : "",
     ...input.alternates.map(
       (a) => `<link rel="alternate" hreflang="${escapeHtml(a.hreflang)}" href="${escapeHtml(a.href)}">`
@@ -426,162 +793,168 @@ function renderProfileHtml(input) {
     input.jsonLd ? renderJsonLdScript(d) : "",
     input.contact ? '<link rel="stylesheet" href="/contact-widget.css">' : "",
     `<style>${buildTokenCss(d.settings.appearance)}
-${CSS}</style>`
+${CSS}</style>`,
+    // First-party <head> slot (raw, unescaped): OG image tags, manifest link, etc.
+    input.slots?.head ?? ""
   ].filter(Boolean).join("\n  ");
-  const body = [
-    input.localeNav.length > 1 ? renderLocaleNav(input.localeNav) : "",
-    renderHeader(p),
-    renderLinks(d.links),
-    entryList(
-      "Experience",
+  const sections = {
+    about: renderBio(p.bio, L.about),
+    careers: entryList(
+      L.careers,
       d.careers.map((c) => ({
         heading: c.role,
         sub: c.organization,
-        dates: dateRange(c.startDate, {
-          end: c.endDate,
-          isCurrent: c.isCurrent,
-          locale: d.resolvedLocale
-        }),
+        subUrl: c.url,
+        dates: dates(c.startDate, { end: c.endDate, isCurrent: c.isCurrent }),
         body: c.description,
-        url: c.url,
         current: c.isCurrent
       })),
       "timeline"
     ),
-    entryList(
-      "Projects",
+    projects: entryList(
+      L.projects,
       d.projects.map((x) => ({
         heading: x.title,
-        dates: dateRange(x.startDate, { end: x.endDate, locale: d.resolvedLocale }),
-        body: x.description,
         url: x.url,
+        role: x.role,
+        dates: dates(x.startDate, { end: x.endDate }),
+        body: x.description,
         tags: x.tags,
         highlighted: x.highlighted
       })),
       "cards"
     ),
-    renderSkills(d.skills, d.settings.skillCategories),
-    renderActivity(input.activitySnapshot),
-    entryList(
-      "Education",
+    volunteering: renderVolunteering(d.volunteering, L.volunteering),
+    skills: renderSkills(d.skills, d.settings.skillCategories, L.skills),
+    activity: renderActivity(input.activitySnapshot, L.activity),
+    education: entryList(
+      L.education,
       d.education.map((e) => {
         const degree = nonEmpty([e.degree, e.fieldOfStudy], ", ");
         return {
           heading: degree ?? e.institution,
           sub: degree ? e.institution : void 0,
-          dates: dateRange(e.startDate, {
-            end: e.endDate,
-            isCurrent: e.isCurrent,
-            locale: d.resolvedLocale
-          }),
+          dates: dates(e.startDate, { end: e.endDate, isCurrent: e.isCurrent }),
           body: e.description,
           url: e.url
         };
       })
     ),
-    entryList(
-      "Certifications",
+    certifications: entryList(
+      L.certifications,
       d.certifications.map((c) => ({
         heading: c.title,
         sub: c.issuingOrganization,
-        dates: dateRange(c.issueDate, { end: c.expirationDate, locale: d.resolvedLocale }),
+        dates: dates(c.issueDate, { end: c.expirationDate }),
         url: c.url
       }))
     ),
-    entryList(
-      "Publications",
+    publications: entryList(
+      L.publications,
       d.publications.map((x) => ({
         heading: x.title,
         sub: nonEmpty([x.publisher, x.coAuthors?.join(", ")], " \xB7 "),
-        dates: dateRange(x.date, { locale: d.resolvedLocale }),
+        dates: dates(x.date, {}),
         body: x.description,
         url: x.url ?? (x.doi ? `https://doi.org/${x.doi}` : void 0)
       }))
     ),
-    entryList(
-      "Honors & awards",
+    honors: entryList(
+      L.honors,
       d.honors.map((x) => ({
         heading: x.title,
         sub: x.issuer,
-        dates: dateRange(x.date, { locale: d.resolvedLocale }),
+        dates: dates(x.date, {}),
         body: x.description,
         url: x.url
       }))
     ),
-    entryList(
-      "Memberships",
+    memberships: entryList(
+      L.memberships,
       d.memberships.map((x) => ({
         heading: x.role ?? x.organization,
         sub: x.role ? x.organization : void 0,
-        dates: dateRange(x.startDate, {
-          end: x.endDate,
-          isCurrent: x.isCurrent,
-          locale: d.resolvedLocale
-        }),
-        body: x.description,
-        url: x.url
-      }))
-    ),
-    entryList(
-      "Volunteering",
-      d.volunteering.map((x) => ({
-        heading: x.role,
-        sub: nonEmpty([x.organization, x.cause], " \xB7 "),
-        dates: dateRange(x.startDate, {
-          end: x.endDate,
-          isCurrent: x.isCurrent,
-          locale: d.resolvedLocale
-        }),
+        dates: dates(x.startDate, { end: x.endDate, isCurrent: x.isCurrent }),
         body: x.description,
         url: x.url
       }))
     ),
-    entryList(
-      "Courses",
+    courses: entryList(
+      L.courses,
       d.courses.map((x) => ({
         heading: x.title,
         sub: x.provider,
-        dates: dateRange(x.completionDate, { locale: d.resolvedLocale }),
+        dates: dates(x.completionDate, {}),
         body: x.description,
         url: x.certificateUrl
       }))
     ),
-    entryList(
-      "Patents",
+    patents: entryList(
+      L.patents,
       d.patents.map((x) => ({
         heading: x.title,
         sub: nonEmpty([x.patentNumber, x.office, x.status, x.coInventors?.join(", ")], " \xB7 "),
-        dates: dateRange(x.filingDate ?? x.grantDate, { locale: d.resolvedLocale }),
+        dates: dates(x.filingDate ?? x.grantDate, {}),
         body: x.description,
         url: x.url
       }))
     ),
-    entryList(
-      "Test scores",
+    testScores: entryList(
+      L.testScores,
       d.testScores.map((x) => ({
         heading: `${x.title}: ${x.score}`,
-        dates: dateRange(x.date, { locale: d.resolvedLocale }),
+        dates: dates(x.date, {}),
         body: x.description,
         url: x.url
       }))
     ),
-    renderLanguages(d.languages),
-    renderRecommendations(d.recommendations),
-    renderContact(d.contact)
+    languages: renderLanguages(d.languages, L.languages),
+    recommendations: renderRecommendations(d.recommendations, L.recommendations),
+    highlights: renderHighlights(d.highlights, L.highlights, d.settings.highlightsIntro, locale),
+    contact: renderContact(d.contact, L.contact)
+  };
+  const localeNavHtml = input.localeNav.length > 1 ? renderLocaleNav(input.localeNav, L.localeNav) : "";
+  const seenKeys = /* @__PURE__ */ new Set();
+  const orderedKeys = [];
+  for (const key of d.settings.sectionOrder ?? []) {
+    if (SECTION_KEYS.includes(key) && !seenKeys.has(key)) {
+      seenKeys.add(key);
+      orderedKeys.push(key);
+    }
+  }
+  for (const key of SECTION_KEYS) {
+    if (!seenKeys.has(key)) orderedKeys.push(key);
+  }
+  const body = [
+    renderHeader(p, localeNavHtml),
+    // Featured links at the top; the remaining links are a fixed bottom section.
+    renderFeaturedLinks(d.links, L.featuredLinks),
+    ...orderedKeys.map((key) => keep(key, sections[key])),
+    renderOtherLinks(d.links, L.otherLinks),
+    input.slots?.mainEnd ?? ""
   ].filter(Boolean).join("\n");
-  const footer = d.settings.showPoweredBy === true ? '<footer class="powered">Powered by takuhon</footer>' : "";
+  const spdx = d.meta?.contentLicense?.spdxId;
+  const year = typeof input.year === "number" && Number.isFinite(input.year) ? input.year : void 0;
+  const licenseText = year !== void 0 ? `\xA9 ${year} ${escapeHtml(p.displayName)} \u2014 ${escapeHtml(spdx ?? "")}` : `\xA9 ${escapeHtml(p.displayName)} \u2014 ${escapeHtml(spdx ?? "")}`;
+  const licenseLine = spdx ? `<p class="license">${licenseText}</p>` : "";
+  const poweredByLine = d.settings.showPoweredBy !== false ? `<p class="powered-by">${escapeHtml(L.poweredBy)} <a href="https://takuhon.org/" rel="noopener">Takuhon</a></p>` : "";
+  const footerInner = `${licenseLine}${poweredByLine}`;
+  const footer = footerInner ? `<footer class="powered">${footerInner}</footer>` : "";
   const contactScript = input.contact ? `<script src="/contact-widget.js" data-site-key="${escapeHtml(input.contact.siteKey)}"` + (input.contact.endpoint ? ` data-endpoint="${escapeHtml(input.contact.endpoint)}"` : "") + " defer></script>\n" : "";
+  const skipLink = `<a class="skip-link" href="#main">${escapeHtml(L.skipLink)}</a>
+`;
+  const bodyEnd = input.slots?.bodyEnd ?? "";
   return `<!DOCTYPE html>
 <html lang="${escapeHtml(d.resolvedLocale)}">
 <head>
   ${head}
 </head>
 <body>
-<main>
+${skipLink}<main id="main">
 ${body}
 </main>
 ${footer ? `${footer}
-` : ""}${contactScript}</body>
+` : ""}${contactScript}${bodyEnd}</body>
 </html>
 `;
 }
@@ -706,7 +1079,33 @@ function pathLocaleFromUrl(url) {
 // src/public-app.ts
 var FALLBACK_VERSION = "bundled-fixture";
 var TURNSTILE_ORIGIN = "https://challenges.cloudflare.com";
-function buildPublicCsp(contact) {
+var CSP_SOURCE = /^[!-~]+$/;
+var CSP_HASH = /^'sha(256|384|512)-[A-Za-z0-9+/]+={0,2}'$/;
+var CSP_BLANKET = /* @__PURE__ */ new Set(["'unsafe-inline'", "'unsafe-eval'"]);
+function sanitizeCsp(ext) {
+  const dropped = [];
+  const keep = (tokens, ok) => (tokens ?? []).filter((t) => {
+    if (ok(t)) return true;
+    dropped.push(t);
+    return false;
+  });
+  const source = (t) => CSP_SOURCE.test(t) && !t.includes(";") && !t.includes(",") && !CSP_BLANKET.has(t.toLowerCase());
+  return {
+    clean: {
+      scriptSrc: keep(ext.scriptSrc, source),
+      connectSrc: keep(ext.connectSrc, source),
+      workerSrc: keep(ext.workerSrc, source),
+      scriptHashes: keep(ext.scriptHashes, (t) => CSP_HASH.test(t))
+    },
+    dropped
+  };
+}
+function buildPublicCsp(contact, ext) {
+  const turnstile = contact ? [TURNSTILE_ORIGIN] : [];
+  const scriptSrc = ["'self'", ...turnstile, ...ext?.scriptSrc ?? [], ...ext?.scriptHashes ?? []];
+  const connectSrc = ["'self'", ...turnstile, ...ext?.connectSrc ?? []];
+  const frameSrc = [...turnstile];
+  const workerSrc = ext?.workerSrc ?? [];
   return [
     "default-src 'self'",
     // `https:` lets the server-rendered profile page load remote avatar images
@@ -714,10 +1113,11 @@ function buildPublicCsp(contact) {
     // already blocks non-http(s) schemes); `data:` covers inline placeholders.
     "img-src 'self' https: data:",
     "style-src 'self' 'unsafe-inline'",
-    contact ? `script-src 'self' ${TURNSTILE_ORIGIN}` : "script-src 'self'",
+    `script-src ${scriptSrc.join(" ")}`,
     "font-src 'self'",
-    contact ? `connect-src 'self' ${TURNSTILE_ORIGIN}` : "connect-src 'self'",
-    ...contact ? [`frame-src ${TURNSTILE_ORIGIN}`] : [],
+    `connect-src ${connectSrc.join(" ")}`,
+    ...frameSrc.length > 0 ? [`frame-src ${frameSrc.join(" ")}`] : [],
+    ...workerSrc.length > 0 ? [`worker-src ${workerSrc.join(" ")}`] : [],
     "frame-ancestors 'none'",
     "base-uri 'self'",
     "form-action 'self'",
@@ -738,6 +1138,19 @@ async function loadProfile(deps) {
 }
 function createPublicApp(deps) {
   const app = new Hono({ getPath: localePrefixGetPath });
+  const cspExt = deps.render?.csp;
+  let pageCsp = PUBLIC_CSP;
+  let pageCspWithContact = PUBLIC_CSP_WITH_CONTACT;
+  if (cspExt) {
+    const { clean, dropped } = sanitizeCsp(cspExt);
+    if (dropped.length > 0) {
+      console.warn(
+        `[takuhon] Ignored ${dropped.length} invalid render.csp token(s): ${dropped.join(", ")}`
+      );
+    }
+    pageCsp = buildPublicCsp(false, clean);
+    pageCspWithContact = buildPublicCsp(true, clean);
+  }
   app.use("*", async (c, next) => {
     await next();
     const h = c.res.headers;
@@ -746,9 +1159,11 @@ function createPublicApp(deps) {
     h.set("x-frame-options", "DENY");
     h.set("referrer-policy", "strict-origin-when-cross-origin");
     h.set("permissions-policy", "camera=(), microphone=(), geolocation=(), interest-cohort=()");
+    const contact = c.get("contactEnabled") === true;
+    const page = c.get("profilePage") === true;
     h.set(
       "content-security-policy",
-      c.get("contactEnabled") ? PUBLIC_CSP_WITH_CONTACT : PUBLIC_CSP
+      page ? contact ? pageCspWithContact : pageCsp : contact ? PUBLIC_CSP_WITH_CONTACT : PUBLIC_CSP
     );
     h.set("access-control-allow-origin", "*");
     h.set("access-control-expose-headers", "ETag");
@@ -793,6 +1208,14 @@ function createPublicApp(deps) {
     } : void 0;
     if (contact) c.set("contactEnabled", true);
     const html = renderProfileHtml({
+      // Host composition seams (slots / labels / omitSections). `csp` is a
+      // response-header concern handled above, not a renderer input, so it is
+      // intentionally excluded here.
+      ...deps.render ? {
+        slots: deps.render.slots,
+        labels: deps.render.labels,
+        omitSections: deps.render.omitSections
+      } : {},
       localized,
       canonicalUrl: `${origin}${localePath(current)}`,
       alternates: [
@@ -802,11 +1225,13 @@ function createPublicApp(deps) {
       localeNav: locales.map((l) => ({ locale: l, href: localePath(l), current: l === current })),
       jsonLd: profile.settings.enableJsonLd !== false,
       activitySnapshot: snapshot ?? void 0,
-      contact
+      contact,
+      year: (/* @__PURE__ */ new Date()).getFullYear()
     });
     c.header("etag", `"${version}"`);
     c.header("cache-control", "public, max-age=300");
     c.header("vary", "Accept-Language, Cookie");
+    c.set("profilePage", true);
     return c.html(html);
   });
   app.get("/health", (c) => {
@@ -1761,7 +2186,8 @@ function generateSite(profile, options = {}) {
       alternates,
       localeNav,
       jsonLd,
-      activitySnapshot
+      activitySnapshot,
+      year: (/* @__PURE__ */ new Date()).getFullYear()
     });
     pages.push({
       route: isDefault ? "/" : `/${locale}/`,