From ca62398a329ee2ffe2cc605223877cc75ad52245 Mon Sep 17 00:00:00 2001
From: wilovy <computadora@Computadoras-MacBook-Pro.local>
Date: Wed, 21 Jan 2026 02:06:17 -0600
Subject: [PATCH 1/2] chore: :truck: Remove `shared` folder

---
 src/components/editor/CodeEditor.astro        |  87 ++++++++
 src/components/{shared => }/editor/config.ts  |   2 +-
 .../{shared => }/editor/keywords.ts           |   0
 src/components/editor/output/Terminal.astro   | 186 ++++++++++++++++++
 .../{shared => }/editor/output/renderer.ts    |   0
 src/components/{shared => }/editor/theme.ts   |   0
 .../{shared => }/footer/Footer.astro          |   0
 .../{shared => }/sections/Section.astro       |   0
 src/components/shared/editor/CodeEditor.astro |  80 --------
 .../shared/editor/output/Terminal.astro       | 168 ----------------
 .../{shared => }/sidebar/Sidebar.astro        |   0
 .../sidebar/ToggleSidebarButton.astro         |   0
 src/features/content/components/Navbar.astro  |  12 +-
 src/features/home/components/Community.astro  |  14 +-
 src/features/home/components/Hero.astro       |   2 +-
 src/features/home/components/Playground.astro |  30 ++-
 src/pages/[slug].astro                        | 120 +++++++----
 src/pages/index.astro                         |   2 +-
 18 files changed, 403 insertions(+), 300 deletions(-)
 create mode 100644 src/components/editor/CodeEditor.astro
 rename src/components/{shared => }/editor/config.ts (94%)
 rename src/components/{shared => }/editor/keywords.ts (100%)
 create mode 100644 src/components/editor/output/Terminal.astro
 rename src/components/{shared => }/editor/output/renderer.ts (100%)
 rename src/components/{shared => }/editor/theme.ts (100%)
 rename src/components/{shared => }/footer/Footer.astro (100%)
 rename src/components/{shared => }/sections/Section.astro (100%)
 delete mode 100644 src/components/shared/editor/CodeEditor.astro
 delete mode 100644 src/components/shared/editor/output/Terminal.astro
 rename src/components/{shared => }/sidebar/Sidebar.astro (100%)
 rename src/components/{shared => }/sidebar/ToggleSidebarButton.astro (100%)

diff --git a/src/components/editor/CodeEditor.astro b/src/components/editor/CodeEditor.astro
new file mode 100644
index 0000000..3182f92
--- /dev/null
+++ b/src/components/editor/CodeEditor.astro
@@ -0,0 +1,87 @@
+---
+interface Props {
+	slug: string
+	initialCode?: string
+}
+
+const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' } = Astro.props
+---
+
+<div
+  id="editor"
+  data-slug={slug}
+  data-initial-code={initialCode}
+  class="flex-1 min-w-0 min-h-0 overflow-hidden"
+  role="textbox"
+  aria-label="Editor de código"
+  aria-multiline="true"
+>
+</div>
+
+<script>
+  import { EditorView, keymap } from "@codemirror/view";
+  import { EditorState } from "@codemirror/state";
+  import { basicSetup } from "codemirror";
+  import { indentWithTab } from "@codemirror/commands";
+  import { gruvbox } from "~/components/editor/theme";
+  import { db, editorCode } from "~/lib/stores/editor-store";
+  import { rust } from "~/components/editor/config";
+
+  let editorView: EditorView | null = null;
+  let saveTimeout: number | undefined;
+
+  async function initEditor() {
+    const editorElement = document.getElementById("editor");
+    if (!editorElement) return;
+
+    if (editorView) {
+      editorView.destroy();
+      editorView = null;
+    }
+
+    const { slug, initialCode } = editorElement.dataset as {
+      slug: string;
+      initialCode: string;
+    };
+    const initialDoc = (await db.getCode(slug)) ?? initialCode;
+
+    editorView = new EditorView({
+      state: EditorState.create({
+        doc: initialDoc,
+        extensions: [
+          basicSetup,
+          gruvbox,
+          rust(),
+          keymap.of([indentWithTab]),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              const value = update.state.doc.toString();
+              editorCode.set(value);
+              clearTimeout(saveTimeout);
+              saveTimeout = window.setTimeout(
+                () => db.saveCode(slug, value),
+                500,
+              );
+            }
+          }),
+        ],
+      }),
+      parent: editorElement,
+    });
+
+    editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust");
+    editorView.contentDOM.setAttribute("role", "textbox");
+    editorCode.set(initialDoc);
+  }
+
+  document.addEventListener("astro:page-load", initEditor);
+
+  document.addEventListener("astro:before-swap", () => {
+    if (editorView) {
+      editorView.destroy();
+      editorView = null;
+    }
+
+    clearTimeout(saveTimeout);
+  });
+</script>
diff --git a/src/components/shared/editor/config.ts b/src/components/editor/config.ts
similarity index 94%
rename from src/components/shared/editor/config.ts
rename to src/components/editor/config.ts
index 4445bb6..dc4b33c 100644
--- a/src/components/shared/editor/config.ts
+++ b/src/components/editor/config.ts
@@ -8,7 +8,7 @@ import {
 	LRLanguage,
 } from "@codemirror/language"
 import { parser } from "@lezer/rust"
-import { rustCompletions } from "~/components/shared/editor/keywords"
+import { rustCompletions } from "~/components/editor/keywords"
 
 const rustLanguage = LRLanguage.define({
 	name: "rust",
diff --git a/src/components/shared/editor/keywords.ts b/src/components/editor/keywords.ts
similarity index 100%
rename from src/components/shared/editor/keywords.ts
rename to src/components/editor/keywords.ts
diff --git a/src/components/editor/output/Terminal.astro b/src/components/editor/output/Terminal.astro
new file mode 100644
index 0000000..b22895d
--- /dev/null
+++ b/src/components/editor/output/Terminal.astro
@@ -0,0 +1,186 @@
+---
+import IconLoader2 from "~icons/tabler/loader-2"
+import IconPlayerPlay from "~icons/tabler/player-play"
+import IconTerminal from "~icons/tabler/terminal"
+---
+
+<terminal-output
+  class="h-full flex flex-col bg-dark-fg/60 border-t border-stroke-color text-sm font-mono rounded-b-2xl"
+  role="region"
+  aria-label="Terminal output"
+>
+  <header
+    class="flex items-center justify-between border-b border-stroke-color bg-light-bg px-3 h-8"
+  >
+    <div class="flex items-center gap-2">
+      <IconTerminal font-size={18} aria-hidden="true" />
+      <h2 class="text-secondary font-medium text-sm">Output</h2>
+    </div>
+    <button
+      type="button"
+      aria-label="Run code"
+      class="flex items-center gap-1 px-2 py-1 text-xs text-secondary hover:text-green-500 transition-colors bg-transparent border-none cursor-pointer"
+    >
+      <IconPlayerPlay font-size={14} class="play-icon" aria-hidden="true" />
+      <IconLoader2
+        font-size={14}
+        class="loader-icon hidden animate-spin"
+        aria-hidden="true"
+      />
+      <span class="button-text">Ejecutar</span>
+    </button>
+  </header>
+  <div
+    class="flex-1 overflow-auto p-3 text-secondary outline-none"
+    role="log"
+    aria-live="polite"
+    aria-atomic="false"
+    tabindex="0"
+  >
+    <div class="command-line text-gray-400 text-sm" role="status">
+      <span class="text-green-400">$</span>
+      <span class="text-gray-300">cargo run</span>
+    </div>
+  </div>
+</terminal-output>
+
+<script>
+  import { rustPlayground } from "~/lib/rust-playground";
+  import { editorCode } from "~/lib/stores/editor-store";
+  import { getStderrHTML } from "~/components/editor/output/renderer";
+
+  class RustOutput extends HTMLElement {
+    private output!: HTMLElement;
+    private stderrSection!: HTMLElement;
+    private stdoutSection!: HTMLElement;
+    private separator!: HTMLElement;
+    private inputLine: HTMLElement | null = null;
+    private input: HTMLInputElement | null = null;
+    private lastStderr = "";
+    private stdoutBuffer = "";
+    private pendingRender = false;
+
+    connectedCallback() {
+      this.output = this.querySelector("[role='log']")!;
+      this.querySelector("button")!.addEventListener("click", () => this.run());
+    }
+
+    private sendInput() {
+      if (!this.input?.value) return;
+      rustPlayground.sendStdin(`${this.input.value}\n`);
+      this.input.value = "";
+      this.output.scrollTop = this.output.scrollHeight;
+    }
+
+    private run() {
+      this.toggleRunning(true);
+      this.reset();
+      this.toggleInputLine(true);
+      this.output.focus();
+
+      rustPlayground.execute(editorCode.get(), (stderr, stdout, done) => {
+        if (stderr !== this.lastStderr) {
+          this.lastStderr = stderr;
+          this.stderrSection.innerHTML = getStderrHTML(stderr);
+        }
+
+        if (stdout) {
+          this.stdoutBuffer = stdout;
+          this.scheduleRender();
+        }
+
+        this.separator.hidden = !stderr || !stdout;
+
+        if (done) {
+          this.toggleRunning(false);
+          this.toggleInputLine(false);
+          this.flushRender();
+        }
+      });
+    }
+
+    private toggleInputLine(show: boolean) {
+      this.inputLine?.remove();
+      this.inputLine = null;
+      this.input = null;
+
+      if (show) {
+        this.inputLine = document.createElement("div");
+        this.inputLine.className =
+          "text-gray-300 text-sm flex items-center bg-dark-fg/40 -mx-3 px-3 py-1 border-l-2 border-gray-600";
+
+        this.input = document.createElement("input");
+        this.input.type = "text";
+        this.input.className =
+          "flex-1 bg-transparent outline-none text-gray-300 font-mono text-sm";
+        this.input.placeholder = "";
+        this.input.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            this.sendInput();
+          }
+        });
+
+        this.inputLine.innerHTML = `<span class="text-green-400 mr-1">›</span>`;
+        this.inputLine.appendChild(this.input);
+        this.output.appendChild(this.inputLine);
+        this.input.focus();
+      }
+    }
+
+    private scheduleRender() {
+      if (this.pendingRender) return;
+
+      this.pendingRender = true;
+      requestAnimationFrame(() => this.flushRender());
+    }
+
+    private flushRender() {
+      this.pendingRender = false;
+      const atBottom =
+        this.output.scrollHeight -
+          this.output.scrollTop -
+          this.output.clientHeight <
+        5;
+
+      this.stdoutSection.textContent = this.stdoutBuffer;
+
+      if (atBottom) this.output.scrollTop = this.output.scrollHeight;
+    }
+
+    private toggleRunning(running: boolean) {
+      this.querySelector(".play-icon")!.classList.toggle("hidden", running);
+      this.querySelector(".loader-icon")!.classList.toggle("hidden", !running);
+      this.querySelector(".button-text")!.textContent = running
+        ? "Ejecutando..."
+        : "Ejecutar";
+    }
+
+    private reset() {
+      const commandLine = this.output.querySelector(".command-line")!;
+      this.output.textContent = "";
+      this.output.appendChild(commandLine);
+
+      this.stderrSection = document.createElement("pre");
+      this.stderrSection.className = "text-gray-400 text-sm whitespace-pre";
+
+      this.separator = document.createElement("hr");
+      this.separator.className = "border-t border-gray-700 my-2";
+      this.separator.hidden = true;
+
+      this.stdoutSection = document.createElement("pre");
+      this.stdoutSection.className = "text-gray-300 text-sm whitespace-pre";
+
+      this.output.append(
+        this.stderrSection,
+        this.separator,
+        this.stdoutSection,
+      );
+      this.lastStderr = "";
+      this.stdoutBuffer = "";
+      this.pendingRender = false;
+    }
+  }
+
+  customElements.define("terminal-output", RustOutput);
+</script>
diff --git a/src/components/shared/editor/output/renderer.ts b/src/components/editor/output/renderer.ts
similarity index 100%
rename from src/components/shared/editor/output/renderer.ts
rename to src/components/editor/output/renderer.ts
diff --git a/src/components/shared/editor/theme.ts b/src/components/editor/theme.ts
similarity index 100%
rename from src/components/shared/editor/theme.ts
rename to src/components/editor/theme.ts
diff --git a/src/components/shared/footer/Footer.astro b/src/components/footer/Footer.astro
similarity index 100%
rename from src/components/shared/footer/Footer.astro
rename to src/components/footer/Footer.astro
diff --git a/src/components/shared/sections/Section.astro b/src/components/sections/Section.astro
similarity index 100%
rename from src/components/shared/sections/Section.astro
rename to src/components/sections/Section.astro
diff --git a/src/components/shared/editor/CodeEditor.astro b/src/components/shared/editor/CodeEditor.astro
deleted file mode 100644
index 8f38bde..0000000
--- a/src/components/shared/editor/CodeEditor.astro
+++ /dev/null
@@ -1,80 +0,0 @@
----
-interface Props {
-	slug: string
-	initialCode?: string
-}
-
-const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' } = Astro.props
----
-
-<div 
-	id="editor" 
-	data-slug={slug}
-	data-initial-code={initialCode}
-	class="flex-1 min-w-0 min-h-0 overflow-hidden" 
-	role="textbox" 
-	aria-label="Editor de código" 
-	aria-multiline="true"
-></div>
-
-<script>
-	import { EditorView, keymap } from "@codemirror/view"
-	import { EditorState } from "@codemirror/state"
-	import { basicSetup } from "codemirror"
-	import { indentWithTab } from "@codemirror/commands"
-	import { gruvbox } from "~/components/shared/editor/theme"
-	import { db, editorCode } from "~/lib/stores/editor-store"
-	import { rust } from "~/components/shared/editor/config"
-
-	let editorView: EditorView | null = null
-	let saveTimeout: number | undefined
-
-	async function initEditor() {
-		const editorElement = document.getElementById("editor")
-		if (!editorElement) return
-
-		if (editorView) {
-			editorView.destroy()
-			editorView = null
-		}
-
-		const { slug, initialCode } = editorElement.dataset as { slug: string; initialCode: string }
-		const initialDoc = (await db.getCode(slug)) ?? initialCode
-
-		editorView = new EditorView({
-			state: EditorState.create({
-				doc: initialDoc,
-				extensions: [
-					basicSetup,
-					gruvbox,
-					rust(),
-					keymap.of([indentWithTab]),
-					EditorView.updateListener.of((update) => {
-						if (update.docChanged) {
-							const value = update.state.doc.toString()
-							editorCode.set(value)
-							clearTimeout(saveTimeout)
-							saveTimeout = window.setTimeout(() => db.saveCode(slug, value), 500)
-						}
-					}),
-				],
-			}),
-			parent: editorElement,
-		})
-
-		editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust")
-		editorView.contentDOM.setAttribute("role", "textbox")
-		editorCode.set(initialDoc)
-	}
-
-	document.addEventListener("astro:page-load", initEditor)
-
-	document.addEventListener("astro:before-swap", () => {
-		if (editorView) {
-			editorView.destroy()
-			editorView = null
-		}
-
-		clearTimeout(saveTimeout)
-	})
-</script>
diff --git a/src/components/shared/editor/output/Terminal.astro b/src/components/shared/editor/output/Terminal.astro
deleted file mode 100644
index db1be0f..0000000
--- a/src/components/shared/editor/output/Terminal.astro
+++ /dev/null
@@ -1,168 +0,0 @@
----
-import IconLoader2 from "~icons/tabler/loader-2"
-import IconPlayerPlay from "~icons/tabler/player-play"
-import IconTerminal from "~icons/tabler/terminal"
----
-
-<terminal-output
-	class="h-full flex flex-col bg-dark-fg/60 border-t border-stroke-color text-sm font-mono rounded-b-2xl"
-	role="region"
-	aria-label="Terminal output"
->
-	<header class="flex items-center justify-between border-b border-stroke-color bg-light-bg px-3 h-8">
-		<div class="flex items-center gap-2">
-			<IconTerminal font-size={18} aria-hidden="true"/>
-			<h2 class="text-secondary font-medium text-sm">Output</h2>
-		</div>
-		<button
-			type="button"
-			aria-label="Run code"
-			class="flex items-center gap-1 px-2 py-1 text-xs text-secondary hover:text-green-500 transition-colors bg-transparent border-none cursor-pointer"
-		>
-			<IconPlayerPlay font-size={14} class="play-icon" aria-hidden="true"/>
-			<IconLoader2 font-size={14} class="loader-icon hidden animate-spin" aria-hidden="true"/>
-			<span class="button-text">Ejecutar</span>
-		</button>
-	</header>
-	<div 
-		class="flex-1 overflow-auto p-3 text-secondary outline-none" 
-		role="log" 
-		aria-live="polite" 
-		aria-atomic="false"
-		tabindex="0"
-	>
-		<div class="command-line text-gray-400 text-sm" role="status">
-			<span class="text-green-400">$</span>
-			<span class="text-gray-300">cargo run</span>
-		</div>
-	</div>
-</terminal-output>
-
-<script>
-	import { rustPlayground } from "~/lib/rust-playground"
-	import { editorCode } from "~/lib/stores/editor-store"
-	import { getStderrHTML } from "~/components/shared/editor/output/renderer"
-
-	class RustOutput extends HTMLElement {
-		private output!: HTMLElement
-		private stderrSection!: HTMLElement
-		private stdoutSection!: HTMLElement
-		private separator!: HTMLElement
-		private inputLine: HTMLElement | null = null
-		private input: HTMLInputElement | null = null
-		private lastStderr = ""
-		private stdoutBuffer = ""
-		private pendingRender = false
-
-		connectedCallback() {
-			this.output = this.querySelector("[role='log']")!
-			this.querySelector("button")!.addEventListener("click", () => this.run())
-		}
-
-		private sendInput() {
-			if (!this.input?.value) return
-			rustPlayground.sendStdin(`${this.input.value}\n`)
-			this.input.value = ""
-			this.output.scrollTop = this.output.scrollHeight
-		}
-
-		private run() {
-			this.toggleRunning(true)
-			this.reset()
-			this.toggleInputLine(true)
-			this.output.focus()
-
-			rustPlayground.execute(editorCode.get(), (stderr, stdout, done) => {
-				if (stderr !== this.lastStderr) {
-					this.lastStderr = stderr
-					this.stderrSection.innerHTML = getStderrHTML(stderr)
-				}
-
-				if (stdout) {
-					this.stdoutBuffer = stdout
-					this.scheduleRender()
-				}
-
-				this.separator.hidden = !stderr || !stdout
-
-				if (done) {
-					this.toggleRunning(false)
-					this.toggleInputLine(false)
-					this.flushRender()
-				}
-			})
-		}
-
-		private toggleInputLine(show: boolean) {
-			this.inputLine?.remove()
-			this.inputLine = null
-			this.input = null
-
-			if (show) {
-				this.inputLine = document.createElement("div")
-				this.inputLine.className = "text-gray-300 text-sm flex items-center bg-dark-fg/40 -mx-3 px-3 py-1 border-l-2 border-gray-600"
-				
-				this.input = document.createElement("input")
-				this.input.type = "text"
-				this.input.className = "flex-1 bg-transparent outline-none text-gray-300 font-mono text-sm"
-				this.input.placeholder = ""
-				this.input.addEventListener("keydown", (e) => {
-					if (e.key === "Enter") {
-						e.preventDefault()
-						this.sendInput()
-					}
-				})
-
-				this.inputLine.innerHTML = `<span class="text-green-400 mr-1">›</span>`
-				this.inputLine.appendChild(this.input)
-				this.output.appendChild(this.inputLine)
-				this.input.focus()
-			}
-		}
-
-		private scheduleRender() {
-			if (this.pendingRender) return
-
-			this.pendingRender = true
-			requestAnimationFrame(() => this.flushRender())
-		}
-
-		private flushRender() {
-			this.pendingRender = false
-			const atBottom = this.output.scrollHeight - this.output.scrollTop - this.output.clientHeight < 5
-
-			this.stdoutSection.textContent = this.stdoutBuffer
-
-			if (atBottom) this.output.scrollTop = this.output.scrollHeight
-		}
-
-		private toggleRunning(running: boolean) {
-			this.querySelector(".play-icon")!.classList.toggle("hidden", running)
-			this.querySelector(".loader-icon")!.classList.toggle("hidden", !running)
-			this.querySelector(".button-text")!.textContent = running ? "Ejecutando..." : "Ejecutar"
-		}
-
-		private reset() {
-			const commandLine = this.output.querySelector(".command-line")!
-			this.output.textContent = ""
-			this.output.appendChild(commandLine)
-
-			this.stderrSection = document.createElement("pre")
-			this.stderrSection.className = "text-gray-400 text-sm whitespace-pre"
-
-			this.separator = document.createElement("hr")
-			this.separator.className = "border-t border-gray-700 my-2"
-			this.separator.hidden = true
-
-			this.stdoutSection = document.createElement("pre")
-			this.stdoutSection.className = "text-gray-300 text-sm whitespace-pre"
-
-			this.output.append(this.stderrSection, this.separator, this.stdoutSection)
-			this.lastStderr = ""
-			this.stdoutBuffer = ""
-			this.pendingRender = false
-		}
-	}
-
-	customElements.define("terminal-output", RustOutput)
-</script>
diff --git a/src/components/shared/sidebar/Sidebar.astro b/src/components/sidebar/Sidebar.astro
similarity index 100%
rename from src/components/shared/sidebar/Sidebar.astro
rename to src/components/sidebar/Sidebar.astro
diff --git a/src/components/shared/sidebar/ToggleSidebarButton.astro b/src/components/sidebar/ToggleSidebarButton.astro
similarity index 100%
rename from src/components/shared/sidebar/ToggleSidebarButton.astro
rename to src/components/sidebar/ToggleSidebarButton.astro
diff --git a/src/features/content/components/Navbar.astro b/src/features/content/components/Navbar.astro
index 9e58eeb..42f39c7 100644
--- a/src/features/content/components/Navbar.astro
+++ b/src/features/content/components/Navbar.astro
@@ -1,7 +1,7 @@
 ---
 import logoImage from "~/assets/images/webp/logo.webp"
-import Sidebar from "~/components/shared/sidebar/Sidebar.astro"
-import ToggleSidebarButton from "~/components/shared/sidebar/ToggleSidebarButton.astro"
+import Sidebar from "~/components/sidebar/Sidebar.astro"
+import ToggleSidebarButton from "~/components/sidebar/ToggleSidebarButton.astro"
 import { lessons } from "~/content-manager"
 import IconBrandGithub from "~icons/tabler/brand-github"
 
@@ -31,4 +31,10 @@ const sidebarItems = lessons.map((content) => ({
   </nav>
 </header>
 
-<Sidebar id="content" items={sidebarItems} title="Contenido" position="left" logo={logoImage} />
+<Sidebar
+  id="content"
+  items={sidebarItems}
+  title="Contenido"
+  position="left"
+  logo={logoImage}
+/>
diff --git a/src/features/home/components/Community.astro b/src/features/home/components/Community.astro
index 151dfad..b06e4bf 100644
--- a/src/features/home/components/Community.astro
+++ b/src/features/home/components/Community.astro
@@ -1,5 +1,5 @@
 ---
-import Section from "~/components/shared/sections/Section.astro"
+import Section from "~/components/sections/Section.astro"
 import FaBrandsDiscord from "~icons/fa-brands/discord"
 ---
 
@@ -7,16 +7,20 @@ import FaBrandsDiscord from "~icons/fa-brands/discord"
   id="community"
   className="min-h-screen flex flex-col justify-center items-center w-full py-20 px-6"
 >
-  <h2 class="text-5xl md:text-6xl font-extrabold text-center mb-12">Comunidad Rust</h2>
+  <h2 class="text-5xl md:text-6xl font-extrabold text-center mb-12">
+    Comunidad Rust
+  </h2>
 
   <div class="max-w-6xl w-full flex flex-col md:flex-row items-center gap-10">
-    <div class="md:w-1/2 w-full flex flex-col items-center md:items-start text-center md:text-left">
+    <div
+      class="md:w-1/2 w-full flex flex-col items-center md:items-start text-center md:text-left"
+    >
       <p class="text-pretty leading-relaxed text-xl">
         <span class="block font-bold text-xl mb-2">
           Sigue aprendiendo junto a miles de entusiastas de Rust
         </span>
-        Forma parte de nuestra comunidad, comparte tus avances, resuelve dudas y colabora con otros aprendices
-        y expertos de Rust.
+        Forma parte de nuestra comunidad, comparte tus avances, resuelve dudas y colabora
+        con otros aprendices y expertos de Rust.
       </p>
 
       <a
diff --git a/src/features/home/components/Hero.astro b/src/features/home/components/Hero.astro
index 08eb56e..a02cf5b 100644
--- a/src/features/home/components/Hero.astro
+++ b/src/features/home/components/Hero.astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets"
 import logoImage from "~/assets/images/webp/logo.webp"
-import Section from "~/components/shared/sections/Section.astro"
+import Section from "~/components/sections/Section.astro"
 import JamGithub from "~icons/jam/github"
 ---
 
diff --git a/src/features/home/components/Playground.astro b/src/features/home/components/Playground.astro
index f09cdcc..adba5f1 100644
--- a/src/features/home/components/Playground.astro
+++ b/src/features/home/components/Playground.astro
@@ -2,16 +2,22 @@
 import { Image } from "astro:assets"
 import figuresSvg from "~/assets/images/figures.svg"
 import ferrisImage from "~/assets/images/webp/ferris.webp"
-import Section from "~/components/shared/sections/Section.astro"
+import Section from "~/components/sections/Section.astro"
 ---
 
 <Section
   id="playground"
   className="relative flex flex-col justify-center items-center w-full py-20 px-6 bg-dark-fg"
 >
-  <div class="w-full h-12 absolute bottom-full bg-repeat-x" style={`background-image: url(${figuresSvg.src})`}></div>
+  <div
+    class="w-full h-12 absolute bottom-full bg-repeat-x"
+    style={`background-image: url(${figuresSvg.src})`}
+  >
+  </div>
 
-  <h2 class="text-5xl md:text-6xl font-extrabold text-center mb-12">Prueba Rust en tu navegador</h2>
+  <h2 class="text-5xl md:text-6xl font-extrabold text-center mb-12">
+    Prueba Rust en tu navegador
+  </h2>
 
   <div class="max-w-6xl w-full flex flex-col md:flex-row items-center gap-10">
     <Image
@@ -21,12 +27,20 @@ import Section from "~/components/shared/sections/Section.astro"
       fetchpriority="high"
     />
 
-    <p class="text-center md:text-left w-full md:w-1/2 text-pretty leading-relaxed">
-      <span class="block font-bold text-xl mb-2 text-center">¡Aprende Rust sin instalar nada!</span>
-      Explora lecciones interactivas y experimenta con código en un playground integrado, directamente
-      desde tu navegador. 🚀
+    <p
+      class="text-center md:text-left w-full md:w-1/2 text-pretty leading-relaxed"
+    >
+      <span class="block font-bold text-xl mb-2 text-center"
+        >¡Aprende Rust sin instalar nada!</span
+      >
+      Explora lecciones interactivas y experimenta con código en un playground integrado,
+      directamente desde tu navegador. 🚀
     </p>
   </div>
 
-  <div class="w-full rotate-180 h-12 absolute top-full bg-repeat-x" style={`background-image: url(${figuresSvg.src})`}></div>
+  <div
+    class="w-full rotate-180 h-12 absolute top-full bg-repeat-x"
+    style={`background-image: url(${figuresSvg.src})`}
+  >
+  </div>
 </Section>
diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
index f0c0004..7641286 100644
--- a/src/pages/[slug].astro
+++ b/src/pages/[slug].astro
@@ -1,6 +1,6 @@
 ---
-import CodeEditor from "~/components/shared/editor/CodeEditor.astro"
-import Terminal from "~/components/shared/editor/output/Terminal.astro"
+import CodeEditor from "~/components/editor/CodeEditor.astro"
+import Terminal from "~/components/editor/output/Terminal.astro"
 import { lessons } from "~/content-manager"
 import NavButtons from "~/features/content/components/NavButtons.astro"
 import Navbar from "~/features/content/components/Navbar.astro"
@@ -25,20 +25,36 @@ const { lesson, previousLesson, nextLesson } = Astro.props
 
 <Layout>
   <Navbar />
-  <main class="flex flex-col lg:flex-row gap-2 lg:gap-0 px-2 pb-2 flex-1 min-h-0 overflow-hidden" data-container>
+  <main
+    class="flex flex-col lg:flex-row gap-2 lg:gap-0 px-2 pb-2 flex-1 min-h-0 overflow-hidden"
+    data-container
+  >
     <!-- Content Panel -->
-    <aside 
+    <aside
       class="relative flex flex-col min-h-[250px] bg-light-bg border border-stroke-color rounded-2xl overflow-hidden"
       style="flex: 1 1 0%; min-width: 50px;"
       data-panel="left"
     >
-      <div class="absolute inset-0 hidden in-[.collapsed]:flex! flex-col items-center justify-start pt-4 gap-2 bg-light-bg" aria-hidden="true">
+      <div
+        class="absolute inset-0 hidden in-[.collapsed]:flex! flex-col items-center justify-start pt-4 gap-2 bg-light-bg"
+        aria-hidden="true"
+      >
         <IconBook class="text-yellow" font-size={22} />
-        <span class="text-xs text-neutral-300 font-semibold tracking-widest uppercase" style="writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.12em;">Contenido</span>
+        <span
+          class="text-xs text-neutral-300 font-semibold tracking-widest uppercase"
+          style="writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.12em;"
+          >Contenido</span
+        >
       </div>
 
-      <div class="flex flex-col flex-1 m-2 p-2 overflow-y-auto in-[.collapsed]:opacity-0 in-[.collapsed]:pointer-events-none" data-panel-content>
-        <article id="content-markdown" class="mb-6 text-secondary min-w-[400px]">
+      <div
+        class="flex flex-col flex-1 m-2 p-2 overflow-y-auto in-[.collapsed]:opacity-0 in-[.collapsed]:pointer-events-none"
+        data-panel-content
+      >
+        <article
+          id="content-markdown"
+          class="mb-6 text-secondary min-w-[400px]"
+        >
           <lesson.Content />
           <hr class="my-6 border-gray-700" />
           <NavButtons previous={previousLesson?.meta} next={nextLesson?.meta} />
@@ -47,36 +63,49 @@ const { lesson, previousLesson, nextLesson } = Astro.props
     </aside>
 
     <!-- Vertical Resizer -->
-    <div 
-      class="hidden lg:flex items-center justify-center w-3 hover:w-4 transition-[width] duration-150 cursor-col-resize select-none" 
-      data-direction="vertical" 
-      role="separator" 
+    <div
+      class="hidden lg:flex items-center justify-center w-3 hover:w-4 transition-[width] duration-150 cursor-col-resize select-none"
+      data-direction="vertical"
+      role="separator"
       aria-orientation="vertical"
     >
       <IconGripVertical font-size={14} aria-hidden="true" />
     </div>
 
     <!-- Editor Panel -->
-    <section 
+    <section
       class="relative flex flex-col min-h-[250px] bg-light-bg border border-stroke-color rounded-2xl overflow-hidden"
       style="flex: 1 1 0%; min-width: 50px;"
       data-panel="right"
     >
-      <div class="absolute inset-0 hidden in-[.collapsed]:flex! flex-col items-center justify-start pt-4 gap-2 bg-light-bg" aria-hidden="true">
+      <div
+        class="absolute inset-0 hidden in-[.collapsed]:flex! flex-col items-center justify-start pt-4 gap-2 bg-light-bg"
+        aria-hidden="true"
+      >
         <IconCode class="text-green-500" font-size={22} />
-        <span class="text-xs text-neutral-300 font-semibold tracking-widest uppercase" style="writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.12em;">Editor</span>
+        <span
+          class="text-xs text-neutral-300 font-semibold tracking-widest uppercase"
+          style="writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.12em;"
+          >Editor</span
+        >
       </div>
 
-      <div class="flex flex-col flex-1 overflow-hidden in-[.collapsed]:opacity-0 in-[.collapsed]:pointer-events-none" data-panel-content>
-        <div class="flex-1 min-h-[100px] overflow-hidden mt-2 pt-2" data-editor-wrapper>
+      <div
+        class="flex flex-col flex-1 overflow-hidden in-[.collapsed]:opacity-0 in-[.collapsed]:pointer-events-none"
+        data-panel-content
+      >
+        <div
+          class="flex-1 min-h-[100px] overflow-hidden mt-2 pt-2"
+          data-editor-wrapper
+        >
           <CodeEditor slug={lesson.meta.slug} />
         </div>
 
         <!-- Horizontal Resizer -->
-        <div 
-          class="h-2 shrink-0 flex justify-center items-center cursor-row-resize bg-[#181817]" 
-          data-direction="horizontal" 
-          role="separator" 
+        <div
+          class="h-2 shrink-0 flex justify-center items-center cursor-row-resize bg-[#181817]"
+          data-direction="horizontal"
+          role="separator"
           aria-orientation="horizontal"
         >
           <div class="h-0.5 w-4 bg-neutral-500/40 rounded-md"></div>
@@ -96,15 +125,20 @@ const { lesson, previousLesson, nextLesson } = Astro.props
 
   function initResizer(resizer: HTMLElement) {
     resizer.addEventListener("mousedown", (e) => {
-      if (resizer.dataset.direction === "vertical" && window.innerWidth < 1024) return;
+      if (resizer.dataset.direction === "vertical" && window.innerWidth < 1024)
+        return;
 
       e.preventDefault();
       document.body.classList.add("is-resizing");
 
       const isVertical = resizer.dataset.direction === "vertical";
       const container = resizer.parentElement!;
-      const leftPanel = container.querySelector<HTMLElement>(isVertical ? "[data-panel='left']" : "[data-editor-wrapper]")!;
-      const rightPanel = container.querySelector<HTMLElement>(isVertical ? "[data-panel='right']" : "[data-terminal]")!;
+      const leftPanel = container.querySelector<HTMLElement>(
+        isVertical ? "[data-panel='left']" : "[data-editor-wrapper]",
+      )!;
+      const rightPanel = container.querySelector<HTMLElement>(
+        isVertical ? "[data-panel='right']" : "[data-terminal]",
+      )!;
 
       const onMove = (ev: MouseEvent) => {
         const rect = container.getBoundingClientRect();
@@ -113,16 +147,32 @@ const { lesson, previousLesson, nextLesson } = Astro.props
         const resizerSize = isVertical ? 12 : 8;
 
         let leftSize = Math.max(50, Math.min(pos, total - resizerSize - 50));
-        if (Math.abs(leftSize - total / 2) < SNAP_THRESHOLD) leftSize = total / 2;
+        if (Math.abs(leftSize - total / 2) < SNAP_THRESHOLD)
+          leftSize = total / 2;
 
         const rightSize = total - leftSize - resizerSize;
 
         if (isVertical) {
-          const collapsed = leftSize <= COLLAPSE_THRESHOLD ? "left" : rightSize <= COLLAPSE_THRESHOLD ? "right" : null;
+          const collapsed =
+            leftSize <= COLLAPSE_THRESHOLD
+              ? "left"
+              : rightSize <= COLLAPSE_THRESHOLD
+                ? "right"
+                : null;
           const ratio = leftSize / (total - resizerSize);
 
-          leftPanel.style.flex = collapsed === "left" ? "0 0 50px" : collapsed === "right" ? "1 1 0%" : `${ratio} 1 0%`;
-          rightPanel.style.flex = collapsed === "left" ? "1 1 0%" : collapsed === "right" ? "0 0 50px" : `${1 - ratio} 1 0%`;
+          leftPanel.style.flex =
+            collapsed === "left"
+              ? "0 0 50px"
+              : collapsed === "right"
+                ? "1 1 0%"
+                : `${ratio} 1 0%`;
+          rightPanel.style.flex =
+            collapsed === "left"
+              ? "1 1 0%"
+              : collapsed === "right"
+                ? "0 0 50px"
+                : `${1 - ratio} 1 0%`;
           leftPanel.classList.toggle("collapsed", collapsed === "left");
           rightPanel.classList.toggle("collapsed", collapsed === "right");
         } else {
@@ -143,15 +193,19 @@ const { lesson, previousLesson, nextLesson } = Astro.props
   }
 
   document.addEventListener("astro:page-load", () => {
-    document.querySelectorAll<HTMLElement>("[data-direction]").forEach(initResizer);
+    document
+      .querySelectorAll<HTMLElement>("[data-direction]")
+      .forEach(initResizer);
   });
 
   window.addEventListener("resize", () => {
     if (window.innerWidth < 1024) {
-      document.querySelectorAll<HTMLElement>("[data-panel]").forEach(panel => {
-        panel.style.flex = "1 1 0%";
-        panel.classList.remove("collapsed");
-      });
+      document
+        .querySelectorAll<HTMLElement>("[data-panel]")
+        .forEach((panel) => {
+          panel.style.flex = "1 1 0%";
+          panel.classList.remove("collapsed");
+        });
     }
   });
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ac46eeb..e7478da 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Footer from "~/components/shared/footer/Footer.astro"
+import Footer from "~/components/footer/Footer.astro"
 import Community from "~/features/home/components/Community.astro"
 import Hero from "~/features/home/components/Hero.astro"
 import Playground from "~/features/home/components/Playground.astro"

From 0dfc5c3f6aca3b8d3972bc11d33def3c20a29ce6 Mon Sep 17 00:00:00 2001
From: wilovy <computadora@Computadoras-MacBook-Pro.local>
Date: Wed, 21 Jan 2026 02:18:17 -0600
Subject: [PATCH 2/2] feat: use `editor: false` to hide code editor

---
 src/pages/[slug].astro | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
index 7641286..d623410 100644
--- a/src/pages/[slug].astro
+++ b/src/pages/[slug].astro
@@ -32,7 +32,9 @@ const { lesson, previousLesson, nextLesson } = Astro.props
     <!-- Content Panel -->
     <aside
       class="relative flex flex-col min-h-[250px] bg-light-bg border border-stroke-color rounded-2xl overflow-hidden"
-      style="flex: 1 1 0%; min-width: 50px;"
+      style={lesson.data.editor === false
+        ? "flex: 1 1 0%; min-width: 50px;"
+        : "flex: 1 1 0%; min-width: 50px;"}
       data-panel="left"
     >
       <div
@@ -64,7 +66,7 @@ const { lesson, previousLesson, nextLesson } = Astro.props
 
     <!-- Vertical Resizer -->
     <div
-      class="hidden lg:flex items-center justify-center w-3 hover:w-4 transition-[width] duration-150 cursor-col-resize select-none"
+      class={`flex items-center justify-center h-full ${lesson.data.editor === false ? "cursor-not-allowed w-4" : "w-3 hover:w-4 transition-[width] duration-150 cursor-col-resize select-none"}`}
       data-direction="vertical"
       role="separator"
       aria-orientation="vertical"
@@ -74,8 +76,10 @@ const { lesson, previousLesson, nextLesson } = Astro.props
 
     <!-- Editor Panel -->
     <section
-      class="relative flex flex-col min-h-[250px] bg-light-bg border border-stroke-color rounded-2xl overflow-hidden"
-      style="flex: 1 1 0%; min-width: 50px;"
+      class={`relative flex flex-col min-h-[250px] bg-light-bg border border-stroke-color rounded-2xl overflow-hidden ${lesson.data.editor === false ? "collapsed" : ""}`}
+      style={lesson.data.editor === false
+        ? "flex: 0 0 50px; min-width: 50px;"
+        : "flex: 1 1 0%; min-width: 50px;"}
       data-panel="right"
     >
       <div
@@ -128,15 +132,21 @@ const { lesson, previousLesson, nextLesson } = Astro.props
       if (resizer.dataset.direction === "vertical" && window.innerWidth < 1024)
         return;
 
+      // Check if editor is disabled by looking for collapsed class on right panel
+      const container = resizer.parentElement!;
+      const rightPanel = container.querySelector<HTMLElement>(
+        "[data-panel='right']",
+      )!;
+      if (rightPanel.classList.contains("collapsed")) return;
+
       e.preventDefault();
       document.body.classList.add("is-resizing");
 
       const isVertical = resizer.dataset.direction === "vertical";
-      const container = resizer.parentElement!;
       const leftPanel = container.querySelector<HTMLElement>(
         isVertical ? "[data-panel='left']" : "[data-editor-wrapper]",
       )!;
-      const rightPanel = container.querySelector<HTMLElement>(
+      const rightPanelForResize = container.querySelector<HTMLElement>(
         isVertical ? "[data-panel='right']" : "[data-terminal]",
       )!;
 
@@ -167,17 +177,20 @@ const { lesson, previousLesson, nextLesson } = Astro.props
               : collapsed === "right"
                 ? "1 1 0%"
                 : `${ratio} 1 0%`;
-          rightPanel.style.flex =
+          rightPanelForResize.style.flex =
             collapsed === "left"
               ? "1 1 0%"
               : collapsed === "right"
                 ? "0 0 50px"
                 : `${1 - ratio} 1 0%`;
           leftPanel.classList.toggle("collapsed", collapsed === "left");
-          rightPanel.classList.toggle("collapsed", collapsed === "right");
+          rightPanelForResize.classList.toggle(
+            "collapsed",
+            collapsed === "right",
+          );
         } else {
           leftPanel.style.height = `${leftSize}px`;
-          rightPanel.style.height = `${rightSize}px`;
+          rightPanelForResize.style.height = `${rightSize}px`;
         }
       };