@bbki.ng/bbblog 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/src/index.ts +2 -2
package/dist/index.js CHANGED
@@ -1 +1 @@
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()}attributeChangedCallback(M,t,n){"content"===M&&t!==n&&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"),n=this.shadowRoot.querySelector(".fallback");try{const e=await fetch(M);if(!e.ok)throw new Error("Fetch failed");const o=await e.json();n&&(n.style.display="none"),o.forEach(M=>{const n=document.createElement("bb-post");n.title=M.title,n.content=M.content,t?.appendChild(n)})}catch(M){t&&(t.innerHTML=""),n&&(n.style.display="block")}}}customElements.define("bb-post",BBPost),customElements.define("bb-blog",BBBlog);
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,n){"content"===M&&null!==t&&t!==n&&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"),n=this.shadowRoot.querySelector(".fallback");try{const e=await fetch(M);if(!e.ok)throw new Error("Fetch failed");const o=await e.json();n&&(n.style.display="none"),o.forEach(M=>{const n=document.createElement("bb-post");n.title=M.title,n.content=M.content,t?.appendChild(n)})}catch(M){t&&(t.innerHTML=""),n&&(n.style.display="block")}}}customElements.define("bb-post",BBPost),customElements.define("bb-blog",BBBlog);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbki.ng/bbblog",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "bbblog",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
package/src/index.ts CHANGED
@@ -34,11 +34,11 @@ class BBBlog extends HTMLElement {
34
34
 
35
35
  connectedCallback() {
36
36
  this.render();
37
- // this.fetchPosts();
37
+ this.fetchPosts();
38
38
  }
39
39
 
40
40
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
41
- if (name === 'content' && oldValue !== newValue && this.isConnected) {
41
+ if (name === 'content' && oldValue !== null && oldValue !== newValue && this.isConnected) {
42
42
  this.fetchPosts();
43
43
  }
44
44
  }