From 34bf97bf0cb4808ff606000e2afe6f1500cc1719 Mon Sep 17 00:00:00 2001 From: Bryan Lundberg Date: Sat, 1 Nov 2025 07:34:46 -0600 Subject: [PATCH 01/19] refactor: restructure components and migrate shared Section.astro usage to native HTML `
` --- package.json | 1 + src/components/shared/sections/Section.astro | 13 - .../content/react/ReactCodeEditor.tsx} | 2 +- .../content/react/ReactPanelContainer.tsx | 26 ++ src/features/content/ui/CodeEditor.astro | 51 ++++ src/features/content/ui/Main.astro | 3 + src/features/content/ui/Markdown.astro | 30 +++ .../{components => ui}/NavButtons.astro | 0 src/features/content/ui/PanelContent.astro | 15 ++ src/features/content/ui/SplitPanel.astro | 13 + .../ToggleSidebarButton.tsx | 0 .../home/{components => ui}/Community.astro | 7 +- .../home/{components => ui}/Hero.astro | 7 +- .../home/{components => ui}/Playground.astro | 7 +- .../shared/ui}/Footer.astro | 0 .../shared/ui}/Navbar.astro | 4 +- src/pages/[slug].astro | 236 +----------------- src/pages/index.astro | 16 +- 18 files changed, 172 insertions(+), 259 deletions(-) delete mode 100644 src/components/shared/sections/Section.astro rename src/{components/shared/editor/CodeEditor.tsx => features/content/react/ReactCodeEditor.tsx} (92%) create mode 100644 src/features/content/react/ReactPanelContainer.tsx create mode 100644 src/features/content/ui/CodeEditor.astro create mode 100644 src/features/content/ui/Main.astro create mode 100644 src/features/content/ui/Markdown.astro rename src/features/content/{components => ui}/NavButtons.astro (100%) create mode 100644 src/features/content/ui/PanelContent.astro create mode 100644 src/features/content/ui/SplitPanel.astro rename src/features/content/{components => ui}/ToggleSidebarButton.tsx (100%) rename src/features/home/{components => ui}/Community.astro (91%) rename src/features/home/{components => ui}/Hero.astro (87%) rename src/features/home/{components => ui}/Playground.astro (86%) rename src/{components/shared/footer => features/shared/ui}/Footer.astro (100%) rename src/{components/shared/navbar => features/shared/ui}/Navbar.astro (90%) diff --git a/package.json b/package.json index b41ddeb..6d4db1f 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "nanostores": "^1.0.1", "react": "^19.2.0", "react-dom": "^19.2.0", + "react-resizable-panels": "^3.0.6", "tailwindcss": "^4.1.16" }, "devDependencies": { diff --git a/src/components/shared/sections/Section.astro b/src/components/shared/sections/Section.astro deleted file mode 100644 index 9e04bb3..0000000 --- a/src/components/shared/sections/Section.astro +++ /dev/null @@ -1,13 +0,0 @@ ---- -interface Props { - id?: string - className?: string - style?: string -} - -const { id, className, style } = Astro.props as Props ---- - -
- -
diff --git a/src/components/shared/editor/CodeEditor.tsx b/src/features/content/react/ReactCodeEditor.tsx similarity index 92% rename from src/components/shared/editor/CodeEditor.tsx rename to src/features/content/react/ReactCodeEditor.tsx index 7a4105e..8d7075d 100644 --- a/src/components/shared/editor/CodeEditor.tsx +++ b/src/features/content/react/ReactCodeEditor.tsx @@ -3,7 +3,7 @@ import { useCallback, useState } from "react" import { rust } from "~/helpers/config" import { gruvbox } from "~/helpers/theme" -export function CodeEditor() { +export default function ReactCodeEditor() { const [value, setValue] = useState('fn main() {\n println!("Hola, mundo!");\n}\n') const onChange = useCallback((val: string) => { diff --git a/src/features/content/react/ReactPanelContainer.tsx b/src/features/content/react/ReactPanelContainer.tsx new file mode 100644 index 0000000..428384b --- /dev/null +++ b/src/features/content/react/ReactPanelContainer.tsx @@ -0,0 +1,26 @@ +import { IconGripVertical } from "@tabler/icons-react" +import React from "react" +import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels" + +const defaultLayout = [50, 50] + +interface PanelContainerProps { + leftHtml: string + rightHtml: string +} + +export default function ReactPanelContainer({ leftHtml, rightHtml }: PanelContainerProps) { + return ( + + +
+ + + + + +
+ + + ) +} diff --git a/src/features/content/ui/CodeEditor.astro b/src/features/content/ui/CodeEditor.astro new file mode 100644 index 0000000..944b957 --- /dev/null +++ b/src/features/content/ui/CodeEditor.astro @@ -0,0 +1,51 @@ +--- +import { IconCode, IconTerminal } from "@tabler/icons-react" +import ReactCodeEditor from "~/features/content/react/ReactCodeEditor.tsx" +--- + +
+ + +
+
+ +

Editor

+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+ $  + cargo run +
+
+
+
diff --git a/src/features/content/ui/Main.astro b/src/features/content/ui/Main.astro new file mode 100644 index 0000000..49c3a32 --- /dev/null +++ b/src/features/content/ui/Main.astro @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/features/content/ui/Markdown.astro b/src/features/content/ui/Markdown.astro new file mode 100644 index 0000000..298ec68 --- /dev/null +++ b/src/features/content/ui/Markdown.astro @@ -0,0 +1,30 @@ +--- +import { render } from "astro:content" +import { IconLicense } from "@tabler/icons-react" +import React from "react" +import NavButtons from "~/features/content/ui/NavButtons.astro" + +const { tutorial, previous, next } = Astro.props +const { Content } = await render(tutorial) +--- + +
+ +
+
+

{tutorial.data.title}

+ +
+
+
+ +
+
+
diff --git a/src/features/content/components/NavButtons.astro b/src/features/content/ui/NavButtons.astro similarity index 100% rename from src/features/content/components/NavButtons.astro rename to src/features/content/ui/NavButtons.astro diff --git a/src/features/content/ui/PanelContent.astro b/src/features/content/ui/PanelContent.astro new file mode 100644 index 0000000..988ba0a --- /dev/null +++ b/src/features/content/ui/PanelContent.astro @@ -0,0 +1,15 @@ +--- +import { IconLicense } from "@tabler/icons-react" +--- + +
+ + +
diff --git a/src/features/content/ui/SplitPanel.astro b/src/features/content/ui/SplitPanel.astro new file mode 100644 index 0000000..44f2f2b --- /dev/null +++ b/src/features/content/ui/SplitPanel.astro @@ -0,0 +1,13 @@ +--- +import ReactPanelContainer from "~/features/content/react/ReactPanelContainer.tsx" + +const leftHtml = await Astro.slots.render("left") +const rightHtml = await Astro.slots.render("right") +--- + + + diff --git a/src/features/content/components/ToggleSidebarButton.tsx b/src/features/content/ui/ToggleSidebarButton.tsx similarity index 100% rename from src/features/content/components/ToggleSidebarButton.tsx rename to src/features/content/ui/ToggleSidebarButton.tsx diff --git a/src/features/home/components/Community.astro b/src/features/home/ui/Community.astro similarity index 91% rename from src/features/home/components/Community.astro rename to src/features/home/ui/Community.astro index 27746c5..bd7102e 100644 --- a/src/features/home/components/Community.astro +++ b/src/features/home/ui/Community.astro @@ -1,12 +1,11 @@ --- import { Image } from "astro:assets" import discordMarkImage from "~/assets/images/webp/discord-mark-white.webp" -import Section from "~/components/shared/sections/Section.astro" --- -

Comunidad Rust

@@ -42,4 +41,4 @@ import Section from "~/components/shared/sections/Section.astro" title="Widget de Discord de la Comunidad Rust">
-
+ diff --git a/src/features/home/components/Hero.astro b/src/features/home/ui/Hero.astro similarity index 87% rename from src/features/home/components/Hero.astro rename to src/features/home/ui/Hero.astro index 8045dfb..2ace2d4 100644 --- a/src/features/home/components/Hero.astro +++ b/src/features/home/ui/Hero.astro @@ -2,15 +2,14 @@ import { Image } from "astro:assets" import { IconBrandGithub } from "@tabler/icons-react" import logoImage from "~/assets/images/webp/logo.webp" -import Section from "~/components/shared/sections/Section.astro" import { allContent } from "~/content.config" const content = allContent.find((c) => c.slug) --- -
c.slug) > Aprender -
+