Merge pull request #7 from nujovich/feature/spanish-docs-support

Spanish documentation support

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/config.ts

@@ -17,6 +17,7 @@ export const OPEN_GRAPH = {
 
 export const KNOWN_LANGUAGES = {
   English: "en",
+  Spanish: "es",
 };
 
 // Uncomment this to add an "Edit this page" button to every page of documentation.
@@ -45,4 +46,15 @@ export const SIDEBAR = {
     { text: "Example", link: "en/example" },
     { text: "Publishing Cakes", link: "en/publishing-cakes" },
   ],
+  es: [
+    { text: "", header: true },
+    { text: "Información esencial", header: true },
+    { text: "Introducción", link: "es/introduction" },
+    { text: "Instalación", link: "es/installation" },
+    { text: "Usando Cakes", link: "es/using-cakes" },
+    { text: "Creando Cakes", link: "es/creating-cakes" },
+    { text: "Uso Avanzado", link: "es/advanced-usage" },
+    { text: "Ejemplo", link: "es/example" },
+    { text: "Publicando Cakes", link: "es/publishing-cakes" },
+  ],
 };

src/pages/es/advanced-usage.md

@@ -0,0 +1,125 @@
+---
+title: Uso Avanzado
+description: Cakecutter | Uso Avanzado
+layout: ../../layouts/MainLayout.astro
+---
+
+Es posible que aún prefieras un cli personalizado dado que puedes usar alguna biblioteca de interfaz de usuario de terminal elegante para hacer preguntas basadas en los archivos que crees. ¿Sabías que cakecutter también puede hacer eso? ¿No es genial?
+
+
+## Realizar preguntas
+
+Puedes realizar preguntas adhiriendo un atributo en la tabla `[questions]`:-
+
+```toml
+[[questions.a]] # <- El id que escribas aquí será usado para devolver las respuestas
+ques = "Te gusta la Manzana o el Mango"
+type = "select"
+options = ["Manzana", "Mango"]
+
+[[questions.name]]
+ques = "¿Cuál es tu nombre?"
+type = "input"
+default = "Prefiero no decirlo"
+```
+
+- `ques` - La pregunta que se hará
+- `options` - Las opciones para `select` (sólo funcionará para el tipo select)
+- `default` - El valor por defecto (sólo funcionará para el tipo input)
+- `type` - El tipo de pregunta
+
+### Tipos de pregunta
+
+Existen dos tipos -
+
+- `input` - El tipo input es la entrada normal de usuario. La respuesta puede ser cualquier cosa.
+- `select` - En el tipo select, se le da al usuario un numéro de opciones de las cuales debe seleccionar una.
+- `menu` - Un alias para `select`
+
+Antes de crear la plantilla, el usuario deberá realizar las preguntas y las respuestas serán guardadas
+
+## Creando ficheros u archivos basados en respuestas
+
+¿Recuerdas el valor `true` que debes ingresar si quieres que un fichero o archivo sea creado? Ahora puedes usar el lenguaje de plantillas para retornar `true` o `false` basándote en la respuesta que obtengas.
+
+```toml
+"manzana" = '''
+{{if eq (index . "id") "value"}}
+  true
+{{else}}
+  false
+{{end}}
+'''
+```
+
+> El `id` aquí es el id de la pregunta. Y el `value` es el valor con el que se debe comparar la respuesta a la pregunta
+
+Esto es equivalente a :-
+
+```js
+if (answers["id"] == "value") {
+  return true;
+} else {
+  return false;
+}
+```
+
+Puedes aprender más acerca del lenguaje de plantillas [aquí](https://pkg.go.dev/text/template)
+
+## Contenido de fichero dinámico
+
+Puedes usar el mismo lenguaje de plantillas para crear contenido dinámico
+
+```toml
+[contents]
+"test.json" = '''
+{
+  "name": "{{index . "name"}}"
+}
+'''
+```
+
+> Aquí `name` es el id de la pregunta
+
+Equivalente de la documentación de JS con string:-
+
+```js
+`{
+  "name": "${answers["name"]}"
+}`;
+```
+
+Puedes aprender más acerca del lenguaje de plantillas [aquí](https://pkg.go.dev/text/template)
+
+## Corriendo comandos basados en respuestas
+
+Puedes usar el mismo lenguaje de plantillas para retornar `true` o `false`. Si la respuesta es `true`, el comando será invocado
+
+```toml
+[commands]
+"npm init -y" = '''
+{{if eq (index . "id") "value"}}
+  true
+{{else}}
+  false
+{{end}}
+'''
+```
+
+> Aquí `id` es el id de la pregunta y el `value` es la respuesta con la que se compara
+
+Esto es equivalente a :-
+
+```js
+if (answers["id"] == "value") {
+  return "true";
+} else {
+  return "false";
+}
+```
+
+Puedes aprender más acerca del lenguaje de plantillas [aquí](https://pkg.go.dev/text/template)
+
+## Cerrando la sección
+
+Vienen nuevos features en camino, así que mantente en sintonía.

src/pages/es/creating-cakes.md

@@ -0,0 +1,103 @@
+---
+title: Creando Cakes
+description: Cakecutter | Creando Cakes
+layout: ../../layouts/MainLayout.astro
+---
+
+> Todos los archivos de plantillas están en formato [`.toml`](https://toml.io/en/), lo cual hace fácil editar y compartir con otras personas.
+
+## El Metadata de Cake
+
+El Metadata de Cake consiste en dos propiedades :-
+
+- `name` :- El nombre de la cake
+- `description` :- La descripción de la cake
+
+### Ejemplo
+
+```toml
+[metadata]
+name = "cakecutter"
+description = "Una descripción genial"
+```
+
+## Doblando la Mantequilla (Folding the butter)
+
+Batter (o Mantenquilla en español) son los comandos que se corren antes de la creación de ficheros u archivos.
+
+```toml
+[batter]
+1 = [
+  "git init", "true"
+]
+2 = [
+  "go mod init", "true"
+]
+```
+La razón de que `true` esté ahí es porque le indica a `cakecutter` corre esto, tiene que estar ahí, de lo contrario el comando no será invocado.
+Dirígete a la sección de [`Uso Avanzado`](/es/advanced-usage) para más información.
+
+## Estructura del fichero
+
+Para crear un archivo/directorio, pon el nombre en la tabla `[filestructure]` como key, y `true` como valor.
+
+```toml
+[filestructure]
+"main.go" = "true"
+"bin/" = "true" # << Para crear un directorio, pon / al final
+```
+
+El valor `true` le indica a `cakecutter` que cree esto; si el valor no contiene `true`, no se creará el fichero/directorio.
+La razón de este comportamiento es debido al dinamismo de `filestructure`. Mientras se crea la plantilla, `cakecutter` hará preguntas al autor de la cake. En base a sus respuestas, los ficheros son creados.
+
+Para la configuración de preguntas, dirígete a la sección de [`Uso Avanzado`](/es/advanced-usage).
+
+## Contenido del fichero
+
+Para crear contenido en un fichero, pon el nombre de éste en la tabla `[content]` como la key y el contenido como valor.
+
+```toml
+[content]
+"main.go" = '''
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Println("Hola mamá")
+}
+'''
+```
+
+> Nota: Puedes usar cadenas de texto multilínea mediante 3 comillas dobles `""" """`
+
+Contenido dinámico es también posible mediante lenguaje de plantillas. Dirígete a la sección de [`Uso Avanzado`]('/es/advanced-usage') para más información.
+
+## Espolvorear algunos ingredientes adicionales
+
+Los ingredientes adicionales (toppings) son como la mantequilla o butter, pero con la diferencia de que se corren luego de que el setup esté completo.
+
+
+```toml
+[toppings]
+1 = [
+  "go mod init example.com/hello", "true"
+]
+2 = [
+  "go build -o bin/cakecutter.exe" = "true"
+]
+```
+
+## Cerrando la sección
+
+La cake está terminada, guarda todo y sólo corre
+
+```
+cc local <path-to-the-file.toml> <directory>
+```
+
+> `directory` es el nombre del directorio donde la plantilla va a ser creada
+
+La plantilla debe ser creada en ese directorio.<br>
+
+Dirígete a la sección de [`Cómo publicar una cake`](/es/publishing-cakes) si quieres que la cake sea usada por todos.

src/pages/es/example.md

@@ -0,0 +1,27 @@
+---
+title: Ejemplo
+description: Cakecutter | Ejemplo
+layout: ../../layouts/MainLayout.astro
+---
+
+### Ejemplo básico de una Cake
+
+Aquí verás un ejemplo básico de una cake que pregunta por el nombre de usuario y crea un fichero cuyo contenido será el nombre de dicho usuario.
+
+```toml
+[metadata]
+name = "name-printer"
+description = "Muestra tu nombre en el fichero en segundos!" # XD
+
+[[questions.name]]
+ques = "¿Cuál es tu nombre?"
+type = "input"
+
+[filestructure]
+"name.txt" = "true"
+
+[content]
+"name.txt" = '''
+{{index .Ans "name"}}
+'''
+```