@leadertechie/personal-site-kit 0.0.0

package/src/shared/core/theme-toggle.ts

@@ -0,0 +1,118 @@
+export class ThemeToggle extends HTMLElement {
+  constructor() {
+    super();
+    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');
+    }
+  }
+
+  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);
+  };
+
+  updateToggleButton(theme: string) {
+    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(): string {
+    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(): string {
+    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: string) {
+    const event = new CustomEvent('theme-changed', {
+      detail: { theme: theme },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+customElements.define('theme-toggle', ThemeToggle);

package/src/shared/index.ts

@@ -0,0 +1,15 @@
+// Shared Config and Store
+export * from './config';
+export * from './core/site-store';
+
+// Interfaces
+export * from './interfaces/iRoute';
+export * from './interfaces/iFooterLink';
+
+// Core Logic
+export * from './core/theme-toggle';
+export * from './template';
+export * from './pageContent';
+
+// Runtime
+export * from './runtime';

package/src/shared/interfaces/iFooterLink.ts

@@ -0,0 +1,4 @@
+export interface IFooterLink {
+  text: string;
+  link: string;
+}

package/src/shared/interfaces/iRoute.ts

@@ -0,0 +1,4 @@
+export interface IRoute {
+  text: string;
+  link: string;
+}

package/src/shared/models/theme-variables.css

@@ -0,0 +1,25 @@
+:root {
+  /* Light Theme Variables */
+  --text-color: #213547;
+  --background-color: #ffffff;
+  --link-color: #646cff;
+  --link-hover-color: #747bff;
+  --nav-link-color: #007bff;
+  --nav-link-hover-bg: #e2e6ea;
+  --footer-bg: #fff;
+  --footer-color: #222;
+  --footer-border: #eee;
+}
+
+/* Dark Theme Variables */
+html[data-theme='dark'] {
+  --text-color: rgba(255, 255, 255, 0.87);
+  --background-color: #242424;
+  --link-color: #646cff;
+  --link-hover-color: #535bf2;
+  --nav-link-color: #007bff; /* Can be adjusted for better contrast in dark mode */
+  --nav-link-hover-bg: #4a4a4a;
+  --footer-bg: #222;
+  --footer-color: #fff;
+  --footer-border: #444;
+}

package/src/shared/pageContent.ts

@@ -0,0 +1,209 @@
+import { IFooterLink } from './interfaces/iFooterLink';
+import { IRoute } from './interfaces/iRoute';
+import { MarkdownPipeline } from '@leadertechie/md2html';
+
+export interface PageContent {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  content: string;
+}
+
+export interface ContentMetadata {
+  slug: string;
+  title: string;
+  description?: string;
+  summary?: string;
+  date: string;
+  imageUrl?: string;
+  tags?: string[];
+  author?: string;
+}
+
+const pipeline = new MarkdownPipeline({
+  imagePathPrefix: 'images/',
+  styleOptions: {
+    classPrefix: 'md-',
+    addHeadingIds: true
+  }
+});
+
+export const renderMarkdown = (content: string): string => {
+  if (!content) return '';
+  return pipeline.renderMarkdown(content);
+};
+
+export const generatePageContent = (
+  pathname: string,
+  routes: IRoute[],
+  footerLinks: IFooterLink[],
+  data?: {
+    blogs?: ContentMetadata[];
+    stories?: ContentMetadata[];
+    profile?: any;
+    content?: string;
+    title?: string;
+    description?: string;
+    date?: string;
+    slug?: string;
+    siteTitle?: string;
+    siteDescription?: string;
+    copyright?: string;
+    apiUrl?: string;
+    baseUrl?: string;
+  }
+): PageContent => {
+  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: ContentMetadata[] = [], title: string, type: 'blogs' | 'stories') => {
+    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
+    };
+  }
+};

package/src/shared/runtime.ts

@@ -0,0 +1,11 @@
+// Runtime-only exports for Cloudflare Workers (no DOM/web components)
+export * from './interfaces/iRoute';
+export * from './interfaces/iFooterLink';
+export * from './pageContent';
+
+// Core utilities and types (DOM-free)
+export type { IRoute } from './interfaces/iRoute';
+export type { IFooterLink } from './interfaces/iFooterLink';
+
+// Page content generation utilities
+export { generatePageContent } from './pageContent';

package/src/shared/styles/markdown.css

@@ -0,0 +1,129 @@
+/* Markdown Content Styles */
+
+.md-heading {
+  margin: 1.5rem 0 0.75rem 0;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-color, #213547);
+}
+
+.md-heading h1 { font-size: 2rem; }
+.md-heading h2 { font-size: 1.5rem; }
+.md-heading h3 { font-size: 1.25rem; }
+.md-heading h4 { font-size: 1.1rem; }
+.md-heading h5, .md-heading h6 { font-size: 1rem; }
+
+.md-paragraph {
+  margin: 0 0 1rem 0;
+  line-height: 1.7;
+  color: var(--text-color, #213547);
+}
+
+.md-list {
+  margin: 0 0 1rem 0;
+  padding-left: 1.5rem;
+}
+
+.md-list-item {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+.md-blockquote {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 4px solid var(--link-color, #646cff);
+  background: var(--nav-link-hover-bg, #f8f9fa);
+  border-radius: 0 8px 8px 0;
+  color: var(--secondary-text, #666);
+}
+
+.md-blockquote .md-paragraph {
+  margin: 0;
+}
+
+.md-code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  font-size: 0.9em;
+  background: var(--nav-link-hover-bg, #f5f5f5);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+}
+
+.md-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1rem 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.md-container {
+  margin: 1rem 0;
+}
+
+.md-container hr {
+  border: none;
+  height: 2px;
+  background: var(--border-color, #eee);
+  margin: 2rem 0;
+  border-radius: 1px;
+}
+
+.md-container[tag="hr"] {
+  margin: 2rem 0;
+}
+
+/* Links within markdown content */
+.md-paragraph a,
+.md-list-item a {
+  color: var(--link-color, #646cff);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.md-paragraph a:hover,
+.md-list-item a:hover {
+  color: var(--link-hover-color, #535bf2);
+  text-decoration: underline;
+}
+
+/* Strong and emphasis */
+.md-paragraph strong,
+.md-list-item strong {
+  font-weight: 600;
+  color: var(--text-color, #1a1a1a);
+}
+
+.md-paragraph em,
+.md-list-item em {
+  font-style: italic;
+}
+
+/* Tables (if supported) */
+.md-container table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.md-container th,
+.md-container td {
+  padding: 0.75rem;
+  border: 1px solid var(--border-color, #ddd);
+  text-align: left;
+}
+
+.md-container th {
+  background: var(--nav-link-hover-bg, #f5f5f5);
+  font-weight: 600;
+}
+
+/* Dark theme adjustments */
+html[data-theme="dark"] .md-code {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="dark"] .md-container th {
+  background: rgba(255, 255, 255, 0.05);
+}

package/src/shared/template.ts

@@ -0,0 +1,35 @@
+export interface TemplateProps {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  content: string;
+}
+
+export const createHtmlTemplate = ({
+  title,
+  description,
+  canonicalUrl,
+  content
+}: TemplateProps): string => {
+  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>`;
+};

package/src/styles/markdown.css

@@ -0,0 +1,129 @@
+/* Markdown Content Styles */
+
+.md-heading {
+  margin: 1.5rem 0 0.75rem 0;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-color, #213547);
+}
+
+.md-heading h1 { font-size: 2rem; }
+.md-heading h2 { font-size: 1.5rem; }
+.md-heading h3 { font-size: 1.25rem; }
+.md-heading h4 { font-size: 1.1rem; }
+.md-heading h5, .md-heading h6 { font-size: 1rem; }
+
+.md-paragraph {
+  margin: 0 0 1rem 0;
+  line-height: 1.7;
+  color: var(--text-color, #213547);
+}
+
+.md-list {
+  margin: 0 0 1rem 0;
+  padding-left: 1.5rem;
+}
+
+.md-list-item {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+.md-blockquote {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 4px solid var(--link-color, #646cff);
+  background: var(--nav-link-hover-bg, #f8f9fa);
+  border-radius: 0 8px 8px 0;
+  color: var(--secondary-text, #666);
+}
+
+.md-blockquote .md-paragraph {
+  margin: 0;
+}
+
+.md-code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  font-size: 0.9em;
+  background: var(--nav-link-hover-bg, #f5f5f5);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+}
+
+.md-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1rem 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.md-container {
+  margin: 1rem 0;
+}
+
+.md-container hr {
+  border: none;
+  height: 2px;
+  background: var(--border-color, #eee);
+  margin: 2rem 0;
+  border-radius: 1px;
+}
+
+.md-container[tag="hr"] {
+  margin: 2rem 0;
+}
+
+/* Links within markdown content */
+.md-paragraph a,
+.md-list-item a {
+  color: var(--link-color, #646cff);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.md-paragraph a:hover,
+.md-list-item a:hover {
+  color: var(--link-hover-color, #535bf2);
+  text-decoration: underline;
+}
+
+/* Strong and emphasis */
+.md-paragraph strong,
+.md-list-item strong {
+  font-weight: 600;
+  color: var(--text-color, #1a1a1a);
+}
+
+.md-paragraph em,
+.md-list-item em {
+  font-style: italic;
+}
+
+/* Tables (if supported) */
+.md-container table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.md-container th,
+.md-container td {
+  padding: 0.75rem;
+  border: 1px solid var(--border-color, #ddd);
+  text-align: left;
+}
+
+.md-container th {
+  background: var(--nav-link-hover-bg, #f5f5f5);
+  font-weight: 600;
+}
+
+/* Dark theme adjustments */
+html[data-theme="dark"] .md-code {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="dark"] .md-container th {
+  background: rgba(255, 255, 255, 0.05);
+}