@leadertechie/personal-site-kit 0.0.0

package/dist/index.js

@@ -0,0 +1,354 @@
+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();
+  }
+}
+class ThemeToggle extends HTMLElement {
+  constructor() {
+    super();
+    this.toggleTheme = () => {
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      const newTheme = currentTheme === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", newTheme);
+      localStorage.setItem("theme", newTheme);
+      this.updateToggleButton(newTheme);
+      this.dispatchThemeChangeEvent(newTheme);
+    };
+    this.attachShadow({ mode: "open" });
+    this.render();
+    this.applyThemeFromLocalStorage();
+  }
+  connectedCallback() {
+    this.shadowRoot?.querySelector("button")?.addEventListener("click", this.toggleTheme);
+  }
+  disconnectedCallback() {
+    this.shadowRoot?.querySelector("button")?.removeEventListener("click", this.toggleTheme);
+  }
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host {
+            display: inline-block;
+          }
+          button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            padding: 0.5rem;
+            color: var(--text-color, #213547); /* Default for light mode */
+            transition: color 0.3s ease;
+          }
+          button:hover {
+            color: var(--primary-color, #747bff); /* Hover color */
+          }
+          /* Dark mode specific styles for the button */
+          html[data-theme='dark'] button {
+            color: var(--dark-mode-text-color, rgba(255, 255, 255, 0.87));
+          }
+          html[data-theme='dark'] button:hover {
+            color: var(--dark-mode-primary-color, #646cff);
+          }
+        </style>
+        <button id="theme-toggle" aria-label="Toggle theme">
+          <span class="icon">${this.getSunIcon()}</span> <!-- Default to sun for light mode -->
+        </button>
+      `;
+    }
+  }
+  applyThemeFromLocalStorage() {
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme) {
+      document.documentElement.setAttribute("data-theme", savedTheme);
+      this.updateToggleButton(savedTheme);
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.documentElement.setAttribute("data-theme", "dark");
+      this.updateToggleButton("dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+      this.updateToggleButton("light");
+    }
+  }
+  updateToggleButton(theme) {
+    const button = this.shadowRoot?.querySelector("#theme-toggle");
+    if (button) {
+      const iconSpan = button.querySelector(".icon");
+      if (iconSpan) {
+        iconSpan.innerHTML = theme === "dark" ? this.getMoonIcon() : this.getSunIcon();
+      }
+    }
+  }
+  getSunIcon() {
+    return `
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5"/>
+        <line x1="12" y1="1" x2="12" y2="3"/>
+        <line x1="12" y1="21" x2="12" y2="23"/>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+        <line x1="1" y1="12" x2="3" y2="12"/>
+        <line x1="21" y1="12" x2="23" y2="12"/>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+      </svg>
+    `;
+  }
+  getMoonIcon() {
+    return `
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+    `;
+  }
+  dispatchThemeChangeEvent(theme) {
+    const event = new CustomEvent("theme-changed", {
+      detail: { theme },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
+}
+customElements.define("theme-toggle", ThemeToggle);
+const createHtmlTemplate = ({
+  title,
+  description,
+  canonicalUrl,
+  content
+}) => {
+  return `<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/api/logo" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title}</title>
+    <meta name="description" content="${description}" />
+    <meta property="og:title" content="${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta property="og:url" content="${canonicalUrl}" />
+    <link rel="canonical" href="${canonicalUrl}" />
+    <link rel="stylesheet" href="/src/styles.css" />
+    <script type="module" src="/src/index.ts"><\/script>
+  </head>
+  <body>
+    <div id="app">
+      ${content}
+    </div>
+  </body>
+</html>`;
+};
+const pipeline = new MarkdownPipeline({
+  imagePathPrefix: "images/",
+  styleOptions: {
+    classPrefix: "md-",
+    addHeadingIds: true
+  }
+});
+const renderMarkdown = (content) => {
+  if (!content) return "";
+  return pipeline.renderMarkdown(content);
+};
+const generatePageContent = (pathname, routes, footerLinks, data) => {
+  const logo = "/api/logo";
+  const siteTitle = data?.siteTitle || "My Personal Website";
+  const siteDescription = data?.siteDescription || "Welcome to my professional portfolio and blog.";
+  const copyright = data?.copyright || "2026 All Rights Reserved";
+  const baseUrl = data?.baseUrl || "";
+  const canonicalUrl = baseUrl ? new URL(pathname, baseUrl).toString() : pathname;
+  const navLinks = routes.map(
+    (route) => `<a href="${route.link}" class="nav-link" data-route="${route.link === "/" ? "home" : route.text.toLowerCase()}">${route.text}</a>`
+  ).join("");
+  const bannerTemplate = `
+    <my-banner header="${siteTitle}" logo="${logo}">
+      <theme-toggle slot="theme-switcher"></theme-toggle>
+      <nav slot="nav-links">
+        ${navLinks}
+      </nav>
+    </my-banner>`;
+  const footerTemplate = `
+    <my-footer
+      copyright="${copyright}"
+      footerlinks=\\'\${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>
+          <p>${item.summary || item.description || ""}</p>
+          <small>${new Date(item.date).toLocaleDateString()}</small>
+        </div>
+      `).join("") : `<p>No ${type} available yet.</p>`;
+    return `
+      <div class="recent-content-section ${title.includes("Stories") ? "mt-2" : ""}">
+        <h3 class="border-bottom pb-05">${title}</h3>
+        ${listHtml}
+      </div>
+    `;
+  };
+  if (pathname === "/" || pathname === "") {
+    const homeHtml = data?.content || `<h1>Welcome to ${siteTitle}</h1><p>Start by configuring your content in the admin portal.</p>`;
+    const mainContent = `
+    ${bannerTemplate}
+    <main class="container container-wide column-layout row-layout">
+        <div class="home-main-content main-column text-left">
+            ${homeHtml}
+        </div>
+        <aside class="home-side-content sidebar-column">
+            ${renderContentGists(data?.blogs, "Recent Blogs", "blogs")}
+            ${renderContentGists(data?.stories, "Recent Stories", "stories")}
+        </aside>
+      </main>
+      ${footerTemplate}`;
+    return {
+      title: `${siteTitle} - Home`,
+      description: siteDescription,
+      canonicalUrl,
+      content: mainContent
+    };
+  } else if (pathname === "/blogs" || pathname === "/stories" || pathname.startsWith("/blogs/") || pathname.startsWith("/stories/")) {
+    const isBlog = pathname.includes("blogs");
+    const type = isBlog ? "blogs" : "stories";
+    const items = isBlog ? data?.blogs : data?.stories;
+    const title = type.charAt(0).toUpperCase() + type.slice(1);
+    const currentSlug = data?.slug;
+    const mainContent = `
+    ${bannerTemplate}
+    <main class="container container-wide">
+        <div class="mb-2">
+          <input type="text" id="content-search" placeholder="Search ${type}..." class="search-input search-input-lg">
+        </div>
+        <div class="column-layout">
+          <aside class="sidebar-nav sidebar-column">
+            <div id="content-list">
+              ${items?.map((item) => {
+      const searchTerms = [
+        item.title,
+        ...item.tags || [],
+        item.summary || item.description || "",
+        item.slug
+      ].join(" ").toLowerCase();
+      return `
+                <div class="list-item sidebar-item ${item.slug === currentSlug ? "active" : ""}" 
+                     data-search="${searchTerms}">
+                  <a href="/${type}/${item.slug}" data-route="${type}-${item.slug}" class="sidebar-item sidebar-item-link">
+                    <h4>${item.title}</h4>
+                    <small>${new Date(item.date).toLocaleDateString()}</small>
+                  </a>
+                </div>
+              `;
+    }).join("") || `<p>No ${type} available yet.</p>`}
+            </div>
+          </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>` : ""}
+            </div>
+          </div>
+        </div>
+      </main>
+      ${footerTemplate}`;
+    return {
+      title: `${title} - ${siteTitle}`,
+      description: `Read the latest ${type} from ${siteTitle}.`,
+      canonicalUrl,
+      content: mainContent
+    };
+  } else if (pathname === "/about-me") {
+    const apiBaseUrl = data?.apiUrl || "";
+    const mainContent = `
+    ${bannerTemplate}
+    <main class="container container-narrow">
+        <my-aboutme base-url="${apiBaseUrl}"></my-aboutme>
+      </main>
+      ${footerTemplate}`;
+    return {
+      title: `About - ${siteTitle}`,
+      description: `Learn more about ${siteTitle}.`,
+      canonicalUrl,
+      content: mainContent
+    };
+  } else {
+    const mainContent = `
+    ${bannerTemplate}
+    <main class="container container-narrow text-center page-content">
+        <h1 class="page-title">Page Not Found</h1>
+        <p>The page you\\'re looking for doesn\\'t exist.</p>
+        <p><a href="/">Return to home</a></p>
+      </main>
+      ${footerTemplate}`;
+    return {
+      title: `404 Not Found - ${siteTitle}`,
+      description: "The page you requested could not be found.",
+      canonicalUrl,
+      content: mainContent
+    };
+  }
+};
+export {
+  SiteStore,
+  ThemeToggle,
+  createHtmlTemplate,
+  generatePageContent,
+  getConfig,
+  initializeConfig,
+  renderMarkdown
+};

package/dist/prerender/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    fetch(request: Request, env: any, ctx: any): Promise<Response>;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/prerender/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prerender/index.ts"],"names":[],"mappings":";mBAuDuB,OAAO,OAAO,GAAG,OAAO,GAAG;;AADlD,wBAmFE"}

package/dist/prerender/pageContent.d.ts

@@ -0,0 +1,16 @@
+export interface IRoute {
+    text: string;
+    link: string;
+}
+export interface IFooterLink {
+    text: string;
+    link: string;
+}
+export interface PageContent {
+    title: string;
+    description: string;
+    canonicalUrl: string;
+    content: string;
+}
+export declare const generatePageContent: (pathname: string, routes: IRoute[], footerLinks: IFooterLink[], env?: any) => Promise<PageContent>;
+//# sourceMappingURL=pageContent.d.ts.map

package/dist/prerender/pageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageContent.d.ts","sourceRoot":"","sources":["../../src/prerender/pageContent.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAuFD,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,QAAQ,MAAM,EAAE,EAChB,aAAa,WAAW,EAAE,EAC1B,MAAM,GAAG,KACR,OAAO,CAAC,WAAW,CAkJrB,CAAC"}

package/dist/prerender/prerender.d.ts

@@ -0,0 +1,3 @@
+export declare function renderFromAst(ast: any): string;
+export default renderFromAst;
+//# sourceMappingURL=prerender.d.ts.map

package/dist/prerender/prerender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prerender.d.ts","sourceRoot":"","sources":["../../src/prerender/prerender.ts"],"names":[],"mappings":"AACA,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAqB9C;AAED,eAAe,aAAa,CAAA"}

package/dist/prerender/template.d.ts

@@ -0,0 +1,10 @@
+export interface TemplateProps {
+    title: string;
+    description: string;
+    canonicalUrl: string;
+    content: string;
+    hydrationData?: string;
+    baseSiteUrl?: string;
+}
+export declare const createHtmlTemplate: ({ title, description, canonicalUrl, content, hydrationData, baseSiteUrl }: TemplateProps) => Promise<string>;
+//# sourceMappingURL=template.d.ts.map

package/dist/prerender/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/prerender/template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAyBD,eAAO,MAAM,kBAAkB,GAAU,2EAOtC,aAAa,KAAG,OAAO,CAAC,MAAM,CAyBhC,CAAC"}

package/dist/prerender.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from './prerender/index'
+export default _default
+export {}