@leadertechie/personal-site-kit 0.0.0

package/src/api/handlers/logo.ts

@@ -0,0 +1,55 @@
+const PLACEHOLDER_LOGO = `<svg width="600" height="320" viewBox="0 0 600 320" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .text-main { 
+      fill: light-dark(#4A5568, #E2E8F0);
+      font-family: 'Segoe UI', 'Arial Black', sans-serif; 
+      font-weight: 900; 
+      font-size: 46px; 
+      letter-spacing: -0.01em; 
+      text-anchor: middle; 
+    }
+  </style>
+
+  <!-- Big circle placeholder -->
+  <circle cx="300" cy="160" r="100" fill="none" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" stroke-dasharray="8 4" opacity="0.5" />
+  
+  <!-- Plus sign in circle -->
+  <line x1="300" y1="100" x2="300" y2="220" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+  <line x1="240" y1="160" x2="360" y2="160" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+
+  <text x="300" y="290" class="text-main">YOUR LOGO</text>
+</svg>`;
+
+export async function handleLogo(env?: any): Promise<Response> {
+  try {
+    // Try to get logo from R2
+    if (env?.CONTENT_BUCKET) {
+      const logo = await env.CONTENT_BUCKET.get('logo.svg');
+      if (logo) {
+        const headers = new Headers();
+        logo.writeHttpMetadata(headers);
+        headers.set('Content-Type', 'image/svg+xml');
+        headers.set('Cache-Control', 'public, max-age=3600');
+        headers.set('Access-Control-Allow-Origin', '*');
+        return new Response(logo.body, { headers });
+      }
+    }
+    
+    // Return placeholder logo
+    return new Response(PLACEHOLDER_LOGO, {
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Cache-Control': 'public, max-age=3600',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  } catch (error) {
+    console.error('Error serving logo:', error);
+    return new Response(PLACEHOLDER_LOGO, {
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  }
+}

package/src/api/handlers/staticdetails.ts

@@ -0,0 +1,48 @@
+const DEFAULT_STATIC_DETAILS = {
+  siteTitle: "My Personal Website",
+  copyright: "2026 My Personal Website",
+  linkedin: "https://linkedin.com/in/yourname",
+  github: "https://github.com/yourname",
+  email: "yourname@domain.com"
+};
+
+export async function handleStaticDetails(env?: any, method?: string, body?: any): Promise<Response> {
+  try {
+    if (!env?.CONTENT_BUCKET) {
+      return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // GET - return static details
+    if (!method || method === 'GET') {
+      const staticDetails = await env.CONTENT_BUCKET.get('staticdetails.json');
+      if (staticDetails) {
+        const data = await staticDetails.json();
+        return new Response(JSON.stringify({ ...DEFAULT_STATIC_DETAILS, ...data }), {
+          headers: { 
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          },
+        });
+      }
+      return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
+        headers: { 
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*'
+        },
+      });
+    }
+
+    // PUT - save static details (handled in content handler)
+    return new Response(JSON.stringify({ error: 'Use content endpoint for PUT' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('Error serving static details:', error);
+    return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+}

package/src/api/index.ts

@@ -0,0 +1,125 @@
+export default {
+  async fetch(request: Request, env?: Env): Promise<Response> {
+    const url = new URL(request.url);
+
+    // 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;
+}

package/src/api/utils.ts

@@ -0,0 +1,16 @@
+export interface APIResponse {
+  data?: any;
+  error?: string;
+  status: number;
+}
+
+export function createJSONResponse(data: any, status: number = 200): Response {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+export function createErrorResponse(message: string, status: number = 500): Response {
+  return createJSONResponse({ error: message }, status);
+}

package/src/prerender/__tests__/pageContent.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { generatePageContent } from '../pageContent';
+
+describe('generatePageContent', () => {
+  const mockRoutes = [
+    { link: '/', text: 'Home' },
+    { link: '/about-me', text: 'About' }
+  ];
+  const mockFooterLinks = [
+    { text: 'Link', href: '#' }
+  ];
+  const mockEnv = {
+    CONTENT_BUCKET: {
+      get: vi.fn().mockResolvedValue({
+        json: () => Promise.resolve({ name: 'User', title: 'Professional', experience: 'some' })
+      }),
+      list: vi.fn().mockResolvedValue({ objects: [] })
+    },
+    apiUrl: 'https://api.example.com',
+    baseUrl: 'https://www.example.com'
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ siteTitle: 'My Site', copyright: '2026' })
+    });
+  });
+
+  it('should generate home page content', async () => {
+    const result = await generatePageContent('/', mockRoutes, mockFooterLinks, mockEnv);
+
+    expect(result.title).toContain('User');
+    expect(result.canonicalUrl).toBe('https://www.example.com/');
+    expect(result.content).toContain('<my-banner');
+  });
+
+  it('should generate about-me page content', async () => {
+    const result = await generatePageContent('/about-me', mockRoutes, mockFooterLinks, mockEnv);
+
+    expect(result.title).toContain('About');
+    expect(result.canonicalUrl).toBe('https://www.example.com/about-me');
+    expect(result.content).toContain('<my-aboutme');
+  });
+
+  it('should generate 404 page content', async () => {
+    const result = await generatePageContent('/non-existent', mockRoutes, mockFooterLinks, mockEnv);
+
+    expect(result.title).toContain('Not Found');
+    expect(result.canonicalUrl).toBe('https://www.example.com/non-existent');
+    expect(result.content).toContain('Page Not Found');
+  });
+});

package/src/prerender/__tests__/template.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { createHtmlTemplate } from '../template';
+
+describe('createHtmlTemplate', () => {
+  it('should generate complete HTML template', async () => {
+    const props = {
+      title: 'Test Title',
+      description: 'Test Description',
+      canonicalUrl: 'https://example.com/test',
+      content: '<main>Test Content</main>'
+    };
+
+    const html = await createHtmlTemplate(props);
+
+    expect(html).toContain('<!doctype html>');
+    expect(html).toContain('<title>Test Title</title>');
+    expect(html).toContain('<meta name="description" content="Test Description" />');
+    expect(html).toContain('<meta property="og:title" content="Test Title" />');
+    expect(html).toContain('<link rel="canonical" href="https://example.com/test" />');
+    expect(html).toContain('<main>Test Content</main>');
+  });
+
+  it('should escape HTML entities properly', async () => {
+    const props = {
+      title: 'Test & Title',
+      description: 'Test "Description"',
+      canonicalUrl: 'https://example.com/test',
+      content: '<main>Test Content</main>'
+    };
+
+    const html = await createHtmlTemplate(props);
+
+    expect(html).toContain('<title>Test & Title</title>');
+    expect(html).toContain('<meta name="description" content="Test "Description"" />');
+  });
+
+  it('should have proper HTML structure', async () => {
+    const props = {
+      title: 'Test',
+      description: 'Test',
+      canonicalUrl: 'https://example.com',
+      content: '<div>Content</div>'
+    };
+
+    const html = await createHtmlTemplate(props);
+
+    expect(html).toMatch(/^<!doctype html>/);
+    expect(html).toContain('<html lang="en" data-theme="light">');
+    expect(html).toContain('<head>');
+    expect(html).toContain('<body>');
+    expect(html).toContain('<div id="app">');
+    expect(html).toContain('</html>');
+  });
+});

package/src/prerender/index.ts

@@ -0,0 +1,138 @@
+import { createHtmlTemplate, TemplateProps } from "./template";
+
+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",
+      },
+    });
+  },
+};