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

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

@@ -1,85 +0,0 @@
-import { css } from 'lit';
-
-export const aboutmeStyles = css`
-:host {
-  display: block;
-}
-
-.aboutme {
-  display: block;
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-.aboutme h2 {
-  color: var(--link-color);
-  margin-bottom: 15px;
-  font-size: 2em;
-}
-
-.aboutme h3 {
-  color: var(--link-color);
-  margin-bottom: 10px;
-}
-
-.aboutme p {
-  margin-bottom: 10px;
-  text-align: left;
-}
-
-.aboutme ul {
-  list-style-type: disc;
-  margin-left: 20px;
-  text-align: left;
-}
-
-.aboutme li {
-  margin-bottom: 5px;
-}
-
-.aboutme .profile-picture {
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-bottom: 20px;
-  border: 3px solid var(--link-color);
-  box-shadow: 
-    0 0 0 4px var(--link-color),
-    0 8px 16px rgba(0, 0, 0, 0.2),
-    0 12px 24px rgba(0, 0, 0, 0.15);
-}
-
-.aboutme .profile-section {
-  text-align: center;
-  background: var(--card-bg, var(--background-color, #fff));
-  border-radius: 16px;
-  padding: 2rem;
-  box-shadow: 
-    0 4px 6px rgba(0, 0, 0, 0.07),
-    0 10px 20px rgba(0, 0, 0, 0.05);
-  margin-bottom: 2rem;
-}
-
-.aboutme .profile-title {
-  color: var(--secondary-text, #666);
-  margin-bottom: 0;
-  text-align: center;
-}
-
-.aboutme h1 {
-  margin-bottom: 0.5rem;
-}
-
-.aboutme .loading {
-  text-align: center;
-  padding: 20px;
-  color: var(--text-color);
-}
-
-.aboutme .content-section {
-  font-family: Arial, sans-serif;
-}
-`;

package/src/ui/admin/api.ts

@@ -1,93 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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>
-    `;
-  }
-}

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

@@ -1,116 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement('admin-login-form')
-export class AdminLoginForm extends LitElement {
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .container {
-      width: 100%;
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 1rem;
-    }
-
-    .login-box {
-      border: 1px solid var(--border-color, #e0e0e0);
-      padding: 3rem 2.5rem;
-      border-radius: 16px;
-      width: 100%;
-      max-width: 420px;
-      margin: 80px auto;
-      text-align: center;
-      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);
-    }
-
-    .login-box h2 {
-      margin: 0 0 0.5rem 0;
-      font-size: 1.75rem;
-      font-weight: 600;
-      color: var(--text-color, #213547);
-    }
-
-    .login-box p {
-      color: var(--secondary-text, #666);
-      margin-bottom: 1.5rem;
-    }
-
-    input {
-      width: 100%;
-      padding: 10px;
-      margin-bottom: 20px;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      background: var(--background-color);
-      color: var(--text-color);
-      box-sizing: border-box;
-    }
-
-    button {
-      padding: 10px 20px;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 1rem;
-      transition: background-color 0.3s ease;
-    }
-
-    .btn-primary {
-      background: var(--link-color, #646cff);
-      color: white;
-    }
-
-    .btn-primary:hover {
-      background: var(--link-hover-color, #535bf2);
-    }
-
-    .error-message {
-      color: red;
-      margin-bottom: 10px;
-    }
-  `;
-
-  @property({ type: String })
-  accessor errorMessage = '';
-
-  @property({ type: Boolean })
-  accessor isSetup = false;
-
-  private handleSubmit(e: Event) {
-    e.preventDefault();
-    const formData = new FormData(e.target as HTMLFormElement);
-    const username = formData.get('username') as string;
-    const password = formData.get('password') as string;
-    const confirmPassword = formData.get('confirmPassword') as string;
-
-    this.dispatchEvent(new CustomEvent('login-submit', {
-      detail: { username, password, confirmPassword },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  render() {
-    return html`
-      <div class="container">
-        <div class="login-box">
-          <h2>${this.isSetup ? 'Admin Login' : 'Admin Setup'}</h2>
-          <p>${this.isSetup ? 'Enter your credentials' : 'Create your admin credentials'}</p>
-          <form @submit=${this.handleSubmit}>
-            <input type="text" name="username" placeholder="Username${this.isSetup ? '' : ' (3+ chars)'}" autocomplete="username" required />
-            <input type="password" name="password" placeholder="Password${this.isSetup ? '' : ' (8+ chars)'}" autocomplete="current-password" required />
-            ${!this.isSetup ? html`<input type="password" name="confirmPassword" placeholder="Confirm Password" required />` : ''}
-            ${this.errorMessage ? html`<div class="error-message">${this.errorMessage}</div>` : ''}
-            <button type="submit" class="btn-primary">${this.isSetup ? 'Login' : 'Create Account'}</button>
-          </form>
-        </div>
-      </div>
-    `;
-  }
-}

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

@@ -1,51 +0,0 @@
-import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { AdminSection } from './AdminSection';
-
-@customElement('admin-logo-section')
-export class AdminLogoSection extends AdminSection {
-  private async handleUpload() {
-    const input = this.shadowRoot?.querySelector('#logoFile') as HTMLInputElement;
-    if (input.files?.[0]) {
-      try {
-        await this.onUpload('logo.svg', input.files[0]);
-        this.onStatusMessage('Upload successful!');
-      } catch (e) {
-        this.onStatusMessage('Upload failed.');
-      }
-    }
-  }
-
-  private async handleDelete() {
-    if (!confirm('Delete logo.svg?')) return;
-    try {
-      await this.onDelete('logo.svg');
-    } catch (e) {
-      this.onStatusMessage('Delete failed.');
-    }
-  }
-
-  render() {
-    const logo = this.getContent('logo.svg');
-    return html`
-      <div class="section">
-        <h3>Site Logo</h3>
-        <p class="help-text">Upload your site logo (SVG format recommended). This appears in the header of your site.</p>
-
-        ${logo ? html`
-          <div class="current-file">
-            <strong>Current:</strong> logo.svg (${logo.size} bytes)
-            <button class="btn-danger" @click=${this.handleDelete}>Delete</button>
-          </div>
-        ` : ''}
-
-        <input type="file" id="logoFile" accept=".svg,image/svg+xml" />
-        <button class="btn-primary mt-1 mb-1" @click=${this.handleUpload}>Upload logo.svg</button>
-
-        <div class="info-box">
-          <strong>Tip:</strong> Use an SVG with transparent background. The logo will automatically adapt to light/dark themes.
-        </div>
-      </div>
-    `;
-  }
-}