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

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

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

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

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

@@ -1,10 +0,0 @@
-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';

package/src/ui/admin/index.ts

@@ -1,413 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-
-import { adminStyles } from './styles';
-import { AdminApiService } from './api';
-import type { ContentItem, StaticDetails } from './types';
-import { SiteStore } from '../../shared/core/site-store';
-import {
-  AdminLoginForm,
-  AdminHomeSection,
-  AdminProfileSection,
-  AdminAboutMeSection,
-  AdminBlogsSection,
-  AdminStoriesSection,
-  AdminImagesSection,
-  AdminLogoSection,
-  AdminStaticSection
-} from './components';
-
-export {
-  AdminLoginForm,
-  AdminHomeSection,
-  AdminProfileSection,
-  AdminAboutMeSection,
-  AdminBlogsSection,
-  AdminStoriesSection,
-  AdminImagesSection,
-  AdminLogoSection,
-  AdminStaticSection
-};
-
-@customElement('admin-portal')
-export class AdminPortal extends LitElement {
-  static styles = adminStyles;
-
-  @state()
-  accessor isAuthenticated = false;
-
-  @state()
-  accessor isSetup = false;
-
-  @state()
-  accessor isLoading = true;
-
-  @state()
-  accessor contentList: ContentItem[] = [];
-
-  @state()
-  accessor statusMessage = '';
-
-  @state()
-  accessor activeSection = 'profile';
-
-  @state()
-  accessor staticDetails: StaticDetails = {};
-
-  @state()
-  accessor loginError = '';
-
-  private apiService: AdminApiService;
-
-  constructor() {
-    super();
-    const apiUrl = window.location.origin;
-    this.apiService = new AdminApiService(apiUrl);
-  }
-
-  private hasSessionCookie(): boolean {
-    return document.cookie.includes('session=');
-  }
-
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.checkAuthStatus();
-    this.requestUpdate();
-  }
-
-  async checkAuthStatus() {
-    try {
-      const status = await this.apiService.checkAuthStatus();
-      this.isSetup = status.configured;
-      if (status.configured && this.hasSessionCookie()) {
-        await this.tryAutoLogin();
-      }
-    } catch (e) {
-      console.error('Auth status check failed:', e);
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  async tryAutoLogin() {
-    try {
-      this.contentList = await this.apiService.tryAutoLogin();
-      this.isAuthenticated = true;
-    } catch (e) {
-      console.error('Auto login failed:', e);
-    }
-  }
-
-  async handleLogin(e: CustomEvent) {
-    const { username, password } = e.detail;
-    this.loginError = '';
-
-    if (!username || !password) {
-      this.loginError = 'Username and password required';
-      return;
-    }
-
-    try {
-      await this.apiService.login(username, password);
-      this.isAuthenticated = true;
-      await this.fetchContent();
-    } catch (e) {
-      this.loginError = (e as Error).message;
-    }
-  }
-
-  async handleSetup(e: CustomEvent) {
-    const { username, password, confirmPassword } = e.detail;
-    this.loginError = '';
-
-    if (!username || !password) {
-      this.loginError = 'Username and password required';
-      return;
-    }
-
-    if (username.length < 3) {
-      this.loginError = 'Username must be at least 3 characters';
-      return;
-    }
-
-    if (password.length < 8) {
-      this.loginError = 'Password must be at least 8 characters';
-      return;
-    }
-
-    if (password !== confirmPassword) {
-      this.loginError = 'Passwords do not match';
-      return;
-    }
-
-    try {
-      await this.apiService.setup(username, password);
-      this.isAuthenticated = true;
-      this.isSetup = true;
-      await this.fetchContent();
-    } catch (e) {
-      this.loginError = (e as Error).message;
-    }
-  }
-
-  async handleLogout() {
-    try {
-      await this.apiService.logout();
-    } catch (e) {}
-    this.isAuthenticated = false;
-    this.contentList = [];
-  }
-
-  async fetchContent() {
-    try {
-      this.contentList = await this.apiService.fetchContent();
-    } catch (e) {
-      this.statusMessage = 'Error fetching content.';
-    }
-  }
-
-  async fetchStaticDetails() {
-    try {
-      this.staticDetails = await this.apiService.fetchStaticDetails();
-    } catch (e) {}
-  }
-
-  async handleUpload(key: string, file: File) {
-    try {
-      this.statusMessage = 'Uploading...';
-      await this.apiService.uploadContent(key, file);
-      this.statusMessage = 'Upload successful!';
-      await this.fetchContent();
-    } catch (e) {
-      this.statusMessage = 'Error uploading.';
-    }
-  }
-
-  async handleClearCache() {
-    try {
-      this.statusMessage = 'Clearing cache...';
-      await this.apiService.clearCache();
-      this.statusMessage = 'Cache cleared!';
-    } catch (e) {
-      this.statusMessage = 'Error clearing cache.';
-    }
-  }
-
-  async handleDelete(key: string) {
-    try {
-      await this.apiService.deleteContent(key);
-      await this.fetchContent();
-    } catch (e) {
-      this.statusMessage = 'Error deleting.';
-    }
-  }
-
-  private handleStatusMessage(message: string) {
-    this.statusMessage = message;
-  }
-
-  renderLoginForm() {
-    return html`
-      <admin-login-form
-        .errorMessage=${this.loginError}
-        .isSetup=${false}
-        @login-submit=${this.handleSetup}
-      ></admin-login-form>
-    `;
-  }
-
-  renderLogin() {
-    return html`
-      <admin-login-form
-        .errorMessage=${this.loginError}
-        .isSetup=${true}
-        @login-submit=${this.handleLogin}
-      ></admin-login-form>
-    `;
-  }
-
-  render() {
-    if (this.isLoading) {
-      return html`<div class="container"><div class="loading">Loading...</div></div>`;
-    }
-
-    if (!this.isSetup) {
-      return this.renderLoginForm();
-    }
-
-    if (!this.isAuthenticated) {
-      return this.renderLogin();
-    }
-
-    return html`
-      <div class="container">
-        <div class="header">
-          <h1>Content Manager</h1>
-          <button class="btn-secondary" @click=${() => this.handleLogout()}>Logout</button>
-          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
-        </div>
-
-        <div class="nav-tabs">
-          <button class="nav-tab ${this.activeSection === 'home' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'home'}>Home</button>
-          <button class="nav-tab ${this.activeSection === 'profile' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'profile'}>Profile</button>
-          <button class="nav-tab ${this.activeSection === 'aboutme' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'aboutme'}>About Me</button>
-          <button class="nav-tab ${this.activeSection === 'blogs' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'blogs'}>Blogs</button>
-          <button class="nav-tab ${this.activeSection === 'stories' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'stories'}>Stories</button>
-          <button class="nav-tab ${this.activeSection === 'images' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'images'}>Images</button>
-          <button class="nav-tab ${this.activeSection === 'logo' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'logo'}>Logo</button>
-          <button class="nav-tab ${this.activeSection === 'static' ? 'active' : ''}"
-            @click=${() => { this.activeSection = 'static'; this.fetchStaticDetails(); }}>Site Settings</button>
-        </div>
-
-        ${this.statusMessage ? html`
-          <div class="status-message ${this.statusMessage.includes('successful') || this.statusMessage.includes('cleared') ? 'success' : this.statusMessage.includes('failed') || this.statusMessage.includes('Error') ? 'error' : ''}">
-            ${this.statusMessage}
-          </div>
-        ` : ''}
-
-        ${this.activeSection === 'home' ? html`
-          <admin-home-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-home-section>
-        ` : ''}
-
-        ${this.activeSection === 'profile' ? html`
-          <admin-profile-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-profile-section>
-        ` : ''}
-
-        ${this.activeSection === 'aboutme' ? html`
-          <admin-about-me-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-about-me-section>
-        ` : ''}
-
-        ${this.activeSection === 'blogs' ? html`
-          <admin-blogs-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-blogs-section>
-        ` : ''}
-
-        ${this.activeSection === 'stories' ? html`
-          <admin-stories-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-stories-section>
-        ` : ''}
-
-        ${this.activeSection === 'images' ? html`
-          <admin-images-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-images-section>
-        ` : ''}
-
-        ${this.activeSection === 'logo' ? html`
-          <admin-logo-section
-            .contentList=${this.contentList}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-logo-section>
-        ` : ''}
-
-        ${this.activeSection === 'static' ? html`
-          <admin-static-section
-            .contentList=${this.contentList}
-            .staticDetails=${this.staticDetails}
-            .onUpload=${this.handleUpload.bind(this)}
-            .onDelete=${this.handleDelete.bind(this)}
-            .onStatusMessage=${this.handleStatusMessage.bind(this)}
-          ></admin-static-section>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  render() {
-    if (this.isLoading) {
-      return html`<div class="container"><div class="loading">Loading...</div></div>`;
-    }
-
-    if (!this.isSetup) {
-      return this.renderLoginForm();
-    }
-
-    if (!this.isAuthenticated) {
-      return this.renderLogin();
-    }
-
-    return html`
-      <div class="container">
-        <div class="header">
-          <h1>Content Manager</h1>
-          <button class="btn-secondary" @click=${() => this.handleLogout()}>Logout</button>
-          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
-        </div>
-        
-        <div class="nav-tabs">
-          <button class="nav-tab ${this.activeSection === 'home' ? 'active' : ''}" 
-            @click=${() => this.activeSection = 'home'}>Home</button>
-          <button class="nav-tab ${this.activeSection === 'profile' ? 'active' : ''}" 
-            @click=${() => this.activeSection = 'profile'}>Profile</button>
-          <button class="nav-tab ${this.activeSection === 'aboutme' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'aboutme'}>About Me</button>
-          <button class="nav-tab ${this.activeSection === 'blogs' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'blogs'}>Blogs</button>
-          <button class="nav-tab ${this.activeSection === 'stories' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'stories'}>Stories</button>
-          <button class="nav-tab ${this.activeSection === 'images' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'images'}>Images</button>
-          <button class="nav-tab ${this.activeSection === 'logo' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'logo'}>Logo</button>
-          <button class="nav-tab ${this.activeSection === 'static' ? 'active' : ''}"
-            @click=${() => { 
-              this.activeSection = 'static'; 
-              this.fetchStaticDetails(); 
-            }}>Site Settings</button>
-        </div>
-
-        ${this.statusMessage ? html`
-          <div class="status-message ${this.statusMessage.includes('successful') || this.statusMessage.includes('cleared') ? 'success' : this.statusMessage.includes('failed') || this.statusMessage.includes('Error') ? 'error' : ''}">
-            ${this.statusMessage}
-          </div>
-        ` : ''}
-
-        ${this.activeSection === 'home' ? this.renderHomeSection() : ''}
-        ${this.activeSection === 'profile' ? this.renderProfileSection() : ''}
-        ${this.activeSection === 'aboutme' ? this.renderAboutMeSection() : ''}
-        ${this.activeSection === 'blogs' ? this.renderBlogsSection() : ''}
-        ${this.activeSection === 'stories' ? this.renderStoriesSection() : ''}
-        ${this.activeSection === 'images' ? this.renderImagesSection() : ''}
-        ${this.activeSection === 'logo' ? this.renderLogoSection() : ''}
-        ${this.activeSection === 'static' ? this.renderStaticSection() : ''}
-      </div>
-    `;
-  }
-}
-
-export const adminLoaded = true;