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

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 = {

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

package/src/shared/router.ts

@@ -35,10 +35,10 @@ export class Router {
     };
 
     this.footerLinks = [
-      { text: 'LinkedIn', link: normalizeUrl(config.linkedin) },
-      { text: 'GitHub', link: normalizeUrl(config.github) },
-      { text: 'Email', link: config.email ? `mailto:${config.email}` : '' },
-    ].filter(link => link.link !== '');
+      { text: 'LinkedIn', link: normalizeUrl(config.linkedin) || 'https://linkedin.com' },
+      { text: 'GitHub', link: normalizeUrl(config.github) || 'https://github.com' },
+      { text: 'Email', link: config.email ? `mailto:${config.email}` : 'mailto:hello@example.com' },
+    ];
   }
 
   public init(appElementId: string = 'app') {
@@ -243,7 +243,7 @@ export class Router {
         <main class="container container-medium">
           <admin-portal></admin-portal>
         </main>
-        <my-footer copyright="${this.copyright}" footerlinks='[]'></my-footer>
+        <my-footer copyright="${this.copyright}" footerLinks='[]'></my-footer>
       `;
     }
   }

package/src/ui/about-me/index.ts

@@ -1,19 +1,10 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { ContentNode } from '@leadertechie/md2html';
 import { Profile } from './api';
-
 import { aboutmeStyles } from './styles';
-
-import { AboutMeRenderer } from './renderer';
 import { fetchAboutMe } from './api';
 
-interface AboutMeData {
-  profile: Profile;
-  contentNodes: ContentNode[];
-}
-
 @customElement('my-aboutme')
 export class MyAboutme extends LitElement {
   static styles = aboutmeStyles;
@@ -25,22 +16,15 @@ export class MyAboutme extends LitElement {
   accessor profile: Profile | null = null;
 
   @state()
-  accessor contentNodes: ContentNode[] = [];
+  accessor htmlContent: string = '';
 
   @state()
   accessor loading = true;
 
-  private renderer: AboutMeRenderer;
-  /**
-   * Injectable fetcher function used to retrieve About Me data.
-   * Tests can override this (e.g. componentInstance.fetcher = myMock)
-   * to avoid network I/O. By default it uses the stable `fetchAboutMe` helper.
-   */
   public fetcher = fetchAboutMe;
 
-  constructor(renderer?: AboutMeRenderer) {
+  constructor() {
     super();
-    this.renderer = renderer || new AboutMeRenderer();
   }
 
   private get apiBaseUrl(): string {
@@ -50,28 +34,24 @@ export class MyAboutme extends LitElement {
   async connectedCallback() {
     super.connectedCallback();
 
-    // If we have initial data from SSR, use it immediately.
     if (typeof window !== 'undefined' && (window as any).__HYDRATION_DATA__) {
       const hydrationData = (window as any).__HYDRATION_DATA__;
       this.profile = hydrationData.profile;
-      this.contentNodes = hydrationData.contentNodes;
+      this.htmlContent = hydrationData.processedMarkdown;
       this.loading = false;
       return;
     }
 
-    // Load content if a baseUrl is provided. In dev/prod, this will be set.
     this.loadContent();
   }
 
   updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
     
-    // Only load content from API if we haven't already loaded via hydration data
-    if (this.loading === false && this.profile && this.contentNodes.length > 0) {
+    if (this.loading === false && this.profile && this.htmlContent) {
       return;
     }
     
-    // If baseUrl changed and we have a valid baseUrl, load content
     if (changedProperties.has('baseUrl') || changedProperties.has('base-url')) {
       this.loadContent();
     }
@@ -87,42 +67,26 @@ export class MyAboutme extends LitElement {
 
     try {
       this.loading = true;
-
-      // Fetch content from API using the injectable fetcher.
-      // Use the apiBaseUrl getter to get either property or attribute
-      const url = this.apiBaseUrl;
       const data = await this.fetcher(url);
 
       this.profile = data.profile;
-      this.contentNodes = data.contentNodes;
+      this.htmlContent = (data as any).processedMarkdown;
       this.loading = false;
-      // Wait for the render to complete
       await this.updateComplete;
     } catch (error) {
       this.loading = false;
-      // Set fallback content
       this.setFallbackContent();
-      // Wait for the render to complete
       await this.updateComplete;
     }
   }
 
   private setFallbackContent() {
-    this.profile = null; // No profile data
-    this.contentNodes = [
-      {
-        type: 'heading',
-        content: 'Profile Not Found'
-      },
-      {
-        type: 'paragraph',
-        content: 'Your about-me profile has not been initialized yet. Please run the seed command to get started:'
-      },
-      {
-        type: 'paragraph',
-        content: 'npm run seed -- <username> <password>'
-      }
-    ];
+    this.profile = null;
+    this.htmlContent = `
+      <h2>Profile Not Found</h2>
+      <p>Your about-me profile has not been initialized yet. Please run the seed command to get started:</p>
+      <pre>npm run seed -- &lt;username&gt; '&lt;password&gt;'</pre>
+    `;
   }
 
   render() {
@@ -130,15 +94,10 @@ export class MyAboutme extends LitElement {
       return html`<div class="aboutme"><div class="loading">Loading...</div></div>`;
     }
 
-    // If profile is not available, check if fallback content is present.
     if (!this.profile) {
-      if (this.contentNodes && this.contentNodes.length > 0) {
-        return html`<div class="aboutme">${this.renderer.renderContent(this.contentNodes)}</div>`;
-      }
-      return html`<div class="aboutme"><div class="loading">Failed to load content</div></div>`;
+      return html`<div class="aboutme"><div class="content-section" .innerHTML="${this.htmlContent}"></div></div>`;
     }
 
-    // Render profile header + content
     const profileImageUrl = this.profile.profileImageUrl 
       ? (this.profile.profileImageUrl.startsWith('http') || this.profile.profileImageUrl.startsWith('/') 
          ? this.profile.profileImageUrl 
@@ -155,10 +114,8 @@ export class MyAboutme extends LitElement {
           <h1>${this.profile.name}</h1>
           <p class="profile-title">${this.profile.title} • ${this.profile.experience}</p>
         </div>
-        <div class="content-section">
-          ${this.renderer.renderContent(this.contentNodes)}
-        </div>
+        <div class="content-section" .innerHTML="${this.htmlContent}"></div>
       </div>
     `;
   }
-}
+}

package/src/ui/admin/api.ts

@@ -0,0 +1,93 @@
+import type { ContentItem, AuthStatus, StaticDetails } from './types';
+
+export class AdminApiService {
+  constructor(private apiUrl: string) {}
+
+  async checkAuthStatus(): Promise<AuthStatus> {
+    const res = await fetch(`${this.apiUrl}/api/auth/status`);
+    if (!res.ok) throw new Error('Auth status check failed');
+    return res.json();
+  }
+
+  async tryAutoLogin(): Promise<ContentItem[]> {
+    const res = await fetch(`${this.apiUrl}/api/content`, {
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Auto login failed');
+    return res.json();
+  }
+
+  async login(username: string, password: string): Promise<void> {
+    const res = await fetch(`${this.apiUrl}/api/auth/login`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password })
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Login failed');
+    }
+  }
+
+  async setup(username: string, password: string): Promise<void> {
+    const res = await fetch(`${this.apiUrl}/api/auth/setup`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password })
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error || 'Setup failed');
+    }
+  }
+
+  async logout(): Promise<void> {
+    await fetch(`${this.apiUrl}/api/auth/logout`, {
+      method: 'POST',
+      credentials: 'include'
+    });
+  }
+
+  async fetchContent(): Promise<ContentItem[]> {
+    const res = await fetch(`${this.apiUrl}/api/content`, {
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Failed to fetch content');
+    return res.json();
+  }
+
+  async fetchStaticDetails(): Promise<StaticDetails> {
+    const res = await fetch(`${this.apiUrl}/api/static`, {
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Failed to fetch static details');
+    return res.json();
+  }
+
+  async uploadContent(key: string, file: File): Promise<void> {
+    const res = await fetch(`${this.apiUrl}/api/content/${key}`, {
+      method: 'PUT',
+      credentials: 'include',
+      body: file
+    });
+    if (!res.ok) throw new Error('Upload failed');
+  }
+
+  async deleteContent(key: string): Promise<void> {
+    const res = await fetch(`${this.apiUrl}/api/content/${key}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Delete failed');
+  }
+
+  async clearCache(): Promise<void> {
+    const res = await fetch(`${this.apiUrl}/api/cache-clear`, {
+      method: 'POST',
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Failed to clear cache');
+  }
+}

package/src/ui/admin/components/AboutMeSection.ts

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AdminSection } from './AdminSection';
+
+@customElement('admin-about-me-section')
+export class AdminAboutMeSection extends AdminSection {
+  private async handleUpload() {
+    const input = this.shadowRoot?.querySelector('#aboutFile') as HTMLInputElement;
+    if (input.files?.[0]) {
+      try {
+        await this.onUpload('about-me.md', input.files[0]);
+        this.onStatusMessage('Upload successful!');
+      } catch (e) {
+        this.onStatusMessage('Upload failed.');
+      }
+    }
+  }
+
+  private async handleDelete() {
+    if (!confirm('Delete about-me.md?')) return;
+    try {
+      await this.onDelete('about-me.md');
+    } catch (e) {
+      this.onStatusMessage('Delete failed.');
+    }
+  }
+
+  render() {
+    const aboutMe = this.getContent('about-me.md');
+    return html`
+      <div class="section">
+        <h3>About Me Page <span class="required-badge">Required</span></h3>
+        <p class="help-text">Content for your About Me page. Supports Markdown with frontmatter.</p>
+
+        ${aboutMe ? html`
+          <div class="current-file">
+            <strong>Current:</strong> about-me.md (${aboutMe.size} bytes)
+            <button class="btn-danger" @click=${this.handleDelete}>Delete</button>
+          </div>
+        ` : ''}
+
+        <input type="file" id="aboutFile" accept=".md" />
+        <button class="btn-primary" @click=${this.handleUpload}>Upload about-me.md</button>
+      </div>
+    `;
+  }
+}