@sonordev/site-kit 5.3.2 → 5.4.0

package/dist/{chunk-67CHHDBL.mjs → chunk-LIYSLNEK.mjs}

@@ -1,4 +1,5 @@
 import { widgetStyle, widgetTitleStyle } from './chunk-YFX3Q56O.mjs';
+import { createBlogRoutes, resolveBlogArtwork, blogCategorySlug, blogArtworkImageStyle } from './chunk-4B4S56WJ.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { marked } from 'marked';
 import React from 'react';
@@ -287,7 +288,8 @@ var clusterNavCss = `
 `;
 function ClusterNavigation({
   navigation,
-  basePath = "/blog",
+  basePath,
+  routing,
   category,
   trailingSlash = false,
   unstyled = false,
@@ -301,9 +303,8 @@ function ClusterNavigation({
   const hasSiblings = siblings.length > 0;
   if (!hasPillarLink && !hasSiblings) return null;
   const articleUrl = (article) => {
-    const cat = article.category || category;
-    const path = cat ? `${basePath}/${cat}/${article.slug}` : `${basePath}/${article.slug}`;
-    return trailingSlash ? `${path}/` : path;
+    const path = createBlogRoutes({ basePath, category, includeCategoryInPath: !routing, ...routing }).post(article);
+    return trailingSlash ? path.replace(/\/?([?#]|$)/, "/$1") : path;
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !unstyled && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: clusterNavCss } }),
@@ -386,590 +387,6 @@ function getAuthorSocialLinks(author) {
   if (github) links.push({ label: "GitHub", href: withPrefix(github, "https://github.com/") });
   return links;
 }
-
-// src/blog/blog-styles.ts
-var blogPostCss = (
-  /* css */
-  `
-/* ===== Layout ===== */
-.sk-blog-article {
-  --_sk-primary: var(--sk-primary, #2563eb);
-  --_sk-bg: var(--sk-bg, #ffffff);
-  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);
-  --_sk-text: var(--sk-text-primary, inherit);
-  --_sk-text2: var(--sk-text-secondary, #475569);
-  --_sk-text3: var(--sk-text-tertiary, #94a3b8);
-  --_sk-border: var(--sk-surface-border, #e2e8f0);
-  max-width: 1080px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  color: var(--_sk-text);
-}
-
-/* ===== Header ===== */
-.sk-blog-header { margin-bottom: 2.5rem; }
-
-.sk-blog-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 1.25rem;
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-.sk-blog-breadcrumb a {
-  color: var(--_sk-primary);
-  text-decoration: none;
-  font-weight: 500;
-}
-.sk-blog-breadcrumb a:hover { text-decoration: underline; }
-.sk-blog-breadcrumb-sep { color: var(--_sk-text3); }
-
-.sk-blog-title {
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-  text-wrap: balance;
-  margin: 0 0 0.75rem;
-  color: var(--_sk-text);
-}
-.sk-blog-subtitle {
-  font-size: 1.25rem;
-  line-height: 1.5;
-  color: var(--_sk-text2);
-  margin: 0 0 1rem;
-}
-.sk-blog-meta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-.sk-blog-meta-item { white-space: nowrap; }
-.sk-blog-meta-dot {
-  width: 3px; height: 3px;
-  border-radius: 50%;
-  background: var(--_sk-text3);
-  flex-shrink: 0;
-}
-
-/* ===== Featured image ===== */
-.sk-blog-featured-wrap {
-  margin: 0 0 2.5rem;
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-.sk-blog-featured-img {
-  display: block;
-  width: 100%;
-  max-height: 500px;
-  object-fit: cover;
-}
-
-/* ===== Content + TOC grid ===== */
-.sk-blog-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 3rem;
-}
-@media (min-width: 1024px) {
-  .sk-blog-layout--has-toc {
-    grid-template-columns: 1fr 320px;
-  }
-}
-
-/* ===== Article body typography ===== */
-.sk-blog-content {
-  font-size: 1.125rem;
-  line-height: 1.8;
-  color: var(--_sk-text);
-  overflow-wrap: break-word;
-}
-.sk-blog-content > * + * { margin-top: 1.5em; }
-.sk-blog-content h2,
-.sk-blog-content h3,
-.sk-blog-content h4 {
-  scroll-margin-top: 5rem;
-  line-height: 1.3;
-  font-weight: 700;
-  color: var(--_sk-text);
-}
-.sk-blog-content h2 { font-size: 1.5rem; margin-top: 2.5em; margin-bottom: 0.75em; }
-.sk-blog-content h3 { font-size: 1.25rem; margin-top: 2em; margin-bottom: 0.5em; }
-.sk-blog-content h4 { font-size: 1.1rem; margin-top: 1.5em; margin-bottom: 0.5em; }
-.sk-blog-content p { margin: 0 0 1.5em; }
-.sk-blog-content a {
-  color: var(--_sk-primary);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
-  text-underline-offset: 2px;
-  transition: text-decoration-color 0.15s;
-}
-.sk-blog-content a:hover {
-  text-decoration-color: var(--_sk-primary);
-}
-.sk-blog-content strong { font-weight: 700; color: var(--_sk-text); }
-.sk-blog-content em { font-style: italic; }
-.sk-blog-content blockquote {
-  border-left: 3px solid var(--_sk-primary);
-  padding: 0.75em 1.25em;
-  margin: 1.5em 0;
-  color: var(--_sk-text2);
-  font-style: italic;
-  background: color-mix(in srgb, var(--_sk-primary) 5%, var(--_sk-bg));
-  border-radius: 0 0.5rem 0.5rem 0;
-}
-.sk-blog-content blockquote p:last-child { margin-bottom: 0; }
-.sk-blog-content ul,
-.sk-blog-content ol {
-  padding-left: 1.5em;
-  margin: 1.25em 0;
-}
-.sk-blog-content li { margin-bottom: 0.5em; }
-.sk-blog-content li::marker { color: var(--_sk-primary); }
-.sk-blog-content code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.875em;
-  padding: 0.15em 0.4em;
-  border-radius: 0.25rem;
-  background: color-mix(in srgb, var(--_sk-text) 8%, var(--_sk-bg));
-}
-.sk-blog-content pre {
-  margin: 1.5em 0;
-  padding: 1.25em 1.5em;
-  border-radius: 0.75rem;
-  background: color-mix(in srgb, var(--_sk-text) 6%, var(--_sk-bg));
-  overflow-x: auto;
-  font-size: 0.875rem;
-  line-height: 1.7;
-}
-.sk-blog-content pre code {
-  background: none;
-  padding: 0;
-  font-size: inherit;
-}
-.sk-blog-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-  margin: 1.5em auto;
-  display: block;
-}
-.sk-blog-content hr {
-  border: none;
-  height: 1px;
-  background: var(--_sk-border);
-  margin: 2.5em 0;
-}
-.sk-blog-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.5em 0;
-  font-size: 0.95rem;
-}
-.sk-blog-content th,
-.sk-blog-content td {
-  text-align: left;
-  padding: 0.625rem 0.875rem;
-  border-bottom: 1px solid var(--_sk-border);
-}
-.sk-blog-content th {
-  font-weight: 600;
-  color: var(--_sk-text);
-}
-.sk-blog-content td { color: var(--_sk-text2); }
-
-/* ===== Table of contents ===== */
-.sk-blog-toc {
-  position: sticky;
-  top: 6rem;
-  align-self: start;
-  padding: 1.25rem;
-  border-radius: 0.75rem;
-  background: var(--_sk-bg-el);
-  border: 1px solid var(--_sk-border);
-  max-height: calc(100vh - 8rem);
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--_sk-border) transparent;
-}
-.sk-blog-toc::-webkit-scrollbar { width: 5px; }
-.sk-blog-toc::-webkit-scrollbar-track { background: transparent; }
-.sk-blog-toc::-webkit-scrollbar-thumb { background: var(--_sk-border); border-radius: 3px; }
-.sk-blog-toc::-webkit-scrollbar-thumb:hover { background: var(--_sk-text3); }
-.sk-blog-toc-title {
-  margin: 0 0 0.75rem;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--_sk-text3);
-}
-.sk-blog-toc-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.sk-blog-toc-list li { margin-bottom: 0.4rem; }
-.sk-blog-toc-list a {
-  display: block;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: var(--_sk-text2);
-  text-decoration: none;
-  padding: 0.15rem 0;
-  transition: color 0.15s;
-}
-.sk-blog-toc-list a:hover { color: var(--_sk-primary); }
-.sk-blog-toc-indent-3 { padding-left: 0.75rem; }
-.sk-blog-toc-indent-4 { padding-left: 1.5rem; }
-
-@media (max-width: 1023px) {
-  .sk-blog-toc { display: none; }
-}
-
-/* ===== Tags ===== */
-.sk-blog-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 2.5rem;
-}
-.sk-blog-tag {
-  display: inline-block;
-  padding: 0.25rem 0.875rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  background: var(--_sk-bg-el);
-  border: 1px solid var(--_sk-border);
-  color: var(--_sk-text2);
-  text-decoration: none;
-  transition: color 0.15s, border-color 0.15s;
-}
-.sk-blog-tag:hover {
-  color: var(--_sk-primary);
-  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
-}
-
-/* ===== Author card ===== */
-.sk-blog-author {
-  margin-top: 3rem;
-  padding: 1.5rem;
-  border-radius: 0.75rem;
-  background: var(--_sk-bg-el);
-  border: 1px solid var(--_sk-border);
-  display: flex;
-  gap: 1.25rem;
-  align-items: flex-start;
-}
-.sk-blog-author-avatar {
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-.sk-blog-author-name {
-  margin: 0 0 0.125rem;
-  font-size: 1.0625rem;
-  font-weight: 700;
-  color: var(--_sk-text);
-}
-.sk-blog-author-title {
-  margin: 0 0 0.25rem;
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-.sk-blog-author-bio {
-  margin: 0.5rem 0 0;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--_sk-text2);
-}
-.sk-blog-author-links {
-  display: flex;
-  gap: 1rem;
-  margin-top: 0.625rem;
-}
-.sk-blog-author-links a {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--_sk-primary);
-  text-decoration: none;
-}
-.sk-blog-author-links a:hover { text-decoration: underline; }
-
-@media (max-width: 640px) {
-  .sk-blog-author { flex-direction: column; align-items: center; text-align: center; }
-  .sk-blog-author-links { justify-content: center; }
-}
-
-/* ===== Related posts ===== */
-.sk-blog-related { margin-top: 3.5rem; }
-.sk-blog-related-title {
-  font-size: 1.375rem;
-  font-weight: 700;
-  margin: 0 0 1.5rem;
-  color: var(--_sk-text);
-}
-.sk-blog-related-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 1.25rem;
-}
-.sk-blog-related-card {
-  border-radius: 0.75rem;
-  overflow: hidden;
-  background: var(--_sk-bg-el);
-  border: 1px solid var(--_sk-border);
-  text-decoration: none;
-  color: inherit;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-.sk-blog-related-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
-}
-.sk-blog-related-card img {
-  width: 100%;
-  height: 160px;
-  object-fit: cover;
-}
-.sk-blog-related-card-body { padding: 1rem 1.125rem; }
-.sk-blog-related-card h3 {
-  font-size: 0.9375rem;
-  font-weight: 650;
-  line-height: 1.4;
-  margin: 0 0 0.375rem;
-  color: var(--_sk-text);
-}
-.sk-blog-related-card p {
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: var(--_sk-text2);
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* ===== Not found ===== */
-.sk-blog-not-found {
-  text-align: center;
-  padding: 5rem 1rem;
-}
-.sk-blog-not-found h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin: 0 0 0.75rem;
-  color: var(--_sk-text);
-}
-.sk-blog-not-found p {
-  color: var(--_sk-text2);
-  margin: 0 0 1.5rem;
-}
-.sk-blog-not-found a {
-  display: inline-block;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  background: var(--_sk-primary);
-  color: #fff;
-  font-weight: 600;
-  font-size: 0.875rem;
-  text-decoration: none;
-  transition: opacity 0.15s;
-}
-.sk-blog-not-found a:hover { opacity: 0.9; }
-
-/* ===== Responsive ===== */
-@media (max-width: 768px) {
-  .sk-blog-title { font-size: 1.75rem; }
-  .sk-blog-subtitle { font-size: 1.0625rem; }
-  .sk-blog-content { font-size: 1rem; }
-  .sk-blog-related-grid { grid-template-columns: 1fr; }
-}
-`.trim()
-);
-var blogListCss = (
-  /* css */
-  `
-/* ===== BlogList layout ===== */
-.sk-bloglist {
-  --_sk-primary: var(--sk-primary, #2563eb);
-  --_sk-bg: var(--sk-bg, #ffffff);
-  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);
-  --_sk-text: var(--sk-text-primary, inherit);
-  --_sk-text2: var(--sk-text-secondary, #475569);
-  --_sk-text3: var(--sk-text-tertiary, #94a3b8);
-  --_sk-border: var(--sk-surface-border, #e2e8f0);
-}
-
-/* ===== Category filter ===== */
-.sk-bloglist-cats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 2rem;
-}
-.sk-bloglist-cat {
-  display: inline-block;
-  padding: 0.375rem 1rem;
-  border-radius: 9999px;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-  border: 1px solid var(--_sk-border);
-  background: var(--_sk-bg-el);
-  color: var(--_sk-text2);
-}
-.sk-bloglist-cat:hover {
-  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
-  color: var(--_sk-primary);
-}
-.sk-bloglist-cat--active {
-  background: var(--_sk-primary);
-  color: #fff;
-  border-color: var(--_sk-primary);
-}
-.sk-bloglist-cat--active:hover { color: #fff; opacity: 0.9; }
-
-/* ===== Card grid ===== */
-.sk-bloglist-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-/* ===== Post card ===== */
-.sk-bloglist-card {
-  border-radius: 0.75rem;
-  overflow: hidden;
-  background: var(--_sk-bg-el);
-  border: 1px solid var(--_sk-border);
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-}
-.sk-bloglist-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
-  border-color: color-mix(in srgb, var(--_sk-primary) 30%, var(--_sk-border));
-}
-.sk-bloglist-card-img-link { display: block; overflow: hidden; }
-.sk-bloglist-card-img {
-  display: block;
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  transition: transform 0.4s;
-}
-.sk-bloglist-card:hover .sk-bloglist-card-img { transform: scale(1.03); }
-.sk-bloglist-card-body {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.sk-bloglist-card-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  margin-bottom: 0.625rem;
-}
-.sk-bloglist-card-category {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  background: color-mix(in srgb, var(--_sk-primary) 12%, transparent);
-  color: var(--_sk-primary);
-}
-.sk-bloglist-card-date {
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-.sk-bloglist-card-title {
-  font-size: 1.0625rem;
-  font-weight: 700;
-  line-height: 1.4;
-  margin: 0 0 0.5rem;
-}
-.sk-bloglist-card-title a {
-  color: var(--_sk-text);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-.sk-bloglist-card:hover .sk-bloglist-card-title a { color: var(--_sk-primary); }
-.sk-bloglist-card-excerpt {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--_sk-text2);
-  margin: 0 0 1rem;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  flex: 1;
-}
-.sk-bloglist-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--_sk-border);
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-
-/* ===== Pagination ===== */
-.sk-bloglist-pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 3rem;
-}
-.sk-bloglist-page-link {
-  display: inline-block;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.5rem;
-  background: var(--_sk-primary);
-  color: #fff;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: opacity 0.15s;
-}
-.sk-bloglist-page-link:hover { opacity: 0.9; }
-.sk-bloglist-page-info {
-  font-size: 0.8125rem;
-  color: var(--_sk-text3);
-}
-
-/* ===== Empty state ===== */
-.sk-bloglist-empty {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--_sk-text2);
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 640px) {
-  .sk-bloglist-grid { grid-template-columns: 1fr; }
-}
-`.trim()
-);
 function getClusterNav(post) {
   if (!post.cluster_id && !post.cluster_slug) return null;
   const isPillar = post.article_type === "pillar";
@@ -1072,32 +489,39 @@ async function BlogPost({
   showRelated = true,
   relatedCount = 3,
   showAuthor = true,
-  basePath = "/blog",
+  basePath,
+  routing,
   className,
   styles = {},
   unstyled = false,
   siteUrl,
   children
 }) {
+  const routes = createBlogRoutes({ basePath, ...routing });
   if (!apiKey) {
     console.warn("[Blog] No API key configured");
     return null;
   }
-  const post = await fetchBlogPost(apiUrl, apiKey, slug);
+  const [post, { blogPostCss }, { wrapBlogTables }] = await Promise.all([
+    fetchBlogPost(apiUrl, apiKey, slug),
+    unstyled ? Promise.resolve({ blogPostCss: "" }) : import('./blog-styles-7AKRUMV7.mjs'),
+    import('./blog-tables-QGIHOESZ.mjs')
+  ]);
   if (!post) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       !unstyled && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: blogPostCss } }),
       /* @__PURE__ */ jsxs("div", { className: cls(unstyled, styles, "notFound", "sk-blog-not-found", className), children: [
         /* @__PURE__ */ jsx("h1", { children: "Post Not Found" }),
         /* @__PURE__ */ jsx("p", { children: "The blog post you\u2019re looking for doesn\u2019t exist or has been removed." }),
-        /* @__PURE__ */ jsx("a", { href: basePath, children: "\u2190 Back to Blog" })
+        /* @__PURE__ */ jsx("a", { href: routes.index, children: "\u2190 Back to Blog" })
       ] })
     ] });
   }
   const rawContent = post.content_html || post.content || "";
   const content = ensureHtml(rawContent);
   const siteUrlResolved = resolveBlogSiteUrl(siteUrl);
-  const contentWithExternalTargets = addExternalLinkTargets(content, siteUrlResolved);
+  const contentWithExternalTargets = wrapBlogTables(addExternalLinkTargets(content, siteUrlResolved));
+  const artwork = resolveBlogArtwork(post, "article");
   const tableOfContents = showToc ? generateTableOfContents(content) : [];
   const relatedPosts = showRelated ? await fetchRelatedPosts(apiUrl, apiKey, post.id, relatedCount) : [];
   const faqRaw = post.faq_items ?? post.faqItems;
@@ -1105,7 +529,7 @@ async function BlogPost({
     ...item,
     answer: addExternalLinkTargets(item.answer || "", siteUrlResolved)
   })) ?? faqRaw;
-  const { BlogViewTracker } = await import('./BlogViewTracker-KFUDRDQK.mjs');
+  const { BlogViewTracker } = await import('./BlogViewTracker-R4YQ76WP.mjs');
   if (children) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(BlogViewTracker, { slug: post.slug }),
@@ -1121,13 +545,13 @@ async function BlogPost({
     /* @__PURE__ */ jsxs("article", { className: cls(unstyled, styles, "article", "sk-blog-article", className), children: [
       /* @__PURE__ */ jsxs("header", { className: cls(unstyled, styles, "header", "sk-blog-header"), children: [
         /* @__PURE__ */ jsxs("nav", { className: cls(unstyled, styles, "breadcrumb", "sk-blog-breadcrumb"), children: [
-          /* @__PURE__ */ jsx("a", { href: basePath, className: styles.breadcrumbLink || void 0, children: "Blog" }),
+          /* @__PURE__ */ jsx("a", { href: routes.index, className: styles.breadcrumbLink || void 0, children: "Blog" }),
           post.category && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "sk-blog-breadcrumb-sep", children: "/" }),
             /* @__PURE__ */ jsx(
               "a",
               {
-                href: `${basePath}?category=${post.category}`,
+                href: routing?.categoryPath ? routes.category(blogCategorySlug(post.category)) : `${routes.index}?category=${encodeURIComponent(blogCategorySlug(post.category))}`,
                 className: styles.breadcrumbLink || void 0,
                 children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
               }
@@ -1150,11 +574,13 @@ async function BlogPost({
           ] })
         ] })
       ] }),
-      post.featured_image && /* @__PURE__ */ jsx("figure", { className: cls(unstyled, styles, "featuredImageWrapper", "sk-blog-featured-wrap"), children: /* @__PURE__ */ jsx(
+      artwork.src && /* @__PURE__ */ jsx("figure", { className: cls(unstyled, styles, "featuredImageWrapper", "sk-blog-featured-wrap"), children: /* @__PURE__ */ jsx(
         "img",
         {
-          src: post.featured_image,
-          alt: post.featured_image_alt || post.title,
+          src: artwork.src,
+          alt: artwork.alt,
+          "data-sk-composed-card": artwork.composed || void 0,
+          style: blogArtworkImageStyle(artwork),
           className: cls(unstyled, styles, "featuredImage", "sk-blog-featured-img")
         }
       ) }),
@@ -1180,7 +606,7 @@ async function BlogPost({
       ] }),
       post.tags && post.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: cls(unstyled, styles, "tags", "sk-blog-tags"), children: post.tags.map((tag, index) => {
         const tagName = typeof tag === "string" ? tag : tag?.name || "";
-        return /* @__PURE__ */ jsxs("a", { href: `${basePath}?tag=${encodeURIComponent(tagName)}`, className: cls(unstyled, styles, "tag", "sk-blog-tag"), children: [
+        return /* @__PURE__ */ jsxs("a", { href: `${routes.index}?tag=${encodeURIComponent(tagName)}`, className: cls(unstyled, styles, "tag", "sk-blog-tag"), children: [
           "#",
           tagName
         ] }, `${tagName}-${index}`);
@@ -1215,22 +641,26 @@ async function BlogPost({
           {
             navigation: clusterNav,
             basePath,
+            routing,
             unstyled
           }
         );
       })(),
       showRelated && relatedPosts.length > 0 && /* @__PURE__ */ jsxs("section", { className: cls(unstyled, styles, "relatedSection", "sk-blog-related"), children: [
         /* @__PURE__ */ jsx("h2", { className: cls(unstyled, styles, "relatedTitle", "sk-blog-related-title"), children: "Related Posts" }),
-        /* @__PURE__ */ jsx("div", { className: cls(unstyled, styles, "relatedGrid", "sk-blog-related-grid"), children: relatedPosts.map((rp) => /* @__PURE__ */ jsxs("a", { href: `${basePath}/${rp.slug}`, className: cls(unstyled, styles, "relatedCard", "sk-blog-related-card"), children: [
-          rp.featured_image && /* @__PURE__ */ jsx("img", { src: rp.featured_image, alt: rp.title }),
-          /* @__PURE__ */ jsxs("div", { className: "sk-blog-related-card-body", children: [
-            /* @__PURE__ */ jsx("h3", { children: rp.title }),
-            rp.excerpt && /* @__PURE__ */ jsxs("p", { children: [
-              rp.excerpt.slice(0, 120),
-              "..."
+        /* @__PURE__ */ jsx("div", { className: cls(unstyled, styles, "relatedGrid", "sk-blog-related-grid"), children: relatedPosts.map((rp) => {
+          const relatedArtwork = resolveBlogArtwork(rp);
+          return /* @__PURE__ */ jsxs("a", { href: routes.post(rp), className: cls(unstyled, styles, "relatedCard", "sk-blog-related-card"), children: [
+            relatedArtwork.src && /* @__PURE__ */ jsx("img", { src: relatedArtwork.src, alt: relatedArtwork.alt, "data-sk-composed-card": relatedArtwork.composed || void 0, style: blogArtworkImageStyle(relatedArtwork) }),
+            /* @__PURE__ */ jsxs("div", { className: "sk-blog-related-card-body", children: [
+              /* @__PURE__ */ jsx("h3", { children: rp.title }),
+              rp.excerpt && /* @__PURE__ */ jsxs("p", { children: [
+                rp.excerpt.slice(0, 120),
+                "..."
+              ] })
             ] })
-          ] })
-        ] }, rp.id)) })
+          ] }, rp.id);
+        }) })
       ] })
     ] })
   ] });
@@ -1370,19 +800,22 @@ async function BlogList({
   showCategoryFilter = false,
   showPagination = true,
   className,
-  basePath = "/blog",
+  basePath,
+  routing,
   styles = {},
   unstyled = false,
   renderPost,
   children
 }) {
+  const routes = createBlogRoutes({ basePath, ...routing });
   if (!apiKey) {
     console.warn("[Blog] No API key configured");
     return null;
   }
-  const [blogData, categories] = await Promise.all([
+  const [blogData, categories, { blogListCss }] = await Promise.all([
     fetchBlogList({ apiUrl, apiKey, category, tag, author, featured, search, cluster, page, perPage, orderBy, order }),
-    showCategoryFilter ? fetchCategories(apiUrl, apiKey) : Promise.resolve([])
+    showCategoryFilter ? fetchCategories(apiUrl, apiKey) : Promise.resolve([]),
+    unstyled || children ? Promise.resolve({ blogListCss: "" }) : import('./blog-styles-7AKRUMV7.mjs')
   ]);
   if (children) {
     return children({ posts: blogData.posts, pagination: blogData.pagination, categories });
@@ -1401,7 +834,7 @@ async function BlogList({
         /* @__PURE__ */ jsx(
           "a",
           {
-            href: basePath,
+            href: routes.index,
             className: cls2(unstyled, styles, "categoryLink", !category ? "sk-bloglist-cat sk-bloglist-cat--active" : "sk-bloglist-cat"),
             children: "All"
           }
@@ -1409,7 +842,7 @@ async function BlogList({
         categories.map((cat) => /* @__PURE__ */ jsxs(
           "a",
           {
-            href: `${basePath}?category=${cat.slug}`,
+            href: routing?.categoryPath ? routes.category(cat.slug) : `${routes.index}?category=${encodeURIComponent(cat.slug)}`,
             className: cls2(unstyled, styles, "categoryLink", category === cat.slug ? "sk-bloglist-cat sk-bloglist-cat--active" : "sk-bloglist-cat"),
             children: [
               cat.name,
@@ -1422,29 +855,32 @@ async function BlogList({
         ))
       ] }),
       /* @__PURE__ */ jsx("div", { className: cls2(unstyled, styles, "grid", "sk-bloglist-grid"), children: posts.map(
-        (post) => renderPost ? /* @__PURE__ */ jsx(React.Fragment, { children: renderPost(post) }, post.id) : /* @__PURE__ */ jsx(BlogPostCard, { post, basePath, styles, unstyled }, post.id)
+        (post) => renderPost ? /* @__PURE__ */ jsx(React.Fragment, { children: renderPost(post) }, post.id) : /* @__PURE__ */ jsx(BlogPostCard, { post, href: routes.post(post), styles, unstyled }, post.id)
       ) }),
       showPagination && pagination.totalPages > 1 && /* @__PURE__ */ jsxs("nav", { className: cls2(unstyled, styles, "pagination", "sk-bloglist-pagination"), children: [
-        pagination.hasPrev && /* @__PURE__ */ jsx("a", { href: buildPaginationUrl(basePath, page - 1, category), className: cls2(unstyled, styles, "paginationLink", "sk-bloglist-page-link"), children: "\u2190 Previous" }),
+        pagination.hasPrev && /* @__PURE__ */ jsx("a", { href: buildPaginationUrl(routes.index, page - 1, category), className: cls2(unstyled, styles, "paginationLink", "sk-bloglist-page-link"), children: "\u2190 Previous" }),
         /* @__PURE__ */ jsxs("span", { className: cls2(unstyled, styles, "paginationInfo", "sk-bloglist-page-info"), children: [
           "Page ",
           pagination.page,
           " of ",
           pagination.totalPages
         ] }),
-        pagination.hasNext && /* @__PURE__ */ jsx("a", { href: buildPaginationUrl(basePath, page + 1, category), className: cls2(unstyled, styles, "paginationLink", "sk-bloglist-page-link"), children: "Next \u2192" })
+        pagination.hasNext && /* @__PURE__ */ jsx("a", { href: buildPaginationUrl(routes.index, page + 1, category), className: cls2(unstyled, styles, "paginationLink", "sk-bloglist-page-link"), children: "Next \u2192" })
       ] })
     ] })
   ] });
 }
-function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
+function BlogPostCard({ post, href, styles = {}, unstyled = false }) {
+  const artwork = resolveBlogArtwork(post);
   const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : null;
   return /* @__PURE__ */ jsxs("article", { className: cls2(unstyled, styles, "card", "sk-bloglist-card"), children: [
-    post.featured_image && /* @__PURE__ */ jsx("a", { href: `${basePath}/${post.slug}`, className: cls2(unstyled, styles, "cardImageWrapper", "sk-bloglist-card-img-link"), children: /* @__PURE__ */ jsx(
+    artwork.src && /* @__PURE__ */ jsx("a", { href, className: cls2(unstyled, styles, "cardImageWrapper", "sk-bloglist-card-img-link"), children: /* @__PURE__ */ jsx(
       "img",
       {
-        src: post.featured_image,
-        alt: post.featured_image_alt || post.title,
+        src: artwork.src,
+        alt: artwork.alt,
+        "data-sk-composed-card": artwork.composed || void 0,
+        style: blogArtworkImageStyle(artwork),
         className: cls2(unstyled, styles, "cardImage", "sk-bloglist-card-img")
       }
     ) }),
@@ -1465,7 +901,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
         }, children: post.article_type }),
         date && /* @__PURE__ */ jsx("span", { className: cls2(unstyled, styles, "cardDate", "sk-bloglist-card-date"), children: date })
       ] }),
-      /* @__PURE__ */ jsx("h3", { className: cls2(unstyled, styles, "cardTitle", "sk-bloglist-card-title"), children: /* @__PURE__ */ jsx("a", { href: `${basePath}/${post.slug}`, className: styles.cardTitleLink || void 0, children: post.title }) }),
+      /* @__PURE__ */ jsx("h3", { className: cls2(unstyled, styles, "cardTitle", "sk-bloglist-card-title"), children: /* @__PURE__ */ jsx("a", { href, className: styles.cardTitleLink || void 0, children: post.title }) }),
       post.excerpt && /* @__PURE__ */ jsx("p", { className: cls2(unstyled, styles, "cardExcerpt", "sk-bloglist-card-excerpt"), children: post.excerpt }),
       /* @__PURE__ */ jsxs("div", { className: cls2(unstyled, styles, "cardFooter", "sk-bloglist-card-footer"), children: [
         post.author && /* @__PURE__ */ jsxs("span", { className: cls2(unstyled, styles, "cardAuthor", ""), children: [
@@ -1536,11 +972,13 @@ async function BlogSidebar({
   recentPostsCount = 5,
   showTags = true,
   showSearch = true,
-  basePath = "/blog",
+  basePath,
+  routing,
   className,
   currentCategory,
   children
 }) {
+  const routes = createBlogRoutes({ basePath, ...routing });
   if (!apiKey) {
     console.warn("[Blog] No API key configured for sidebar");
     return null;
@@ -1551,17 +989,18 @@ async function BlogSidebar({
     showTags ? fetchTags(apiUrl, apiKey) : Promise.resolve([])
   ]);
   return /* @__PURE__ */ jsxs("aside", { className, style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
-    showSearch && /* @__PURE__ */ jsx(SearchWidget, { basePath }),
+    showSearch && /* @__PURE__ */ jsx(SearchWidget, { basePath: routes.index }),
     showCategories && categories.length > 0 && /* @__PURE__ */ jsx(
       CategoriesWidget,
       {
         categories,
-        basePath,
+        basePath: routes.index,
+        categoryPath: routing?.categoryPath ? routes.category : void 0,
         currentCategory
       }
     ),
-    showRecentPosts && recentPosts.length > 0 && /* @__PURE__ */ jsx(RecentPostsWidget, { posts: recentPosts, basePath }),
-    showTags && tags.length > 0 && /* @__PURE__ */ jsx(TagsWidget, { tags, basePath }),
+    showRecentPosts && recentPosts.length > 0 && /* @__PURE__ */ jsx(RecentPostsWidget, { posts: recentPosts, routes }),
+    showTags && tags.length > 0 && /* @__PURE__ */ jsx(TagsWidget, { tags, basePath: routes.index }),
     children
   ] });
 }
@@ -1588,6 +1027,7 @@ function SearchWidget({ basePath }) {
 function CategoriesWidget({
   categories,
   basePath,
+  categoryPath,
   currentCategory
 }) {
   return /* @__PURE__ */ jsxs("div", { style: widgetStyle, children: [
@@ -1608,7 +1048,7 @@ function CategoriesWidget({
       categories.map((cat) => /* @__PURE__ */ jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsxs(
         "a",
         {
-          href: `${basePath}?category=${cat.slug}`,
+          href: categoryPath ? categoryPath(cat.slug) : `${basePath}?category=${encodeURIComponent(cat.slug)}`,
           style: {
             ...categoryLinkStyle,
             fontWeight: currentCategory === cat.slug ? 600 : 400,
@@ -1629,11 +1069,12 @@ function CategoriesWidget({
 }
 function RecentPostsWidget({
   posts,
-  basePath
+  routes
 }) {
   return /* @__PURE__ */ jsxs("div", { style: widgetStyle, children: [
     /* @__PURE__ */ jsx("h4", { style: widgetTitleStyle, children: "Recent Posts" }),
     /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: posts.map((post) => {
+      const artwork = resolveBlogArtwork(post);
       const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", {
         month: "short",
         day: "numeric"
@@ -1647,17 +1088,19 @@ function RecentPostsWidget({
             borderBottom: "1px solid var(--sk-border)"
           },
           children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
-            post.featured_image && /* @__PURE__ */ jsx("a", { href: `${basePath}/${post.slug}`, children: /* @__PURE__ */ jsx(
+            artwork.src && /* @__PURE__ */ jsx("a", { href: routes.post(post), children: /* @__PURE__ */ jsx(
               "img",
               {
-                src: post.featured_image,
+                src: artwork.src,
                 alt: "",
+                "data-sk-composed-card": artwork.composed || void 0,
                 style: {
                   width: 64,
                   height: 48,
                   objectFit: "cover",
                   borderRadius: 6,
-                  flexShrink: 0
+                  flexShrink: 0,
+                  ...blogArtworkImageStyle(artwork)
                 }
               }
             ) }),
@@ -1665,7 +1108,7 @@ function RecentPostsWidget({
               /* @__PURE__ */ jsx(
                 "a",
                 {
-                  href: `${basePath}/${post.slug}`,
+                  href: routes.post(post),
                   style: {
                     fontSize: 14,
                     fontWeight: 500,
@@ -1727,7 +1170,8 @@ async function BlogLayout({
   sidebarProps = {},
   hero,
   maxWidth = 1280,
-  basePath = "/blog",
+  basePath,
+  routing,
   className,
   currentCategory,
   children
@@ -1796,6 +1240,7 @@ async function BlogLayout({
                   apiUrl,
                   apiKey,
                   basePath,
+                  routing,
                   currentCategory,
                   ...sidebarProps
                 }
@@ -1807,6 +1252,7 @@ async function BlogLayout({
                   apiUrl,
                   apiKey,
                   basePath,
+                  routing,
                   currentCategory,
                   ...sidebarProps
                 }
@@ -1872,8 +1318,11 @@ async function RelatedPosts({
   currentPostId,
   limit = 3,
   className,
+  basePath,
+  routing,
   renderItem
 }) {
+  const routes = createBlogRoutes({ basePath, ...routing });
   if (!apiKey) {
     console.warn("[Blog] No API key configured for RelatedPosts");
     return null;
@@ -1882,29 +1331,32 @@ async function RelatedPosts({
   if (posts.length === 0) return null;
   return /* @__PURE__ */ jsxs("section", { className, children: [
     /* @__PURE__ */ jsx("h3", { style: { marginBottom: 16 }, children: "Related Posts" }),
-    /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 16 }, children: posts.map(
-      (post) => renderItem ? renderItem(post) : /* @__PURE__ */ jsxs("article", { style: { borderBottom: "1px solid var(--sk-border)", paddingBottom: 16 }, children: [
-        post.featured_image && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 16 }, children: posts.map((post) => {
+      const artwork = resolveBlogArtwork(post);
+      return renderItem ? renderItem(post) : /* @__PURE__ */ jsxs("article", { style: { borderBottom: "1px solid var(--sk-border)", paddingBottom: 16 }, children: [
+        artwork.src && /* @__PURE__ */ jsx(
           "img",
           {
-            src: post.featured_image,
-            alt: post.title,
+            src: artwork.src,
+            alt: artwork.alt,
+            "data-sk-composed-card": artwork.composed || void 0,
             style: {
               width: "100%",
               height: 120,
               objectFit: "cover",
               borderRadius: 8,
-              marginBottom: 8
+              marginBottom: 8,
+              ...blogArtworkImageStyle(artwork)
             }
           }
         ),
-        /* @__PURE__ */ jsx("a", { href: `/blog/${post.slug}`, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsx("h4", { style: { margin: 0, color: "inherit" }, children: post.title }) }),
+        /* @__PURE__ */ jsx("a", { href: routes.post(post), style: { textDecoration: "none" }, children: /* @__PURE__ */ jsx("h4", { style: { margin: 0, color: "inherit" }, children: post.title }) }),
         post.excerpt && /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 14, color: "var(--sk-text-secondary)" }, children: post.excerpt })
-      ] }, post.id)
-    ) })
+      ] }, post.id);
+    }) })
   ] });
 }
 
 export { BlogLayout, BlogList, BlogPage, BlogPost, BlogPostPage, BlogSidebar, CategoryPage, ClusterNavigation, RelatedPosts, ServiceCallout, ServiceCallouts, addExternalLinkTargets, getAuthorSocialLinks, normalizeSiteHost, readingTimeMinutes, resolveBlogSiteUrl };
-//# sourceMappingURL=chunk-67CHHDBL.mjs.map
-//# sourceMappingURL=chunk-67CHHDBL.mjs.map
+//# sourceMappingURL=chunk-LIYSLNEK.mjs.map
+//# sourceMappingURL=chunk-LIYSLNEK.mjs.map