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

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

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

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

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

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

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AdminSection } from './AdminSection';
+
+@customElement('admin-profile-section')
+export class AdminProfileSection extends AdminSection {
+  private async handleUpload() {
+    const input = this.shadowRoot?.querySelector('#profileFile') as HTMLInputElement;
+    if (input.files?.[0]) {
+      try {
+        await this.onUpload('profile.json', input.files[0]);
+        this.onStatusMessage('Upload successful!');
+      } catch (e) {
+        this.onStatusMessage('Upload failed.');
+      }
+    }
+  }
+
+  private async handleDelete() {
+    if (!confirm('Delete profile.json?')) return;
+    try {
+      await this.onDelete('profile.json');
+    } catch (e) {
+      this.onStatusMessage('Delete failed.');
+    }
+  }
+
+  render() {
+    const profile = this.getContent('profile.json');
+    return html`
+      <div class="section">
+        <h3>Profile <span class="required-badge">Required</span></h3>
+        <p class="help-text">This file contains your profile information (name, title, experience).</p>
+
+        ${profile ? html`
+          <div class="current-file">
+            <strong>Current:</strong> profile.json (${profile.size} bytes)
+            <button class="btn-danger" @click=${this.handleDelete}>Delete</button>
+          </div>
+        ` : ''}
+
+        <input type="file" id="profileFile" accept=".json" />
+        <button class="btn-primary" @click=${this.handleUpload}>Upload profile.json</button>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,67 @@
+import { html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { AdminSection } from './AdminSection';
+
+@customElement('admin-static-section')
+export class AdminStaticSection extends AdminSection {
+  @state()
+  accessor localDetails = { ...this.staticDetails };
+
+  private async handleSave() {
+    const siteTitle = (this.shadowRoot?.querySelector('#siteTitle') as HTMLInputElement)?.value;
+    const copyright = (this.shadowRoot?.querySelector('#copyright') as HTMLInputElement)?.value;
+    const linkedin = (this.shadowRoot?.querySelector('#linkedin') as HTMLInputElement)?.value;
+    const github = (this.shadowRoot?.querySelector('#github') as HTMLInputElement)?.value;
+    const email = (this.shadowRoot?.querySelector('#email') as HTMLInputElement)?.value;
+
+    const data: Record<string, string> = {};
+    if (siteTitle) data.siteTitle = siteTitle;
+    if (copyright) data.copyright = copyright;
+    if (linkedin) data.linkedin = linkedin;
+    if (github) data.github = github;
+    if (email) data.email = email;
+
+    try {
+      await this.onUpload('staticdetails.json', new File([JSON.stringify(data)], 'staticdetails.json', { type: 'application/json' }));
+      this.onStatusMessage('Settings saved!');
+    } catch (e) {
+      this.onStatusMessage('Failed to save settings.');
+    }
+  }
+
+  render() {
+    return html`
+      <div class="section">
+        <h3>Site Settings</h3>
+        <p class="help-text">Manage your site's static details like title, footer links, etc.</p>
+
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Site Title</label>
+          <input type="text" id="siteTitle" .value=${this.staticDetails?.siteTitle || ''} />
+        </div>
+
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Copyright Text</label>
+          <input type="text" id="copyright" .value=${this.staticDetails?.copyright || ''} />
+        </div>
+
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">LinkedIn URL</label>
+          <input type="text" id="linkedin" .value=${this.staticDetails?.linkedin || ''} />
+        </div>
+
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">GitHub URL</label>
+          <input type="text" id="github" .value=${this.staticDetails?.github || ''} />
+        </div>
+
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Email</label>
+          <input type="text" id="email" .value=${this.staticDetails?.email || ''} />
+        </div>
+
+        <button class="btn-primary" @click=${this.handleSave}>Save Settings</button>
+      </div>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+export * from './AdminSection';
+export * from './LoginForm';
+export * from './HomeSection';
+export * from './ProfileSection';
+export * from './AboutMeSection';
+export * from './BlogsSection';
+export * from './StoriesSection';
+export * from './ImagesSection';
+export * from './LogoSection';
+export * from './StaticSection';