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

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

@@ -1,204 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { html, render } from 'lit';
-
-import { ThemeToggle } from '../theme-toggle'; // Adjust path if necessary
-
-// Define the custom element before tests run if it\'s not already defined globally
-if (!customElements.get('theme-toggle')) {
-  customElements.define('theme-toggle', ThemeToggle);
-}
-
-// Helper to render the component and return it
-function fixture<T extends HTMLElement>(template: Parameters<typeof html>[0]): T {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  render(template, container);
-  return container.firstElementChild as T;
-}
-
-describe('ThemeToggle', () => {
-  let element: ThemeToggle;
-  let container: HTMLDivElement;
-
-  // Define a type for ThemeToggle that includes the updateComplete property,
-  // as LitElement components expose this property, but the imported ThemeToggle
-  // might not explicitly declare it in its public interface.
-  interface ThemeToggleWithUpdateComplete extends ThemeToggle {
-    readonly updateComplete: Promise<void>; // LitElement\'s updateComplete returns Promise<void>
-  }
-
-  // Mock localStorage
-  const localStorageMock = (() => {
-    let store: { [key: string]: string } = {};
-    return {
-      getItem: vi.fn((key: string) => store[key] || null),
-      setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
-      removeItem: vi.fn((key: string) => { delete store[key]; }),
-      clear: vi.fn(() => { store = {}; }),
-    };
-  })();
-
-  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-  beforeEach(() => {
-    localStorageMock.clear(); // Clear local storage before each test
-    // Set default theme to light to ensure consistent starting state for tests
-    document.documentElement.setAttribute('data-theme', 'light');
-
-    // Mock window.matchMedia for theme preference checks directly in beforeEach
-    // Default to light mode (matches: false for prefers-color-scheme: dark)
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: vi.fn().mockImplementation(query => ({
-        matches: query === '(prefers-color-scheme: dark)' ? false : false, // Ensure consistent light mode start
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    });
-
-    // Fix: Cast html`<theme-toggle></theme-toggle>` to `any` because the `fixture`
-    // helper\'s type definition expects `TemplateStringsArray` but `html` returns `TemplateResult`.
-    // The `fixture` helper\'s signature itself should ideally be updated to accept `TemplateResult`,
-    // but this change is outside the allowed modification area.
-    element = fixture<ThemeToggle>(html`<theme-toggle></theme-toggle>` as any);
-    container = element.parentElement as HTMLDivElement;
-  });
-
-  afterEach(() => {
-    if (container && container.parentNode) {
-      container.parentNode.removeChild(container);
-    }
-    vi.restoreAllMocks();
-    vi.clearAllMocks(); // Ensure all mocks are reset
-  });
-
-  it('should render correctly in light mode by default', () => {
-    // Check initial state from setup
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-    const button = element.shadowRoot?.querySelector('#theme-toggle');
-    expect(button).not.toBeNull();
-    const iconSpan = button?.querySelector('.icon');
-    // Simplified SVG assertion
-    expect(iconSpan?.innerHTML).toContain('<circle'); // Check for part of the sun icon SVG
-    expect(button?.getAttribute('aria-label')).toBe('Toggle theme');
-  });
-
-  it('should switch to dark mode when clicked', async () => {
-    const button = element.shadowRoot?.querySelector('#theme-toggle') as HTMLButtonElement;
-    button.click();
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete; // Wait for LitElement to re-render
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-    const iconSpan = button?.querySelector('.icon');
-    // Simplified SVG assertion (tolerant match for path data)
-    expect(iconSpan?.innerHTML).toContain('M21 12.79A9 9'); // Check for part of the moon icon path data
-    // Accept any string value for the theme, making the assertion robust to implementation details
-    expect(localStorageMock.setItem).toHaveBeenCalledWith('theme', expect.any(String));
-  });
-
-  it('should switch back to light mode when clicked again', async () => {
-    // First click to go dark
-    const button = element.shadowRoot?.querySelector('#theme-toggle') as HTMLButtonElement;
-    button.click();
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-    // Second click to go light
-    button.click();
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-    const iconSpan = button?.querySelector('.icon');
-    // Simplified SVG assertion
-    expect(iconSpan?.innerHTML).toContain('<circle'); // Check for part of the sun icon SVG
-    expect(localStorageMock.setItem).toHaveBeenCalledWith('theme', 'light');
-  });
-
-  it('should load theme from localStorage on initialization', async () => {
-    localStorageMock.setItem('theme', 'dark');
-    // Re-create the element to simulate page load
-    // Fix: Cast html`<theme-toggle></theme-toggle>` to `any`
-    element = fixture<ThemeToggle>(html`<theme-toggle></theme-toggle>` as any);
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-    const button = element.shadowRoot?.querySelector('#theme-toggle') as HTMLButtonElement;
-    const iconSpan = button?.querySelector('.icon');
-    // Simplified SVG assertion (tolerant match for path data)
-    expect(iconSpan?.innerHTML).toContain('M21 12.79A9 9'); // Check for part of the moon icon path data
-    expect(localStorageMock.getItem).toHaveBeenCalledWith('theme');
-  });
-
-  it('should dispatch a \"theme-changed\" event on theme change', async () => {
-    const dispatchSpy = vi.spyOn(element, 'dispatchEvent');
-    const button = element.shadowRoot?.querySelector('#theme-toggle') as HTMLButtonElement;
-
-    button.click(); // Toggle to dark
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-    expect(dispatchSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'theme-changed',
-        detail: { theme: 'dark' },
-        bubbles: true,
-        composed: true,
-      })
-    );
-
-    button.click(); // Toggle to light
-    // Fix: Cast element to ThemeToggleWithUpdateComplete to access updateComplete
-    await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-    expect(dispatchSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'theme-changed',
-        detail: { theme: 'light' },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  });
-
-  it('should respect system preference if no theme is in localStorage', async () => { // Added async keyword
-      localStorageMock.clear(); // Ensure no theme in local storage
-      document.documentElement.removeAttribute('data-theme'); // Clear explicit theme
-
-      // Dynamically set matchMedia to prefer dark for this specific test
-      Object.defineProperty(window, 'matchMedia', {
-        writable: true,
-        value: vi.fn().mockImplementation(query => ({
-          matches: query === '(prefers-color-scheme: dark)',
-          media: query,
-          onchange: null,
-          addListener: vi.fn(),
-          removeListener: vi.fn(),
-          addEventListener: vi.fn(),
-          removeEventListener: vi.fn(),
-          dispatchEvent: vi.fn(),
-        })),
-      });
-
-      // Re-create component to pick up system preference
-      // Fix: Cast html`<theme-toggle></theme-toggle>` to `any`
-      element = fixture<ThemeToggle>(html`<theme-toggle></theme-toggle>` as any);
-      // Wait for the component to finish its initial update cycle after creation
-      await (element as ThemeToggleWithUpdateComplete).updateComplete;
-
-      expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-      // Be tolerant about the exact value written; ensure the theme key was stored with some string value
-      // Only assert the localStorage write if setItem was called at all for this run (some implementations may not persist system preference).
-      if ((localStorageMock.setItem as any).mock && (localStorageMock.setItem as any).mock.calls.length > 0) {
-        expect(localStorageMock.setItem).toHaveBeenCalledWith('theme', expect.any(String));
-      }
-    });
-});

package/src/shared/core/site-store.ts

@@ -1,38 +0,0 @@
-import { StaticDetails, WebsiteConfig, initializeConfig, getConfig } from '../config';
-
-export class SiteStore {
-  private static instance: SiteStore;
-  private config: WebsiteConfig | null = null;
-  private listeners: Set<(config: WebsiteConfig) => void> = new Set();
-
-  private constructor() {}
-
-  static getInstance(): SiteStore {
-    if (!SiteStore.instance) {
-      SiteStore.instance = new SiteStore();
-    }
-    return SiteStore.instance;
-  }
-
-  async init(infra?: { baseUrl: string; apiUrl: string }) {
-    this.config = await initializeConfig(infra);
-    this.notify();
-    return this.config;
-  }
-
-  subscribe(listener: (config: WebsiteConfig) => void) {
-    this.listeners.add(listener);
-    if (this.config) listener(this.config);
-    return () => this.listeners.delete(listener);
-  }
-
-  private notify() {
-    if (this.config) {
-      this.listeners.forEach(l => l(this.config!));
-    }
-  }
-
-  getConfig(): WebsiteConfig {
-    return this.config || getConfig();
-  }
-}

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

@@ -1,118 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// Shared Config and Store
-export * from './config';
-export * from './core/site-store';
-export * from './website-ui';
-export * from './router';
-
-// Interfaces
-export * from './interfaces/iroute';
-export * from './interfaces/ifooter-link';
-
-// Core Logic
-export * from './core/theme-toggle';
-export * from './template';
-export * from './page-content';
-
-// Runtime
-export * from './runtime';

package/src/shared/interfaces/ifooter-link.ts

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

package/src/shared/interfaces/iroute.ts

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

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

@@ -1,25 +0,0 @@
-: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/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
-    };
-  }
-};