From 23a72868f208b664535bea2a27e2e67a495d3b5b Mon Sep 17 00:00:00 2001 From: enzonotario Date: Mon, 4 Dec 2023 21:58:02 -0300 Subject: [PATCH] refactor: content and sidebar --- src/.vitepress/config.ts | 90 +++++++++++++++--------- src/.vitepress/theme/components/Home.vue | 4 +- src/guia/empezando.md | 69 ++---------------- src/guia/gramatica-y-tipos.md | 22 +++--- src/guia/introduccion.md | 15 ++-- src/guia/por-que-usar-esjs.md | 51 ++------------ src/index.md | 2 +- src/introduccion.md | 48 +++++++++++++ src/primeros-pasos.md | 24 +++++++ src/test.md | 36 ---------- 10 files changed, 156 insertions(+), 205 deletions(-) create mode 100644 src/introduccion.md create mode 100644 src/primeros-pasos.md delete mode 100644 src/test.md diff --git a/src/.vitepress/config.ts b/src/.vitepress/config.ts index a3230c8..b49346c 100644 --- a/src/.vitepress/config.ts +++ b/src/.vitepress/config.ts @@ -20,62 +20,81 @@ export default async () => { const defaultSidebar = [ { - text: 'Introducción', + text: 'Empezando', items: [ - { text: '¿Por qué usar EsJS?', link: '/guia/por-que-usar-esjs' }, - { text: 'Empezando', link: '/guia/empezando' }, + { + items: [ + { text: 'Introducción', link: '/introduccion' }, + { text: 'Primeros pasos', link: '/primeros-pasos' }, + ], + }, ], }, { text: 'Guía EsJS', items: [ - { text: 'Introducción', link: '/guia/introduccion' }, - { text: 'Gramática y Tipos', link: '/guia/gramatica-y-tipos' }, - { text: 'Control del flujo y manejo de errores', link: '/guia/control-del-flujo-y-manejo-de-errores' }, - { text: 'Bucles e iteración', link: '/guia/bucles-e-iteracion' }, - { text: 'Funciones', link: '/guia/funciones' }, - { text: 'Expresiones y operadores', link: '/guia/expresiones-y-operadores' }, - { text: 'Números y fechas', link: '/guia/numeros-y-fechas' }, - { text: 'Formato de texto', link: '/guia/formato-de-texto' }, + { + items: [ + { text: 'Gramática y Tipos', link: '/guia/gramatica-y-tipos' }, + { text: 'Control del flujo y manejo de errores', link: '/guia/control-del-flujo-y-manejo-de-errores' }, + { text: 'Bucles e iteración', link: '/guia/bucles-e-iteracion' }, + { text: 'Funciones', link: '/guia/funciones' }, + { text: 'Expresiones y operadores', link: '/guia/expresiones-y-operadores' }, + { text: 'Números y fechas', link: '/guia/numeros-y-fechas' }, + { text: 'Formato de texto', link: '/guia/formato-de-texto' }, + ], + }, ], }, { text: 'Sintaxis', items: [ - { text: 'Palabras reservadas', link: '/sintaxis/palabras-reservadas' }, - { text: 'Comentarios', link: '/sintaxis/comentarios' }, - { text: 'Variables', link: '/sintaxis/variables' }, - { text: 'Constantes', link: '/sintaxis/constantes' }, - { text: 'Operadores', link: '/sintaxis/operadores' }, - { text: 'Condición si ... sino', link: '/sintaxis/condicion-si' }, - { text: 'Declaración elegir', link: '/sintaxis/elegir' }, - { text: 'Bucle para', link: '/sintaxis/para' }, - { text: 'Bucle mientras', link: '/sintaxis/mientras' }, - { text: 'Bucle hacer ... mientras', link: '/sintaxis/hacer-mientras' }, - { text: 'Módulos', link: '/sintaxis/modulos' }, + { + items: [ + { text: 'Palabras reservadas', link: '/sintaxis/palabras-reservadas' }, + { text: 'Comentarios', link: '/sintaxis/comentarios' }, + { text: 'Variables', link: '/sintaxis/variables' }, + { text: 'Constantes', link: '/sintaxis/constantes' }, + { text: 'Operadores', link: '/sintaxis/operadores' }, + { text: 'Condición si ... sino', link: '/sintaxis/condicion-si' }, + { text: 'Declaración elegir', link: '/sintaxis/elegir' }, + { text: 'Bucle para', link: '/sintaxis/para' }, + { text: 'Bucle mientras', link: '/sintaxis/mientras' }, + { text: 'Bucle hacer ... mientras', link: '/sintaxis/hacer-mientras' }, + { text: 'Módulos', link: '/sintaxis/modulos' }, + ], + }, ], }, { text: 'Tipos de datos', items: [ - { text: 'Booleano', link: '/tipos-de-datos/booleano' }, - { text: 'nulo', link: '/tipos-de-datos/nulo' }, - { text: 'Numero', link: '/tipos-de-datos/numero' }, - { text: 'Cadena', link: '/tipos-de-datos/cadena' }, - { text: 'Objeto', link: '/tipos-de-datos/objeto' }, - { text: 'Matriz', link: '/tipos-de-datos/matriz' }, - { text: 'funcion', link: '/tipos-de-datos/funcion' }, - { text: 'Simbolo', link: '/tipos-de-datos/simbolo' }, + { + items: [ + { text: 'Booleano', link: '/tipos-de-datos/booleano' }, + { text: 'nulo', link: '/tipos-de-datos/nulo' }, + { text: 'Numero', link: '/tipos-de-datos/numero' }, + { text: 'Cadena', link: '/tipos-de-datos/cadena' }, + { text: 'Objeto', link: '/tipos-de-datos/objeto' }, + { text: 'Matriz', link: '/tipos-de-datos/matriz' }, + { text: 'funcion', link: '/tipos-de-datos/funcion' }, + { text: 'Simbolo', link: '/tipos-de-datos/simbolo' }, + ], + }, ], }, { text: 'Avanzado', items: [ - { text: 'Elevación', link: '/avanzado/elevacion' }, + { + items: [ + { text: 'Elevación', link: '/avanzado/elevacion' }, + ], + }, ], }, ] @@ -126,6 +145,11 @@ export default async () => { ], ], + rewrites: { + '/guia/introduccion.md': '/introduccion.md', + '/guia/empezando.md': '/primeros-pasos.md', + }, + themeConfig: { logo: '/assets/logo.png', @@ -138,12 +162,10 @@ export default async () => { ], sidebar: { + '/': defaultSidebar, '/guia/': defaultSidebar, - '/sintaxis/': defaultSidebar, - '/tipos-de-datos/': defaultSidebar, - '/avanzado/': defaultSidebar, '/ecosistema/': [ diff --git a/src/.vitepress/theme/components/Home.vue b/src/.vitepress/theme/components/Home.vue index 0723a43..4c00815 100644 --- a/src/.vitepress/theme/components/Home.vue +++ b/src/.vitepress/theme/components/Home.vue @@ -14,12 +14,12 @@

EsJS
- JavaScript con sintaxis en Español + Lenguaje de programación en Español

diff --git a/src/guia/empezando.md b/src/guia/empezando.md index b30d0d2..085b6ba 100644 --- a/src/guia/empezando.md +++ b/src/guia/empezando.md @@ -1,66 +1,7 @@ -# Empezando con EsJS + diff --git a/src/guia/gramatica-y-tipos.md b/src/guia/gramatica-y-tipos.md index f6356a7..970e7dd 100644 --- a/src/guia/gramatica-y-tipos.md +++ b/src/guia/gramatica-y-tipos.md @@ -38,7 +38,7 @@ La sintaxis de los comentarios es la misma que en C++ y en muchos otros lenguaje Los comentarios se comportan como espacios en blanco y se descartan durante la ejecución del script. -## Declaraciones +## Variables EsJS tiene tres tipos de declaraciones de variables. @@ -189,7 +189,7 @@ En consecuencia, puedes acceder a las variables globales declaradas en una «ven Además, las variables globales tienen un mecanismo asociado como Elevación (_hoisting_). Puedes conocer más sobre este mecanismo en [Elevación](/avanzado/elevacion) -### Constantes +## Constantes Puedes crear una constante de solo lectura con nombre con la palabra clave `const`. @@ -251,9 +251,7 @@ consola.escribir(MI_ARREGLO); // Muestra ['HTML','CSS','JavaScript','EsJS']; > > -## Estructuras y tipos de datos - -### Tipos de datos +## Tipos de datos EsJS define ocho tipos de datos: @@ -358,13 +356,13 @@ consola.escribir(xConvertido + 23); Los _literales_ representan valores en EsJS. Estos son valores fijos, no variables, que _literalmente_ proporcionas en tu script. Esta sección describe los siguientes tipos de literales: -- [Arreglos literales](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#arreglos_literales) -- [Booleanos literales](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#booleanos_literales) -- [Literales de coma flotante](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#literales_de_coma_flotante) -- [Literales numéricos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#literales_numericos) -- [Objetos literales](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#objetos_literales) -- [RegExp literales](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#regexp_literales) -- [Cadenas literales](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_Types#cadenas_literales) +- [Arreglos literales](#arreglos-literales) +- [Booleanos literales](#booleanos-literales) +- [Literales de coma flotante](#literales-de-coma-flotante) +- [Literales numéricos](#literales-numericos) +- [Objetos literales](#objetos-literales) +- [RegExp literales](#expresiones-regulares-«regexp»-literales) +- [Cadenas literales](#cadenas-literales) ### Arreglos literales diff --git a/src/guia/introduccion.md b/src/guia/introduccion.md index b2ba119..0e0292c 100644 --- a/src/guia/introduccion.md +++ b/src/guia/introduccion.md @@ -1,12 +1,7 @@ -# Guía EsJS + diff --git a/src/guia/por-que-usar-esjs.md b/src/guia/por-que-usar-esjs.md index 41843c9..0e0292c 100644 --- a/src/guia/por-que-usar-esjs.md +++ b/src/guia/por-que-usar-esjs.md @@ -1,48 +1,7 @@ -# ¿Por qué usar EsJS? + diff --git a/src/index.md b/src/index.md index 768d0a3..2611c5b 100644 --- a/src/index.md +++ b/src/index.md @@ -16,7 +16,7 @@ import SectionCodeExample from '@theme/components/SectionCodeExample.vue';
- + diff --git a/src/introduccion.md b/src/introduccion.md new file mode 100644 index 0000000..00aef82 --- /dev/null +++ b/src/introduccion.md @@ -0,0 +1,48 @@ +# Introducción + +EsJS es un lenguaje de programación que utiliza palabras del idioma español para escribir código. La gramática de EsJS es la misma que la de JavaScript, solo que utiliza tokens del idioma español. Al compilarse, el código EsJS es equivalente al código JavaScript, por lo que puedes utilizarlo en cualquier lugar donde se ejecute JavaScript. + +El siguiente código EsJS: + +```esjs +funcion iniciar() { + const fecha = crear Fecha() + consola.escribir("Hola Mundo!", fecha) +} + +iniciar() +``` + +Produce el código JavaScript: + +```js +function iniciar() { + const fecha = new Date() + console.log("Hola Mundo!", fecha) +} + +iniciar() +``` + +## ¿Por qué usar EsJS? + +EsJS fue creado con la intención de facilitar a hispanohablantes el aprendizaje de la programación al utilizar palabras del idioma español, pero con la misma capacidad de JavaScript. Una vez que se aprende a programar en EsJS, es muy fácil cambiar a JavaScript, ya que la gramática es la misma. + + +## ¿Cuál es la diferencia entre EsJS y JavaScript? + +EsJS es un lenguaje de programación que utiliza palabras del idioma español para escribir código. EsJS compila el código escrito en español a código JavaScript. + +A su vez, JavaScript es un lenguaje de programación interpretado, que utiliza palabras del idioma inglés para escribir código. Es uno de los lenguajes de programación más utilizados en el mundo. + +Por lo tanto, EsJS y JavaScript son lenguajes muy similares, y gracias a la utilización de plugins adecuados, EsJS puede hacer prácticamente lo mismo que JavaScript. De esta manera, EsJS es prácticamente igual a JavaScript en términos de funcionalidades y capacidades. + +## Guía EsJS + +La guía de EsJS está basada en la [Guía de JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/) de [MDN Web Docs](https://developer.mozilla.org/), convenientemente adaptada a EsJS. + +Es importante entender que el código EsJS que escribimos es transpilado a JavaScript en el momento previo a ejecutarse. Por lo que, si bien escribimos código EsJS, en realidad se ejecuta código JavaScript. + +De esta manera, esta guía enlazará algunos términos/conceptos a documentación que corresponde a JavaScript, pero que también aplican a EsJS, sólo que utilizando tokens en español. + +La lista de tokens en español que emplea EsJS, y su equivalencia a JavaScript, puede consultarse en: [Palabras reservadas](./sintaxis/palabras-reservadas). diff --git a/src/primeros-pasos.md b/src/primeros-pasos.md new file mode 100644 index 0000000..511bf6b --- /dev/null +++ b/src/primeros-pasos.md @@ -0,0 +1,24 @@ +# Primeros pasos + +Requerimientos: + +- [Node.js](https://nodejs.org/es/) >= 14.17.0 +- [npm](https://www.npmjs.com/) >= 7.15.1 (o cualquier otro gestor de paquetes de Node.js) + +## Crear un proyecto EsJS + +Para crear un proyecto EsJS, puedes utilizar el siguiente comando, que te guiará en la creación de un proyecto a partir de una plantilla: + +```bash +npm create esjs +``` + +Una vez que se haya creado el proyecto, puedes ejecutarlo con el siguiente comando: + +```bash +npm dev +``` + +## Prueba en línea + +¿Quieres probar EsJS sin tener que instalar nada en tu equipo? Puedes hacerlo en línea utilizando el [EsJS Editor](https://editor.esjs.dev/). diff --git a/src/test.md b/src/test.md deleted file mode 100644 index 1f2beb9..0000000 --- a/src/test.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -layout: home -title: EsJS -titleTemplate: Lenguaje de programación con sintaxis en Español basado en JavaScript -sidebar: false ---- - - - - -
- - -```esjs -importar { Terminal } desde '@es-js/terminal' -importar { tiza } desde '@es-js/tiza' -importar { tirarPapeles } desde 'https://cdn.esjs.dev/JYWwDg9gTgLgBAYwgOwGYFMY2HVUIhwDkAFlmAM4BcA9DQgCbIB0FA1gJ5gCGCbzDdADd63ZEO4UAtEjSZsRANwAoZegAekWNyi4ArsgTAUcbFB0AFbmHQAbdBQAUDPeaMoAosgCywW8Ap0AHMDBggKAEo4AG9lOEQUCnhUYGQ4AF44ADF0BBJuZm4SaG5HKIBqOBc3Y2QvX39AkOQwilV4hxhuACN7BHQoAElkGAGJWwhHOPj9Q1qymOmZuAocRxy8gqKShYA+TJTkKNjl5ahMaGQdJZmAX3bT2QwsYEcT0-ieWGAEewBhCAGGBUOAAdgANDdlmIgvYQQA2AAMkI+8QoYHO3AYIIArDiUajoMAgqkQdE4OoQYi4PcPrcIiooQk5C83kzPjpsL90ACgSCIey4DC4XAAIwAJmRgvRmOxcDxBI+RJJyDJFJBoppTPpKmWt0VYoAzIbQdMIsp7kA' - -tirarPapeles(10 * 1000) - -Terminal.escribir(` -${tiza.fondoIndigo.indigo('****************************************')} -${tiza.fondoIndigo.indigo('****************************************')} -${tiza.fondoIndigo.indigo('****************************************')} -${tiza.fondoIndigo.indigo('****************************************')} -${tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('**********') + tiza.fondoIndigo.indigo('**********')} -${tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********')} -${tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********')} -${tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********') + tiza.fondoBlanco.blanco('***') + tiza.fondoIndigo.indigo('**********')} -`) - -``` - - -
-