From a420af36c3c706cfa79e06a4b3dee38158b9d5eb Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 19 Oct 2023 18:21:59 +0200
Subject: [PATCH] try css stuff

---
 src/components/code-block.js | 27 +++++++++++++++++++++++----
 src/pages/demo/index.html    |  2 ++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/code-block.js b/src/components/code-block.js
index 0760d7e..939857b 100644
--- a/src/components/code-block.js
+++ b/src/components/code-block.js
@@ -1,20 +1,39 @@
+// @ts-check
+
 class CodeBlockComponent extends HTMLElement {
   constructor() {
     super();
   }
 
   connectedCallback() {
-    let lang = this.classList.value;
-    lang = lang.replace("language-", "");
-
     const trimmed = this.innerHTML.trim();
 
+    this.css({
+      color: "orange",
+      margin: "1em 0",
+      padding: "1em",
+      fontWeight: "bold",
+      fontSize: "x-large",
+      display: "block",
+      backgroundColor: "#eee",
+    });
+
     const template = `
       <div>
-        <pre class="${this.classList}" id="pre"><code id="code">${trimmed}</code></pre>
+        <pre class="language-${this.lang}" id="pre"><code id="code">${trimmed}</code></pre>
       </div>
     `;
 
     this.innerHTML = template;
   }
+
+  /**
+   * Apply css to an element
+   * @param {Partial<CSSStyleDeclaration>} style
+   * @param {HTMLElement} element
+   */
+  css(style, element = null) {
+    let el = element ?? this;
+    for (const property in style) el.style[property] = style[property];
+  }
 }
diff --git a/src/pages/demo/index.html b/src/pages/demo/index.html
index aa2f40a..dc66031 100644
--- a/src/pages/demo/index.html
+++ b/src/pages/demo/index.html
@@ -25,8 +25,10 @@
       <p>some text: {{greeting}}</p>
       {{greeting}} hey<br />
       <clickable-text></clickable-text>
+      <code-block lang="css"> const hey = "AYO" </code-block>
     </main>
     <my-footer></my-footer>
+
     <script>
       const helloWorld = document.querySelector("my-hello-world");
       setTimeout(() => {