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

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@leadertechie/personal-site-kit",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.2",
   "type": "module",
   "description": "A high-performance personal website engine for Cloudflare Workers and R2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leadertechie/personal-site-kit"
+  },
   "author": "Techie Leader",
   "license": "MIT",
   "files": [
@@ -37,5 +41,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "overrides": {
+    "lodash": "^4.18.1"
   }
 }

package/src/api/index.ts

@@ -1,125 +1,7 @@
-export default {
-  async fetch(request: Request, env?: Env): Promise<Response> {
-    const url = new URL(request.url);
+import { WebsiteAPI } from './website-api';
+export { WebsiteAPI };
+export type { APIHandler } from './website-api';
 
-    // Handle CORS preflight requests
-    if (request.method === 'OPTIONS') {
-      return handleCORS();
-    }
-
-    // Extract route from pathname, removing leading/trailing slashes and /api prefix
-    const pathname = url.pathname;
-    const route = pathname
-      .replace(/^\/api\//, '') // Remove /api/ prefix if present
-      .replace(/^\//, '') // Remove leading slash
-      .replace(/\/+$/, ''); // Remove trailing slashes
-
-    return handleAPIRoute(route, request, env);
-
-  },
-};
-
-function handleCORS(): Response {
-  return new Response(null, {
-    status: 200,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-      'Access-Control-Max-Age': '86400',
-    },
-  });
-}
-
-function addCORSHeaders(response: Response): Response {
-  response.headers.set('Access-Control-Allow-Origin', '*');
-  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
-  return response;
-}
-
-import { createErrorResponse } from './utils';
-
-import { handleAboutMe, clearContentCache } from './handlers/aboutme';
-import { handleHome } from './handlers/home';
-import { handleInfo } from './handlers/info';
-import { handleContent } from './handlers/content';
-import { handleBlogs, handleStories, handleSearch } from './handlers/content-api';
-import { handleLogo } from './handlers/logo';
-import { handleStaticDetails } from './handlers/staticdetails';
-
-function requireAuth(request: Request, env?: Env): Response | null {
-  const authHeader = request.headers.get('Authorization');
-  if (!authHeader || !authHeader.startsWith('Bearer ')) {
-    return createErrorResponse('Unauthorized', 401);
-  }
-  const token = authHeader.slice(7);
-  if (token !== env?.ADMIN_API_KEY) {
-    return createErrorResponse('Unauthorized', 401);
-  }
-  return null;
-}
-
-async function handleAPIRoute(route: string, request: Request, env?: Env): Promise<Response> {
-  try {
-    // Check for content route first (content/*)
-    if (route === 'content' || route.startsWith('content/')) {
-      const subpath = route.replace(/^content\/?/, '');
-      return addCORSHeaders(await handleContent(request, env, subpath));
-    }
-
-    switch (route) {
-      case 'info':
-        return addCORSHeaders(await handleInfo());
-      case 'home':
-        return addCORSHeaders(await handleHome(env));
-      case 'cache-clear':
-        const authError = requireAuth(request, env);
-        if (authError) return addCORSHeaders(authError);
-        clearContentCache();
-        return addCORSHeaders(new Response(JSON.stringify({ success: true, message: 'Cache cleared' }), { status: 200 }));
-      case 'aboutme':
-        return addCORSHeaders(await handleAboutMe(env));
-      case 'logo':
-        return addCORSHeaders(await handleLogo(env));
-      case 'static':
-        return addCORSHeaders(await handleStaticDetails(env));
-      case 'blogs':
-        return addCORSHeaders(await handleBlogs(env));
-      case 'blogs/latest':
-        const url = new URL(request.url);
-        const latestCount = url.searchParams.get('count');
-        return addCORSHeaders(await handleBlogs(env, undefined, latestCount ? parseInt(latestCount) : 5));
-      default:
-        if (route.startsWith('blogs/')) {
-          const slug = route.replace('blogs/', '');
-          return addCORSHeaders(await handleBlogs(env, slug));
-        }
-        if (route.startsWith('stories')) {
-          if (route === 'stories') {
-            return addCORSHeaders(await handleStories(env));
-          }
-          if (route === 'stories/latest') {
-            const url = new URL(request.url);
-            const latestCount = url.searchParams.get('count');
-            return addCORSHeaders(await handleStories(env, undefined, latestCount ? parseInt(latestCount) : 5));
-          }
-          const slug = route.replace('stories/', '');
-          return addCORSHeaders(await handleStories(env, slug));
-        }
-        if (route === 'search') {
-          const url = new URL(request.url);
-          const query = url.searchParams.get('q');
-          return addCORSHeaders(await handleSearch(env, query || undefined));
-        }
-        return addCORSHeaders(createErrorResponse('Route not found', 404));
-    }
-  } catch (error) {
-    return addCORSHeaders(createErrorResponse('Internal server error', 500));
-  }
-}
-
-interface Env {
-  CONTENT_BUCKET?: any; // R2Bucket type not strictly enforced here to avoid large diff
-  ADMIN_API_KEY?: string;
-}
+// Default worker export using WebsiteAPI
+const defaultAPI = new WebsiteAPI();
+export default defaultAPI;

package/src/api/website-api.ts

@@ -0,0 +1,124 @@
+import { createErrorResponse } from './utils';
+import { handleAboutMe, clearContentCache } from './handlers/about-me';
+import { handleHome } from './handlers/home';
+import { handleInfo } from './handlers/info';
+import { handleContent } from './handlers/content';
+import { handleBlogs, handleStories, handleSearch } from './handlers/content-api';
+import { handleLogo } from './handlers/logo';
+import { handleStaticDetails } from './handlers/static-details';
+
+export type APIHandler = (request: Request, env: any) => Promise<Response>;
+
+export class WebsiteAPI {
+  private customHandlers = new Map<string, APIHandler>();
+
+  public registerHandler(route: string, handler: APIHandler) {
+    this.customHandlers.set(route, handler);
+  }
+
+  private addCORSHeaders(response: Response): Response {
+    response.headers.set('Access-Control-Allow-Origin', '*' );
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS' );
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    return response;
+  }
+
+  private handleCORS(): Response {
+    return new Response(null, {
+      status: 200,
+      headers: {
+        'Access-Control-Allow-Origin': '*' ,
+        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS' ,
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        'Access-Control-Max-Age': '86400',
+      },
+    });
+  }
+
+  private requireAuth(request: Request, env?: any): Response | null {
+    const authHeader = request.headers.get('Authorization');
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return createErrorResponse('Unauthorized', 401);
+    }
+    const token = authHeader.slice(7);
+    if (token !== env?.ADMIN_API_KEY) {
+      return createErrorResponse('Unauthorized', 401);
+    }
+    return null;
+  }
+
+  public async fetch(request: Request, env: any): Promise<Response> {
+    const url = new URL(request.url);
+
+    if (request.method === 'OPTIONS') {
+      return this.handleCORS();
+    }
+
+    const pathname = url.pathname;
+    const route = pathname
+      .replace(/^\/api\//, '')
+      .replace(/^\//, '')
+      .replace(/\/+$/, '');
+
+    // Check custom handlers first
+    if (this.customHandlers.has(route)) {
+      const handler = this.customHandlers.get(route)!;
+      return this.addCORSHeaders(await handler(request, env));
+    }
+
+    try {
+      // Check for content route first (content/*)
+      if (route === 'content' || route.startsWith('content/')) {
+        const subpath = route.replace(/^content\/?/, '');
+        return this.addCORSHeaders(await handleContent(request, env, subpath));
+      }
+
+      switch (route) {
+        case 'info':
+          return this.addCORSHeaders(await handleInfo());
+        case 'home':
+          return this.addCORSHeaders(await handleHome(env));
+        case 'cache-clear':
+          const authError = this.requireAuth(request, env);
+          if (authError) return this.addCORSHeaders(authError);
+          clearContentCache();
+          return this.addCORSHeaders(new Response(JSON.stringify({ success: true, message: 'Cache cleared' }), { status: 200 }));
+        case 'aboutme':
+          return this.addCORSHeaders(await handleAboutMe(env));
+        case 'logo':
+          return this.addCORSHeaders(await handleLogo(env));
+        case 'static':
+          return this.addCORSHeaders(await handleStaticDetails(env));
+        case 'blogs':
+          return this.addCORSHeaders(await handleBlogs(env));
+        case 'blogs/latest':
+          const latestCount = url.searchParams.get('count');
+          return this.addCORSHeaders(await handleBlogs(env, undefined, latestCount ? parseInt(latestCount) : 5));
+        default:
+          if (route.startsWith('blogs/')) {
+            const slug = route.replace('blogs/', '');
+            return this.addCORSHeaders(await handleBlogs(env, slug));
+          }
+          if (route.startsWith('stories')) {
+            if (route === 'stories') {
+              return this.addCORSHeaders(await handleStories(env));
+            }
+            if (route === 'stories/latest') {
+              const latestCount = url.searchParams.get('count');
+              return this.addCORSHeaders(await handleStories(env, undefined, latestCount ? parseInt(latestCount) : 5));
+            }
+            const slug = route.replace('stories/', '');
+            return this.addCORSHeaders(await handleStories(env, slug));
+          }
+          if (route === 'search') {
+            const query = url.searchParams.get('q');
+            return this.addCORSHeaders(await handleSearch(env, query || undefined));
+          }
+          return this.addCORSHeaders(createErrorResponse('Route not found', 404));
+      }
+    } catch (error) {
+      console.error('API Error:', error);
+      return this.addCORSHeaders(createErrorResponse('Internal server error', 500));
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './api';
+export * from './prerender';
+export * from './ui';
+export * from './shared';

package/src/prerender/__tests__/{pageContent.test.ts → page-content.test.ts}

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { generatePageContent } from '../pageContent';
+import { generatePageContent } from '../page-content';
 
 describe('generatePageContent', () => {
   const mockRoutes = [

package/src/prerender/index.ts

@@ -1,138 +1,7 @@
-import { createHtmlTemplate, TemplateProps } from "./template";
+import { WebsitePrerender } from './website-prerender';
+export { WebsitePrerender };
+export type { PrerenderOptions } from './website-prerender';
 
-import { IFooterLink, IRoute, generatePageContent } from "./pageContent";
-
-const routes: IRoute[] = [
-  { link: "/", text: "Home" },
-  { link: "/blogs", text: "Blogs" },
-  { link: "/stories", text: "Stories" },
-  { link: "/about-me", text: "About Me" },
-];
-
-// Default footer links (fallback)
-const defaultFooterLinks: IFooterLink[] = [
-  { text: "LinkedIn", link: "https://linkedin.com/in/yourname" },
-  { text: "GitHub", link: "https://github.com/yourname" },
-  { text: "Email", link: "mailto:yourname@domain.com" },
-];
-
-let footerLinks: IFooterLink[] = defaultFooterLinks;
-let siteTitle = "My Personal Website";
-let copyright = "2026 My Personal Website";
-
-async function fetchStaticDetails(apiUrl: string) {
-  try {
-    const res = await fetch(`${apiUrl}/api/static`);
-    if (res.ok) {
-      const data = await res.json();
-      siteTitle = data.siteTitle || siteTitle;
-      copyright = data.copyright || 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;
-      };
-      
-      footerLinks = [
-        { text: "LinkedIn", link: normalizeUrl(data.linkedin) || defaultFooterLinks[0].link },
-        { text: "GitHub", link: normalizeUrl(data.github) || defaultFooterLinks[1].link },
-        { text: "Email", link: data.email ? `mailto:${data.email}` : defaultFooterLinks[2].link },
-      ];
-    }
-  } catch (e) {}
-}
-
-async function fetchAboutMeData(apiUrl: string): Promise<any> {
-  try {
-    const res = await fetch(`${apiUrl}/api/aboutme`);
-    if (res.ok) return await res.json();
-  } catch (e) {}
-  return null;
-}
-
-export default {
-  async fetch(request: Request, env: any, ctx: any) {
-    const apiUrl = env?.API_URL || "https://api.example.com";
-    const baseSiteUrl = env?.BASE_SITE_URL || "https://site.example.com";
-
-    await 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 fetchAboutMeData(apiUrl);
-      if (aboutMeData) {
-        hydrationScript = `<script>window.__HYDRATION_DATA__ = ${JSON.stringify(aboutMeData)};</script>`;
-      }
-    }
-
-    const pageContent = await generatePageContent(url.pathname, routes, footerLinks, { ...env, apiUrl });
-    const html = await createHtmlTemplate({ ...pageContent, hydrationData: hydrationScript });
-
-    return new Response(html, {
-      headers: {
-        "content-type": "text/html",
-        "cache-control": "public, max-age=60",
-      },
-    });
-  },
-};
+// Default worker export using WebsitePrerender
+const defaultPrerender = new WebsitePrerender();
+export default defaultPrerender;

package/src/prerender/website-prerender.ts

@@ -0,0 +1,152 @@
+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/index.ts

@@ -1,15 +1,17 @@
 // 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/iFooterLink';
+export * from './interfaces/iroute';
+export * from './interfaces/ifooter-link';
 
 // Core Logic
 export * from './core/theme-toggle';
 export * from './template';
-export * from './pageContent';
+export * from './page-content';
 
 // Runtime
 export * from './runtime';

package/src/shared/{pageContent.ts → page-content.ts}

@@ -1,5 +1,6 @@
-import { IFooterLink } from './interfaces/iFooterLink';
-import { IRoute } from './interfaces/iRoute';
+import { IFooterLink } from './interfaces/ifooter-link';
+import { IRoute } from './interfaces/iroute';
+export type { IFooterLink, IRoute };
 import { MarkdownPipeline } from '@leadertechie/md2html';
 
 export interface PageContent {
@@ -78,7 +79,7 @@ export const generatePageContent = (
   const footerTemplate = `
     <my-footer
       copyright="${copyright}"
-      footerlinks=\\'\${JSON.stringify(footerLinks)}\\'\'>
+      footerlinks='\${JSON.stringify(footerLinks)}'>
     </my-footer>`;
 
   const renderContentGists = (items: ContentMetadata[] = [], title: string, type: 'blogs' | 'stories') => {
@@ -194,7 +195,7 @@ export const generatePageContent = (
     ${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>The page you're looking for doesn't exist.</p>
         <p><a href="/">Return to home</a></p>
       </main>
       ${footerTemplate}`;