From a38f6b2bbc86d68ecd3355d376cb6e584a99a514 Mon Sep 17 00:00:00 2001
From: CoolElectronics <me@coolelectronics.me>
Date: Wed, 1 May 2024 18:06:05 -0400
Subject: [PATCH] tabbed codeblocks

---
 package.json                                |  1 +
 src/components/Code.astro                   | 93 +++++++++++++++++++++
 src/layouts/Document.astro                  |  1 +
 src/pages/index.astro                       |  3 +-
 src/pages/learn/introduction/basic-html.mdx | 43 +++++-----
 5 files changed, 117 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Code.astro

diff --git a/package.json b/package.json
index e164805..a38c5ae 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 		"astro-icon": "^1.1.0",
 		"browserslist": "^4.23.0",
 		"lightningcss": "^1.24.0",
+		"linkedom": "^0.16.11",
 		"rehype-autolink-headings": "^7.1.0",
 		"typescript": "^5.4.2"
 	},
diff --git a/src/components/Code.astro b/src/components/Code.astro
new file mode 100644
index 0000000..286e80d
--- /dev/null
+++ b/src/components/Code.astro
@@ -0,0 +1,93 @@
+---
+const { js, jsx, tsx } = Astro.props;
+import { parseHTML } from 'linkedom'
+
+import { Icon } from "astro-icon/components";
+const html = await Astro.slots.render("default");
+
+const {document} = parseHTML(html);
+const children = document.children;
+
+const nameid = ''+Math.random();
+---
+
+<div class="codetab">
+
+  <div>
+    {
+      [...children].map((child) =>{
+        let lang = child.attributes.getNamedItem("data-language")?.value!;
+
+        let uid = Math.random()
+        return (
+          <>
+            <input type="radio" name={"tabset"+nameid} id={lang+uid} checked={lang == "js"}>
+            <label for={lang+uid}>
+              <Icon size={30} name="mdi:react" />
+              {lang?.toUpperCase()}
+            </label>
+          </>
+        )
+      })
+    }
+
+    <div class="tabs">
+    {
+      [...children].map((child) => {
+        return <>
+          <div class="tab-panel">
+            <div class="code-wrapper" set:html={child.outerHTML} />
+          </div>
+        </>
+      })
+    }
+    </div>
+  </div>
+
+<style>
+  .codetab {
+  .tab-panel {
+    display: none;
+  }
+
+  input:first-child:checked ~ .tabs > .tab-panel:first-child,
+  input:nth-child(3):checked ~ .tabs > .tab-panel:nth-child(2),
+  input:nth-child(5):checked ~ .tabs > .tab-panel:nth-child(3) {
+    display: block;
+  }
+
+  input {
+    position: absolute;
+    left: -200vw;
+  }
+
+
+  label {
+    background-color: #201d20;
+    user-select: none;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0.25em;
+    font-family: monospace;
+  }
+
+  input:checked + label {
+    color: var(--acc);
+  }
+
+
+  label {
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+  }
+}
+</style>
+<style is:global>  
+  .code-wrapper > .astro-code {
+    margin:  0;
+    border-top-left-radius: 0;
+  }
+</style>
+</div>
diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
index 03e045c..dc1746c 100644
--- a/src/layouts/Document.astro
+++ b/src/layouts/Document.astro
@@ -6,6 +6,7 @@ import Sidebar from "components/Sidebar.astro";
 const { headings } = Astro.props;
 
 const title = headings ? headings[0].text + " | dreamland.js" : "404 | dreamland.js";
+
 ---
 
 <Base title={title}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2695b12..d4b1032 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,6 +14,7 @@ import { Code } from "astro:components";
 		<div id="wrapper">
 			<div class="split">
 				<div class="code">
+					
 					<Code
 						code={`function Counter(){
 	this.css = \`
@@ -64,7 +65,7 @@ document.body.appendChild(root);
 					>.
 				</p>
 				<div class="code">
-					<Code code={`<script src="https://unpkg.com/dreamland"></script>`} lang="html" />
+					<Code code={`<script src="https://unpkg.com/dreamland"></script>`} lang="html" theme="min-dark" />
 				</div>
 
 				<p>
diff --git a/src/pages/learn/introduction/basic-html.mdx b/src/pages/learn/introduction/basic-html.mdx
index e1e5406..e013f26 100644
--- a/src/pages/learn/introduction/basic-html.mdx
+++ b/src/pages/learn/introduction/basic-html.mdx
@@ -3,36 +3,23 @@ layout: layouts/Document.astro
 order: 1
 ---
 
+import Code from "../../../components/Code.astro"
+
 # Basic HTML
 
-> ### Note
->
-> For the purposes of easy documentation, all examples will be written with JSX syntax, which is not supported in the JavaScript standard and must be used with a preprocessor such as tsc, esbuild, Babel, etc. This is entirely optional, and the `html` tag function is provided to allow for use without a preprocessor:
->
-> ```js
-> return (
-> 	html`<button on:click=${() => this.counter++}>I have been clicked ${use(this.counter)} times!</button>`;
-> )
-> ```
->
-> Whereas the equivalent JSX would look like
->
-> ```jsx
-> return (
-> 	<button on:click={() => this.counter++}>I have been clicked {use(this.counter)} times!</button>;
-> );
-> ```
->
-> Which one you choose to use comes down to personal preference, but remember that all examples shown with JSX work in plain JavaScript.
-
-In dreamland, everything is an HTML element. We try to abstract the DOM, but never replace it.
-
-Let's create an HTML element right now.
 
+In dreamland, everything is an HTML element. Unlike other frameworks, we don't abstract away the DOM, only make it easier to use. Let's create an HTML element right now.
+
+<Code>
+```js
+let button = html`<button class="some-button">content here!</button>`;
+document.body.appendChild(button);
+```
 ```jsx
 let button = <button class="some-button">content here!</button>;
 document.body.appendChild(button);
 ```
+</Code>
 
 We just created a button, with the class "some-button", and added it to the document. This is the simplest possible way of using dreamland, and is why it's so easy to slowly transition to using it from a plain-js codebase.
 
@@ -42,6 +29,15 @@ We just created a button, with the class "some-button", and added it to the docu
 
 What if we wanted to do something when the button is clicked? For any DOM event, you can use `on:` handlers.
 
+
+<Code>
+```js
+let button = (
+	html`<button class="some-button" on:click=${() => alert("button clicked!")}>
+		click me!
+	</button>`
+);
+```
 ```jsx
 let button = (
 	<button class="some-button" on:click={() => alert("button clicked!")}>
@@ -49,3 +45,4 @@ let button = (
 	</button>
 );
 ```
+</Code>