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

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,70 +34,59 @@ 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.
-    const url = this.apiBaseUrl;
-    if (url) {
-      this.loadContent();
-    }
+    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')) {
-      const url = this.apiBaseUrl;
-      if (url) {
-        this.loadContent();
-      }
+      this.loadContent();
     }
   }
 
   private async loadContent() {
+    const url = this.apiBaseUrl;
+    if (!url) {
+      this.loading = false;
+      this.setFallbackContent();
+      return;
+    }
+
     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: 'paragraph',
-        content: 'Unable to Load Content'
-      }
-    ];
+    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() {
@@ -121,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 
@@ -146,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>
+    `;
+  }
+}

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

@@ -0,0 +1,134 @@
+import { LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { ContentItem, StaticDetails, AdminSectionProps } from '../types';
+
+export abstract class AdminSection extends LitElement implements AdminSectionProps {
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .section {
+      width: 100%;
+      border: none;
+      padding: 24px;
+      border-radius: 16px;
+      background: var(--card-bg, #fff);
+      box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.05);
+      margin-bottom: 20px;
+      min-height: 450px;
+      box-sizing: border-box;
+    }
+
+    .section h3 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.25rem;
+    }
+
+    .help-text {
+      color: var(--secondary-text, #666);
+      margin-bottom: 1rem;
+    }
+
+    .current-file {
+      margin-bottom: 1rem;
+      padding: 1rem;
+      background: var(--nav-link-hover-bg, #f5f5f5);
+      border-radius: 8px;
+    }
+
+    input[type="text"],
+    input[type="file"] {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 1rem;
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      background: var(--background-color);
+      color: var(--text-color);
+      box-sizing: border-box;
+    }
+
+    input[type="file"] {
+      margin-bottom: 1rem;
+    }
+
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: background-color 0.3s ease;
+      margin-right: 10px;
+    }
+
+    .btn-primary {
+      background: var(--link-color, #646cff);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: var(--link-hover-color, #535bf2);
+    }
+
+    .btn-secondary {
+      background: var(--nav-link-hover-bg, #f0f0f0);
+      color: var(--text-color, #213547);
+    }
+
+    .btn-secondary:hover {
+      background: var(--border-color, #e0e0e0);
+    }
+
+    .btn-danger {
+      background: #dc3545;
+      color: white;
+    }
+
+    .btn-danger:hover {
+      background: #c82333;
+    }
+
+    .file-list {
+      margin-top: 1rem;
+    }
+
+    .file-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem;
+      border-bottom: 1px solid var(--border-color, #eee);
+    }
+
+    .file-item:last-child {
+      border-bottom: none;
+    }
+  `;
+
+  @property({ type: Array })
+  accessor contentList: ContentItem[] = [];
+
+  @property({ type: Object })
+  accessor staticDetails: StaticDetails = {};
+
+  @property({ type: Function })
+  accessor onUpload: (key: string, file: File) => Promise<void> = async () => {};
+
+  @property({ type: Function })
+  accessor onDelete: (key: string) => Promise<void> = async () => {};
+
+  @property({ type: Function })
+  accessor onStatusMessage: (message: string) => void = () => {};
+
+  protected getContent(key: string): ContentItem | undefined {
+    return this.contentList.find(c => c.key === key);
+  }
+
+  protected getSectionFiles(prefix: string): ContentItem[] {
+    return this.contentList.filter(c => c.key.startsWith(prefix));
+  }
+}

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

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AdminSection } from './AdminSection';
+
+@customElement('admin-blogs-section')
+export class AdminBlogsSection extends AdminSection {
+  private async handleUpload() {
+    const metaInput = this.shadowRoot?.querySelector('#blogMetaFile') as HTMLInputElement;
+    const contentInput = this.shadowRoot?.querySelector('#blogContentFile') as HTMLInputElement;
+    const slugInput = this.shadowRoot?.querySelector('#blogSlug') as HTMLInputElement;
+
+    if (metaInput.files?.[0] && contentInput.files?.[0] && slugInput.value) {
+      try {
+        await this.onUpload(`blogs/${slugInput.value}.json`, metaInput.files[0]);
+        await this.onUpload(`blogs/${slugInput.value}.md`, contentInput.files[0]);
+        this.onStatusMessage('Upload successful!');
+      } catch (e) {
+        this.onStatusMessage('Upload failed.');
+      }
+    }
+  }
+
+  private async handleDelete(slug: string) {
+    if (!confirm(`Delete blog ${slug}?`)) return;
+    try {
+      await this.onDelete(`blogs/${slug}.json`);
+      await this.onDelete(`blogs/${slug}.md`);
+    } catch (e) {
+      this.onStatusMessage('Delete failed.');
+    }
+  }
+
+  render() {
+    const blogs = this.getSectionFiles('blogs/').filter(b => b.key.endsWith('.json'));
+    return html`
+      <div class="section">
+        <h3>Blog Posts</h3>
+        <p class="help-text">Each blog needs 2 files: a JSON (metadata) and MD (content) file.</p>
+
+        <h4>Upload New Blog</h4>
+        <input type="file" id="blogMetaFile" accept=".json" />
+        <input type="file" id="blogContentFile" accept=".md" />
+        <input type="text" id="blogSlug" placeholder="Slug (e.g., my-new-post)" class="mt-1" />
+        <button class="btn-primary" @click=${this.handleUpload}>Upload Blog (JSON + MD)</button>
+
+        <div class="file-list">
+          <h4>Current Blogs (${blogs.length})</h4>
+          ${blogs.map(b => {
+            const slug = b.key.replace('blogs/', '').replace('.json', '');
+            return html`
+              <div class="file-item">
+                <span>${b.key.replace('.json', '')}</span>
+                <button class="btn-danger" @click=${() => this.handleDelete(slug)}>Delete</button>
+              </div>
+            `;
+          })}
+          ${blogs.length === 0 ? html`<p>No blogs yet.</p>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AdminSection } from './AdminSection';
+
+@customElement('admin-images-section')
+export class AdminImagesSection extends AdminSection {
+  private async handleUpload() {
+    const fileInput = this.shadowRoot?.querySelector('#imageFile') as HTMLInputElement;
+    const pathInput = this.shadowRoot?.querySelector('#imagePath') as HTMLInputElement;
+
+    if (fileInput.files?.[0] && pathInput.value) {
+      try {
+        await this.onUpload(`images/${pathInput.value}`, fileInput.files[0]);
+        this.onStatusMessage('Upload successful!');
+      } catch (e) {
+        this.onStatusMessage('Upload failed.');
+      }
+    }
+  }
+
+  private async handleDelete(key: string) {
+    if (!confirm(`Delete ${key}?`)) return;
+    try {
+      await this.onDelete(key);
+    } catch (e) {
+      this.onStatusMessage('Delete failed.');
+    }
+  }
+
+  render() {
+    const images = this.getSectionFiles('images/');
+    return html`
+      <div class="section">
+        <h3>Images</h3>
+        <p class="help-text">Upload images for use in your content. In markdown, reference images by filename only (e.g., use <code>my-photo.jpg</code> not <code>/images/my-photo.jpg</code>). The renderer automatically prepends <code>images/</code>.</p>
+
+        <input type="file" id="imageFile" accept="image/*" />
+        <input type="text" id="imagePath" placeholder="Image name (e.g., profile-photo.jpg)" class="mt-1" />
+        <button class="btn-primary" @click=${this.handleUpload}>Upload to images/</button>
+
+        <div class="file-list">
+          <h4>Current Images (${images.length})</h4>
+          ${images.map(img => html`
+            <div class="file-item">
+              <span>${img.key} (${img.size} bytes)</span>
+              <button class="btn-danger" @click=${() => this.handleDelete(img.key)}>Delete</button>
+            </div>
+          `)}
+          ${images.length === 0 ? html`<p>No images yet.</p>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}