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

package/src/ui/story-viewer/index.ts

@@ -1,120 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { MarkdownPipeline } from '@leadertechie/md2html';
-
-import { storyviewerStyles } from './styles';
-
-const pipeline = new MarkdownPipeline({
-  imagePathPrefix: 'images/',
-  styleOptions: {
-    classPrefix: 'md-',
-    addHeadingIds: true
-  }
-});
-
-interface StoryPost {
-  title: string;
-  description: string;
-  date: string;
-  tags: string[];
-  author: string;
-  imageUrl: string;
-  content: string;
-}
-
-@customElement('my-story-viewer')
-export class StoryViewer extends LitElement {
-  static styles = storyviewerStyles;
-
-  @property({ type: String })
-  accessor slug = '';
-
-  @state()
-  accessor storyPost: StoryPost | null = null;
-
-  @state()
-  accessor loading = true;
-
-  @state()
-  accessor error = '';
-
-  private get apiBaseUrl(): string {
-    return 'https://api.techieleader.com';
-  }
-
-  async connectedCallback() {
-    super.connectedCallback();
-    if (this.slug) {
-      await this.loadStory();
-    }
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('slug') && this.slug) {
-      this.loadStory();
-    }
-  }
-
-  async loadStory() {
-    this.loading = true;
-    this.error = '';
-
-    try {
-      const res = await fetch(`${this.apiBaseUrl}/api/stories/${this.slug}`);
-      if (res.ok) {
-        const story = await res.json();
-        if (story && story.content) {
-          this.storyPost = story;
-        } else {
-          this.error = 'Story content not found';
-        }
-      } else {
-        this.error = 'Story not found';
-      }
-    } catch (e) {
-      this.error = 'Failed to load story';
-    }
-
-    this.loading = false;
-  }
-
-  render() {
-    if (this.loading) {
-      return html`<div class="loading">Loading...</div>`;
-    }
-
-    if (this.error) {
-      return html`<div class="error">${this.error}</div>`;
-    }
-
-    if (!this.storyPost) {
-      return html`<div class="error">Story not found</div>`;
-    }
-
-    const { title, date, tags, content } = this.storyPost;
-
-    return html`
-      <article>
-        <h1>${title}</h1>
-        <div class="meta">
-          <span>${date}</span>
-        </div>
-        ${tags?.length ? html`
-          <div class="tags">
-            ${tags.map(tag => html`<span class="tag">${tag}</span>`)}
-          </div>
-        ` : ''}
-        <div class="content">
-          ${unsafeHTML(this.renderMarkdown(content))}
-        </div>
-      </article>
-    `;
-  }
-
-  private renderMarkdown(content: string): string {
-    if (!content) return '';
-    const nodes = pipeline.parse(content);
-    return pipeline.render(nodes);
-  }
-}

package/src/ui/story-viewer/styles.ts

@@ -1,54 +0,0 @@
-import { css } from 'lit';
-
-export const storyviewerStyles = css`
-:host {
-  display: block;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.loading {
-  text-align: center;
-  padding: 2rem;
-}
-
-.error {
-  color: red;
-  text-align: center;
-  padding: 2rem;
-}
-
-h1 {
-  margin-bottom: 0.5rem;
-}
-
-.meta {
-  color: #666;
-  margin-bottom: 2rem;
-}
-
-.tags {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-}
-
-.tag {
-  background: var(--nav-link-hover-bg, #f0f0f0);
-  color: var(--text-color, #333);
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  border: 1px solid var(--border-color, transparent);
-}
-
-.content {
-  line-height: 1.8;
-  text-align: left;
-}
-
-.content h1, .content h2, .content h3 {
-  margin-top: 1.5rem;
-}
-`;