@leadertechie/personal-site-kit 0.0.0 → 0.1.0-alpha.10

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

@@ -0,0 +1,86 @@
+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(() => ({}));
+      activeConfig = { ...activeConfig, ...remoteStatic };
+    }
+  } 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-C1tMqlPY.js

@@ -0,0 +1,597 @@
+import { S as SiteStore } from "./site-store-Vqmjjz9c.js";
+import { MarkdownPipeline } from "@leadertechie/r2tohtml";
+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}"
+      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>
+          <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}" 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>
+      </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
+    };
+  }
+};
+class Router {
+  constructor(ui) {
+    this.ui = ui;
+    this.logo = "/api/logo";
+    this.appElement = null;
+    const store = ui.getStore();
+    const config = store.getConfig();
+    this.routes = [
+      { link: "/", text: "Home" },
+      { link: "/blogs", text: "Blogs" },
+      { link: "/stories", text: "Stories" },
+      { link: "/about-me", text: "About Me" }
+    ];
+    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;
+    };
+    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);
+    if (!this.appElement) {
+      console.error(`App element with id ${appElementId} not found`);
+      return;
+    }
+    this.setupEventListeners();
+    this.navigate(window.location.pathname);
+  }
+  setupEventListeners() {
+    document.body.addEventListener("click", (event) => {
+      const target = event.target.closest("a[data-route]");
+      if (target) {
+        event.preventDefault();
+        const route = target.getAttribute("href");
+        if (route && route !== window.location.pathname) {
+          window.history.pushState({}, "", route);
+          this.navigate(route);
+        }
+      }
+    });
+    window.addEventListener("popstate", () => {
+      this.navigate(window.location.pathname);
+    });
+    document.body.addEventListener("input", (event) => {
+      const target = event.target;
+      if (target.id === "content-search") {
+        const query = target.value.toLowerCase().trim();
+        const items = document.querySelectorAll("#content-list .list-item");
+        items.forEach((item) => {
+          const searchText = item.getAttribute("data-search") || "";
+          if (searchText.includes(query)) {
+            item.classList.remove("hidden");
+          } else {
+            item.classList.add("hidden");
+          }
+        });
+      }
+    });
+  }
+  async navigate(path) {
+    if (path.startsWith("/blogs/") && path.length > 7) {
+      await this.renderContentDetailPage(path);
+      return;
+    }
+    if (path.startsWith("/stories/") && path.length > 9) {
+      await this.renderContentDetailPage(path);
+      return;
+    }
+    switch (path) {
+      case "/":
+        await this.renderHomePage();
+        break;
+      case "/about-me":
+        this.renderAboutMePage();
+        break;
+      case "/blogs":
+      case "/stories":
+        await this.renderContentListPage(path);
+        break;
+      case "/admin":
+        await this.renderAdminPage();
+        break;
+      default:
+        await this.renderHomePage();
+    }
+  }
+  setPageMeta(title, description, url) {
+    document.title = title;
+    const metaTags = [
+      { name: "description", content: description },
+      { property: "og:title", content: title },
+      { property: "og:description", content: description },
+      { property: "og:url", content: url }
+    ];
+    metaTags.forEach((tag) => {
+      let element = tag.name ? document.querySelector(`meta[name="${tag.name}"]`) : document.querySelector(`meta[property="${tag.property}"]`);
+      if (!element) {
+        element = document.createElement("meta");
+        if (tag.name) element.setAttribute("name", tag.name);
+        if (tag.property) element.setAttribute("property", tag.property);
+        document.head.appendChild(element);
+      }
+      element.setAttribute("content", tag.content);
+    });
+    let canonicalLink = document.querySelector('link[rel="canonical"]');
+    if (!canonicalLink) {
+      canonicalLink = document.createElement("link");
+      canonicalLink.setAttribute("rel", "canonical");
+      document.head.appendChild(canonicalLink);
+    }
+    canonicalLink.setAttribute("href", url);
+  }
+  async renderHomePage() {
+    let blogs = [];
+    let stories = [];
+    let homeContent = "";
+    try {
+      const [blogsRes, storiesRes, homeRes] = await Promise.all([
+        fetch(`${this.apiUrl}/api/blogs`),
+        fetch(`${this.apiUrl}/api/stories`),
+        fetch(`${this.apiUrl}/api/home`)
+      ]);
+      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);
+    }
+    const pageContent = generatePageContent("/", this.routes, this.footerLinks, {
+      blogs,
+      stories,
+      content: homeContent,
+      siteTitle: this.siteTitle,
+      copyright: this.copyright
+    });
+    if (this.appElement) this.appElement.innerHTML = pageContent.content;
+    this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+  }
+  renderAboutMePage() {
+    const pageContent = generatePageContent("/about-me", this.routes, this.footerLinks, {
+      siteTitle: this.siteTitle,
+      copyright: this.copyright,
+      apiUrl: this.apiUrl
+    });
+    if (this.appElement) this.appElement.innerHTML = pageContent.content;
+    this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+  }
+  async renderContentListPage(pathname) {
+    const type = pathname === "/blogs" ? "blogs" : "stories";
+    let items = [];
+    try {
+      const res = await fetch(`${this.apiUrl}/api/${type}`);
+      if (res.ok) items = await res.json();
+    } catch (e) {
+    }
+    const latestSlug = items.length > 0 ? items[0].slug : void 0;
+    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,
+      copyright: this.copyright
+    });
+    if (this.appElement) this.appElement.innerHTML = pageContent.content;
+    this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+  }
+  async renderContentDetailPage(pathname) {
+    const isBlog = pathname.startsWith("/blogs/");
+    const type = isBlog ? "blogs" : "stories";
+    const slug = pathname.replace(`/${type}/`, "").split("/")[0];
+    let items = [];
+    try {
+      const res = await fetch(`${this.apiUrl}/api/${type}`);
+      if (res.ok) items = await res.json();
+    } catch (e) {
+    }
+    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,
+      copyright: this.copyright
+    });
+    if (this.appElement) this.appElement.innerHTML = pageContent.content;
+    this.setPageMeta(`${slug.replace(/-/g, " ")} - ${this.siteTitle}`, "Read more content", window.location.href);
+  }
+  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}">
+          <theme-toggle slot="theme-switcher"></theme-toggle>
+          <nav slot="nav-links">
+            <a href="/" class="nav-link" data-route="home">Home</a>
+          </nav>
+        </my-banner>
+        <main class="container container-medium">
+          <admin-portal></admin-portal>
+        </main>
+        <my-footer copyright="${this.copyright}" footerLinks='${JSON.stringify(this.footerLinks)}'></my-footer>
+      `;
+    }
+  }
+}
+class WebsiteUI {
+  constructor(config = {}) {
+    this.router = null;
+    this.store = SiteStore.getInstance();
+    this.config = config;
+  }
+  static getInstance(config) {
+    if (!WebsiteUI.instance) {
+      WebsiteUI.instance = new WebsiteUI(config);
+    } else if (config) {
+      WebsiteUI.instance.config = { ...WebsiteUI.instance.config, ...config };
+    }
+    return WebsiteUI.instance;
+  }
+  async bootstrap() {
+    await this.store.init({
+      apiUrl: this.config.apiUrl,
+      baseUrl: this.config.baseUrl
+    });
+    this.store.subscribe(() => {
+      this.applyTheme();
+      this.updateFavicon();
+      if (this.router && window.location.pathname !== "/admin") {
+        this.router.navigate(window.location.pathname);
+      }
+    });
+    this.applyTheme();
+    this.updateFavicon();
+    this.router = new Router(this);
+    this.router.init(this.config.appElementId || "app");
+    if (this.config.onBootstrap) {
+      await this.config.onBootstrap(this);
+    }
+    console.log("WebsiteUI bootstrapped");
+  }
+  applyTheme() {
+    if (!this.config.theme) return;
+    const { theme } = this.config;
+    const root = document.documentElement;
+    if (theme.primaryColor) root.style.setProperty("--link-color", theme.primaryColor);
+    if (theme.backgroundColor) root.style.setProperty("--background-color", theme.backgroundColor);
+    if (theme.textColor) root.style.setProperty("--text-color", theme.textColor);
+    if (theme.customCss) {
+      const style = document.createElement("style");
+      style.textContent = theme.customCss;
+      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;
+  }
+  getConfig() {
+    return this.config;
+  }
+  getRouter() {
+    return this.router;
+  }
+}
+const bootstrap = (config) => WebsiteUI.getInstance(config).bootstrap();
+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>`;
+};
+export {
+  Router as R,
+  ThemeToggle as T,
+  WebsiteUI as W,
+  bootstrap as b,
+  createHtmlTemplate as c,
+  generatePageContent as g,
+  renderMarkdown as r
+};