@leadertechie/personal-site-kit 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/styles/markdown.css

@@ -1,129 +0,0 @@
-/* Markdown Content Styles */
-
-.md-heading {
-  margin: 1.5rem 0 0.75rem 0;
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--text-color, #213547);
-}
-
-.md-heading h1 { font-size: 2rem; }
-.md-heading h2 { font-size: 1.5rem; }
-.md-heading h3 { font-size: 1.25rem; }
-.md-heading h4 { font-size: 1.1rem; }
-.md-heading h5, .md-heading h6 { font-size: 1rem; }
-
-.md-paragraph {
-  margin: 0 0 1rem 0;
-  line-height: 1.7;
-  color: var(--text-color, #213547);
-}
-
-.md-list {
-  margin: 0 0 1rem 0;
-  padding-left: 1.5rem;
-}
-
-.md-list-item {
-  margin-bottom: 0.5rem;
-  line-height: 1.6;
-}
-
-.md-blockquote {
-  margin: 1rem 0;
-  padding: 0.75rem 1rem;
-  border-left: 4px solid var(--link-color, #646cff);
-  background: var(--nav-link-hover-bg, #f8f9fa);
-  border-radius: 0 8px 8px 0;
-  color: var(--secondary-text, #666);
-}
-
-.md-blockquote .md-paragraph {
-  margin: 0;
-}
-
-.md-code {
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-  font-size: 0.9em;
-  background: var(--nav-link-hover-bg, #f5f5f5);
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-}
-
-.md-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 1rem 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.md-container {
-  margin: 1rem 0;
-}
-
-.md-container hr {
-  border: none;
-  height: 2px;
-  background: var(--border-color, #eee);
-  margin: 2rem 0;
-  border-radius: 1px;
-}
-
-.md-container[tag="hr"] {
-  margin: 2rem 0;
-}
-
-/* Links within markdown content */
-.md-paragraph a,
-.md-list-item a {
-  color: var(--link-color, #646cff);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.md-paragraph a:hover,
-.md-list-item a:hover {
-  color: var(--link-hover-color, #535bf2);
-  text-decoration: underline;
-}
-
-/* Strong and emphasis */
-.md-paragraph strong,
-.md-list-item strong {
-  font-weight: 600;
-  color: var(--text-color, #1a1a1a);
-}
-
-.md-paragraph em,
-.md-list-item em {
-  font-style: italic;
-}
-
-/* Tables (if supported) */
-.md-container table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-}
-
-.md-container th,
-.md-container td {
-  padding: 0.75rem;
-  border: 1px solid var(--border-color, #ddd);
-  text-align: left;
-}
-
-.md-container th {
-  background: var(--nav-link-hover-bg, #f5f5f5);
-  font-weight: 600;
-}
-
-/* Dark theme adjustments */
-html[data-theme="dark"] .md-code {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-html[data-theme="dark"] .md-container th {
-  background: rgba(255, 255, 255, 0.05);
-}

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

@@ -1,12 +0,0 @@
-export interface Profile {
-  name: string;
-  title: string;
-  experience: string;
-  profileImageUrl?: string;
-}
-
-export async function fetchAboutMe(url: string): Promise<{ profile: Profile; contentNodes: any[] }> {
-  const res = await fetch(`${url}/api/aboutme`);
-  if (!res.ok) throw new Error('Failed to fetch');
-  return res.json();
-}

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

@@ -1,155 +0,0 @@
-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;
-
-  @property({ type: String })
-  accessor baseUrl = '';
-
-  @state()
-  accessor profile: Profile | null = null;
-
-  @state()
-  accessor contentNodes: ContentNode[] = [];
-
-  @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) {
-    super();
-    this.renderer = renderer || new AboutMeRenderer();
-  }
-
-  private get apiBaseUrl(): string {
-    return this.baseUrl || this.getAttribute('base-url') || '';
-  }
-
-  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.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();
-    }
-  }
-
-  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) {
-      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();
-      }
-    }
-  }
-
-  private async loadContent() {
-    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.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'
-      }
-    ];
-  }
-
-  render() {
-    if (this.loading) {
-      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>`;
-    }
-
-    // Render profile header + content
-    const profileImageUrl = this.profile.profileImageUrl 
-      ? (this.profile.profileImageUrl.startsWith('http') || this.profile.profileImageUrl.startsWith('/') 
-         ? this.profile.profileImageUrl 
-         : `images/${this.profile.profileImageUrl}`)
-      : '';
-    
-    return html`
-      <div class="aboutme">
-        <div class="profile-section">
-          ${profileImageUrl ? html`
-            <img src="${profileImageUrl}" alt="${this.profile.name}" 
-                 class="profile-picture">
-          ` : ''}
-          <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>
-    `;
-  }
-}

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

@@ -1,7 +0,0 @@
-import { ContentNode } from '@leadertechie/md2html';
-
-export class AboutMeRenderer {
-  renderContent(nodes: ContentNode[]): unknown {
-    return nodes;
-  }
-}

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

@@ -1,10 +0,0 @@
-import { css } from 'lit';
-
-export const aboutmeStyles = css`
-  .aboutme {
-    padding: 2rem;
-  }
-  .loading {
-    opacity: 0.7;
-  }
-`;