@leadertechie/personal-site-kit 0.0.0 → 0.1.0-alpha.10

package/dist/ui.js

@@ -1,820 +1,19 @@
-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);
+import { A, a, b, c, d, e, f, g, h, i, B, F, M, j, S, k } from "./chunks/index-_AMi6ort.js";
 export {
-  AdminPortal
+  A as AdminAboutMeSection,
+  a as AdminBlogsSection,
+  b as AdminHomeSection,
+  c as AdminImagesSection,
+  d as AdminLoginForm,
+  e as AdminLogoSection,
+  f as AdminPortal,
+  g as AdminProfileSection,
+  h as AdminStaticSection,
+  i as AdminStoriesSection,
+  B as BlogViewer,
+  F as FooterComponent,
+  M as MyAboutme,
+  j as MyBanner,
+  S as StoryViewer,
+  k as adminLoaded
 };