@leadertechie/personal-site-kit 0.0.0

package/dist/ui.js

@@ -0,0 +1,820 @@
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+  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 = 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 i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? 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 k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 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 _staticDetails_dec, _activeSection_dec, _statusMessage_dec, _contentList_dec, _isAuthenticated_dec, _apiKey_dec, _a, _AdminPortal_decorators, _init, _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 = LitElement, _apiKey_dec = [state()], _isAuthenticated_dec = [state()], _contentList_dec = [state()], _statusMessage_dec = [state()], _activeSection_dec = [state()], _staticDetails_dec = [state()], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _apiKey, __runInitializers(_init, 8, this, "")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _isAuthenticated, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _contentList, __runInitializers(_init, 16, this, [])), __runInitializers(_init, 19, this);
+    __privateAdd(this, _statusMessage, __runInitializers(_init, 20, this, "")), __runInitializers(_init, 23, this);
+    __privateAdd(this, _activeSection, __runInitializers(_init, 24, this, "profile")), __runInitializers(_init, 27, this);
+    __privateAdd(this, _staticDetails, __runInitializers(_init, 28, this, {})), __runInitializers(_init, 31, this);
+  }
+  get apiUrl() {
+    return window.__VITE_API_URL__ || void 0 || "http://localhost:8787";
+  }
+  handleLogin(e) {
+    e.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 (e) {
+      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 (e) {
+    }
+  }
+  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 (e) {
+      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 (e) {
+      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 (e) {
+      this.statusMessage = "Error deleting.";
+    }
+  }
+  getContent(key) {
+    return this.contentList.find((c) => c.key === key);
+  }
+  getSectionFiles(prefix) {
+    return this.contentList.filter((c) => c.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((s) => s.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((s) => html`
+            <div class="file-item">
+              <span>${s.key.replace(".json", "")}</span>
+              <button class="btn-danger" @click=${() => {
+      const slug = s.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 (e) {
+        this.statusMessage = "Error saving settings.";
+      }
+    }}>Save Settings</button>
+      </div>
+    `;
+  }
+}
+_init = __decoratorStart(_a);
+_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(_init, 4, "apiKey", _apiKey_dec, AdminPortal, _apiKey);
+__decorateElement(_init, 4, "isAuthenticated", _isAuthenticated_dec, AdminPortal, _isAuthenticated);
+__decorateElement(_init, 4, "contentList", _contentList_dec, AdminPortal, _contentList);
+__decorateElement(_init, 4, "statusMessage", _statusMessage_dec, AdminPortal, _statusMessage);
+__decorateElement(_init, 4, "activeSection", _activeSection_dec, AdminPortal, _activeSection);
+__decorateElement(_init, 4, "staticDetails", _staticDetails_dec, AdminPortal, _staticDetails);
+AdminPortal = __decorateElement(_init, 0, "AdminPortal", _AdminPortal_decorators, AdminPortal);
+AdminPortal.styles = adminStyles;
+__runInitializers(_init, 1, AdminPortal);
+export {
+  AdminPortal
+};