@leadertechie/personal-site-kit 0.1.0-alpha.3 → 0.1.0-alpha.5

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

@@ -1,10 +1,85 @@
 import { css } from 'lit';
 
 export const aboutmeStyles = css`
-  .aboutme {
-    padding: 2rem;
-  }
-  .loading {
-    opacity: 0.7;
-  }
+:host {
+  display: block;
+}
+
+.aboutme {
+  display: block;
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.aboutme h2 {
+  color: var(--link-color);
+  margin-bottom: 15px;
+  font-size: 2em;
+}
+
+.aboutme h3 {
+  color: var(--link-color);
+  margin-bottom: 10px;
+}
+
+.aboutme p {
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.aboutme ul {
+  list-style-type: disc;
+  margin-left: 20px;
+  text-align: left;
+}
+
+.aboutme li {
+  margin-bottom: 5px;
+}
+
+.aboutme .profile-picture {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 20px;
+  border: 3px solid var(--link-color);
+  box-shadow: 
+    0 0 0 4px var(--link-color),
+    0 8px 16px rgba(0, 0, 0, 0.2),
+    0 12px 24px rgba(0, 0, 0, 0.15);
+}
+
+.aboutme .profile-section {
+  text-align: center;
+  background: var(--card-bg, var(--background-color, #fff));
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 
+    0 4px 6px rgba(0, 0, 0, 0.07),
+    0 10px 20px rgba(0, 0, 0, 0.05);
+  margin-bottom: 2rem;
+}
+
+.aboutme .profile-title {
+  color: var(--secondary-text, #666);
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.aboutme h1 {
+  margin-bottom: 0.5rem;
+}
+
+.aboutme .loading {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-color);
+}
+
+.aboutme .content-section {
+  font-family: Arial, sans-serif;
+}
 `;

package/src/ui/admin/styles.ts

@@ -105,13 +105,6 @@ export const adminStyles = css`
   gap: 0.5rem;
 }
 
-.section h4 {
-  margin: 1.5rem 0 0.75rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-color, #213547);
-}
-
 .file-list {
   margin-top: 20px;
 }
@@ -218,46 +211,6 @@ input[type="file"]:hover {
   line-height: 1.5;
 }
 
-.required-badge {
-  background: linear-gradient(135deg, #dc3545, #c82333);
-  color: white;
-  padding: 4px 10px;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  margin-left: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.current-file {
-  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
-  color: #2e7d32;
-  padding: 14px 16px;
-  border-radius: 10px;
-  margin-bottom: 16px;
-  border: 1px solid #a5d6a7;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.current-file strong {
-  color: #1b5e20;
-}
-
-.info-box {
-  background: linear-gradient(135deg, #fff8e1, #ffecb3);
-  color: #f57c00;
-  padding: 14px 16px;
-  border-radius: 10px;
-  margin-bottom: 16px;
-  font-size: 0.9rem;
-  border: 1px solid #ffe082;
-}
-
 .status-message {
   padding: 12px 16px;
   border-radius: 8px;

package/src/ui/banner/styles.ts

@@ -1,10 +1,95 @@
 import { css } from 'lit';
 
 export const bannerStyles = css`
-  .banner {
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.banner,
+.banner-component {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s, color 0.3s;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+  margin-right: auto;
+}
+
+.logo {
+  height: 50px;
+  margin-right: 1rem;
+  width: auto;
+}
+
+/* Logo dark mode - invert colors for better contrast */
+[data-theme="dark"] .logo {
+  filter: brightness(0.85) invert(1);
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.8em;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.nav-and-theme {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  gap: 10px;
+}
+
+nav a {
+  text-decoration: none;
+  color: var(--nav-link-color, #333);
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+nav a:hover {
+  background-color: var(--nav-link-hover-bg, #e2e6ea);
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .banner,
+  .banner-component {
+    flex-direction: column;
+    gap: 1rem;
     padding: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
   }
+  
+  .header-content {
+    margin-right: 0;
+    justify-content: center;
+  }
+  
+  nav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
 `;

package/src/ui/blog-viewer/__tests__/blogviewer.test.ts

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

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