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

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

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { MarkdownPipeline, ContentNode } from '@leadertechie/md2html';
+
+import { blogviewerStyles } from './styles';
+
+const pipeline = new MarkdownPipeline({
+  imagePathPrefix: 'images/',
+  styleOptions: {
+    classPrefix: 'md-',
+    addHeadingIds: true
+  }
+});
+
+interface BlogPost {
+  title: string;
+  description: string;
+  date: string;
+  tags: string[];
+  author: string;
+  imageUrl: string;
+  content: string;
+}
+
+@customElement('my-blog-viewer')
+export class BlogViewer extends LitElement {
+  static styles = blogviewerStyles;
+
+  @property({ type: String })
+  accessor slug = '';
+
+  @state()
+  accessor blogPost: BlogPost | null = null;
+
+  @state()
+  accessor loading = true;
+
+  @state()
+  accessor error = '';
+
+  private get apiBaseUrl(): string {
+    return 'https://api.techieleader.com';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.slug) {
+      this.loadBlog();
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('slug') && this.slug) {
+      this.loadBlog();
+    }
+  }
+
+  loadBlog() {
+    this.loading = true;
+    this.error = '';
+    console.log('[BlogViewer] Loading blog:', this.slug);
+
+    fetch(`${this.apiBaseUrl}/api/blogs/${this.slug}`)
+      .then(res => {
+        console.log('[BlogViewer] Response status:', res.status);
+        if (res.ok) return res.json();
+        throw new Error('Failed to load blog');
+      })
+      .then(blog => {
+        console.log('[BlogViewer] Found blog:', blog?.title, 'slug:', blog?.slug);
+        if (blog && blog.content) {
+          this.blogPost = blog;
+        } else {
+          this.error = 'Blog content not found';
+        }
+        this.loading = false;
+      })
+      .catch(e => {
+        console.error('[BlogViewer] Failed to load blog:', e);
+        this.error = 'Failed to load blog';
+        this.loading = false;
+      });
+  }
+
+  render() {
+    if (this.loading) {
+      return html`<div class="blog-viewer"><div class="loading">Loading...</div></div>`;
+    }
+
+    if (this.error) {
+      return html`<div class="blog-viewer"><div class="error">${this.error}</div></div>`;
+    }
+
+    if (!this.blogPost) {
+      return html`<div class="blog-viewer"><div class="error">Blog not found</div></div>`;
+    }
+
+    const { title, date, tags, content } = this.blogPost;
+
+    return html`
+      <article class="blog-viewer">
+        <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>
+    `;
+  }
+
+  renderMarkdown(content: string): string {
+    if (!content) return '';
+    const nodes = pipeline.parse(content);
+    return pipeline.render(nodes);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export const blogviewerStyles = css`
+:host {
+  display: block;
+}
+
+.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);
+}
+`;

package/src/ui/footer/index.ts

@@ -20,7 +20,7 @@ export class FooterComponent extends LitElement {
       <div class="footer-content">
         <span>&copy; ${this.copyright}</span>
         <span class="links">
-          ${this.footerLinks.map(
+          ${(this.footerLinks || []).map(
             (link) => {
               const isExternal = link.link.startsWith('http') || link.link.startsWith('mailto:');
               return html`<a 

package/src/ui/footer/styles.ts

@@ -1,9 +1,50 @@
 import { css } from 'lit';
 
 export const footerStyles = css`
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background: var(--background-color);
+  color: var(--text-color);
+  border-top: 1px solid var(--nav-link-hover-bg);
+  flex-wrap: wrap;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.links {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.links a {
+  color: inherit;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.links a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
   .footer-content {
-    padding: 1rem;
-    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
     justify-content: space-between;
   }
+  .links {
+    margin-top: 0;
+  }
+}
 `;

package/src/ui/index.ts

@@ -2,3 +2,5 @@ export * from './about-me';
 export * from './admin';
 export * from './banner';
 export * from './footer';
+export * from './blog-viewer';
+export * from './story-viewer';

package/src/ui/story-viewer/__tests__/storyviewer.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('StoryViewer Package', () => {
+  it('should have valid exports', () => {
+    expect(true).toBe(true);
+  });
+});

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

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

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