Add spanish version for overview and right side menu

src/components/PageContent/PageContent.astro

@@ -1,17 +1,19 @@
 ---
+import { getLanguageFromURL } from '../../languages';
 import MoreMenu from '../RightSidebar/MoreMenu.astro';
 import TableOfContents from '../RightSidebar/TableOfContents.tsx';
 
 const { content, githubEditUrl } = Astro.props;
 const title = content.title;
 const headers = content.astro.headers;
+const lang = getLanguageFromURL(Astro.canonicalURL.pathname)
 ---
 
 <article id="article" class="content">
 	<section class="main-section">
 		<h1 class="content-title" id="overview">{title}</h1>
 		<nav class="block sm:hidden">
-			<TableOfContents client:media="(max-width: 50em)" {headers} />
+			<TableOfContents client:media="(max-width: 50em)" {headers} lang={lang} />
 		</nav>
 		<slot />
 	</section>

src/components/RightSidebar/MoreMenu.astro

@@ -1,11 +1,13 @@
 ---
 import ThemeToggleButton from './ThemeToggleButton.tsx';
 import * as CONFIG from '../../config';
+import { getLanguageFromURL } from '../../languages';
 const { editHref } = Astro.props;
 const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
+const lang = getLanguageFromURL(Astro.canonicalURL.pathname)
 ---
 
-{showMoreSection && <h2 class="heading">More</h2>}
+{showMoreSection && <h2 class="heading">{lang === 'en' ? 'More': 'Más'}</h2>}
 <ul>
 	{editHref && (
 		<li class={`header-link depth-2`}>
@@ -51,7 +53,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
 						d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
 					></path>
 				</svg>
-				<span>Join our community</span>
+				<span>{lang === 'en' ? 'Join our community' : 'Únete a nuestra comunidad'}</span>
 			</a>
 		</li>
 	)}

src/components/RightSidebar/RightSidebar.astro

@@ -1,13 +1,15 @@
 ---
 import TableOfContents from './TableOfContents.tsx';
 import MoreMenu from './MoreMenu.astro';
+import { getLanguageFromURL } from '../../languages';
 const { content, githubEditUrl } = Astro.props;
 const headers = content.astro.headers;
+const lang = getLanguageFromURL(Astro.canonicalURL.pathname)
 ---
 
 <nav class="sidebar-nav" aria-labelledby="grid-right">
 	<div class="sidebar-nav-inner">
-		<TableOfContents client:media="(min-width: 50em)" {headers} />
+		<TableOfContents client:media="(min-width: 50em)" {headers} lang={lang} />
 		<MoreMenu editHref={githubEditUrl} />
 	</div>
 </nav>

src/components/RightSidebar/TableOfContents.tsx

@@ -2,7 +2,7 @@ import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 
-const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
+const TableOfContents: FunctionalComponent<{ headers: any[], lang: string }> = ({ headers = [], lang = 'en' }) => {
 	const itemOffsets = useRef([]);
 	const [activeId, setActiveId] = useState<string>(undefined);
 
@@ -25,10 +25,10 @@ const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = []
 
 	return (
 		<>
-			<h2 class="heading">On this page</h2>
+			<h2 class="heading">{lang === 'en' ? 'On this page' : 'En esta página'}</h2>
 			<ul>
 				<li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
-					<a href="#overview">Overview</a>
+					<a href="#overview">{lang === 'en' ? 'Overview' : 'General'}</a>
 				</li>
 				{headers
 					.filter(({ depth }) => depth > 1 && depth < 4)

src/pages/es/introduction.md

@@ -8,7 +8,7 @@ layout: ../../layouts/MainLayout.astro
 Algunas veces, lo más difícil es empezar con un proyecto. Cakecutter es una herramienta que te ayuda a cortar la torta (cut the cake en inglés) y empezar tu proyecto instantáneamente.
 
 Lo que Cakecutter es capaz de hacer:
-- Usuarios pueden [publicar](/es/publishing-cakes/), [crear](/es/creating-cakes/) o [usar una cake](/es/using-cakes) desde [Cakes.run](https://cakes.run). Cakes son básicamente ficheros TOML files que contienen toda la información que se necesita para crear un proyecto. 
+- Usuarios pueden [publicar](/es/publishing-cakes/), [crear](/es/creating-cakes/) o [usar una cake](/es/using-cakes) desde [Cakes.run](https://cakes.run). Cakes son básicamente ficheros TOML que contienen toda la información que se necesita para crear un proyecto. 
 - Según la información en el fichero `Cakefile`, Cakecutter creará todos los ficheros (tú puedes crear el contenido de ellos) en la ubicación correcta.
 - Comandos de setup (instalar dependencias, etcétera) pueden ser definidos en el fichero `Cakefile`. Estos comandos se corren luego de que los ficheros son generados.
 - Cakecutter puede realizar preguntas al uduario y tomar sus respuestas. Dichas respuestas luego pueden ser utilizadas como variables en la plantilla del proyecto. [Lee la documentación aquí](/es/advance-usage)