@leadertechie/personal-site-kit 0.1.0-alpha.8 → 0.1.0-alpha.9

package/src/shared/router.ts

@@ -1,250 +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) || 'https://linkedin.com' },
-      { text: 'GitHub', link: normalizeUrl(config.github) || 'https://github.com' },
-      { text: 'Email', link: config.email ? `mailto:${config.email}` : 'mailto:hello@example.com' },
-    ];
-  }
-
-  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) {
-        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);
-  }
-
-  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();

package/src/styles/markdown.css

@@ -1,129 +0,0 @@
-/* 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/ui/about-me/api.ts

@@ -1,12 +0,0 @@
-export interface Profile {
-  name: string;
-  title: string;
-  experience: string;
-  profileImageUrl?: string;
-}
-
-export async function fetchAboutMe(url: string): Promise<{ profile: Profile; contentNodes: any[] }> {
-  const res = await fetch(`${url}/api/aboutme`);
-  if (!res.ok) throw new Error('Failed to fetch');
-  return res.json();
-}

package/src/ui/about-me/index.ts

@@ -1,121 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-import { Profile } from './api';
-import { aboutmeStyles } from './styles';
-import { fetchAboutMe } from './api';
-
-@customElement('my-aboutme')
-export class MyAboutme extends LitElement {
-  static styles = aboutmeStyles;
-
-  @property({ type: String })
-  accessor baseUrl = '';
-
-  @state()
-  accessor profile: Profile | null = null;
-
-  @state()
-  accessor htmlContent: string = '';
-
-  @state()
-  accessor loading = true;
-
-  public fetcher = fetchAboutMe;
-
-  constructor() {
-    super();
-  }
-
-  private get apiBaseUrl(): string {
-    return this.baseUrl || this.getAttribute('base-url') || '';
-  }
-
-  async connectedCallback() {
-    super.connectedCallback();
-
-    if (typeof window !== 'undefined' && (window as any).__HYDRATION_DATA__) {
-      const hydrationData = (window as any).__HYDRATION_DATA__;
-      this.profile = hydrationData.profile;
-      this.htmlContent = hydrationData.processedMarkdown;
-      this.loading = false;
-      return;
-    }
-
-    this.loadContent();
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    
-    if (this.loading === false && this.profile && this.htmlContent) {
-      return;
-    }
-    
-    if (changedProperties.has('baseUrl') || changedProperties.has('base-url')) {
-      this.loadContent();
-    }
-  }
-
-  private async loadContent() {
-    const url = this.apiBaseUrl;
-    if (!url) {
-      this.loading = false;
-      this.setFallbackContent();
-      return;
-    }
-
-    try {
-      this.loading = true;
-      const data = await this.fetcher(url);
-
-      this.profile = data.profile;
-      this.htmlContent = (data as any).processedMarkdown;
-      this.loading = false;
-      await this.updateComplete;
-    } catch (error) {
-      this.loading = false;
-      this.setFallbackContent();
-      await this.updateComplete;
-    }
-  }
-
-  private setFallbackContent() {
-    this.profile = null;
-    this.htmlContent = `
-      <h2>Profile Not Found</h2>
-      <p>Your about-me profile has not been initialized yet. Please run the seed command to get started:</p>
-      <pre>npm run seed -- &lt;username&gt; '&lt;password&gt;'</pre>
-    `;
-  }
-
-  render() {
-    if (this.loading) {
-      return html`<div class="aboutme"><div class="loading">Loading...</div></div>`;
-    }
-
-    if (!this.profile) {
-      return html`<div class="aboutme"><div class="content-section" .innerHTML="${this.htmlContent}"></div></div>`;
-    }
-
-    const profileImageUrl = this.profile.profileImageUrl 
-      ? (this.profile.profileImageUrl.startsWith('http') || this.profile.profileImageUrl.startsWith('/') 
-         ? this.profile.profileImageUrl 
-         : `images/${this.profile.profileImageUrl}`)
-      : '';
-    
-    return html`
-      <div class="aboutme">
-        <div class="profile-section">
-          ${profileImageUrl ? html`
-            <img src="${profileImageUrl}" alt="${this.profile.name}" 
-                 class="profile-picture">
-          ` : ''}
-          <h1>${this.profile.name}</h1>
-          <p class="profile-title">${this.profile.title} • ${this.profile.experience}</p>
-        </div>
-        <div class="content-section" .innerHTML="${this.htmlContent}"></div>
-      </div>
-    `;
-  }
-}