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

package/src/shared/page-content.ts

@@ -1,210 +0,0 @@
-import { IFooterLink } from './interfaces/ifooter-link';
-import { IRoute } from './interfaces/iroute';
-export type { IFooterLink, 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/router.ts

@@ -1,241 +0,0 @@
-import { generatePageContent, ContentMetadata, IFooterLink } from './page-content';
-import { IRoute } from './interfaces/iroute';
-import { WebsiteUI } from './website-ui';
-
-export class Router {
-  private routes: IRoute[];
-  private siteTitle: string;
-  private copyright: string;
-  private footerLinks: IFooterLink[];
-  private apiUrl: string;
-  private logo: string = '/api/logo';
-  private appElement: HTMLElement | null = null;
-
-  constructor(private ui: WebsiteUI) {
-    const store = ui.getStore();
-    const config = store.getConfig();
-    
-    // Default routes if not provided in bootstrap
-    this.routes = [
-      { link: '/', text: 'Home' },
-      { link: '/blogs', text: 'Blogs' },
-      { link: '/stories', text: 'Stories' },
-      { link: '/about-me', text: 'About Me' },
-    ];
-
-    this.siteTitle = config.siteTitle;
-    this.copyright = config.copyright;
-    this.apiUrl = config.apiUrl;
-    
-    const normalizeUrl = (url?: string) => {
-      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 !== '');
-  }
-
-  public init(appElementId: string = '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);
-  }
-
-  private setupEventListeners() {
-    document.body.addEventListener('click', (event) => {
-      const target = (event.target as HTMLElement).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);
-    });
-
-    // Search input handler
-    document.body.addEventListener('input', (event) => {
-      const target = event.target as HTMLInputElement;
-      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');
-          }
-        });
-      }
-    });
-  }
-
-  public async navigate(path: string) {
-    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(); // Fallback to home for now
-    }
-  }
-
-  private setPageMeta(title: string, description: string, url: string) {
-    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);
-  }
-
-  private async renderHomePage() {
-    let blogs: ContentMetadata[] = [];
-    let stories: ContentMetadata[] = [];
-    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) 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;
-    } 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);
-  }
-
-  private 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);
-  }
-
-  private async renderContentListPage(pathname: string) {
-    const type = pathname === '/blogs' ? 'blogs' : 'stories';
-    let items: ContentMetadata[] = [];
-    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 : undefined;
-    const data = type === 'blogs' ? { blogs: items, slug: latestSlug } : { stories: items, slug: latestSlug };
-    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);
-  }
-
-  private async renderContentDetailPage(pathname: string) {
-    const isBlog = pathname.startsWith('/blogs/');
-    const type = isBlog ? 'blogs' : 'stories';
-    const slug = pathname.replace(`/${type}/`, '').split('/')[0];
-    
-    let items: ContentMetadata[] = [];
-    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 } : { stories: items, slug };
-    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);
-  }
-
-  private async renderAdminPage() {
-    // Admin portal should be lazy loaded or integrated
-    const pageContent = 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='[]'></my-footer>
-      `;
-    }
-  }
-}

package/src/shared/runtime.ts

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

package/src/shared/template.ts

@@ -1,35 +0,0 @@
-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/shared/website-ui.ts

@@ -1,92 +0,0 @@
-import { SiteStore } from './core/site-store';
-import { IRoute } from './interfaces/iroute';
-import { Router } from './router';
-
-export interface UIConfig {
-  apiUrl?: string;
-  baseUrl?: string;
-  routes?: IRoute[];
-  appElementId?: string;
-  theme?: {
-    primaryColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    customCss?: string;
-  };
-  onBootstrap?: (ui: WebsiteUI) => void | Promise<void>;
-}
-
-export class WebsiteUI {
-  private static instance: WebsiteUI;
-  private store: SiteStore;
-  private config: UIConfig;
-  private router: Router | null = null;
-
-  private constructor(config: UIConfig = {}) {
-    this.store = SiteStore.getInstance();
-    this.config = config;
-  }
-
-  public static getInstance(config?: UIConfig): WebsiteUI {
-    if (!WebsiteUI.instance) {
-      WebsiteUI.instance = new WebsiteUI(config);
-    } else if (config) {
-      // Merge config if provided on existing instance
-      WebsiteUI.instance.config = { ...WebsiteUI.instance.config, ...config };
-    }
-    return WebsiteUI.instance;
-  }
-
-  public async bootstrap() {
-    // 1. Initialize SiteStore with infra config
-    await this.store.init({
-      apiUrl: this.config.apiUrl,
-      baseUrl: this.config.baseUrl
-    });
-
-    // 2. Apply theme overrides if any
-    this.applyTheme();
-
-    // 3. Setup Router
-    this.router = new Router(this);
-    this.router.init(this.config.appElementId || 'app');
-    
-    // 4. Run bootstrap hook
-    if (this.config.onBootstrap) {
-      await this.config.onBootstrap(this);
-    }
-
-    console.log('WebsiteUI bootstrapped');
-  }
-
-  private 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);
-    }
-  }
-
-  public getStore() {
-    return this.store;
-  }
-
-  public getConfig() {
-    return this.config;
-  }
-
-  public getRouter() {
-    return this.router;
-  }
-}
-
-export const bootstrap = (config?: UIConfig) => WebsiteUI.getInstance(config).bootstrap();