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

package/src/prerender/website-prerender.ts

@@ -1,152 +0,0 @@
-import { createHtmlTemplate, TemplateProps } from './template';
-import { IFooterLink, IRoute, generatePageContent } from './page-content';
-
-export interface PrerenderOptions {
-  routes?: IRoute[];
-  defaultFooterLinks?: IFooterLink[];
-  siteTitle?: string;
-  copyright?: string;
-  templateRenderer?: (props: TemplateProps) => Promise<string> | string;
-}
-
-export class WebsitePrerender {
-  private routes: IRoute[];
-  private defaultFooterLinks: IFooterLink[];
-  private footerLinks: IFooterLink[];
-  private siteTitle: string;
-  private copyright: string;
-  private templateRenderer: (props: TemplateProps) => Promise<string> | string;
-
-  constructor(options: PrerenderOptions = {}) {
-    this.routes = options.routes || [
-      { link: '/', text: 'Home' },
-      { link: '/blogs', text: 'Blogs' },
-      { link: '/stories', text: 'Stories' },
-      { link: '/about-me', text: 'About Me' },
-    ];
-    this.defaultFooterLinks = options.defaultFooterLinks || [
-      { text: 'LinkedIn', link: 'https://linkedin.com/in/yourname' },
-      { text: 'GitHub', link: 'https://github.com/yourname' },
-      { text: 'Email', link: 'mailto:yourname@domain.com' },
-    ];
-    this.footerLinks = [...this.defaultFooterLinks];
-    this.siteTitle = options.siteTitle || 'My Personal Website';
-    this.copyright = options.copyright || '2026 My Personal Website';
-    this.templateRenderer = options.templateRenderer || createHtmlTemplate;
-  }
-
-  private async fetchStaticDetails(apiUrl: string) {
-    try {
-      const res = await fetch(`${apiUrl}/api/static`);
-      if (res.ok) {
-        const data = await res.json();
-        this.siteTitle = data.siteTitle || this.siteTitle;
-        this.copyright = data.copyright || this.copyright;
-        
-        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(data.linkedin) || this.defaultFooterLinks[0].link },
-          { text: 'GitHub', link: normalizeUrl(data.github) || this.defaultFooterLinks[1].link },
-          { text: 'Email', link: data.email ? `mailto:${data.email}` : this.defaultFooterLinks[2].link },
-        ];
-      }
-    } catch (e) {}
-  }
-
-  private async fetchAboutMeData(apiUrl: string): Promise<any> {
-    try {
-      const res = await fetch(`${apiUrl}/api/about-me`);
-      if (res.ok) return await res.json();
-    } catch (e) {}
-    return null;
-  }
-
-  public async fetch(request: Request, env: any, ctx: any): Promise<Response> {
-    const apiUrl = env?.API_URL || 'https://api.example.com';
-    const baseSiteUrl = env?.BASE_SITE_URL || 'https://site.example.com';
-
-    await this.fetchStaticDetails(apiUrl);
-    
-    const url = new URL(request.url);
-
-    if (url.pathname.startsWith('/api/')) {
-      return fetch(`${apiUrl}${url.pathname}${url.search}`);
-    }
-
-    if (url.pathname.startsWith('/images/')) {
-      const imageKey = url.pathname.slice(1);
-      try {
-        const image = await env.CONTENT_BUCKET.get(imageKey);
-        if (image) {
-          return new Response(image.body, {
-            headers: {
-              'content-type': image.httpMetadata?.contentType || 'image/jpeg',
-              'cache-control': 'public, max-age=86400',
-            },
-          });
-        }
-      } catch (e) {}
-      return new Response('Not found', { status: 404 });
-    }
-
-    if (url.pathname.startsWith('/assets/') || url.pathname === '/logo.png' || url.pathname === '/favicon.ico') {
-      const path = url.pathname;
-      const ext = path.split('.').pop()?.toLowerCase();
-      const contentTypes: Record<string, string> = {
-        js: 'application/javascript',
-        css: 'text/css',
-        png: 'image/png',
-        jpg: 'image/jpeg',
-        jpeg: 'image/jpeg',
-        gif: 'image/gif',
-        svg: 'image/svg+xml',
-        webp: 'image/webp',
-        ico: 'image/x-icon',
-      };
-      const contentType = contentTypes[ext || ''] || 'application/octet-stream';
-      
-      const response = await fetch(`${baseSiteUrl}${path}`);
-      if (response.ok) {
-        return new Response(response.body, {
-          headers: {
-            'content-type': contentType,
-            'cache-control': 'public, max-age=31536000',
-          },
-        });
-      }
-      return new Response('Not found', { status: 404 });
-    }
-
-    const PRERENDERED_DOMAINS = [
-      url.hostname
-    ];
-
-    if (!PRERENDERED_DOMAINS.includes(url.hostname) && !url.hostname.includes('localhost')) {
-      return fetch(request);
-    }
-
-    let hydrationScript = '';
-    if (url.pathname === '/about-me' || url.pathname === '/about-me/') {
-      const aboutMeData = await this.fetchAboutMeData(apiUrl);
-      if (aboutMeData) {
-        hydrationScript = `<script>window.__HYDRATION_DATA__ = ${JSON.stringify(aboutMeData)};</script>`;
-      }
-    }
-
-    const pageContent = await generatePageContent(url.pathname, this.routes, this.footerLinks, { ...env, apiUrl, siteTitle: this.siteTitle, copyright: this.copyright });
-    const html = await this.templateRenderer({ ...pageContent, hydrationData: hydrationScript });
-
-    return new Response(html, {
-      headers: {
-        'content-type': 'text/html',
-        'cache-control': 'public, max-age=60',
-      },
-    });
-  }
-}

package/src/shared/config/api.ts

@@ -1,16 +0,0 @@
-// API Configuration
-export const API_CONFIG = {
-  // Base URL for API calls
-  BASE_URL: (typeof window !== 'undefined' && (window as any).__VITE_API_URL__) || 
-    (typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : 'http://localhost:8787'),
-  
-  // API endpoints
-  ENDPOINTS: {
-    ABOUTME: '/aboutme'
-  },
-
-  // Build full URL for an endpoint
-  getUrl(endpoint: keyof typeof API_CONFIG.ENDPOINTS) {
-    return `${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS[endpoint]}`;
-  }
-};

package/src/shared/config/index.ts

@@ -1,41 +0,0 @@
-import { InfrastructureConfig, StaticDetails, WebsiteConfig } from './types';
-
-export * from './types';
-
-const DEFAULT_INFRA: InfrastructureConfig = {
-  baseUrl: typeof window !== 'undefined' ? window.location.origin : 'http://localhost:5173',
-  apiUrl: (typeof window !== 'undefined' && (window as any).__VITE_API_URL__) || 'http://localhost:8787'
-};
-
-const DEFAULT_STATIC: StaticDetails = {
-  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: WebsiteConfig = { ...DEFAULT_INFRA, ...DEFAULT_STATIC };
-
-export async function initializeConfig(infra?: Partial<InfrastructureConfig>): Promise<WebsiteConfig> {
-  if (infra) {
-    activeConfig = { ...activeConfig, ...infra };
-  }
-
-  try {
-    const res = await fetch(`${activeConfig.apiUrl}/api/static`);
-    if (res.ok) {
-      const remoteStatic = await res.json();
-      activeConfig = { ...activeConfig, ...remoteStatic };
-    }
-  } catch (e) {
-    console.warn('Failed to load static details from R2, using defaults.');
-  }
-
-  return activeConfig;
-}
-
-export function getConfig(): WebsiteConfig {
-  return activeConfig;
-}

package/src/shared/config/types.ts

@@ -1,16 +0,0 @@
-export interface InfrastructureConfig {
-  baseUrl: string;
-  apiUrl: string;
-}
-
-export interface StaticDetails {
-  siteTitle: string;
-  siteDescription: string;
-  copyright: string;
-  linkedin: string;
-  github: string;
-  email: string;
-  twitter?: string;
-}
-
-export interface WebsiteConfig extends InfrastructureConfig, StaticDetails {}

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;
-}