From 7cd863dc2230851885dba9aee110efcb90cb0024 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 12 Nov 2023 17:02:02 +0100
Subject: [PATCH] refactor(site): proper dom styling logic

---
 site/src/components/code-block.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js
index b1cfac4..c3a24c0 100644
--- a/site/src/components/code-block.js
+++ b/site/src/components/code-block.js
@@ -4,15 +4,33 @@ class CodeBlockComponent extends HTMLElement {
     const lang = this.getAttribute("language");
 
     this.innerHTML = `
-        <pre id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
+        <pre id="pre"><code id="code">${
       this.trimmed
     }</code></pre>
     `;
 
+    /**
+     * @type {HTMLPreElement}
+     */
+    const pre = this.querySelector('#pre')
+
     if (lang) {
-      const pre = this.querySelector('#pre')
       pre.className = `language-${lang}`;
     }
 
+    /**
+     * @type {Partial<CSSStyleDeclaration>}
+     */
+    const style = {
+      padding:'1em',
+      background:'#efefef',
+      margin: '1em 0',
+      borderRadius: '5px',
+      fontSize: 'large'
+    }
+
+    Object.keys(style).forEach(rule => {
+      pre.style[rule] = style[rule]
+    })
   }
 }