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

package/dist/chunks/index-VimKeB5W.js

@@ -0,0 +1,1927 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { MarkdownPipeline } from "@leadertechie/md2html";
+const aboutmeStyles = css`
+: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;
+}
+`;
+class AboutMeRenderer {
+  renderContent(nodes) {
+    return nodes;
+  }
+}
+async function fetchAboutMe(url) {
+  const res = await fetch(`${url}/api/aboutme`);
+  if (!res.ok) throw new Error("Failed to fetch");
+  return res.json();
+}
+var __create$5 = Object.create;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$5 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$5 = (target, value) => __defProp$5(target, "name", { value, configurable: true });
+var __decoratorStart$5 = (base) => [, , , __create$5(base?.[__knownSymbol$5("metadata")] ?? null)];
+var __decoratorStrings$5 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$5 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$5("Function expected") : fn;
+var __decoratorContext$5 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$5[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$5("Already initialized") : fns.push(__expectFn$5(fn || null)) });
+var __decoratorMetadata$5 = (array, target) => __defNormalProp$5(target, __knownSymbol$5("metadata"), array[3]);
+var __runInitializers$5 = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
+  return value;
+};
+var __decorateElement$5 = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k2 = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var j = k2 > 3 ? array.length + 1 : k2 ? s2 ? 1 : 2 : 0, key = __decoratorStrings$5[k2 + 5];
+  var initializers = k2 > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (!p2 && !s2 && (target = target.prototype), k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc$5(k2 < 4 ? target : { get [name]() {
+    return __privateGet$4(this, extra);
+  }, set [name](x) {
+    return __privateSet$4(this, extra, x);
+  } }, name));
+  k2 ? p2 && k2 < 4 && __name$5(extra, (k2 > 2 ? "set " : k2 > 1 ? "get " : "") + name) : __name$5(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext$5(k2, name, done = {}, array[3], extraInitializers);
+    if (k2) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$4(target, x) : (x) => name in x };
+      if (k2 ^ 3) access.get = p2 ? (x) => (k2 ^ 1 ? __privateGet$4 : __privateMethod$4)(x, target, k2 ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k2 > 2) access.set = p2 ? (x, y2) => __privateSet$4(x, target, y2, k2 ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+    }
+    it = (0, decorators[i2])(k2 ? k2 < 4 ? p2 ? extra : desc[key] : k2 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k2 ^ 4 || it === void 0) __expectFn$5(it) && (k2 > 4 ? initializers.unshift(it) : k2 ? p2 ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$5("Object expected");
+    else __expectFn$5(fn = it.get) && (desc.get = fn), __expectFn$5(fn = it.set) && (desc.set = fn), __expectFn$5(fn = it.init) && initializers.unshift(fn);
+  }
+  return k2 || __decoratorMetadata$5(array, target), desc && __defProp$5(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateIn$4 = (member, obj) => Object(obj) !== obj ? __typeError$5('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$4 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
+var _loading_dec$2, _contentNodes_dec, _profile_dec, _baseUrl_dec, _a$5, _MyAboutme_decorators, _init$5, _baseUrl, _profile, _contentNodes, _loading$2;
+_MyAboutme_decorators = [customElement("my-aboutme")];
+class MyAboutme extends (_a$5 = LitElement, _baseUrl_dec = [property({ type: String })], _profile_dec = [state()], _contentNodes_dec = [state()], _loading_dec$2 = [state()], _a$5) {
+  constructor(renderer) {
+    super();
+    __privateAdd$4(this, _baseUrl, __runInitializers$5(_init$5, 8, this, "")), __runInitializers$5(_init$5, 11, this);
+    __privateAdd$4(this, _profile, __runInitializers$5(_init$5, 12, this, null)), __runInitializers$5(_init$5, 15, this);
+    __privateAdd$4(this, _contentNodes, __runInitializers$5(_init$5, 16, this, [])), __runInitializers$5(_init$5, 19, this);
+    __privateAdd$4(this, _loading$2, __runInitializers$5(_init$5, 20, this, true)), __runInitializers$5(_init$5, 23, this);
+    this.renderer = void 0;
+    this.fetcher = fetchAboutMe;
+    this.renderer = renderer || new AboutMeRenderer();
+  }
+  get apiBaseUrl() {
+    return this.baseUrl || this.getAttribute("base-url") || "";
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    if (typeof window !== "undefined" && window.__HYDRATION_DATA__) {
+      const hydrationData = window.__HYDRATION_DATA__;
+      this.profile = hydrationData.profile;
+      this.contentNodes = hydrationData.contentNodes;
+      this.loading = false;
+      return;
+    }
+    const url = this.apiBaseUrl;
+    if (url) {
+      this.loadContent();
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.loading === false && this.profile && this.contentNodes.length > 0) {
+      return;
+    }
+    if (changedProperties.has("baseUrl") || changedProperties.has("base-url")) {
+      const url = this.apiBaseUrl;
+      if (url) {
+        this.loadContent();
+      }
+    }
+  }
+  async loadContent() {
+    try {
+      this.loading = true;
+      const url = this.apiBaseUrl;
+      const data = await this.fetcher(url);
+      this.profile = data.profile;
+      this.contentNodes = data.contentNodes;
+      this.loading = false;
+      await this.updateComplete;
+    } catch (error) {
+      this.loading = false;
+      this.setFallbackContent();
+      await this.updateComplete;
+    }
+  }
+  setFallbackContent() {
+    this.profile = null;
+    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 (!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>`;
+    }
+    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>
+    `;
+  }
+}
+_init$5 = __decoratorStart$5(_a$5);
+_baseUrl = /* @__PURE__ */ new WeakMap();
+_profile = /* @__PURE__ */ new WeakMap();
+_contentNodes = /* @__PURE__ */ new WeakMap();
+_loading$2 = /* @__PURE__ */ new WeakMap();
+__decorateElement$5(_init$5, 4, "baseUrl", _baseUrl_dec, MyAboutme, _baseUrl);
+__decorateElement$5(_init$5, 4, "profile", _profile_dec, MyAboutme, _profile);
+__decorateElement$5(_init$5, 4, "contentNodes", _contentNodes_dec, MyAboutme, _contentNodes);
+__decorateElement$5(_init$5, 4, "loading", _loading_dec$2, MyAboutme, _loading$2);
+MyAboutme = __decorateElement$5(_init$5, 0, "MyAboutme", _MyAboutme_decorators, MyAboutme);
+MyAboutme.styles = aboutmeStyles;
+__runInitializers$5(_init$5, 1, MyAboutme);
+const adminStyles = css`
+:host {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 20px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--text-color, #213547);
+  background-color: var(--background-color, #fff);
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.login-box {
+  border: 1px solid var(--border-color, #e0e0e0);
+  padding: 3rem 2.5rem;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 420px;
+  margin: 80px auto;
+  text-align: center;
+  background: var(--card-bg, #fff);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.05);
+}
+
+.login-box h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--text-color, #213547);
+}
+
+.login-box p {
+  color: var(--secondary-text, #666);
+  margin-bottom: 1.5rem;
+}
+
+.nav-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  padding: 0.5rem;
+  background: var(--card-bg, #fff);
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  width: 100%;
+}
+
+.nav-tab {
+  padding: 0.6rem 1.25rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-color, #213547);
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.nav-tab:hover {
+  background: var(--nav-link-hover-bg, #f0f0f0);
+  color: var(--link-color, #646cff);
+}
+
+.nav-tab.active {
+  background: var(--link-color, #646cff);
+  color: white;
+  box-shadow: 0 2px 8px rgba(100, 108, 255, 0.3);
+}
+
+.section {
+  width: 100%;
+  border: none;
+  padding: 24px;
+  border-radius: 16px;
+  background: var(--card-bg, #fff);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.05);
+  margin-bottom: 20px;
+  min-height: 450px;
+  box-sizing: border-box;
+}
+
+.section h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-color, #213547);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.file-list {
+  margin-top: 20px;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color, #eee);
+  border-radius: 8px;
+  transition: background 0.15s ease;
+}
+
+.file-item:hover {
+  background: var(--nav-link-hover-bg, #f8f9fa);
+}
+
+.file-item:last-child {
+  border-bottom: none;
+}
+
+button {
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--link-color, #646cff);
+  color: white;
+  box-shadow: 0 2px 4px rgba(100, 108, 255, 0.25);
+}
+
+.btn-primary:hover {
+  background: var(--link-hover-color, #535bf2);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(100, 108, 255, 0.3);
+}
+
+.btn-danger {
+  color: #dc3545;
+  background: transparent;
+  border: 1px solid #dc3545;
+  padding: 6px 12px;
+  font-size: 0.85rem;
+}
+
+.btn-danger:hover {
+  background: #dc3545;
+  color: white;
+}
+
+.btn-secondary {
+  background: var(--nav-link-hover-bg, #f0f0f0);
+  color: var(--text-color, #333);
+  border: none;
+  font-size: 0.85rem;
+  padding: 8px 16px;
+}
+
+.btn-secondary:hover {
+  background: #e0e0e0;
+}
+
+input[type="text"], input[type="password"], input[type="file"] {
+  padding: 12px 14px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+  border: 2px solid var(--border-color, #e0e0e0);
+  border-radius: 10px;
+  background-color: var(--background-color, #fff);
+  color: var(--text-color, #213547);
+  font-size: 0.95rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+  outline: none;
+  border-color: var(--link-color, #646cff);
+  box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.15);
+}
+
+input[type="file"] {
+  padding: 10px;
+  border-style: dashed;
+  cursor: pointer;
+}
+
+input[type="file"]:hover {
+  border-color: var(--link-color, #646cff);
+  background: rgba(100, 108, 255, 0.03);
+}
+
+.help-text {
+  color: var(--secondary-text, #666);
+  font-size: 0.9rem;
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.status-message {
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 0.9rem;
+  background: var(--nav-link-hover-bg, #f5f5f5);
+  color: var(--text-color, #333);
+}
+
+.status-message.success {
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  color: #2e7d32;
+  border: 1px solid #a5d6a7;
+}
+
+.status-message.error {
+  background: linear-gradient(135deg, #ffebee, #ffcdd2);
+  color: #c62828;
+  border: 1px solid #ef9a9a;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--border-color, #eee);
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-color, #213547);
+}
+
+.mt-1 { margin-top: 12px; }
+.mb-1 { margin-bottom: 1rem; }
+
+@media (max-width: 600px) {
+  .container {
+    padding: 0.5rem;
+  }
+  .section {
+    padding: 16px;
+  }
+  .nav-tabs {
+    gap: 4px;
+    padding: 8px;
+  }
+  .nav-tab {
+    padding: 8px 12px;
+    font-size: 0.85rem;
+  }
+}
+`;
+var __create$4 = Object.create;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$4 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$4 = (target, value) => __defProp$4(target, "name", { value, configurable: true });
+var __decoratorStart$4 = (base) => [, , , __create$4(base?.[__knownSymbol$4("metadata")] ?? null)];
+var __decoratorStrings$4 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$4 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
+var __decoratorContext$4 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$4[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$4("Already initialized") : fns.push(__expectFn$4(fn || null)) });
+var __decoratorMetadata$4 = (array, target) => __defNormalProp$4(target, __knownSymbol$4("metadata"), array[3]);
+var __runInitializers$4 = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
+  return value;
+};
+var __decorateElement$4 = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k2 = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var j = k2 > 3 ? array.length + 1 : k2 ? s2 ? 1 : 2 : 0, key = __decoratorStrings$4[k2 + 5];
+  var initializers = k2 > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (!p2 && !s2 && (target = target.prototype), k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc$4(k2 < 4 ? target : { get [name]() {
+    return __privateGet$3(this, extra);
+  }, set [name](x) {
+    return __privateSet$3(this, extra, x);
+  } }, name));
+  k2 ? p2 && k2 < 4 && __name$4(extra, (k2 > 2 ? "set " : k2 > 1 ? "get " : "") + name) : __name$4(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext$4(k2, name, done = {}, array[3], extraInitializers);
+    if (k2) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$3(target, x) : (x) => name in x };
+      if (k2 ^ 3) access.get = p2 ? (x) => (k2 ^ 1 ? __privateGet$3 : __privateMethod$3)(x, target, k2 ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k2 > 2) access.set = p2 ? (x, y2) => __privateSet$3(x, target, y2, k2 ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+    }
+    it = (0, decorators[i2])(k2 ? k2 < 4 ? p2 ? extra : desc[key] : k2 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k2 ^ 4 || it === void 0) __expectFn$4(it) && (k2 > 4 ? initializers.unshift(it) : k2 ? p2 ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$4("Object expected");
+    else __expectFn$4(fn = it.get) && (desc.get = fn), __expectFn$4(fn = it.set) && (desc.set = fn), __expectFn$4(fn = it.init) && initializers.unshift(fn);
+  }
+  return k2 || __decoratorMetadata$4(array, target), desc && __defProp$4(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateIn$3 = (member, obj) => Object(obj) !== obj ? __typeError$4('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var _staticDetails_dec, _activeSection_dec, _statusMessage_dec, _contentList_dec, _isAuthenticated_dec, _apiKey_dec, _a$4, _AdminPortal_decorators, _init$4, _apiKey, _isAuthenticated, _contentList, _statusMessage, _activeSection, _staticDetails;
+console.log("[AdminPortal] Module loading");
+console.log("[AdminPortal] About to define custom element");
+_AdminPortal_decorators = [customElement("admin-portal")];
+class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthenticated_dec = [state()], _contentList_dec = [state()], _statusMessage_dec = [state()], _activeSection_dec = [state()], _staticDetails_dec = [state()], _a$4) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$3(this, _apiKey, __runInitializers$4(_init$4, 8, this, "")), __runInitializers$4(_init$4, 11, this);
+    __privateAdd$3(this, _isAuthenticated, __runInitializers$4(_init$4, 12, this, false)), __runInitializers$4(_init$4, 15, this);
+    __privateAdd$3(this, _contentList, __runInitializers$4(_init$4, 16, this, [])), __runInitializers$4(_init$4, 19, this);
+    __privateAdd$3(this, _statusMessage, __runInitializers$4(_init$4, 20, this, "")), __runInitializers$4(_init$4, 23, this);
+    __privateAdd$3(this, _activeSection, __runInitializers$4(_init$4, 24, this, "profile")), __runInitializers$4(_init$4, 27, this);
+    __privateAdd$3(this, _staticDetails, __runInitializers$4(_init$4, 28, this, {})), __runInitializers$4(_init$4, 31, this);
+  }
+  get apiUrl() {
+    return window.__VITE_API_URL__ || void 0 || "http://localhost:8787";
+  }
+  handleLogin(e2) {
+    e2.preventDefault();
+    const input = this.shadowRoot?.querySelector("#apiKey");
+    if (input.value) {
+      this.apiKey = input.value;
+      this.isAuthenticated = true;
+      this.fetchContent();
+    }
+  }
+  async fetchContent() {
+    try {
+      const res = await fetch(`${this.apiUrl}/content`, {
+        headers: {
+          "Authorization": `Bearer ${this.apiKey}`
+        }
+      });
+      if (res.ok) {
+        this.contentList = await res.json();
+      } else {
+        this.statusMessage = "Failed to fetch content.";
+      }
+    } catch (e2) {
+      this.statusMessage = "Error fetching content.";
+    }
+  }
+  async fetchStaticDetails() {
+    try {
+      const res = await fetch(`${this.apiUrl}/api/static`);
+      if (res.ok) {
+        this.staticDetails = await res.json();
+      }
+    } catch (e2) {
+    }
+  }
+  async handleUpload(key, file) {
+    try {
+      this.statusMessage = "Uploading...";
+      const res = await fetch(`${this.apiUrl}/content/${key}`, {
+        method: "PUT",
+        headers: {
+          "Authorization": `Bearer ${this.apiKey}`
+        },
+        body: file
+      });
+      if (res.ok) {
+        this.statusMessage = "Upload successful!";
+        this.fetchContent();
+      } else {
+        this.statusMessage = "Upload failed.";
+      }
+    } catch (e2) {
+      this.statusMessage = "Error uploading.";
+    }
+  }
+  async handleClearCache() {
+    try {
+      this.statusMessage = "Clearing cache...";
+      const res = await fetch(`${this.apiUrl}/cache-clear`, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${this.apiKey}`
+        }
+      });
+      if (res.ok) {
+        this.statusMessage = "Cache cleared!";
+      } else {
+        this.statusMessage = "Failed to clear cache.";
+      }
+    } catch (e2) {
+      this.statusMessage = "Error clearing cache.";
+    }
+  }
+  async handleDelete(key) {
+    if (!confirm(`Delete ${key}?`)) return;
+    try {
+      const res = await fetch(`${this.apiUrl}/content/${key}`, {
+        method: "DELETE",
+        headers: {
+          "Authorization": `Bearer ${this.apiKey}`
+        }
+      });
+      if (res.ok) {
+        this.fetchContent();
+      } else {
+        this.statusMessage = "Delete failed.";
+      }
+    } catch (e2) {
+      this.statusMessage = "Error deleting.";
+    }
+  }
+  getContent(key) {
+    return this.contentList.find((c2) => c2.key === key);
+  }
+  getSectionFiles(prefix) {
+    return this.contentList.filter((c2) => c2.key.startsWith(prefix));
+  }
+  renderHomeSection() {
+    const home = this.getContent("home.md");
+    return html`
+      <div class="section">
+        <h3>Home Page</h3>
+        <p class="help-text">Content for your home page. Upload home.md with your main content.</p>
+        
+        ${home ? html`
+          <div class="current-file">
+            <strong>Current:</strong> home.md (${home.size} bytes)
+            <button class="btn-danger" @click=${() => this.handleDelete("home.md")}>Delete</button>
+          </div>
+        ` : ""}
+
+        <input type="file" id="homeFile" accept=".md" />
+        <button class="btn-primary" @click=${() => {
+      const input = this.shadowRoot?.querySelector("#homeFile");
+      if (input.files?.[0]) this.handleUpload("home.md", input.files[0]);
+    }}>Upload home.md</button>
+      </div>
+    `;
+  }
+  renderProfileSection() {
+    const profile = this.getContent("profile.json");
+    return html`
+      <div class="section">
+        <h3>Profile <span class="required-badge">Required</span></h3>
+        <p class="help-text">This file contains your profile information (name, title, experience).</p>
+        
+        ${profile ? html`
+          <div class="current-file">
+            <strong>Current:</strong> profile.json (${profile.size} bytes)
+            <button class="btn-danger" @click=${() => this.handleDelete("profile.json")}>Delete</button>
+          </div>
+        ` : ""}
+
+        <input type="file" id="profileFile" accept=".json" />
+        <button class="btn-primary" @click=${() => {
+      const input = this.shadowRoot?.querySelector("#profileFile");
+      if (input.files?.[0]) this.handleUpload("profile.json", input.files[0]);
+    }}>Upload profile.json</button>
+      </div>
+    `;
+  }
+  renderAboutMeSection() {
+    const aboutMe = this.getContent("about-me.md");
+    return html`
+      <div class="section">
+        <h3>About Me Page <span class="required-badge">Required</span></h3>
+        <p class="help-text">Content for your About Me page. Supports Markdown with frontmatter.</p>
+        
+        ${aboutMe ? html`
+          <div class="current-file">
+            <strong>Current:</strong> about-me.md (${aboutMe.size} bytes)
+            <button class="btn-danger" @click=${() => this.handleDelete("about-me.md")}>Delete</button>
+          </div>
+        ` : ""}
+
+        <input type="file" id="aboutFile" accept=".md" />
+        <button class="btn-primary" @click=${() => {
+      const input = this.shadowRoot?.querySelector("#aboutFile");
+      if (input.files?.[0]) this.handleUpload("about-me.md", input.files[0]);
+    }}>Upload about-me.md</button>
+      </div>
+    `;
+  }
+  renderBlogsSection() {
+    const blogs = this.getSectionFiles("blogs/").filter((b) => b.key.endsWith(".json"));
+    return html`
+      <div class="section">
+        <h3>Blog Posts</h3>
+        <p class="help-text">Each blog needs 2 files: a JSON (metadata) and MD (content) file.</p>
+        
+        <h4>Upload New Blog</h4>
+        <input type="file" id="blogMetaFile" accept=".json" />
+        <input type="file" id="blogContentFile" accept=".md" />
+        <input type="text" id="blogSlug" placeholder="Slug (e.g., my-new-post)" class="mt-1" />
+        <button class="btn-primary" @click=${() => {
+      const metaInput = this.shadowRoot?.querySelector("#blogMetaFile");
+      const contentInput = this.shadowRoot?.querySelector("#blogContentFile");
+      const slugInput = this.shadowRoot?.querySelector("#blogSlug");
+      if (metaInput.files?.[0] && contentInput.files?.[0] && slugInput.value) {
+        this.handleUpload(`blogs/${slugInput.value}.json`, metaInput.files[0]);
+        this.handleUpload(`blogs/${slugInput.value}.md`, contentInput.files[0]);
+      }
+    }}>Upload Blog (JSON + MD)</button>
+
+        <div class="file-list">
+          <h4>Current Blogs (${blogs.length})</h4>
+          ${blogs.map((b) => html`
+            <div class="file-item">
+              <span>${b.key.replace(".json", "")}</span>
+              <button class="btn-danger" @click=${() => {
+      const slug = b.key.replace("blogs/", "").replace(".json", "");
+      this.handleDelete(`blogs/${slug}.json`);
+      this.handleDelete(`blogs/${slug}.md`);
+    }}>Delete</button>
+            </div>
+          `)}
+          ${blogs.length === 0 ? html`<p>No blogs yet.</p>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderStoriesSection() {
+    const stories = this.getSectionFiles("stories/").filter((s2) => s2.key.endsWith(".json"));
+    return html`
+      <div class="section">
+        <h3>Stories</h3>
+        <p class="help-text">Each story needs 2 files: a JSON (metadata) and MD (content) file.</p>
+        
+        <h4>Upload New Story</h4>
+        <input type="file" id="storyMetaFile" accept=".json" />
+        <input type="file" id="storyContentFile" accept=".md" />
+        <input type="text" id="storySlug" placeholder="Slug (e.g., my-story)" class="mt-1" />
+        <button class="btn-primary" @click=${() => {
+      const metaInput = this.shadowRoot?.querySelector("#storyMetaFile");
+      const contentInput = this.shadowRoot?.querySelector("#storyContentFile");
+      const slugInput = this.shadowRoot?.querySelector("#storySlug");
+      if (metaInput.files?.[0] && contentInput.files?.[0] && slugInput.value) {
+        this.handleUpload(`stories/${slugInput.value}.json`, metaInput.files[0]);
+        this.handleUpload(`stories/${slugInput.value}.md`, contentInput.files[0]);
+      }
+    }}>Upload Story (JSON + MD)</button>
+
+        <div class="file-list">
+          <h4>Current Stories (${stories.length})</h4>
+          ${stories.map((s2) => html`
+            <div class="file-item">
+              <span>${s2.key.replace(".json", "")}</span>
+              <button class="btn-danger" @click=${() => {
+      const slug = s2.key.replace("stories/", "").replace(".json", "");
+      this.handleDelete(`stories/${slug}.json`);
+      this.handleDelete(`stories/${slug}.md`);
+    }}>Delete</button>
+            </div>
+          `)}
+          ${stories.length === 0 ? html`<p>No stories yet.</p>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderImagesSection() {
+    const images = this.getSectionFiles("images/");
+    return html`
+      <div class="section">
+        <h3>Images</h3>
+        <p class="help-text">Upload images for use in your content. In markdown, reference images by filename only (e.g., use <code>my-photo.jpg</code> not <code>/images/my-photo.jpg</code>). The renderer automatically prepends <code>images/</code>.</p>
+        
+        <input type="file" id="imageFile" accept="image/*" />
+        <input type="text" id="imagePath" placeholder="Image name (e.g., profile-photo.jpg)" class="mt-1" />
+        <button class="btn-primary" @click=${() => {
+      const fileInput = this.shadowRoot?.querySelector("#imageFile");
+      const pathInput = this.shadowRoot?.querySelector("#imagePath");
+      if (fileInput.files?.[0] && pathInput.value) {
+        this.handleUpload(`images/${pathInput.value}`, fileInput.files[0]);
+      }
+    }}>Upload to images/</button>
+
+        <div class="file-list">
+          <h4>Current Images (${images.length})</h4>
+          ${images.map((img) => html`
+            <div class="file-item">
+              <span>${img.key} (${img.size} bytes)</span>
+              <button class="btn-danger" @click=${() => this.handleDelete(img.key)}>Delete</button>
+            </div>
+          `)}
+          ${images.length === 0 ? html`<p>No images yet.</p>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderLogoSection() {
+    const logo = this.getContent("logo.svg");
+    return html`
+      <div class="section">
+        <h3>Site Logo</h3>
+        <p class="help-text">Upload your site logo (SVG format recommended). This appears in the header of your site.</p>
+        
+        ${logo ? html`
+          <div class="current-file">
+            <strong>Current:</strong> logo.svg (${logo.size} bytes)
+            <button class="btn-danger" @click=${() => this.handleDelete("logo.svg")}>Delete</button>
+          </div>
+        ` : ""}
+
+        <input type="file" id="logoFile" accept=".svg,image/svg+xml" />
+        <button class="btn-primary mt-1 mb-1" @click=${() => {
+      const input = this.shadowRoot?.querySelector("#logoFile");
+      if (input.files?.[0]) this.handleUpload("logo.svg", input.files[0]);
+    }}>Upload logo.svg</button>
+
+        <div class="info-box">
+          <strong>Tip:</strong> Use an SVG with transparent background. The logo will automatically adapt to light/dark themes.
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (!this.isAuthenticated) {
+      return html`
+        <div class="container">
+          <div class="login-box">
+            <h2>Admin Login</h2>
+            <p>Enter your API key to manage content</p>
+            <form @submit=${this.handleLogin}>
+              <input type="password" id="apiKey" placeholder="API Key" />
+              <button type="submit" class="btn-primary">Login</button>
+            </form>
+          </div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>Content Manager</h1>
+          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
+        </div>
+        
+        <div class="nav-tabs">
+          <button class="nav-tab ${this.activeSection === "home" ? "active" : ""}" 
+            @click=${() => this.activeSection = "home"}>Home</button>
+          <button class="nav-tab ${this.activeSection === "profile" ? "active" : ""}" 
+            @click=${() => this.activeSection = "profile"}>Profile</button>
+          <button class="nav-tab ${this.activeSection === "aboutme" ? "active" : ""}"
+            @click=${() => this.activeSection = "aboutme"}>About Me</button>
+          <button class="nav-tab ${this.activeSection === "blogs" ? "active" : ""}"
+            @click=${() => this.activeSection = "blogs"}>Blogs</button>
+          <button class="nav-tab ${this.activeSection === "stories" ? "active" : ""}"
+            @click=${() => this.activeSection = "stories"}>Stories</button>
+          <button class="nav-tab ${this.activeSection === "images" ? "active" : ""}"
+            @click=${() => this.activeSection = "images"}>Images</button>
+          <button class="nav-tab ${this.activeSection === "logo" ? "active" : ""}"
+            @click=${() => this.activeSection = "logo"}>Logo</button>
+          <button class="nav-tab ${this.activeSection === "static" ? "active" : ""}"
+            @click=${() => {
+      this.activeSection = "static";
+      this.fetchStaticDetails();
+    }}>Site Settings</button>
+        </div>
+
+        ${this.statusMessage ? html`
+          <div class="status-message ${this.statusMessage.includes("successful") || this.statusMessage.includes("cleared") ? "success" : this.statusMessage.includes("failed") || this.statusMessage.includes("Error") ? "error" : ""}">
+            ${this.statusMessage}
+          </div>
+        ` : ""}
+
+        ${this.activeSection === "home" ? this.renderHomeSection() : ""}
+        ${this.activeSection === "profile" ? this.renderProfileSection() : ""}
+        ${this.activeSection === "aboutme" ? this.renderAboutMeSection() : ""}
+        ${this.activeSection === "blogs" ? this.renderBlogsSection() : ""}
+        ${this.activeSection === "stories" ? this.renderStoriesSection() : ""}
+        ${this.activeSection === "images" ? this.renderImagesSection() : ""}
+        ${this.activeSection === "logo" ? this.renderLogoSection() : ""}
+        ${this.activeSection === "static" ? this.renderStaticSection() : ""}
+      </div>
+    `;
+  }
+  renderStaticSection() {
+    return html`
+      <div class="section">
+        <h3>Site Settings</h3>
+        <p class="help-text">Manage your site's static details like title, footer links, etc.</p>
+        
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Site Title</label>
+          <input type="text" id="siteTitle" .value=${this.staticDetails?.siteTitle || ""} />
+        </div>
+        
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Copyright Text</label>
+          <input type="text" id="copyright" .value=${this.staticDetails?.copyright || ""} />
+        </div>
+        
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">LinkedIn URL</label>
+          <input type="text" id="linkedin" .value=${this.staticDetails?.linkedin || ""} />
+        </div>
+        
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">GitHub URL</label>
+          <input type="text" id="github" .value=${this.staticDetails?.github || ""} />
+        </div>
+        
+        <div class="mb-1">
+          <label style="display:block;margin-bottom:4px;font-weight:500">Email</label>
+          <input type="text" id="email" .value=${this.staticDetails?.email || ""} />
+        </div>
+        
+        <button class="btn-primary" @click=${async () => {
+      const siteTitle = this.shadowRoot?.querySelector("#siteTitle")?.value;
+      const copyright = this.shadowRoot?.querySelector("#copyright")?.value;
+      const linkedin = this.shadowRoot?.querySelector("#linkedin")?.value;
+      const github = this.shadowRoot?.querySelector("#github")?.value;
+      const email = this.shadowRoot?.querySelector("#email")?.value;
+      const data = {};
+      if (siteTitle) data.siteTitle = siteTitle;
+      if (copyright) data.copyright = copyright;
+      if (linkedin) data.linkedin = linkedin;
+      if (github) data.github = github;
+      if (email) data.email = email;
+      try {
+        const url = `${this.apiUrl}/content/staticdetails.json`;
+        const res = await fetch(url, {
+          method: "PUT",
+          headers: { "Authorization": `Bearer ${this.apiKey}`, "Content-Type": "application/json" },
+          body: JSON.stringify(data)
+        });
+        if (res.ok) {
+          this.statusMessage = "Settings saved!";
+          this.fetchContent();
+        } else {
+          this.statusMessage = "Failed to save settings.";
+        }
+      } catch (e2) {
+        this.statusMessage = "Error saving settings.";
+      }
+    }}>Save Settings</button>
+      </div>
+    `;
+  }
+}
+_init$4 = __decoratorStart$4(_a$4);
+_apiKey = /* @__PURE__ */ new WeakMap();
+_isAuthenticated = /* @__PURE__ */ new WeakMap();
+_contentList = /* @__PURE__ */ new WeakMap();
+_statusMessage = /* @__PURE__ */ new WeakMap();
+_activeSection = /* @__PURE__ */ new WeakMap();
+_staticDetails = /* @__PURE__ */ new WeakMap();
+__decorateElement$4(_init$4, 4, "apiKey", _apiKey_dec, AdminPortal, _apiKey);
+__decorateElement$4(_init$4, 4, "isAuthenticated", _isAuthenticated_dec, AdminPortal, _isAuthenticated);
+__decorateElement$4(_init$4, 4, "contentList", _contentList_dec, AdminPortal, _contentList);
+__decorateElement$4(_init$4, 4, "statusMessage", _statusMessage_dec, AdminPortal, _statusMessage);
+__decorateElement$4(_init$4, 4, "activeSection", _activeSection_dec, AdminPortal, _activeSection);
+__decorateElement$4(_init$4, 4, "staticDetails", _staticDetails_dec, AdminPortal, _staticDetails);
+AdminPortal = __decorateElement$4(_init$4, 0, "AdminPortal", _AdminPortal_decorators, AdminPortal);
+AdminPortal.styles = adminStyles;
+__runInitializers$4(_init$4, 1, AdminPortal);
+const bannerStyles = css`
+: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;
+  }
+  
+  .header-content {
+    margin-right: 0;
+    justify-content: center;
+  }
+  
+  nav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+`;
+var __create$3 = Object.create;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$3 = (target, value) => __defProp$3(target, "name", { value, configurable: true });
+var __decoratorStart$3 = (base) => [, , , __create$3(base?.[__knownSymbol$3("metadata")] ?? null)];
+var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
+var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$3(fn || null)) });
+var __decoratorMetadata$3 = (array, target) => __defNormalProp$3(target, __knownSymbol$3("metadata"), array[3]);
+var __runInitializers$3 = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) fns[i2].call(self);
+  return value;
+};
+var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k2 = flags & 7, p2 = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (target = target.prototype, k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc$3(target, name));
+  __name$3(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext$3(k2, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i2])(target, ctx), done._ = 1;
+    __expectFn$3(it) && (target = it);
+  }
+  return __decoratorMetadata$3(array, target), desc && __defProp$3(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var _MyBanner_decorators, _init$3, _a$3;
+_MyBanner_decorators = [customElement("my-banner")];
+const _MyBanner = class _MyBanner extends (_a$3 = LitElement) {
+  constructor() {
+    super();
+    this.header = "My App";
+    this.logo = "";
+  }
+  render() {
+    return html`
+      <header class="banner banner-component">
+        <div class="header-content">
+          ${this.logo ? html`<img src="${this.logo}" alt="Logo" class="logo" />` : ""}
+          <h1>${this.header}</h1>
+        </div>
+        <div class="nav-and-theme">
+          <slot name="nav-links"></slot>
+          <slot name="theme-switcher"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+_MyBanner.styles = bannerStyles;
+_MyBanner.properties = {
+  header: { type: String },
+  logo: { type: String }
+};
+let MyBanner = _MyBanner;
+_init$3 = __decoratorStart$3(_a$3);
+MyBanner = __decorateElement$3(_init$3, 0, "MyBanner", _MyBanner_decorators, MyBanner);
+__runInitializers$3(_init$3, 1, MyBanner);
+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 {
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+  }
+  .links {
+    margin-top: 0;
+  }
+}
+`;
+var __create$2 = Object.create;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$2 = (target, value) => __defProp$2(target, "name", { value, configurable: true });
+var __decoratorStart$2 = (base) => [, , , __create$2(base?.[__knownSymbol$2("metadata")] ?? null)];
+var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
+var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
+var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
+var __runInitializers$2 = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
+  return value;
+};
+var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k2 = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var j = k2 > 3 ? array.length + 1 : k2 ? s2 ? 1 : 2 : 0, key = __decoratorStrings$2[k2 + 5];
+  var initializers = k2 > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (!p2 && !s2 && (target = target.prototype), k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc$2(k2 < 4 ? target : { get [name]() {
+    return __privateGet$2(this, extra);
+  }, set [name](x) {
+    return __privateSet$2(this, extra, x);
+  } }, name));
+  k2 ? p2 && k2 < 4 && __name$2(extra, (k2 > 2 ? "set " : k2 > 1 ? "get " : "") + name) : __name$2(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext$2(k2, name, done = {}, array[3], extraInitializers);
+    if (k2) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$2(target, x) : (x) => name in x };
+      if (k2 ^ 3) access.get = p2 ? (x) => (k2 ^ 1 ? __privateGet$2 : __privateMethod$2)(x, target, k2 ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k2 > 2) access.set = p2 ? (x, y2) => __privateSet$2(x, target, y2, k2 ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+    }
+    it = (0, decorators[i2])(k2 ? k2 < 4 ? p2 ? extra : desc[key] : k2 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k2 ^ 4 || it === void 0) __expectFn$2(it) && (k2 > 4 ? initializers.unshift(it) : k2 ? p2 ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
+    else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
+  }
+  return k2 || __decoratorMetadata$2(array, target), desc && __defProp$2(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$2('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var _footerLinks_dec, _copyright_dec, _a$2, _FooterComponent_decorators, _init$2, _copyright, _footerLinks;
+_FooterComponent_decorators = [customElement("my-footer")];
+class FooterComponent extends (_a$2 = LitElement, _copyright_dec = [property({ type: String })], _footerLinks_dec = [property({ type: Array })], _a$2) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _copyright, __runInitializers$2(_init$2, 8, this, "")), __runInitializers$2(_init$2, 11, this);
+    __privateAdd$2(this, _footerLinks, __runInitializers$2(_init$2, 12, this, [])), __runInitializers$2(_init$2, 15, this);
+  }
+  render() {
+    return html`
+      <div class="footer-content">
+        <span>&copy; ${this.copyright}</span>
+        <span class="links">
+          ${(this.footerLinks || []).map(
+      (link) => {
+        const isExternal = link.link.startsWith("http") || link.link.startsWith("mailto:");
+        return html`<a 
+                href="${link.link}" 
+                target="${isExternal ? "_blank" : "_self"}" 
+                rel="${isExternal ? "noopener noreferrer" : ""}"
+              >${link.text}</a>`;
+      }
+    )}
+        </span>
+      </div>
+    `;
+  }
+}
+_init$2 = __decoratorStart$2(_a$2);
+_copyright = /* @__PURE__ */ new WeakMap();
+_footerLinks = /* @__PURE__ */ new WeakMap();
+__decorateElement$2(_init$2, 4, "copyright", _copyright_dec, FooterComponent, _copyright);
+__decorateElement$2(_init$2, 4, "footerLinks", _footerLinks_dec, FooterComponent, _footerLinks);
+FooterComponent = __decorateElement$2(_init$2, 0, "FooterComponent", _FooterComponent_decorators, FooterComponent);
+FooterComponent.styles = footerStyles;
+__runInitializers$2(_init$2, 1, FooterComponent);
+const t$1 = globalThis, i$1 = (t2) => t2, s = t$1.trustedTypes, e$2 = s ? s.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, h = "$lit$", o$1 = `lit$${Math.random().toFixed(9).slice(2)}$`, n = "?" + o$1, r = `<${n}>`, l = document, c = () => l.createComment(""), a = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u = Array.isArray, d = (t2) => u(t2) || "function" == typeof t2?.[Symbol.iterator], f = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, E = /* @__PURE__ */ Symbol.for("lit-noChange"), A = /* @__PURE__ */ Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l.createTreeWalker(l, 129);
+function V(t2, i2) {
+  if (!u(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== e$2 ? e$2.createHTML(i2) : i2;
+}
+const N = (t2, i2) => {
+  const s2 = t2.length - 1, e2 = [];
+  let n2, l2 = 2 === i2 ? "<svg>" : 3 === i2 ? "<math>" : "", c2 = v;
+  for (let i3 = 0; i3 < s2; i3++) {
+    const s3 = t2[i3];
+    let a2, u2, d2 = -1, f2 = 0;
+    for (; f2 < s3.length && (c2.lastIndex = f2, u2 = c2.exec(s3), null !== u2); ) f2 = c2.lastIndex, c2 === v ? "!--" === u2[1] ? c2 = _ : void 0 !== u2[1] ? c2 = m : void 0 !== u2[2] ? (y.test(u2[2]) && (n2 = RegExp("</" + u2[2], "g")), c2 = p) : void 0 !== u2[3] && (c2 = p) : c2 === p ? ">" === u2[0] ? (c2 = n2 ?? v, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? p : '"' === u2[3] ? $ : g) : c2 === $ || c2 === g ? c2 = p : c2 === _ || c2 === m ? c2 = v : (c2 = p, n2 = void 0);
+    const x = c2 === p && t2[i3 + 1].startsWith("/>") ? " " : "";
+    l2 += c2 === v ? s3 + r : d2 >= 0 ? (e2.push(a2), s3.slice(0, d2) + h + s3.slice(d2) + o$1 + x) : s3 + o$1 + (-2 === d2 ? i3 : x);
+  }
+  return [V(t2, l2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : 3 === i2 ? "</math>" : "")), e2];
+};
+class S {
+  constructor({ strings: t2, _$litType$: i2 }, e2) {
+    let r2;
+    this.parts = [];
+    let l2 = 0, a2 = 0;
+    const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = N(t2, i2);
+    if (this.el = S.createElement(f2, e2), P.currentNode = this.el.content, 2 === i2 || 3 === i2) {
+      const t3 = this.el.content.firstChild;
+      t3.replaceWith(...t3.childNodes);
+    }
+    for (; null !== (r2 = P.nextNode()) && d2.length < u2; ) {
+      if (1 === r2.nodeType) {
+        if (r2.hasAttributes()) for (const t3 of r2.getAttributeNames()) if (t3.endsWith(h)) {
+          const i3 = v2[a2++], s2 = r2.getAttribute(t3).split(o$1), e3 = /([.?@])?(.*)/.exec(i3);
+          d2.push({ type: 1, index: l2, name: e3[2], strings: s2, ctor: "." === e3[1] ? I : "?" === e3[1] ? L : "@" === e3[1] ? z : H }), r2.removeAttribute(t3);
+        } else t3.startsWith(o$1) && (d2.push({ type: 6, index: l2 }), r2.removeAttribute(t3));
+        if (y.test(r2.tagName)) {
+          const t3 = r2.textContent.split(o$1), i3 = t3.length - 1;
+          if (i3 > 0) {
+            r2.textContent = s ? s.emptyScript : "";
+            for (let s2 = 0; s2 < i3; s2++) r2.append(t3[s2], c()), P.nextNode(), d2.push({ type: 2, index: ++l2 });
+            r2.append(t3[i3], c());
+          }
+        }
+      } else if (8 === r2.nodeType) if (r2.data === n) d2.push({ type: 2, index: l2 });
+      else {
+        let t3 = -1;
+        for (; -1 !== (t3 = r2.data.indexOf(o$1, t3 + 1)); ) d2.push({ type: 7, index: l2 }), t3 += o$1.length - 1;
+      }
+      l2++;
+    }
+  }
+  static createElement(t2, i2) {
+    const s2 = l.createElement("template");
+    return s2.innerHTML = t2, s2;
+  }
+}
+function M(t2, i2, s2 = t2, e2) {
+  if (i2 === E) return i2;
+  let h2 = void 0 !== e2 ? s2._$Co?.[e2] : s2._$Cl;
+  const o2 = a(i2) ? void 0 : i2._$litDirective$;
+  return h2?.constructor !== o2 && (h2?._$AO?.(false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2._$Co ??= [])[e2] = h2 : s2._$Cl = h2), void 0 !== h2 && (i2 = M(t2, h2._$AS(t2, i2.values), h2, e2)), i2;
+}
+class R {
+  constructor(t2, i2) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t2) {
+    const { el: { content: i2 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? l).importNode(i2, true);
+    P.currentNode = e2;
+    let h2 = P.nextNode(), o2 = 0, n2 = 0, r2 = s2[0];
+    for (; void 0 !== r2; ) {
+      if (o2 === r2.index) {
+        let i3;
+        2 === r2.type ? i3 = new k(h2, h2.nextSibling, this, t2) : 1 === r2.type ? i3 = new r2.ctor(h2, r2.name, r2.strings, this, t2) : 6 === r2.type && (i3 = new Z(h2, this, t2)), this._$AV.push(i3), r2 = s2[++n2];
+      }
+      o2 !== r2?.index && (h2 = P.nextNode(), o2++);
+    }
+    return P.currentNode = l, e2;
+  }
+  p(t2) {
+    let i2 = 0;
+    for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
+  }
+}
+class k {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t2, i2, s2, e2) {
+    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cv = e2?.isConnected ?? true;
+  }
+  get parentNode() {
+    let t2 = this._$AA.parentNode;
+    const i2 = this._$AM;
+    return void 0 !== i2 && 11 === t2?.nodeType && (t2 = i2.parentNode), t2;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t2, i2 = this) {
+    t2 = M(this, t2, i2), a(t2) ? t2 === A || null == t2 || "" === t2 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t2 !== this._$AH && t2 !== E && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : d(t2) ? this.k(t2) : this._(t2);
+  }
+  O(t2) {
+    return this._$AA.parentNode.insertBefore(t2, this._$AB);
+  }
+  T(t2) {
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
+  }
+  _(t2) {
+    this._$AH !== A && a(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(l.createTextNode(t2)), this._$AH = t2;
+  }
+  $(t2) {
+    const { values: i2, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = S.createElement(V(s2.h, s2.h[0]), this.options)), s2);
+    if (this._$AH?._$AD === e2) this._$AH.p(i2);
+    else {
+      const t3 = new R(e2, this), s3 = t3.u(this.options);
+      t3.p(i2), this.T(s3), this._$AH = t3;
+    }
+  }
+  _$AC(t2) {
+    let i2 = C.get(t2.strings);
+    return void 0 === i2 && C.set(t2.strings, i2 = new S(t2)), i2;
+  }
+  k(t2) {
+    u(this._$AH) || (this._$AH = [], this._$AR());
+    const i2 = this._$AH;
+    let s2, e2 = 0;
+    for (const h2 of t2) e2 === i2.length ? i2.push(s2 = new k(this.O(c()), this.O(c()), this, this.options)) : s2 = i2[e2], s2._$AI(h2), e2++;
+    e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
+  }
+  _$AR(t2 = this._$AA.nextSibling, s2) {
+    for (this._$AP?.(false, true, s2); t2 !== this._$AB; ) {
+      const s3 = i$1(t2).nextSibling;
+      i$1(t2).remove(), t2 = s3;
+    }
+  }
+  setConnected(t2) {
+    void 0 === this._$AM && (this._$Cv = t2, this._$AP?.(t2));
+  }
+}
+class H {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t2, i2, s2, e2, h2) {
+    this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = A;
+  }
+  _$AI(t2, i2 = this, s2, e2) {
+    const h2 = this.strings;
+    let o2 = false;
+    if (void 0 === h2) t2 = M(this, t2, i2, 0), o2 = !a(t2) || t2 !== this._$AH && t2 !== E, o2 && (this._$AH = t2);
+    else {
+      const e3 = t2;
+      let n2, r2;
+      for (t2 = h2[0], n2 = 0; n2 < h2.length - 1; n2++) r2 = M(this, e3[s2 + n2], i2, n2), r2 === E && (r2 = this._$AH[n2]), o2 ||= !a(r2) || r2 !== this._$AH[n2], r2 === A ? t2 = A : t2 !== A && (t2 += (r2 ?? "") + h2[n2 + 1]), this._$AH[n2] = r2;
+    }
+    o2 && !e2 && this.j(t2);
+  }
+  j(t2) {
+    t2 === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? "");
+  }
+}
+class I extends H {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t2) {
+    this.element[this.name] = t2 === A ? void 0 : t2;
+  }
+}
+class L extends H {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t2) {
+    this.element.toggleAttribute(this.name, !!t2 && t2 !== A);
+  }
+}
+class z extends H {
+  constructor(t2, i2, s2, e2, h2) {
+    super(t2, i2, s2, e2, h2), this.type = 5;
+  }
+  _$AI(t2, i2 = this) {
+    if ((t2 = M(this, t2, i2, 0) ?? A) === E) return;
+    const s2 = this._$AH, e2 = t2 === A && s2 !== A || t2.capture !== s2.capture || t2.once !== s2.once || t2.passive !== s2.passive, h2 = t2 !== A && (s2 === A || e2);
+    e2 && this.element.removeEventListener(this.name, this, s2), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
+  }
+  handleEvent(t2) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t2) : this._$AH.handleEvent(t2);
+  }
+}
+class Z {
+  constructor(t2, i2, s2) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t2) {
+    M(this, t2);
+  }
+}
+const B = t$1.litHtmlPolyfillSupport;
+B?.(S, k), (t$1.litHtmlVersions ??= []).push("3.3.2");
+const t = { CHILD: 2 }, e$1 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
+class i {
+  constructor(t2) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t2, e2, i2) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  }
+  _$AS(t2, e2) {
+    return this.update(t2, e2);
+  }
+  update(t2, e2) {
+    return this.render(...e2);
+  }
+}
+class e extends i {
+  constructor(i2) {
+    if (super(i2), this.it = A, i2.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r2) {
+    if (r2 === A || null == r2) return this._t = void 0, this.it = r2;
+    if (r2 === E) return r2;
+    if ("string" != typeof r2) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r2 === this.it) return this._t;
+    this.it = r2;
+    const s2 = [r2];
+    return s2.raw = s2, this._t = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
+  }
+}
+e.directiveName = "unsafeHTML", e.resultType = 1;
+const o = e$1(e);
+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);
+}
+`;
+var __create$1 = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$1 = (target, value) => __defProp$1(target, "name", { value, configurable: true });
+var __decoratorStart$1 = (base) => [, , , __create$1(base?.[__knownSymbol$1("metadata")] ?? null)];
+var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
+var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
+var __runInitializers$1 = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
+  return value;
+};
+var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k2 = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var j = k2 > 3 ? array.length + 1 : k2 ? s2 ? 1 : 2 : 0, key = __decoratorStrings$1[k2 + 5];
+  var initializers = k2 > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (!p2 && !s2 && (target = target.prototype), k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc$1(k2 < 4 ? target : { get [name]() {
+    return __privateGet$1(this, extra);
+  }, set [name](x) {
+    return __privateSet$1(this, extra, x);
+  } }, name));
+  k2 ? p2 && k2 < 4 && __name$1(extra, (k2 > 2 ? "set " : k2 > 1 ? "get " : "") + name) : __name$1(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext$1(k2, name, done = {}, array[3], extraInitializers);
+    if (k2) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$1(target, x) : (x) => name in x };
+      if (k2 ^ 3) access.get = p2 ? (x) => (k2 ^ 1 ? __privateGet$1 : __privateMethod$1)(x, target, k2 ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k2 > 2) access.set = p2 ? (x, y2) => __privateSet$1(x, target, y2, k2 ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+    }
+    it = (0, decorators[i2])(k2 ? k2 < 4 ? p2 ? extra : desc[key] : k2 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k2 ^ 4 || it === void 0) __expectFn$1(it) && (k2 > 4 ? initializers.unshift(it) : k2 ? p2 ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
+    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
+  }
+  return k2 || __decoratorMetadata$1(array, target), desc && __defProp$1(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$1('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
+var _error_dec$1, _loading_dec$1, _blogPost_dec, _slug_dec$1, _a$1, _BlogViewer_decorators, _init$1, _slug$1, _blogPost, _loading$1, _error$1;
+const pipeline$1 = new MarkdownPipeline({
+  imagePathPrefix: "images/",
+  styleOptions: {
+    classPrefix: "md-",
+    addHeadingIds: true
+  }
+});
+_BlogViewer_decorators = [customElement("my-blog-viewer")];
+class BlogViewer extends (_a$1 = LitElement, _slug_dec$1 = [property({ type: String })], _blogPost_dec = [state()], _loading_dec$1 = [state()], _error_dec$1 = [state()], _a$1) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$1(this, _slug$1, __runInitializers$1(_init$1, 8, this, "")), __runInitializers$1(_init$1, 11, this);
+    __privateAdd$1(this, _blogPost, __runInitializers$1(_init$1, 12, this, null)), __runInitializers$1(_init$1, 15, this);
+    __privateAdd$1(this, _loading$1, __runInitializers$1(_init$1, 16, this, true)), __runInitializers$1(_init$1, 19, this);
+    __privateAdd$1(this, _error$1, __runInitializers$1(_init$1, 20, this, "")), __runInitializers$1(_init$1, 23, this);
+  }
+  get apiBaseUrl() {
+    return "https://api.techieleader.com";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.slug) {
+      this.loadBlog();
+    }
+  }
+  updated(changedProperties) {
+    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((e2) => {
+      console.error("[BlogViewer] Failed to load blog:", e2);
+      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">
+          ${o(this.renderMarkdown(content))}
+        </div>
+      </article>
+    `;
+  }
+  renderMarkdown(content) {
+    if (!content) return "";
+    const nodes = pipeline$1.parse(content);
+    return pipeline$1.render(nodes);
+  }
+}
+_init$1 = __decoratorStart$1(_a$1);
+_slug$1 = /* @__PURE__ */ new WeakMap();
+_blogPost = /* @__PURE__ */ new WeakMap();
+_loading$1 = /* @__PURE__ */ new WeakMap();
+_error$1 = /* @__PURE__ */ new WeakMap();
+__decorateElement$1(_init$1, 4, "slug", _slug_dec$1, BlogViewer, _slug$1);
+__decorateElement$1(_init$1, 4, "blogPost", _blogPost_dec, BlogViewer, _blogPost);
+__decorateElement$1(_init$1, 4, "loading", _loading_dec$1, BlogViewer, _loading$1);
+__decorateElement$1(_init$1, 4, "error", _error_dec$1, BlogViewer, _error$1);
+BlogViewer = __decorateElement$1(_init$1, 0, "BlogViewer", _BlogViewer_decorators, BlogViewer);
+BlogViewer.styles = blogviewerStyles;
+__runInitializers$1(_init$1, 1, BlogViewer);
+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;
+}
+`;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k2 = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var j = k2 > 3 ? array.length + 1 : k2 ? s2 ? 1 : 2 : 0, key = __decoratorStrings[k2 + 5];
+  var initializers = k2 > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k2 && (!p2 && !s2 && (target = target.prototype), k2 < 5 && (k2 > 3 || !p2) && __getOwnPropDesc(k2 < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k2 ? p2 && k2 < 4 && __name(extra, (k2 > 2 ? "set " : k2 > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
+    ctx = __decoratorContext(k2, name, done = {}, array[3], extraInitializers);
+    if (k2) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k2 ^ 3) access.get = p2 ? (x) => (k2 ^ 1 ? __privateGet : __privateMethod)(x, target, k2 ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k2 > 2) access.set = p2 ? (x, y2) => __privateSet(x, target, y2, k2 ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+    }
+    it = (0, decorators[i2])(k2 ? k2 < 4 ? p2 ? extra : desc[key] : k2 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k2 ^ 4 || it === void 0) __expectFn(it) && (k2 > 4 ? initializers.unshift(it) : k2 ? p2 ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k2 || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p2 ? k2 ^ 4 ? extra : desc : target;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _error_dec, _loading_dec, _storyPost_dec, _slug_dec, _a, _StoryViewer_decorators, _init, _slug, _storyPost, _loading, _error;
+const pipeline = new MarkdownPipeline({
+  imagePathPrefix: "images/",
+  styleOptions: {
+    classPrefix: "md-",
+    addHeadingIds: true
+  }
+});
+_StoryViewer_decorators = [customElement("my-story-viewer")];
+class StoryViewer extends (_a = LitElement, _slug_dec = [property({ type: String })], _storyPost_dec = [state()], _loading_dec = [state()], _error_dec = [state()], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _slug, __runInitializers(_init, 8, this, "")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _storyPost, __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _loading, __runInitializers(_init, 16, this, true)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _error, __runInitializers(_init, 20, this, "")), __runInitializers(_init, 23, this);
+  }
+  get apiBaseUrl() {
+    return "https://api.techieleader.com";
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    if (this.slug) {
+      await this.loadStory();
+    }
+  }
+  updated(changedProperties) {
+    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 (e2) {
+      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">
+          ${o(this.renderMarkdown(content))}
+        </div>
+      </article>
+    `;
+  }
+  renderMarkdown(content) {
+    if (!content) return "";
+    const nodes = pipeline.parse(content);
+    return pipeline.render(nodes);
+  }
+}
+_init = __decoratorStart(_a);
+_slug = /* @__PURE__ */ new WeakMap();
+_storyPost = /* @__PURE__ */ new WeakMap();
+_loading = /* @__PURE__ */ new WeakMap();
+_error = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "slug", _slug_dec, StoryViewer, _slug);
+__decorateElement(_init, 4, "storyPost", _storyPost_dec, StoryViewer, _storyPost);
+__decorateElement(_init, 4, "loading", _loading_dec, StoryViewer, _loading);
+__decorateElement(_init, 4, "error", _error_dec, StoryViewer, _error);
+StoryViewer = __decorateElement(_init, 0, "StoryViewer", _StoryViewer_decorators, StoryViewer);
+StoryViewer.styles = storyviewerStyles;
+__runInitializers(_init, 1, StoryViewer);
+export {
+  AdminPortal as A,
+  BlogViewer as B,
+  FooterComponent as F,
+  MyAboutme as M,
+  StoryViewer as S,
+  MyBanner as a
+};