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

package/dist/chunks/{template-gGTkeOcA.js → template-MawmknFQ.js}

@@ -19,7 +19,7 @@ async function initializeConfig(infra) {
   try {
     const res = await fetch(`${activeConfig.apiUrl}/api/static`);
     if (res.ok) {
-      const remoteStatic = await res.json();
+      const remoteStatic = await res.json().catch(() => ({}));
       activeConfig = { ...activeConfig, ...remoteStatic };
     }
   } catch (e) {
@@ -338,9 +338,18 @@ class Router {
         fetch(`${this.apiUrl}/api/stories`),
         fetch(`${this.apiUrl}/api/home`)
       ]);
-      if (blogsRes.ok) blogs = (await blogsRes.json()).slice(0, 3);
-      if (storiesRes.ok) stories = (await storiesRes.json()).slice(0, 3);
-      if (homeRes.ok) homeContent = (await homeRes.json()).content;
+      if (blogsRes.ok) {
+        const data = await blogsRes.json().catch(() => []);
+        blogs = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (storiesRes.ok) {
+        const data = await storiesRes.json().catch(() => []);
+        stories = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (homeRes.ok) {
+        const data = await homeRes.json().catch(() => ({}));
+        homeContent = data.content || "";
+      }
     } catch (e) {
       console.error("Failed to fetch home content", e);
     }

package/dist/index.js

@@ -1,14 +1,16 @@
 import { W } from "./chunks/website-api-CVsi-OLc.js";
 import { WebsitePrerender } from "./prerender.js";
-import { A, F, M, a } from "./chunks/index-BqixlS-2.js";
-import { R, S, T, W as W2, b, c, g, a as a2, i, r } from "./chunks/template-gGTkeOcA.js";
+import { A, B, F, M, a, S } from "./chunks/index-VimKeB5W.js";
+import { R, S as S2, T, W as W2, b, c, g, a as a2, i, r } from "./chunks/template-MawmknFQ.js";
 export {
   A as AdminPortal,
+  B as BlogViewer,
   F as FooterComponent,
   M as MyAboutme,
   a as MyBanner,
   R as Router,
-  S as SiteStore,
+  S2 as SiteStore,
+  S as StoryViewer,
   T as ThemeToggle,
   W as WebsiteAPI,
   WebsitePrerender,

package/dist/shared/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/shared/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,qBAAa,MAAM;IASL,OAAO,CAAC,EAAE;IARtB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAA4B;gBAE1B,EAAE,EAAE,SAAS;IA8B1B,IAAI,CAAC,YAAY,GAAE,MAAc;IAWxC,OAAO,CAAC,mBAAmB;IAmCd,QAAQ,CAAC,IAAI,EAAE,MAAM;IA6BlC,OAAO,CAAC,WAAW;YAgCL,cAAc;IAyB5B,OAAO,CAAC,iBAAiB;YAQX,qBAAqB;YAiBrB,uBAAuB;YAmBvB,eAAe;CAqB9B"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/shared/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,qBAAa,MAAM;IASL,OAAO,CAAC,EAAE;IARtB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAA4B;gBAE1B,EAAE,EAAE,SAAS;IA8B1B,IAAI,CAAC,YAAY,GAAE,MAAc;IAWxC,OAAO,CAAC,mBAAmB;IAmCd,QAAQ,CAAC,IAAI,EAAE,MAAM;IA6BlC,OAAO,CAAC,WAAW;YAgCL,cAAc;IAkC5B,OAAO,CAAC,iBAAiB;YAQX,qBAAqB;YAiBrB,uBAAuB;YAmBvB,eAAe;CAqB9B"}

package/dist/shared.js

@@ -1,4 +1,4 @@
-import { R, S, T, W, b, c, g, a, i, r } from "./chunks/template-gGTkeOcA.js";
+import { R, S, T, W, b, c, g, a, i, r } from "./chunks/template-MawmknFQ.js";
 export {
   R as Router,
   S as SiteStore,

package/dist/ui/about-me/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/about-me/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAOzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/about-me/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAkFzB,CAAC"}

package/dist/ui/admin/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/admin/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBA0TvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/admin/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBA2QvB,CAAC"}

package/dist/ui/banner/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/banner/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAOxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/banner/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA4FxB,CAAC"}

package/dist/ui/blog-viewer/__tests__/blogviewer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=blogviewer.test.d.ts.map

package/dist/ui/blog-viewer/__tests__/blogviewer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blogviewer.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/blog-viewer/__tests__/blogviewer.test.ts"],"names":[],"mappings":""}

package/dist/ui/blog-viewer/index.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+interface BlogPost {
+    title: string;
+    description: string;
+    date: string;
+    tags: string[];
+    author: string;
+    imageUrl: string;
+    content: string;
+}
+export declare class BlogViewer extends LitElement {
+    static styles: import('lit').CSSResult;
+    accessor slug: string;
+    accessor blogPost: BlogPost | null;
+    accessor loading: boolean;
+    accessor error: string;
+    private get apiBaseUrl();
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    loadBlog(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    renderMarkdown(content: string): string;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/blog-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/blog-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAe5C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAAoB;IAGjC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAG1C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAErB;IAED,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,QAAQ;IA2BR,MAAM;IAiCN,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAKxC"}

package/dist/ui/blog-viewer/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const blogviewerStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/blog-viewer/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/blog-viewer/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAoB5B,CAAC"}

package/dist/ui/footer/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/footer/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAMxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/footer/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA+CxB,CAAC"}

package/dist/ui/index.d.ts

@@ -2,4 +2,6 @@ export * from './about-me';
 export * from './admin';
 export * from './banner';
 export * from './footer';
+export * from './blog-viewer';
+export * from './story-viewer';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/ui/story-viewer/__tests__/storyviewer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=storyviewer.test.d.ts.map

package/dist/ui/story-viewer/__tests__/storyviewer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyviewer.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/story-viewer/__tests__/storyviewer.test.ts"],"names":[],"mappings":""}

package/dist/ui/story-viewer/index.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+interface StoryPost {
+    title: string;
+    description: string;
+    date: string;
+    tags: string[];
+    author: string;
+    imageUrl: string;
+    content: string;
+}
+export declare class StoryViewer extends LitElement {
+    static styles: import('lit').CSSResult;
+    accessor slug: string;
+    accessor storyPost: StoryPost | null;
+    accessor loading: boolean;
+    accessor error: string;
+    private get apiBaseUrl();
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: Map<string, any>): void;
+    loadStory(): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderMarkdown;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/story-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/story-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAe5C,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAAqB;IAGlC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG5C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAErB;IAEK,iBAAiB;IAOvB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAMrC,SAAS;IAuBf,MAAM;IAiCN,OAAO,CAAC,cAAc;CAKvB"}

package/dist/ui/story-viewer/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const storyviewerStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/story-viewer/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ui/story-viewer/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAmD7B,CAAC"}

package/dist/ui.js

@@ -1,7 +1,9 @@
-import { A, F, M, a } from "./chunks/index-BqixlS-2.js";
+import { A, B, F, M, a, S } from "./chunks/index-VimKeB5W.js";
 export {
   A as AdminPortal,
+  B as BlogViewer,
   F as FooterComponent,
   M as MyAboutme,
-  a as MyBanner
+  a as MyBanner,
+  S as StoryViewer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leadertechie/personal-site-kit",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "type": "module",
   "description": "A high-performance personal website engine for Cloudflare Workers and R2",
   "repository": {
@@ -12,14 +12,30 @@
   "files": [
     "dist",
     "src",
-    "README.md"
+    "README.md",
+    "public"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./shared": "./dist/shared/index.js",
-    "./ui": "./dist/ui/index.js",
-    "./api": "./dist/api/index.js",
-    "./prerender": "./dist/prerender/index.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./shared": {
+      "types": "./dist/shared.d.ts",
+      "import": "./dist/shared.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./api": {
+      "types": "./dist/api.d.ts",
+      "import": "./dist/api.js"
+    },
+    "./prerender": {
+      "types": "./dist/prerender.d.ts",
+      "import": "./dist/prerender.js"
+    },
     "./styles/*": "./src/styles/*"
   },
   "scripts": {

package/public/assets/logo-placeholder.svg

@@ -0,0 +1,21 @@
+<svg width="600" height="320" viewBox="0 0 600 320" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .text-main { 
+      fill: light-dark(#4A5568, #E2E8F0);
+      font-family: 'Segoe UI', 'Arial Black', sans-serif; 
+      font-weight: 900; 
+      font-size: 46px; 
+      letter-spacing: -0.01em; 
+      text-anchor: middle; 
+    }
+  </style>
+
+  <!-- Big circle placeholder -->
+  <circle cx="300" cy="160" r="100" fill="none" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" stroke-dasharray="8 4" opacity="0.5" />
+  
+  <!-- Plus sign in circle -->
+  <line x1="300" y1="100" x2="300" y2="220" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+  <line x1="240" y1="160" x2="360" y2="160" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+
+  <text x="300" y="290" class="text-main">YOUR LOGO</text>
+</svg>

package/src/shared/config/index.ts

@@ -26,7 +26,7 @@ export async function initializeConfig(infra?: Partial<InfrastructureConfig>): P
   try {
     const res = await fetch(`${activeConfig.apiUrl}/api/static`);
     if (res.ok) {
-      const remoteStatic = await res.json();
+      const remoteStatic = await res.json().catch(() => ({}));
       activeConfig = { ...activeConfig, ...remoteStatic };
     }
   } catch (e) {

package/src/shared/router.ts

@@ -159,9 +159,18 @@ export class Router {
         fetch(`${this.apiUrl}/api/stories`),
         fetch(`${this.apiUrl}/api/home`)
       ]);
-      if (blogsRes.ok) blogs = (await blogsRes.json()).slice(0, 3);
-      if (storiesRes.ok) stories = (await storiesRes.json()).slice(0, 3);
-      if (homeRes.ok) homeContent = (await homeRes.json()).content;
+      if (blogsRes.ok) {
+        const data = await blogsRes.json().catch(() => []);
+        blogs = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (storiesRes.ok) {
+        const data = await storiesRes.json().catch(() => []);
+        stories = Array.isArray(data) ? data.slice(0, 3) : [];
+      }
+      if (homeRes.ok) {
+        const data = await homeRes.json().catch(() => ({}));
+        homeContent = data.content || '';
+      }
     } catch (e) {
       console.error('Failed to fetch home content', e);
     }

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