From cb503f7ca3989196c70e4b60db5480f518431f57 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 12 Nov 2023 16:42:23 +0100
Subject: [PATCH] refactor(core): simpler code-block element

---
 site/src/components/code-block.js | 15 +++++++--------
 site/src/pages/demo.html          |  3 +--
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js
index 338170a..b1cfac4 100644
--- a/site/src/components/code-block.js
+++ b/site/src/components/code-block.js
@@ -2,18 +2,17 @@ class CodeBlockComponent extends HTMLElement {
   connectedCallback() {
     this.trimmed = this.innerHTML.trim();
     const lang = this.getAttribute("language");
-    const lineNumbers = this.getAttribute("line-numbers") === "true";
-
-    console.log(lineNumbers, lang);
 
     this.innerHTML = `
-      <div>
-        <pre class="language-${lang} ${
-      lineNumbers ? "line-numbers" : ""
-    }" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
+        <pre id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
       this.trimmed
     }</code></pre>
-      </div>
     `;
+
+    if (lang) {
+      const pre = this.querySelector('#pre')
+      pre.className = `language-${lang}`;
+    }
+
   }
 }
diff --git a/site/src/pages/demo.html b/site/src/pages/demo.html
index 20ae7b5..ccc649e 100644
--- a/site/src/pages/demo.html
+++ b/site/src/pages/demo.html
@@ -65,7 +65,6 @@
       <section id="breakdown">
         <h2>Let's Break it Down</h2>
         <code-block language="html" line-numbers="true">
-          <pre>
 &lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;en&quot;&gt;
   &lt;my-head&gt;
@@ -95,7 +94,7 @@
     &lt;p&gt;&lt;a href="&#123;&#123;greeting.url&#125;&#125;"&gt;some text: &#123;&#123;greeting.message&#125;&#125;&lt;/a&gt;&lt;/p&gt;
     &lt;clickable-text&gt;&lt;/clickable-text&gt;
   &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;
         </code-block>
       </section>
     </main>