@leadertechie/personal-site-kit 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/chunks/site-store-CGV9c2DI.js

@@ -0,0 +1,89 @@
+const __vite_import_meta_env__ = {};
+const DEFAULT_INFRA = {
+  baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:5173",
+  apiUrl: typeof window !== "undefined" && (window.__VITE_API_URL__ || __vite_import_meta_env__?.VITE_API_URL) || (typeof window !== "undefined" ? window.location.origin : "http://localhost:8787")
+};
+const DEFAULT_STATIC = {
+  siteTitle: "My Personal Website",
+  siteDescription: "My Personal Website",
+  copyright: "2026 My Personal Website",
+  linkedin: "https://linkedin.com/in/yourname",
+  github: "https://github.com/yourname",
+  email: "yourname@domain.com"
+};
+let activeConfig = { ...DEFAULT_INFRA, ...DEFAULT_STATIC };
+async function initializeConfig(infra) {
+  if (infra) {
+    if (infra.baseUrl) activeConfig.baseUrl = infra.baseUrl;
+    if (infra.apiUrl) activeConfig.apiUrl = infra.apiUrl;
+  }
+  try {
+    const res = await fetch(`${activeConfig.apiUrl}/api/static`);
+    if (res.ok) {
+      const remoteStatic = await res.json().catch(() => ({}));
+      const filteredStatic = Object.fromEntries(
+        Object.entries(remoteStatic).filter(([_, v]) => v != null && v !== "")
+      );
+      activeConfig = { ...activeConfig, ...filteredStatic };
+    }
+  } catch (e) {
+    console.warn("Failed to load static details from R2, using defaults.");
+  }
+  return activeConfig;
+}
+async function refreshConfig() {
+  try {
+    const res = await fetch(`${activeConfig.apiUrl}/api/static`);
+    if (res.ok) {
+      const remoteStatic = await res.json().catch(() => ({}));
+      activeConfig = { ...activeConfig, ...remoteStatic };
+    }
+  } catch (e) {
+    console.warn("Failed to refresh static details.");
+  }
+  return activeConfig;
+}
+function getConfig() {
+  return activeConfig;
+}
+class SiteStore {
+  constructor() {
+    this.config = null;
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  static getInstance() {
+    if (!SiteStore.instance) {
+      SiteStore.instance = new SiteStore();
+    }
+    return SiteStore.instance;
+  }
+  async init(infra) {
+    this.config = await initializeConfig(infra);
+    this.notify();
+    return this.config;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    if (this.config) listener(this.config);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    if (this.config) {
+      this.listeners.forEach((l) => l(this.config));
+    }
+  }
+  async refresh() {
+    await refreshConfig();
+    this.config = getConfig();
+    this.notify();
+  }
+  getConfig() {
+    return this.config || getConfig();
+  }
+}
+export {
+  SiteStore as S,
+  getConfig as g,
+  initializeConfig as i,
+  refreshConfig as r
+};

package/dist/chunks/{template-gGTkeOcA.js → template-Lmx7Dxoc.js}

@@ -1,70 +1,23 @@
-import { MarkdownPipeline } from "@leadertechie/md2html";
-const DEFAULT_INFRA = {
-  baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:5173",
-  apiUrl: typeof window !== "undefined" && window.__VITE_API_URL__ || "http://localhost:8787"
-};
-const DEFAULT_STATIC = {
-  siteTitle: "My Personal Website",
-  siteDescription: "My Personal Website",
-  copyright: "2026 My Personal Website",
-  linkedin: "https://linkedin.com/in/yourname",
-  github: "https://github.com/yourname",
-  email: "yourname@domain.com"
-};
-let activeConfig = { ...DEFAULT_INFRA, ...DEFAULT_STATIC };
-async function initializeConfig(infra) {
-  if (infra) {
-    activeConfig = { ...activeConfig, ...infra };
-  }
-  try {
-    const res = await fetch(`${activeConfig.apiUrl}/api/static`);
-    if (res.ok) {
-      const remoteStatic = await res.json();
-      activeConfig = { ...activeConfig, ...remoteStatic };
-    }
-  } catch (e) {
-    console.warn("Failed to load static details from R2, using defaults.");
-  }
-  return activeConfig;
-}
-function getConfig() {
-  return activeConfig;
-}
-class SiteStore {
-  constructor() {
-    this.config = null;
-    this.listeners = /* @__PURE__ */ new Set();
-  }
-  static getInstance() {
-    if (!SiteStore.instance) {
-      SiteStore.instance = new SiteStore();
-    }
-    return SiteStore.instance;
-  }
-  async init(infra) {
-    this.config = await initializeConfig(infra);
-    this.notify();
-    return this.config;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    if (this.config) listener(this.config);
-    return () => this.listeners.delete(listener);
-  }
-  notify() {
-    if (this.config) {
-      this.listeners.forEach((l) => l(this.config));
-    }
-  }
-  getConfig() {
-    return this.config || getConfig();
-  }
-}
+import { S as SiteStore } from "./site-store-CGV9c2DI.js";
+import { MarkdownPipeline } from "@leadertechie/r2tohtml";
+import { init, reinit } from "@leadertechie/md2interact";
 const pipeline = new MarkdownPipeline({
   imagePathPrefix: "images/",
+  preserveRawHTML: true,
+  errorRecovery: "warn",
+  maxRecursionDepth: 50,
   styleOptions: {
     classPrefix: "md-",
-    addHeadingIds: true
+    addHeadingIds: true,
+    emitScopeAnchors: true
+  },
+  slotPattern: /\[\[(.*?)\]\]/g,
+  onSlot: (name) => {
+    const slotMap = {
+      "SITE_TITLE": document?.querySelector("title")?.textContent || "My Site",
+      "CURRENT_YEAR": (/* @__PURE__ */ new Date()).getFullYear().toString()
+    };
+    return slotMap[name] || `[[${name}]]`;
   }
 });
 const renderMarkdown = (content) => {
@@ -91,12 +44,12 @@ const generatePageContent = (pathname, routes, footerLinks, data) => {
   const footerTemplate = `
     <my-footer
       copyright="${copyright}"
-      footerlinks='\${JSON.stringify(footerLinks)}'>
+      footer-links='${JSON.stringify(footerLinks)}'>
     </my-footer>`;
   const renderContentGists = (items = [], title, type) => {
     const listHtml = items.length > 0 ? items.map((item) => `
         <div class="gist-card">
-          <a href="${type}/${item.slug}" data-route="${type}-${item.slug}"><h4>${item.title}</h4></a>
+          <a href="/${type}/${item.slug}" data-route="${type}-${item.slug}"><h4>${item.title}</h4></a>
           <p>${item.summary || item.description || ""}</p>
           <small>${new Date(item.date).toLocaleDateString()}</small>
         </div>
@@ -164,7 +117,7 @@ const generatePageContent = (pathname, routes, footerLinks, data) => {
           </aside>
           <div class="wide-main-column text-left">
             <div id="content-viewer">
-              ${currentSlug ? isBlog ? `<my-blog-viewer slug="${currentSlug}"></my-blog-viewer>` : `<my-story-viewer slug="${currentSlug}"></my-story-viewer>` : items && items.length > 0 ? `<p>Select a ${type.slice(0, -1)} to read.</p>` : ""}
+              ${currentSlug ? isBlog ? `<my-blog-viewer slug="${currentSlug}" api-url="${data?.apiUrl || ""}"></my-blog-viewer>` : `<my-story-viewer slug="${currentSlug}" api-url="${data?.apiUrl || ""}"></my-story-viewer>` : items && items.length > 0 ? `<p>Select a ${type.slice(0, -1)} to read.</p>` : ""}
             </div>
           </div>
         </div>
@@ -220,20 +173,29 @@ class Router {
       { link: "/stories", text: "Stories" },
       { link: "/about-me", text: "About Me" }
     ];
-    this.siteTitle = config.siteTitle;
-    this.copyright = config.copyright;
     this.apiUrl = config.apiUrl;
+  }
+  get config() {
+    return this.ui.getStore().getConfig();
+  }
+  get siteTitle() {
+    return this.config.siteTitle;
+  }
+  get copyright() {
+    return this.config.copyright;
+  }
+  get footerLinks() {
     const normalizeUrl = (url) => {
       if (!url) return "";
       if (url.startsWith("http://") || url.startsWith("https://")) return url;
       if (url.startsWith("www.")) return `https://${url}`;
       return url;
     };
-    this.footerLinks = [
-      { text: "LinkedIn", link: normalizeUrl(config.linkedin) },
-      { text: "GitHub", link: normalizeUrl(config.github) },
-      { text: "Email", link: config.email ? `mailto:${config.email}` : "" }
-    ].filter((link) => link.link !== "");
+    return [
+      { text: "LinkedIn", link: normalizeUrl(this.config.linkedin) || "https://linkedin.com" },
+      { text: "GitHub", link: normalizeUrl(this.config.github) || "https://github.com" },
+      { text: "Email", link: this.config.email ? `mailto:${this.config.email}` : "mailto:hello@example.com" }
+    ];
   }
   init(appElementId = "app") {
     this.appElement = document.getElementById(appElementId);
@@ -246,7 +208,10 @@ class Router {
   }
   setupEventListeners() {
     document.body.addEventListener("click", (event) => {
-      const target = event.target.closest("a[data-route]");
+      const path = event.composedPath();
+      const target = path.find(
+        (el) => el instanceof HTMLElement && (el.matches("a[data-route]") || el.closest("a[data-route]"))
+      );
       if (target) {
         event.preventDefault();
         const route = target.getAttribute("href");
@@ -328,6 +293,13 @@ class Router {
     }
     canonicalLink.setAttribute("href", url);
   }
+  /**
+   * After rendering new content, reinitialize md2interact so it
+   * re-scans the DOM for interaction elements (poll, live-update, etc.)
+   */
+  afterRender() {
+    this.ui.reinitInteract();
+  }
   async renderHomePage() {
     let blogs = [];
     let stories = [];
@@ -338,9 +310,18 @@ class Router {
         fetch(`${this.apiUrl}/api/stories`),
         fetch(`${this.apiUrl}/api/home`)
       ]);
-      if (blogsRes.ok) blogs = (await blogsRes.json()).slice(0, 3);
-      if (storiesRes.ok) stories = (await storiesRes.json()).slice(0, 3);
-      if (homeRes.ok) homeContent = (await homeRes.json()).content;
+      if (blogsRes.ok) {
+        const data = await blogsRes.json().catch(() => []);
+        blogs = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (storiesRes.ok) {
+        const data = await storiesRes.json().catch(() => []);
+        stories = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (homeRes.ok) {
+        const data = await homeRes.json().catch(() => ({}));
+        homeContent = data.content || "";
+      }
     } catch (e) {
       console.error("Failed to fetch home content", e);
     }
@@ -353,6 +334,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   renderAboutMePage() {
     const pageContent = generatePageContent("/about-me", this.routes, this.footerLinks, {
@@ -362,6 +344,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   async renderContentListPage(pathname) {
     const type = pathname === "/blogs" ? "blogs" : "stories";
@@ -372,7 +355,7 @@ class Router {
     } catch (e) {
     }
     const latestSlug = items.length > 0 ? items[0].slug : void 0;
-    const data = type === "blogs" ? { blogs: items, slug: latestSlug } : { stories: items, slug: latestSlug };
+    const data = type === "blogs" ? { blogs: items, slug: latestSlug, apiUrl: this.apiUrl } : { stories: items, slug: latestSlug, apiUrl: this.apiUrl };
     const pageContent = generatePageContent(pathname, this.routes, this.footerLinks, {
       ...data,
       siteTitle: this.siteTitle,
@@ -380,6 +363,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   async renderContentDetailPage(pathname) {
     const isBlog = pathname.startsWith("/blogs/");
@@ -391,7 +375,7 @@ class Router {
       if (res.ok) items = await res.json();
     } catch (e) {
     }
-    const data = type === "blogs" ? { blogs: items, slug } : { stories: items, slug };
+    const data = type === "blogs" ? { blogs: items, slug, apiUrl: this.apiUrl } : { stories: items, slug, apiUrl: this.apiUrl };
     const pageContent = generatePageContent(pathname, this.routes, this.footerLinks, {
       ...data,
       siteTitle: this.siteTitle,
@@ -399,12 +383,9 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(`${slug.replace(/-/g, " ")} - ${this.siteTitle}`, "Read more content", window.location.href);
+    this.afterRender();
   }
   async renderAdminPage() {
-    generatePageContent("/admin", this.routes, this.footerLinks, {
-      siteTitle: this.siteTitle,
-      copyright: this.copyright
-    });
     if (this.appElement) {
       this.appElement.innerHTML = `
         <my-banner header="${this.siteTitle}" logo="${this.logo}">
@@ -416,14 +397,16 @@ class Router {
         <main class="container container-medium">
           <admin-portal></admin-portal>
         </main>
-        <my-footer copyright="${this.copyright}" footerlinks='[]'></my-footer>
+        <my-footer copyright="${this.copyright}" footerLinks='${JSON.stringify(this.footerLinks)}'></my-footer>
       `;
     }
+    this.afterRender();
   }
 }
 class WebsiteUI {
   constructor(config = {}) {
     this.router = null;
+    this.interactInitialized = false;
     this.store = SiteStore.getInstance();
     this.config = config;
   }
@@ -440,14 +423,64 @@ class WebsiteUI {
       apiUrl: this.config.apiUrl,
       baseUrl: this.config.baseUrl
     });
+    this.store.subscribe((config) => {
+      this.applyTheme();
+      this.updateFavicon();
+      this.updateBanner(config);
+      if (this.router && window.location.pathname !== "/admin") {
+        this.router.navigate(window.location.pathname);
+      }
+    });
     this.applyTheme();
+    this.updateFavicon();
+    this.updateBanner(this.store.getConfig());
     this.router = new Router(this);
     this.router.init(this.config.appElementId || "app");
+    this.initInteract();
     if (this.config.onBootstrap) {
       await this.config.onBootstrap(this);
     }
     console.log("WebsiteUI bootstrapped");
   }
+  /**
+   * Initialize md2interact for client-side DOM interactions,
+   * CSS hydration, and event bus communication.
+   */
+  initInteract() {
+    if (this.interactInitialized) return;
+    const interactCfg = this.config.interactConfig || {};
+    init({
+      interactions: interactCfg.interactions || {
+        "poll": { selector: '[data-interact="poll"]' },
+        "live-update": { selector: '[data-interact="live-update"]' },
+        "click-toggle": { selector: '[data-interact="click-toggle"]' },
+        "infinite-scroll": { selector: '[data-interact="infinite-scroll"]' },
+        "form-live": { selector: '[data-interact="form-live"]' }
+      },
+      cssHydration: interactCfg.cssHydration || {
+        inlineCritical: true,
+        layerInjection: true,
+        themeToggle: true
+      }
+    });
+    this.interactInitialized = true;
+  }
+  /**
+   * Reinitialize md2interact after dynamic content changes (e.g., SPA navigation).
+   * This re-scans the DOM for new interaction elements.
+   */
+  reinitInteract() {
+    if (this.interactInitialized) {
+      reinit();
+    }
+  }
+  updateBanner(config) {
+    const banner = document.querySelector("my-banner");
+    if (banner) {
+      banner.setAttribute("header", config.siteTitle || "My Site");
+      banner.setAttribute("logo", `${config.apiUrl}/api/logo?t=${Date.now()}`);
+    }
+  }
   applyTheme() {
     if (!this.config.theme) return;
     const { theme } = this.config;
@@ -461,6 +494,18 @@ class WebsiteUI {
       document.head.appendChild(style);
     }
   }
+  updateFavicon() {
+    const favicon = document.querySelector('link[rel="icon"]');
+    const logoUrl = `/api/logo?t=${Date.now()}`;
+    if (favicon) {
+      favicon.setAttribute("href", logoUrl);
+    } else {
+      const newFavicon = document.createElement("link");
+      newFavicon.rel = "icon";
+      newFavicon.href = logoUrl;
+      document.head.appendChild(newFavicon);
+    }
+  }
   getStore() {
     return this.store;
   }
@@ -506,13 +551,12 @@ class ThemeToggle extends HTMLElement {
             cursor: pointer;
             font-size: 1.5rem;
             padding: 0.5rem;
-            color: var(--text-color, #213547); /* Default for light mode */
+            color: var(--text-color, #213547);
             transition: color 0.3s ease;
           }
           button:hover {
-            color: var(--primary-color, #747bff); /* Hover color */
+            color: var(--primary-color, #747bff);
           }
-          /* Dark mode specific styles for the button */
           html[data-theme='dark'] button {
             color: var(--dark-mode-text-color, rgba(255, 255, 255, 0.87));
           }
@@ -521,7 +565,7 @@ class ThemeToggle extends HTMLElement {
           }
         </style>
         <button id="theme-toggle" aria-label="Toggle theme">
-          <span class="icon">${this.getSunIcon()}</span> <!-- Default to sun for light mode -->
+          <span class="icon">${this.getSunIcon()}</span>
         </button>
       `;
     }
@@ -610,13 +654,10 @@ const createHtmlTemplate = ({
 };
 export {
   Router as R,
-  SiteStore as S,
   ThemeToggle as T,
   WebsiteUI as W,
-  getConfig as a,
   bootstrap as b,
   createHtmlTemplate as c,
   generatePageContent as g,
-  initializeConfig as i,
   renderMarkdown as r
 };