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

package/src/api/handlers/about-me.ts

@@ -66,24 +66,34 @@ export async function handleAboutMe(env?: any): Promise<Response> {
     }
     console.log('handleAboutMe: r2 created, fetching data');
 
-    const [profileObj, astResult] = await Promise.all([
+    const [profileObj, rendered] = await Promise.all([
       r2.getObject('profile.json'),
-      r2.getWithAST('about-me.md')
+      r2.getRendered('about-me.md')
     ]);
 
-    console.log('handleAboutMe: profileObj =', !!profileObj, 'astResult =', !!astResult);
-
-    if (!profileObj || !astResult) {
-      throw new Error('Content not found in R2');
+    if (!rendered) {
+      return new Response(JSON.stringify({ error: 'About-me content not found. Please run seed.' }), {
+        status: 404,
+        headers: { 'Content-Type': 'application/json' },
+      });
     }
 
-    const profile = await profileObj.json() as Profile;
+    let profile: Profile = {
+      name: 'Your Name',
+      title: 'Professional',
+      experience: 'Experienced',
+      profileImageUrl: ''
+    };
+
+    if (profileObj) {
+      profile = await profileObj.json() as Profile;
+    }
     console.log('handleAboutMe: profile loaded:', profile.name);
 
     const responseData: AboutMeApiResponse = {
       profile,
-      contentNodes: astResult.contentNodes,
-      processedMarkdown: ''
+      contentNodes: [],
+      processedMarkdown: rendered.content
     };
 
     return new Response(JSON.stringify(responseData), {

package/src/api/handlers/auth-handler.ts

@@ -60,18 +60,21 @@ export async function handleAuth(request: Request, env: any, subpath: string): P
 }
 
 async function handleSetup(request: Request, env: any, clientIP: string, origin: string): Promise<Response> {
+  console.log('handleSetup: starting setup, env.KV exists:', !!env.KV);
   if (request.method !== 'POST') {
     return createErrorResponse('Method not allowed', 405);
   }
 
-  const existing = await getAuthStore(env);
-  if (existing) {
-    return createErrorResponse('Admin already configured. Use /auth/login to login.', 400);
-  }
-
   try {
+    const existing = await getAuthStore(env);
+    console.log('handleSetup: existing store check:', !!existing);
+    if (existing) {
+      return createErrorResponse('Admin already configured. Use /auth/login to login.', 400);
+    }
+
     const body = await request.json();
     const { username, password } = body;
+    console.log('handleSetup: body parsed, username:', username);
 
     if (!username || !password) {
       return createErrorResponse('Username and password required', 400);
@@ -81,18 +84,23 @@ async function handleSetup(request: Request, env: any, clientIP: string, origin:
       return createErrorResponse('Username must be 3+ chars, password must be 8+ chars', 400);
     }
 
+    console.log('handleSetup: calling setupAuth');
     await setupAuth(env, username, password);
+    console.log('handleSetup: setupAuth successful');
     await clearRateLimit(env, clientIP);
 
     const token = crypto.randomUUID();
+    console.log('handleSetup: session token generated');
     await env.KV.put(`session:${token}`, JSON.stringify({
       createdAt: Date.now(),
       expiresAt: Date.now() + (7 * 24 * 60 * 60 * 1000)
     }), { expirationTtl: 7 * 24 * 60 * 60 });
+    console.log('handleSetup: session stored in KV');
 
     const headers: Record<string, string> = {
       'Content-Type': 'application/json',
-      'Set-Cookie': createSessionCookie(token, origin)
+      'Set-Cookie': createSessionCookie(token, origin),
+      'X-Session-Token': token
     };
 
     return new Response(JSON.stringify({ 
@@ -103,7 +111,8 @@ async function handleSetup(request: Request, env: any, clientIP: string, origin:
       headers
     });
   } catch (e) {
-    return createErrorResponse('Invalid request body', 400);
+    console.error('handleSetup: error occurred:', e);
+    return createErrorResponse('Internal server error: ' + (e as Error).message, 500);
   }
 }
 
@@ -145,7 +154,8 @@ async function handleLogin(request: Request, env: any, clientIP: string, origin:
 
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
-        'Set-Cookie': createSessionCookie(token, origin)
+        'Set-Cookie': createSessionCookie(token, origin),
+        'X-Session-Token': token
       };
 
       return new Response(JSON.stringify({ 

package/src/api/handlers/content.ts

@@ -48,7 +48,7 @@ export async function handleContent(request: Request, env: any, subpath: string)
     return createErrorResponse('Admin not configured. Use POST /auth/setup to configure.', 401);
   }
 
-  const sessionToken = getSessionToken(request);
+  const sessionToken = getSessionToken(request) || request.headers.get('X-Session-Token');
   let isAuthenticated = false;
   
   if (sessionToken) {

package/src/api/handlers/home.ts

@@ -46,8 +46,8 @@ export async function handleHome(env?: any): Promise<Response> {
 
     const r2 = getLoader(env);
     const [astResult, renderedResult] = await Promise.all([
-      r2.getWithAST('home.md'),
-      r2.getRendered('home.md')
+      r2.getWithAST('pages/home.md'),
+      r2.getRendered('pages/home.md')
     ]);
 
     if (!astResult || !renderedResult) {

package/src/api/website-api.ts

@@ -21,23 +21,23 @@ export class WebsiteAPI {
   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');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Session-Token');
     return response;
   }
 
   private addAdminCORSHeaders(response: Response, origin: string): Response {
-    const allowOrigin = origin.includes('localhost') || origin.includes('127.0.0.1') 
+    const allowOrigin = origin && (origin.includes('localhost') || origin.includes('127.0.0.1')) 
       ? origin 
       : 'same-origin';
     response.headers.set('Access-Control-Allow-Origin', allowOrigin);
     response.headers.set('Access-Control-Allow-Credentials', 'true');
     response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Session-Token');
     return response;
   }
 
   private handleCORS(origin: string): Response {
-    const allowOrigin = origin.includes('localhost') || origin.includes('127.0.0.1') 
+    const allowOrigin = origin && (origin.includes('localhost') || origin.includes('127.0.0.1')) 
       ? origin 
       : '*';
     return new Response(null, {
@@ -45,7 +45,7 @@ export class WebsiteAPI {
       headers: {
         'Access-Control-Allow-Origin': allowOrigin ,
         'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS' ,
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Session-Token',
         'Access-Control-Allow-Credentials': 'true',
         'Access-Control-Max-Age': '86400',
       },
@@ -79,6 +79,12 @@ export class WebsiteAPI {
         return this.addAdminCORSHeaders(await handleContent(request, env, subpath), origin);
       }
 
+      // Check for auth route (auth/*)
+      if (route === 'auth' || route.startsWith('auth/')) {
+        const subpath = route.replace(/^auth\/?/, '');
+        return this.addAdminCORSHeaders(await handleAuth(request, env, subpath || '/'), origin);
+      }
+
       switch (route) {
         case 'info':
           return this.addCORSHeaders(await handleInfo());
@@ -101,8 +107,6 @@ export class WebsiteAPI {
           return this.addCORSHeaders(await handleLogo(env));
         case 'static':
           return this.addCORSHeaders(await handleStaticDetails(env));
-        case 'auth':
-          return this.addAdminCORSHeaders(await handleAuth(request, env, '/auth'), origin);
         case 'blogs':
           return this.addCORSHeaders(await handleBlogs(env));
         case 'blogs/latest':

package/src/prerender/__tests__/page-content.test.ts

@@ -7,25 +7,15 @@ describe('generatePageContent', () => {
     { link: '/about-me', text: 'About' }
   ];
   const mockFooterLinks = [
-    { text: 'Link', href: '#' }
+    { text: 'Link', link: '#' }
   ];
   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 () => {

package/src/prerender/data-fetcher.ts

@@ -0,0 +1,93 @@
+import { R2ContentLoader } from "@leadertechie/r2tohtml";
+
+export interface Profile {
+  name: string;
+  title: string;
+  experience: string;
+  profileImageUrl: string;
+}
+
+export interface BlogMeta {
+  slug: string;
+  title: string;
+  summary: string;
+  tags: string[];
+  date: string;
+}
+
+let loader: R2ContentLoader | null = null;
+
+function getLoader(env: any): R2ContentLoader | null {
+  if (!loader) {
+    if (!env?.CONTENT_BUCKET) return null;
+    loader = new R2ContentLoader(
+      { bucket: env.CONTENT_BUCKET, cacheTTL: 5 * 60 * 1000 },
+      { md2html: { imagePathPrefix: "images/", styleOptions: { classPrefix: "md-", addHeadingIds: true } } }
+    );
+  }
+  return loader;
+}
+
+export async function fetchProfile(env: any): Promise<Profile | null> {
+  try {
+    const r2 = getLoader(env);
+    if (!r2) return null;
+    const obj = await r2.getObject("profile.json");
+    if (!obj) return null;
+    return await obj.json() as Profile;
+  } catch { return null; }
+}
+
+export async function fetchAboutMe(env: any): Promise<string> {
+  try {
+    const r2 = getLoader(env);
+    if (!r2) return "";
+    const result = await r2.getRendered("about-me.md");
+    return result?.content || "";
+  } catch { return ""; }
+}
+
+export async function fetchHome(env: any): Promise<string> {
+  try {
+    const r2 = getLoader(env);
+    if (!r2) return "";
+    const result = await r2.getRendered("pages/home.md");
+    return result?.content || "";
+  } catch { return ""; }
+}
+
+export async function fetchLatestBlogSummaries(env: any, count: number = 3): Promise<BlogMeta[]> {
+  try {
+    const r2 = getLoader(env);
+    if (!r2) return [];
+    const list = await r2.list("blogs/");
+    const metas: BlogMeta[] = [];
+    for (const obj of list.objects) {
+      if (obj.key.endsWith(".json")) {
+        try {
+          const metaObj = await r2.getObject(obj.key);
+          if (metaObj) metas.push(await metaObj.json() as BlogMeta);
+        } catch {}
+      }
+    }
+    return metas.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, count);
+  } catch { return []; }
+}
+
+export async function fetchLatestStorySummaries(env: any, count: number = 3): Promise<BlogMeta[]> {
+  try {
+    const r2 = getLoader(env);
+    if (!r2) return [];
+    const list = await r2.list("stories/");
+    const metas: BlogMeta[] = [];
+    for (const obj of list.objects) {
+      if (obj.key.endsWith(".json")) {
+        try {
+          const metaObj = await r2.getObject(obj.key);
+          if (metaObj) metas.push(await metaObj.json() as BlogMeta);
+        } catch {}
+      }
+    }
+    return metas.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, count);
+  } catch { return []; }
+}

package/src/prerender/page-content.ts

@@ -68,7 +68,7 @@ async function fetchHome(env: any): Promise<string> {
   try {
     const r2 = getLoader(env);
     if (!r2) return "";
-    const result = await r2.getRendered("home.md");
+    const result = await r2.getRendered("pages/home.md");
     return result?.content || "";
   } catch { return ""; }
 }
@@ -115,8 +115,8 @@ export const generatePageContent = async (
   footerLinks: IFooterLink[],
   env?: any
 ): Promise<PageContent> => {
-  const apiUrl = env?.apiUrl || "https://api.techieleader.com";
-  const baseUrl = env?.baseUrl || "https://www.techieleader.com";
+  const apiUrl = env?.API_URL || env?.apiUrl || "https://api.example.com";
+  const baseUrl = env?.BASE_URL || env?.baseUrl || "https://www.example.com";
   
   let staticDetails = {
     siteTitle: "My Personal Website",
@@ -131,23 +131,6 @@ export const generatePageContent = async (
     if (res.ok) staticDetails = await res.json();
   } catch (e) {}
   
-  const logo = "/api/logo";
-  const navLinks = routes.map(r => `<a href="${r.link}" class="nav-link" data-route="${r.link === "/" ? "home" : r.text.toLowerCase()}">${r.text}</a>`).join("");
-
-  const bannerTemplate = `
-    <my-banner header="${staticDetails.siteTitle}" logo="${logo}">
-      <theme-toggle slot="theme-switcher"></theme-toggle>
-      <nav slot="nav-links">
-        ${navLinks}
-      </nav>
-    </my-banner>`;
-
-  const footerTemplate = `
-    <my-footer
-      copyright="${staticDetails.copyright}"
-      footerlinks='${JSON.stringify(footerLinks)}'>
-    </my-footer>`;
-
   let profile: Profile | null = null;
   let aboutMeContent = "";
   let homeContent = "";
@@ -162,102 +145,122 @@ export const generatePageContent = async (
 
   const name = profile?.name || "User";
   const title = profile?.title || "Professional";
-  const experience = profile?.experience || "some";
   const canonicalUrl = new URL(pathname, baseUrl).toString();
 
-  if (pathname === "/" || pathname === "") {
-    const homeHtml = homeContent || `<h1>Welcome to ${name}</h1><p>Upload home.md to customize this page.</p>`;
-    const blogGists = latestBlogs.map(b => `<div class="gist-card"><a href="/blogs/${b.slug}"><h4>${b.title}</h4></a><p>${b.summary}</p><small>${b.date}</small></div>`).join("");
-    const storyGists = latestStories.map(s => `<div class="gist-card"><a href="/stories/${s.slug}"><h4>${s.title}</h4></a><p>${s.summary}</p><small>${s.date}</small></div>`).join("");
-
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide column-layout">
-      <div class="main-column">
-        ${homeHtml}
-      </div>
-      <div class="sidebar-column">
-        <h3>Recent Blogs</h3>
-        ${blogGists || "<p>No blogs yet.</p>"}
-        <h3 class="mt-2">Recent Stories</h3>
-        ${storyGists || "<p>No stories yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
+  // Strategy pattern: map pathname patterns to generators
+  const strategies = {
+    home: async () => {
+      const { HomePageGenerator } = await import('./page-generators');
+      const generator = new HomePageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        profile,
+        homeContent,
+        latestBlogs,
+        latestStories
+      });
+    },
+    about: async () => {
+      const { AboutPageGenerator } = await import('./page-generators');
+      const generator = new AboutPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        profile
+      });
+    },
+    blogsList: async () => {
+      const { BlogsListPageGenerator } = await import('./page-generators');
+      const generator = new BlogsListPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        latestBlogs,
+        name
+      });
+    },
+    storiesList: async () => {
+      const { StoriesListPageGenerator } = await import('./page-generators');
+      const generator = new StoriesListPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        latestStories,
+        name
+      });
+    },
+    blogDetail: async (slug: string) => {
+      const { BlogDetailPageGenerator } = await import('./page-generators');
+      const generator = new BlogDetailPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        slug
+      });
+    },
+    storyDetail: async (slug: string) => {
+      const { StoryDetailPageGenerator } = await import('./page-generators');
+      const generator = new StoryDetailPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname,
+        slug
+      });
+    },
+    notFound: async () => {
+      const { NotFoundPageGenerator } = await import('./page-generators');
+      const generator = new NotFoundPageGenerator();
+      return generator.generate({
+        routes,
+        footerLinks,
+        staticDetails,
+        apiUrl,
+        baseUrl,
+        pathname
+      });
+    }
+  };
 
-    return {
-      title: `${name} – ${title}`,
-      description: `Welcome to ${name}'s personal website. Professional portfolio and content.`,
-      canonicalUrl,
-      content: mainContent
-    };
+  if (pathname === "/" || pathname === "") {
+    return strategies.home();
   } else if (pathname === "/about-me") {
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-        <my-aboutme base-url="${apiUrl}"></my-aboutme>
-      </main>
-      ${footerTemplate}`;
-
-    return {
-      title: `About - ${name}`,
-      description: `Learn more about ${name}'s experience and skills.`,
-      canonicalUrl,
-      content: mainContent
-    };
+    return strategies.about();
   } else if (pathname === "/blogs" || pathname === "/blogs/") {
-    const blogGists = latestBlogs.map(b => `<div class="gist-card"><a href="/blogs/${b.slug}"><h4>${b.title}</h4></a><p>${b.summary}</p><small>${b.date}</small></div>`).join("");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide">
-      <h1>Blogs</h1>
-      <input type="text" placeholder="Search blogs..." class="search-input" />
-      <div class="blog-list">
-        ${blogGists || "<p>No blogs yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Blogs – ${name}`, description: "Read the latest blog posts.", canonicalUrl, content: mainContent };
+    return strategies.blogsList();
   } else if (pathname === "/stories" || pathname === "/stories/") {
-    const storyGists = latestStories.map(s => `<div class="gist-card"><a href="/stories/${s.slug}"><h4>${s.title}</h4></a><p>${s.summary}</p><small>${s.date}</small></div>`).join("");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide">
-      <h1>Stories</h1>
-      <input type="text" placeholder="Search stories..." class="search-input" />
-      <div class="story-list">
-        ${storyGists || "<p>No stories yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Stories – ${name}`, description: "Read the latest stories.", canonicalUrl, content: mainContent };
+    return strategies.storiesList();
   } else if (pathname.startsWith("/blogs/")) {
     const slug = pathname.replace("/blogs/", "").replace("/", "");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-      <my-blog-viewer slug="${slug}"></my-blog-viewer>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Blog: ${slug}`, description: "Blog post", canonicalUrl, content: mainContent };
+    return strategies.blogDetail(slug);
   } else if (pathname.startsWith("/stories/")) {
     const slug = pathname.replace("/stories/", "").replace("/", "");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-      <my-story-viewer slug="${slug}"></my-story-viewer>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Story: ${slug}`, description: "Story post", canonicalUrl, content: mainContent };
+    return strategies.storyDetail(slug);
   } else {
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow text-center">
-        <h1>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", description: "The page you requested could not be found.", canonicalUrl, content: mainContent };
+    return strategies.notFound();
   }
 };

package/src/prerender/page-generators/about.ts

@@ -0,0 +1,38 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+import { Profile } from '../data-fetcher';
+
+export interface AboutPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  profile: Profile | null;
+}
+
+export class AboutPageGenerator extends BasePageGenerator {
+  public generate(data: AboutPageData): PageContent {
+    const { profile, staticDetails, ...baseData } = data;
+
+    const name = profile?.name || "User";
+
+    const mainContent = `
+      <main class="container container-narrow">
+        <my-aboutme base-url="${baseData.apiUrl}"></my-aboutme>
+      </main>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `About - ${name}`,
+      `Learn more about ${name}'s experience and skills.`
+    );
+  }
+}