@bbki.ng/bbblog 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+declare const LOGO_SRC = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjMzMjEgNy4zNDc0MUMyMC4yNzY5IDcuMzQ3NDEgMjIuNjY0MSA0Ljk2MDE3IDIyLjY2NDEgMi4wMTUzNlYxMC42NjQxQzIyLjY2NDEgMTEuNzcwOCAyMS43NjcgMTIuNjY3OSAyMC42NjAzIDEyLjY2NzlIMy4zMzk3M0MyLjIzMzA0IDEyLjY2NzkgMS4zMzU4OSAxMS43NzA4IDEuMzM1ODkgMTAuNjY0MVYyLjAxNTM2QzEuMzM1ODkgNC45NjAxNyAzLjcyMzE0IDcuMzQ3NDEgNi42Njc5NSA3LjM0NzQxQzkuNjEyNzYgNy4zNDc0MSAxMiA0Ljk2MDE3IDEyIDIuMDE1MzZDMTIgNC45NjAxNyAxNC4zODcyIDcuMzQ3NDEgMTcuMzMyMSA3LjM0NzQxWiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTIgMi4wMDM4NEwxMiAyLjAxNTM2QzEyIDIuMDExNTEgMTIgMi4wMDc2OCAxMiAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTEuMzMyMSAxNC4wMDM4QzExLjMzODMgMTYuOTQzNCAxMy43MjMxIDE5LjMyNDQgMTYuNjY0MSAxOS4zMjQ0QzE5LjYwNTEgMTkuMzI0NCAyMS45ODk5IDE2Ljk0MzQgMjEuOTk2MiAxNC4wMDM4SDExLjMzMjFaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjAwMzg0IDE0LjAwMzhDMi4wMDM4NCAxNC4wMDc3IDIuMDAzODMgMTQuMDExNSAyLjAwMzg0IDE0LjAxNTRDMi4wMTAwNiAxNi45NTQ5IDQuMzk0OTMgMTkuMzM1OSA3LjMzNTkgMTkuMzM1OUMxMC4yNzY5IDE5LjMzNTkgMTIuNjYxNyAxNi45NTQ5IDEyLjY2NzkgMTQuMDE1NEgyLjAwMzg0VjE0LjAwMzhaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjY3MTc5IDIuMDAzODRDMi42NzE3OSAyLjc0MTYzIDIuMDczNjkgMy4zMzk3MyAxLjMzNTg5IDMuMzM5NzNDMC41OTgwOTkgMy4zMzk3MyAwIDIuNzQxNjMgMCAyLjAwMzg0QzAgMS4yNjYwNSAwLjU5ODA5OSAwLjY2Nzk0NiAxLjMzNTg5IDAuNjY3OTQ2QzIuMDczNjkgMC42Njc5NDYgMi42NzE3OSAxLjI2NjA1IDIuNjcxNzkgMi4wMDM4NFoiIGZpbGw9IiM5Q0EzQUYiLz4KPHBhdGggZD0iTTEzLjMzNTkgMS4zMzU4OUMxMy4zMzU5IDIuMDczNjkgMTIuNzM3OCAyLjY3MTc5IDEyIDIuNjcxNzlDMTEuMjYyMiAyLjY3MTc5IDEwLjY2NDEgMi4wNzM2OSAxMC42NjQxIDEuMzM1ODlDMTAuNjY0MSAwLjU5ODA5OSAxMS4yNjIyIDAgMTIgMEMxMi43Mzc4IDAgMTMuMzM1OSAwLjU5ODA5OSAxMy4zMzU5IDEuMzM1ODlaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yNCAyLjAwMzg0QzI0IDIuNzQxNjMgMjMuNDAxOSAzLjMzOTczIDIyLjY2NDEgMy4zMzk3M0MyMS45MjYzIDMuMzM5NzMgMjEuMzI4MiAyLjc0MTYzIDIxLjMyODIgMi4wMDM4NEMyMS4zMjgyIDEuMjY2MDUgMjEuOTI2MyAwLjY2Nzk0NiAyMi42NjQxIDAuNjY3OTQ2QzIzLjQwMTkgMC42Njc5NDYgMjQgMS4yNjYwNSAyNCAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8L3N2Zz4K";
+declare class BBPost extends HTMLElement {
+    constructor();
+    set title(v: string);
+    set content(v: string);
+    set date(v: string);
+}
+declare class BBBlog extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    render(): void;
+    fetchPosts(): Promise<void>;
+}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";const LOGO_SRC="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjMzMjEgNy4zNDc0MUMyMC4yNzY5IDcuMzQ3NDEgMjIuNjY0MSA0Ljk2MDE3IDIyLjY2NDEgMi4wMTUzNlYxMC42NjQxQzIyLjY2NDEgMTEuNzcwOCAyMS43NjcgMTIuNjY3OSAyMC42NjAzIDEyLjY2NzlIMy4zMzk3M0MyLjIzMzA0IDEyLjY2NzkgMS4zMzU4OSAxMS43NzA4IDEuMzM1ODkgMTAuNjY0MVYyLjAxNTM2QzEuMzM1ODkgNC45NjAxNyAzLjcyMzE0IDcuMzQ3NDEgNi42Njc5NSA3LjM0NzQxQzkuNjEyNzYgNy4zNDc0MSAxMiA0Ljk2MDE3IDEyIDIuMDE1MzZDMTIgNC45NjAxNyAxNC4zODcyIDcuMzQ3NDEgMTcuMzMyMSA3LjM0NzQxWiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTIgMi4wMDM4NEwxMiAyLjAxNTM2QzEyIDIuMDExNTEgMTIgMi4wMDc2OCAxMiAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTEuMzMyMSAxNC4wMDM4QzExLjMzODMgMTYuOTQzNCAxMy43MjMxIDE5LjMyNDQgMTYuNjY0MSAxOS4zMjQ0QzE5LjYwNTEgMTkuMzI0NCAyMS45ODk5IDE2Ljk0MzQgMjEuOTk2MiAxNC4wMDM4SDExLjMzMjFaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjAwMzg0IDE0LjAwMzhDMi4wMDM4NCAxNC4wMDc3IDIuMDAzODMgMTQuMDExNSAyLjAwMzg0IDE0LjAxNTRDMi4wMTAwNiAxNi45NTQ5IDQuMzk0OTMgMTkuMzM1OSA3LjMzNTkgMTkuMzM1OUMxMC4yNzY5IDE5LjMzNTkgMTIuNjYxNyAxNi45NTQ5IDEyLjY2NzkgMTQuMDE1NEgyLjAwMzg0VjE0LjAwMzhaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjY3MTc5IDIuMDAzODRDMi42NzE3OSAyLjc0MTYzIDIuMDczNjkgMy4zMzk3MyAxLjMzNTg5IDMuMzM5NzNDMC41OTgwOTkgMy4zMzk3MyAwIDIuNzQxNjMgMCAyLjAwMzg0QzAgMS4yNjYwNSAwLjU5ODA5OSAwLjY2Nzk0NiAxLjMzNTg5IDAuNjY3OTQ2QzIuMDczNjkgMC42Njc5NDYgMi42NzE3OSAxLjI2NjA1IDIuNjcxNzkgMi4wMDM4NFoiIGZpbGw9IiM5Q0EzQUYiLz4KPHBhdGggZD0iTTEzLjMzNTkgMS4zMzU4OUMxMy4zMzU5IDIuMDczNjkgMTIuNzM3OCAyLjY3MTc5IDEyIDIuNjcxNzlDMTEuMjYyMiAyLjY3MTc5IDEwLjY2NDEgMi4wNzM2OSAxMC42NjQxIDEuMzM1ODlDMTAuNjY0MSAwLjU5ODA5OSAxMS4yNjIyIDAgMTIgMEMxMi43Mzc4IDAgMTMuMzM1OSAwLjU5ODA5OSAxMy4zMzU5IDEuMzM1ODlaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yNCAyLjAwMzg0QzI0IDIuNzQxNjMgMjMuNDAxOSAzLjMzOTczIDIyLjY2NDEgMy4zMzk3M0MyMS45MjYzIDMuMzM5NzMgMjEuMzI4MiAyLjc0MTYzIDIxLjMyODIgMi4wMDM4NEMyMS4zMjgyIDEuMjY2MDUgMjEuOTI2MyAwLjY2Nzk0NiAyMi42NjQxIDAuNjY3OTQ2QzIzLjQwMTkgMC42Njc5NDYgMjQgMS4yNjYwNSAyNCAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8L3N2Zz4K";class BBPost extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <style>\n        .post{margin-bottom: 100px}\n        .post-title{font-size:1.2em}\n        .post-content{margin-top:4px;color:#121111}\n        .post-date{font-size:.8em;color:#999}\n        a {color: #007fff; text-decoration: none;}\n      </style>\n      <div class="post">\n        <div class="post-title"></div>\n        <div class="post-date"></div>\n        <div class="post-content"></div>\n      </div>'}set title(M){this.shadowRoot.querySelector(".post-title").textContent=M}set content(M){this.shadowRoot.querySelector(".post-content").innerHTML=M}set date(M){this.shadowRoot.querySelector(".post-date").textContent=M}}class BBBlog extends HTMLElement{static get observedAttributes(){return["content"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.fetchPosts()}attributeChangedCallback(M,t,e){"content"===M&&t!==e&&this.isConnected&&this.fetchPosts()}render(){this.shadowRoot.innerHTML=`\n      <style>\n        .posts-container {\n          display: grid;\n          grid-template-columns: 1fr min(45rem, 84%) 1fr;\n          line-height: 1.65;\n        }\n        .posts-container > * {\n          grid-column: 2;\n        }\n        .logo {\n          display: block;\n          width: 24px;\n          margin: 100px 0;\n        }\n        @media (min-width: 768px) {\n          .posts-container {\n            grid-template-columns: 1fr min(45rem, 34%) 1fr;\n          }\n        }\n      </style>\n      <div class="posts-container">\n        <img class="logo" src="${LOGO_SRC}" alt="logo">\n        <div class="fallback" style="display:none;"><slot></slot></div>\n      </div>\n    `}async fetchPosts(){const M=this.getAttribute("content");if(!M)return;const t=this.shadowRoot.querySelector(".posts-container"),e=this.shadowRoot.querySelector(".fallback");try{const n=await fetch(M);if(!n.ok)throw new Error("Fetch failed");const o=await n.json();e&&(e.style.display="none"),o.forEach(M=>{const e=document.createElement("bb-post");e.title=M.title,e.content=M.content,t?.appendChild(e)})}catch(M){t&&(t.innerHTML=""),e&&(e.style.display="block")}}}customElements.define("bb-post",BBPost),customElements.define("bb-blog",BBBlog);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@bbki.ng/bbblog",
+  "version": "0.0.1",
+  "description": "bbblog",
+  "main": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "author": "bbbottle <b@bbki.ng>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bbb0ttle/bbblog"
+  },
+  "scripts": {
+    "start": "tsc -w",
+    "prepare": "tsc -d && terser dist/index.js --compress --mangle -o dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "terser": "^5.19.2",
+    "typescript": "^5.2.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,103 @@
+const LOGO_SRC = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjMzMjEgNy4zNDc0MUMyMC4yNzY5IDcuMzQ3NDEgMjIuNjY0MSA0Ljk2MDE3IDIyLjY2NDEgMi4wMTUzNlYxMC42NjQxQzIyLjY2NDEgMTEuNzcwOCAyMS43NjcgMTIuNjY3OSAyMC42NjAzIDEyLjY2NzlIMy4zMzk3M0MyLjIzMzA0IDEyLjY2NzkgMS4zMzU4OSAxMS43NzA4IDEuMzM1ODkgMTAuNjY0MVYyLjAxNTM2QzEuMzM1ODkgNC45NjAxNyAzLjcyMzE0IDcuMzQ3NDEgNi42Njc5NSA3LjM0NzQxQzkuNjEyNzYgNy4zNDc0MSAxMiA0Ljk2MDE3IDEyIDIuMDE1MzZDMTIgNC45NjAxNyAxNC4zODcyIDcuMzQ3NDEgMTcuMzMyMSA3LjM0NzQxWiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTIgMi4wMDM4NEwxMiAyLjAxNTM2QzEyIDIuMDExNTEgMTIgMi4wMDc2OCAxMiAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8cGF0aCBkPSJNMTEuMzMyMSAxNC4wMDM4QzExLjMzODMgMTYuOTQzNCAxMy43MjMxIDE5LjMyNDQgMTYuNjY0MSAxOS4zMjQ0QzE5LjYwNTEgMTkuMzI0NCAyMS45ODk5IDE2Ljk0MzQgMjEuOTk2MiAxNC4wMDM4SDExLjMzMjFaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjAwMzg0IDE0LjAwMzhDMi4wMDM4NCAxNC4wMDc3IDIuMDAzODMgMTQuMDExNSAyLjAwMzg0IDE0LjAxNTRDMi4wMTAwNiAxNi45NTQ5IDQuMzk0OTMgMTkuMzM1OSA3LjMzNTkgMTkuMzM1OUMxMC4yNzY5IDE5LjMzNTkgMTIuNjYxNyAxNi45NTQ5IDEyLjY2NzkgMTQuMDE1NEgyLjAwMzg0VjE0LjAwMzhaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yLjY3MTc5IDIuMDAzODRDMi42NzE3OSAyLjc0MTYzIDIuMDczNjkgMy4zMzk3MyAxLjMzNTg5IDMuMzM5NzNDMC41OTgwOTkgMy4zMzk3MyAwIDIuNzQxNjMgMCAyLjAwMzg0QzAgMS4yNjYwNSAwLjU5ODA5OSAwLjY2Nzk0NiAxLjMzNTg5IDAuNjY3OTQ2QzIuMDczNjkgMC42Njc5NDYgMi42NzE3OSAxLjI2NjA1IDIuNjcxNzkgMi4wMDM4NFoiIGZpbGw9IiM5Q0EzQUYiLz4KPHBhdGggZD0iTTEzLjMzNTkgMS4zMzU4OUMxMy4zMzU5IDIuMDczNjkgMTIuNzM3OCAyLjY3MTc5IDEyIDIuNjcxNzlDMTEuMjYyMiAyLjY3MTc5IDEwLjY2NDEgMi4wNzM2OSAxMC42NjQxIDEuMzM1ODlDMTAuNjY0MSAwLjU5ODA5OSAxMS4yNjIyIDAgMTIgMEMxMi43Mzc4IDAgMTMuMzM1OSAwLjU5ODA5OSAxMy4zMzU5IDEuMzM1ODlaIiBmaWxsPSIjOUNBM0FGIi8+CjxwYXRoIGQ9Ik0yNCAyLjAwMzg0QzI0IDIuNzQxNjMgMjMuNDAxOSAzLjMzOTczIDIyLjY2NDEgMy4zMzk3M0MyMS45MjYzIDMuMzM5NzMgMjEuMzI4MiAyLjc0MTYzIDIxLjMyODIgMi4wMDM4NEMyMS4zMjgyIDEuMjY2MDUgMjEuOTI2MyAwLjY2Nzk0NiAyMi42NjQxIDAuNjY3OTQ2QzIzLjQwMTkgMC42Njc5NDYgMjQgMS4yNjYwNSAyNCAyLjAwMzg0WiIgZmlsbD0iIzlDQTNBRiIvPgo8L3N2Zz4K";
+
+class BBPost extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode:'open'}).innerHTML = `
+      <style>
+        .post{margin-bottom: 100px}
+        .post-title{font-size:1.2em}
+        .post-content{margin-top:4px;color:#121111}
+        .post-date{font-size:.8em;color:#999}
+        a {color: #007fff; text-decoration: none;}
+      </style>
+      <div class="post">
+        <div class="post-title"></div>
+        <div class="post-date"></div>
+        <div class="post-content"></div>
+      </div>`;
+  }
+  set title(v: string){this.shadowRoot!.querySelector('.post-title')!.textContent=v}
+  set content(v: string){this.shadowRoot!.querySelector('.post-content')!.innerHTML=v}
+  set date(v: string){this.shadowRoot!.querySelector('.post-date')!.textContent=v}
+}
+
+class BBBlog extends HTMLElement {
+  static get observedAttributes() {
+    return ['content'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+  }
+
+  connectedCallback() {
+    this.render();
+    this.fetchPosts();
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (name === 'content' && oldValue !== newValue && this.isConnected) {
+      this.fetchPosts();
+    }
+  }
+
+  render() {
+    this.shadowRoot!.innerHTML = `
+      <style>
+        .posts-container {
+          display: grid;
+          grid-template-columns: 1fr min(45rem, 84%) 1fr;
+          line-height: 1.65;
+        }
+        .posts-container > * {
+          grid-column: 2;
+        }
+        .logo {
+          display: block;
+          width: 24px;
+          margin: 100px 0;
+        }
+        @media (min-width: 768px) {
+          .posts-container {
+            grid-template-columns: 1fr min(45rem, 34%) 1fr;
+          }
+        }
+      </style>
+      <div class="posts-container">
+        <img class="logo" src="${LOGO_SRC}" alt="logo">
+        <div class="fallback" style="display:none;"><slot></slot></div>
+      </div>
+    `;
+  }
+
+  async fetchPosts() {
+    const contentPath = this.getAttribute('content');
+    if (!contentPath) return;
+
+    const container = this.shadowRoot!.querySelector('.posts-container');
+    const fallback = this.shadowRoot!.querySelector('.fallback') as HTMLElement | null;
+    
+    try {
+      const response = await fetch(contentPath);
+      if (!response.ok) throw new Error('Fetch failed');
+      
+      const data: Array<{title: string; content: string}> = await response.json();
+      if (fallback) fallback.style.display = 'none';
+      
+      data.forEach(p => {
+        const el = document.createElement('bb-post') as BBPost;
+        el.title = p.title;
+        el.content = p.content;
+        container?.appendChild(el);
+      });
+    } catch (error) {
+      if (container) container.innerHTML = '';
+      if (fallback) fallback.style.display = 'block';
+    }
+  }
+}
+
+customElements.define('bb-post', BBPost);
+customElements.define('bb-blog', BBBlog);

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "module": "ESNext",                                  /* Specify what module code is generated. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    "skipLibCheck": true,                                /* Skip type checking all .d.ts files. */
+    "lib": ["ESNext", "ESNext.Intl", "DOM", "DOM.Iterable"]
+  }
+}