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

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.`
+    );
+  }
+}

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

@@ -0,0 +1,77 @@
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+
+export interface StaticDetails {
+  siteTitle?: string;
+  copyright?: string;
+  linkedin?: string;
+  github?: string;
+  email?: string;
+}
+
+export interface BasePageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  name?: string;
+  title?: string;
+}
+
+export class BasePageGenerator {
+  protected generateBanner(routes: IRoute[], siteTitle: string, logo: string): string {
+    const navLinks = routes
+      .map(r => `<a href="${r.link}" class="nav-link" data-route="${r.link === "/" ? "home" : r.text.toLowerCase()}">${r.text}</a>`)
+      .join("");
+
+    return `
+      <my-banner header="${siteTitle}" logo="${logo}">
+        <theme-toggle slot="theme-switcher"></theme-toggle>
+        <nav slot="nav-links">
+          ${navLinks}
+        </nav>
+      </my-banner>`;
+  }
+
+  protected generateFooter(footerLinks: IFooterLink[], copyright: string): string {
+    return `
+      <my-footer
+        copyright="${copyright}"
+        footerlinks='${JSON.stringify(footerLinks)}'>
+      </my-footer>`;
+  }
+
+  protected generateMeta(title: string, description: string, canonicalUrl: string): void {
+    // This would be handled in the main function
+  }
+
+  protected wrapContent(banner: string, mainContent: string, footer: string): string {
+    return `${banner}${mainContent}${footer}`;
+  }
+
+  public generatePage(
+    pathname: string,
+    routes: IRoute[],
+    footerLinks: IFooterLink[],
+    staticDetails: StaticDetails,
+    apiUrl: string,
+    baseUrl: string,
+    mainContent: string,
+    title: string,
+    description: string
+  ): PageContent {
+    const logo = "/api/logo";
+    const banner = this.generateBanner(routes, staticDetails.siteTitle || "My Personal Website", logo);
+    const footer = this.generateFooter(footerLinks, staticDetails.copyright || "2026 My Personal Website");
+    const canonicalUrl = new URL(pathname, baseUrl).toString();
+    const content = this.wrapContent(banner, mainContent, footer);
+
+    return {
+      title,
+      description,
+      canonicalUrl,
+      content
+    };
+  }
+}

package/src/prerender/page-generators/blog-detail.ts

@@ -0,0 +1,35 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+
+export interface BlogDetailPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  slug: string;
+}
+
+export class BlogDetailPageGenerator extends BasePageGenerator {
+  public generate(data: BlogDetailPageData): PageContent {
+    const { slug, staticDetails, ...baseData } = data;
+
+    const mainContent = `
+      <main class="container container-narrow">
+        <my-blog-viewer slug="${slug}"></my-blog-viewer>
+      </main>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `Blog: ${slug}`,
+      "Blog post"
+    );
+  }
+}

package/src/prerender/page-generators/blogs-list.ts

@@ -0,0 +1,43 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+import { BlogMeta } from '../data-fetcher';
+
+export interface BlogsListPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  latestBlogs: BlogMeta[];
+  name: string;
+}
+
+export class BlogsListPageGenerator extends BasePageGenerator {
+  public generate(data: BlogsListPageData): PageContent {
+    const { latestBlogs, name, staticDetails, ...baseData } = data;
+
+    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 = `
+      <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>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `Blogs – ${name}`,
+      "Read the latest blog posts."
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+import { Profile, BlogMeta } from '../data-fetcher';
+
+export interface HomePageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  profile: Profile | null;
+  homeContent: string;
+  latestBlogs: BlogMeta[];
+  latestStories: BlogMeta[];
+}
+
+export class HomePageGenerator extends BasePageGenerator {
+  public generate(data: HomePageData): PageContent {
+    const { profile, homeContent, latestBlogs, latestStories, staticDetails, ...baseData } = data;
+
+    const name = profile?.name || "User";
+    const title = profile?.title || "Professional";
+
+    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 = `
+      <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>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `${name} – ${title}`,
+      `Welcome to ${name}'s personal website. Professional portfolio and content.`
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+export * from './base';
+export * from './home';
+export * from './about';
+export * from './blogs-list';
+export * from './stories-list';
+export * from './blog-detail';
+export * from './story-detail';
+export * from './not-found';

package/src/prerender/page-generators/not-found.ts

@@ -0,0 +1,36 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+
+export interface NotFoundPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+}
+
+export class NotFoundPageGenerator extends BasePageGenerator {
+  public generate(data: NotFoundPageData): PageContent {
+    const { staticDetails, ...baseData } = data;
+
+    const mainContent = `
+      <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>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      "404 Not Found",
+      "The page you requested could not be found."
+    );
+  }
+}

package/src/prerender/page-generators/stories-list.ts

@@ -0,0 +1,43 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+import { BlogMeta } from '../data-fetcher';
+
+export interface StoriesListPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  latestStories: BlogMeta[];
+  name: string;
+}
+
+export class StoriesListPageGenerator extends BasePageGenerator {
+  public generate(data: StoriesListPageData): PageContent {
+    const { latestStories, name, staticDetails, ...baseData } = data;
+
+    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 = `
+      <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>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `Stories – ${name}`,
+      "Read the latest stories."
+    );
+  }
+}

package/src/prerender/page-generators/story-detail.ts

@@ -0,0 +1,35 @@
+import { BasePageGenerator, StaticDetails } from './base';
+import { IRoute, IFooterLink, PageContent } from '../page-content';
+
+export interface StoryDetailPageData {
+  routes: IRoute[];
+  footerLinks: IFooterLink[];
+  staticDetails: StaticDetails;
+  apiUrl: string;
+  baseUrl: string;
+  pathname: string;
+  slug: string;
+}
+
+export class StoryDetailPageGenerator extends BasePageGenerator {
+  public generate(data: StoryDetailPageData): PageContent {
+    const { slug, staticDetails, ...baseData } = data;
+
+    const mainContent = `
+      <main class="container container-narrow">
+        <my-story-viewer slug="${slug}"></my-story-viewer>
+      </main>`;
+
+    return this.generatePage(
+      baseData.pathname,
+      baseData.routes,
+      baseData.footerLinks,
+      staticDetails,
+      baseData.apiUrl,
+      baseData.baseUrl,
+      mainContent,
+      `Story: ${slug}`,
+      "Story post"
+    );
+  }
+}

package/src/shared/config/index.ts

@@ -4,7 +4,7 @@ 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'
+  apiUrl: (typeof window !== 'undefined' && ((window as any).__VITE_API_URL__ || (import.meta as any).env?.VITE_API_URL)) || 'http://localhost:8788'
 };
 
 const DEFAULT_STATIC: StaticDetails = {
@@ -20,7 +20,9 @@ let activeConfig: WebsiteConfig = { ...DEFAULT_INFRA, ...DEFAULT_STATIC };
 
 export async function initializeConfig(infra?: Partial<InfrastructureConfig>): Promise<WebsiteConfig> {
   if (infra) {
-    activeConfig = { ...activeConfig, ...infra };
+    // Only merge defined values
+    if (infra.baseUrl) activeConfig.baseUrl = infra.baseUrl;
+    if (infra.apiUrl) activeConfig.apiUrl = infra.apiUrl;
   }
 
   try {

package/src/shared/page-content.ts

@@ -79,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') => {