feat: i18n improvements and auth restrictions

Author: xbl1e

.gitignore

@@ -27,4 +27,7 @@ bun.lock
 pnpm-lock.yaml
 
 # wrangler
-.wrangler/
+.wrangler/
+
+# pnpm workspace
+pnpm-workspace.yaml

public/404.png

@@ -24,11 +24,10 @@ const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' }
   import { basicSetup } from "codemirror";
   import { indentWithTab } from "@codemirror/commands";
   import { gruvbox } from "~/components/editor/theme";
-  import { db, editorCode } from "~/lib/stores/editor-store";
+  import { 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");
@@ -44,7 +43,7 @@ const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' }
       initialCode: string;
     };
 
-    const initialDoc = (await db.getCode(slug)) ?? initialCode;
+    const initialDoc = initialCode;
 
     editorView = new EditorView({
       state: EditorState.create({
@@ -58,11 +57,6 @@ const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' }
             if (update.docChanged) {
               const value = update.state.doc.toString();
               editorCode.set(value);
-              clearTimeout(saveTimeout);
-              saveTimeout = window.setTimeout(
-                () => db.saveCode(slug, value),
-                500,
-              );
             }
           }),
         ],
@@ -89,7 +83,6 @@ const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' }
   document.addEventListener("astro:page-load", initEditor);
 
   document.addEventListener("astro:before-swap", () => {
-    clearTimeout(saveTimeout);
     window.removeEventListener("editor:reset", handleReset);
 
     if (editorView) {

src/components/editor/CodeEditor.astro

@@ -1,4 +1,5 @@
 ---
+import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import IconLoader2 from "~icons/tabler/loader-2"
 import IconPlayerPlay from "~icons/tabler/player-play"
 import IconRestore from "~icons/tabler/restore"
@@ -11,6 +12,8 @@ interface Props {
 
 const { expectedOutput, testCode } = Astro.props
 const isTestMode = !!testCode
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
 ---
 
 <terminal-output
@@ -41,22 +44,22 @@ const isTestMode = !!testCode
 				id="btn-reset"
 				class="btn-control hover:text-yellow"
 				type="button"
-				aria-label="Reset code"
+				aria-label={t("editor.reset")}
 			>
 				<IconRestore font-size={14} />
-				<span>Reiniciar</span>
+				<span>{t("editor.reset")}</span>
 			</button>
 
 			<button
 				id="btn-run"
 				class="btn-control hover:text-green-500"
 				type="button"
-				aria-label="Run code"
+				aria-label={t("editor.run")}
 			>
 				<IconPlayerPlay class="group-data-running:hidden" font-size={14} />
 				<IconLoader2 class="hidden animate-spin group-data-running:block" font-size={14} />
-				<span class="group-data-running:hidden">Ejecutar</span>
-				<span class="hidden group-data-running:inline">Ejecutando...</span>
+				<span class="group-data-running:hidden">{t("editor.run")}</span>
+				<span class="hidden group-data-running:inline">{t("editor.running")}</span>
 			</button>
 		</div>
 	</header>
@@ -78,22 +81,22 @@ const isTestMode = !!testCode
 			<button
 				id="btn-reset-mobile"
 				type="button"
-				aria-label="Reset code"
+				aria-label={t("editor.reset")}
 				class="flex-1 flex items-center justify-center gap-2 py-3 text-sm text-secondary/60 border-r border-stroke-color hover:bg-stroke-color/20 active:bg-stroke-color/40 transition-colors cursor-pointer touch-manipulation"
 			>
 				<IconRestore font-size={18} />
-				<span>Reiniciar</span>
+				<span>{t("editor.reset")}</span>
 			</button>
 			<button
 				id="btn-run-mobile"
 				type="button"
-				aria-label="Run code"
+				aria-label={t("editor.run")}
 				class="flex-1 flex items-center justify-center gap-2 py-3 text-sm text-green-400 hover:bg-green-500/10 active:bg-green-500/20 transition-colors cursor-pointer touch-manipulation"
 			>
 				<IconPlayerPlay class="group-data-running:hidden" font-size={18} />
 				<IconLoader2 class="hidden animate-spin group-data-running:block" font-size={18} />
-				<span class="group-data-running:hidden">Ejecutar</span>
-				<span class="hidden group-data-running:inline">Ejecutando...</span>
+				<span class="group-data-running:hidden">{t("editor.run")}</span>
+				<span class="hidden group-data-running:inline">{t("editor.running")}</span>
 			</button>
 		</div>
 		<div class="hidden items-center gap-2 border-t border-stroke-color px-3 py-2 group-data-running:flex">

src/components/editor/output/Terminal.astro

@@ -1,4 +1,31 @@
-import type { Track } from "~/entities/track"
+import type { Track, TrackI18n } from "~/entities/track"
+
+export const tracksI18n: Record<string, TrackI18n> = {
+	"fundamentos-de-rust": {
+		es: {
+			title: "Fundamentos de Rust",
+			description:
+				"Aprende Rust desde los fundamentos: sintaxis, ownership, borrowing y más. Ideal si nunca has programado en Rust.",
+		},
+		en: {
+			title: "Rust Fundamentals",
+			description:
+				"Learn Rust from the ground up: syntax, ownership, borrowing and more. Ideal if you've never programmed in Rust.",
+		},
+	},
+	"rust-avanzado-diseno-abstraccion": {
+		es: {
+			title: "Rust Avanzado: Diseño y Abstracción",
+			description:
+				"Profundiza en Rust con temas avanzados como lifetimes, traits, macros y programación asíncrona. Ideal para quienes ya conocen los fundamentos.",
+		},
+		en: {
+			title: "Advanced Rust: Design and Abstraction",
+			description:
+				"Deep dive into Rust with advanced topics like lifetimes, traits, macros and async programming. Ideal for those who already know the fundamentals.",
+		},
+	},
+}
 
 export const tracks: Track[] = [
 	{

src/const/tracks.ts

@@ -1,5 +1,16 @@
 export type TrackBadgeKey = "track.badge.beginner" | "track.badge.advanced"
 
+export type TrackI18n = {
+	es: {
+		title: string
+		description: string
+	}
+	en: {
+		title: string
+		description: string
+	}
+}
+
 export type Track = {
 	id: string
 	title: string

src/entities/track.ts

@@ -1,4 +1,5 @@
 ---
+import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import IconLeft from "~icons/tabler/arrow-big-left-lines-filled"
 import IconRight from "~icons/tabler/arrow-big-right-lines-filled"
 
@@ -9,6 +10,7 @@ interface Props {
 }
 
 const { lang, previous, next } = Astro.props
+const t = useTranslations(lang as "es" | "en")
 const isNextDisabled = true
 
 const btnBaseClass =
@@ -21,7 +23,7 @@ const iconBaseClass = "block h-6 w-6 rounded-lg transition-all duration-200 tran
 <nav class="not-prose mt-auto flex w-full items-center justify-between pb-2" aria-label="Navegación de lecciones">
   <a
     href={previous ? `/${lang}/${previous.slug}` : undefined}
-    aria-label={previous ? `Anterior: ${previous.title}` : undefined}
+    aria-label={previous ? `${t("nav.previous")}: ${previous.title}` : undefined}
     aria-disabled={!previous}
     class={btnBaseClass}
   >
@@ -30,21 +32,21 @@ const iconBaseClass = "block h-6 w-6 rounded-lg transition-all duration-200 tran
     </span>
     <div class="flex flex-col text-left">
       <span class:list={["text-md font-medium", previous ? "text-yellow" : "text-[#ccc]"]}>
-        Anterior
+        {t("nav.previous")}
       </span>
       <span class="text-xs text-[#ccc]">{previous?.title || "-"}</span>
     </div>
   </a>
   <a
     id="next-lesson-btn"
     href={next ? `/${lang}/${next.slug}` : undefined}
-    aria-label={next ? `Siguiente: ${next.title}` : undefined}
+    aria-label={next ? `${t("nav.next")}: ${next.title}` : undefined}
     aria-disabled={isNextDisabled}
     class={nextBtnClass}
   >
     <div class="flex flex-col text-right">
       <span class:list={["text-md font-medium", next ? "text-yellow" : "text-[#ccc]"]}>
-        Siguiente
+        {t("nav.next")}
       </span>
       <span class="text-xs text-[#ccc]">{next?.title || "-"}</span>
     </div>
@@ -57,6 +59,7 @@ const iconBaseClass = "block h-6 w-6 rounded-lg transition-all duration-200 tran
 <script>
   import { db } from "~/lib/stores/editor-store"
   import { toast } from "~/utils/toasts"
+  import { useTranslations, getLangFromUrl } from "~/i18n/utils"
 
   const initNextButton = async () => {
     const btn = document.getElementById("next-lesson-btn") as HTMLAnchorElement | null
@@ -65,9 +68,11 @@ const iconBaseClass = "block h-6 w-6 rounded-lg transition-all duration-200 tran
     btn.addEventListener("click", (e) => {
       if (btn.ariaDisabled === "true") {
         e.preventDefault()
+        const currentLang = getLangFromUrl(new URL(window.location.href))
+        const t = useTranslations(currentLang)
         toast.info(
-          "Ejecuta el código",
-          "El código debe ser ejecutado al menos una vez para poder avanzar a la siguiente sección",
+          t("toast.run_required_title"),
+          t("toast.run_required_desc"),
         )
       }
     })

src/features/content/components/NavButtons.astro

@@ -127,8 +127,8 @@ const sidebarItems = [...groupMap.values()].map(({ parent, children }) => ({
     // Setup reactive navbar (this handles all user state changes automatically)
     setupNavbar({
       profileLinkId: "nav-profile-link",
-      loginLinkId: null, // This navbar doesn't have a login link
-      logoutLinkId: null // This navbar doesn't have a logout link directly
+      loginLinkId: undefined,
+      logoutLinkId: undefined
     })
 
     // Update username in profile link dynamically by targeting the span

src/features/content/components/Navbar.astro

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const { lang: langProp } = Astro.props
-const lang = langProp ?? getLangFromUrl(Astro.url)
+const lang = (langProp ?? getLangFromUrl(Astro.url)) as "es" | "en"
 const t = useTranslations(lang)
 ---
 

src/features/home/components/Community.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { lang: langProp } = Astro.props
-const lang = langProp ?? getLangFromUrl(Astro.url)
+const lang = (langProp ?? getLangFromUrl(Astro.url)) as "es" | "en"
 const t = useTranslations(lang)
 
 const faqs = [