49 |
39 |
56 | 
16 |
17 | Actualizado por ultima vez el {result}
18 |
19 | 
js
7 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "command": "./node_modules/.bin/astro dev",
6 | "name": "Development server",
7 | "request": "launch",
8 | "type": "node-terminal"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 | # generated types
4 | .astro/
5 |
6 | # dependencies
7 | node_modules/
8 |
9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 |
15 |
16 | # environment variables
17 | .env
18 | .env.production
19 |
20 | # macOS-specific files
21 | .DS_Store
22 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'astro/config';
2 | import tailwind from "@astrojs/tailwind";
3 | import react from "@astrojs/react";
4 | import sitemap from "@astrojs/sitemap";
5 |
6 | // https://astro.build/config
7 | export default defineConfig({
8 | site : "https://ilovejs.org",
9 | integrations: [tailwind(), react(), sitemap()],
10 | });
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "astro/tsconfigs/strict",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": [
7 | "src/*"
8 | ],
9 | "@reusable/*": [
10 | "src/components/reusable/*"
11 | ],
12 | "@unique/*": [
13 | "src/components/unique/*"
14 | ]
15 | },
16 | "jsx": "react-jsx",
17 | "jsxImportSource": "react"
18 | }
19 | }
--------------------------------------------------------------------------------
/tailwind.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
4 | theme: {
5 | extend: {
6 | fontFamily : {
7 | "poppins" : "Poppins",
8 | "roboto" : "Roboto Slab Variable"
9 | },
10 | colors :{
11 | "pinia-400" : "rgb(250 204 21)",
12 | "pinia-300" : "rgb(253 224 71)"
13 | }
14 | },
15 | },
16 | plugins: [],
17 | }
18 |
--------------------------------------------------------------------------------
/src/global/utils/capitalize.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Estara en mayuscula la primera letra de la oracion y
3 | aquellas palabras que tengan mas de 3 letras
4 | */
5 | const capitalize = (val: string) => {
6 | return (
7 | val[0].toUpperCase() +
8 | val
9 | .split(" ")
10 | .map((e) => {
11 | if (e.length > 3) return e[0].toUpperCase() + e.slice(1);
12 | return e;
13 | })
14 | .join(" ")
15 | .slice(1)
16 | );
17 | };
18 |
19 | export default capitalize;
20 |
--------------------------------------------------------------------------------
/src/components/reusable/molecules/References.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | list: string[][];
4 | }
5 | const { list } = Astro.props;
6 | ---
7 |
8 |
9 | Fuentes :
10 | {
11 | list.map(([name , link] , i) => {
12 | return (
13 | <>
14 |
15 | {name}
16 |
17 | {list.length - 1 !== i && " , "}
18 |
19 | );
20 | })
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/src/components/reusable/atoms/PopLink.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props{
3 | href? : string
4 | }
5 | const {href = "#"} = Astro.props;
6 | ---
7 |
8 |
16 |
17 | Actualizado por ultima vez el {result}
18 |
19 |
--------------------------------------------------------------------------------
/src/components/reusable/atoms/Spanify.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | phrase: string;
4 | className: string;
5 | }
6 | const { phrase, className } = Astro.props;
7 | const words = phrase.split(" ");
8 | ---
9 |
10 | {
11 | words.map((word, i, arr) => {
12 | const output = Array.from(word);
13 | return (
14 |
15 | {output.map((letter) => (
16 |
17 | {letter}
18 |
19 | ))}
20 | {i !== arr.length - 1 && .}
21 |
22 | );
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/src/assets/template.md:
--------------------------------------------------------------------------------
1 | ---
2 | articleName : nombre del articulo e identificador unico
3 |
4 | # Para las Cards
5 |
6 | iconName: nombre del archivo que se usara como icono
7 | summary : resumen del articulo
8 |
9 | # Metadatos
10 |
11 | layout: ../../../layout/ArticleLayout.astro
12 | title: titulo de la pagina
13 | description: descripcion de la pagina
14 | keywords : ["keyword","keyword"]
15 |
16 | # Adjuntar
17 |
18 | author: autor del artidulo
19 | partners : ["socio del articulo" , "socio del articulo"] # campo opcional
20 | banner: "link a la imagen del banner" # campo opcional
21 | pubDate: 2022-08-08
22 | references : [
23 | ["nombre" , "link a la referencia"],
24 | ["nombre" , "link a la referencia"],
25 | ] # campo opcional
26 | ---
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ILoveJS
2 |
3 | **ILoveJS** es una guía práctica diseñada para aprender JavaScript.
4 |
5 | ## Requisitos Previos
6 |
7 | - Node.js y NPM instalados.
8 |
9 | ## Instalación
10 |
11 | Sigue estos pasos para instalar y ejecutar la plataforma en tu sistema:
12 |
13 | 1. Clona este repositorio:
14 |
15 | ```bash
16 | git clone https://github.com/numonu/ilovejs.git
17 | ```
18 |
19 | 2. Instala las dependencias:
20 |
21 | ```bash
22 | npm i
23 | ```
24 |
25 | 3. Ejecuta el servidor de Desarrollo:
26 |
27 | ```bash
28 | npm run dev
29 | ```
30 |
31 | ## Contribucion
32 |
33 | - Lea la [guía de contribución](/contributing/general.md) para modificar y/o corregir contenido de la página
34 | - Lea la [guía de redacción](/contributing/articles.md) para crear , modificar y/o corregir artículos
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ilovejs",
3 | "type": "module",
4 | "version": "0.0.1",
5 | "scripts": {
6 | "dev": "astro dev",
7 | "start": "astro dev",
8 | "build": "astro build",
9 | "preview": "astro preview",
10 | "astro": "astro"
11 | },
12 | "dependencies": {
13 | "@astrojs/react": "^3.0.3",
14 | "@astrojs/sitemap": "^3.0.3",
15 | "@astrojs/tailwind": "^5.0.2",
16 | "@fontsource-variable/roboto-slab": "^5.0.15",
17 | "@fontsource/poppins": "^5.0.8",
18 | "@types/react": "^18.2.28",
19 | "@types/react-dom": "^18.2.13",
20 | "astro": "^3.3.0",
21 | "gsap": "^3.12.2",
22 | "react": "^18.2.0",
23 | "react-dom": "^18.2.0",
24 | "tailwindcss": "^3.3.3"
25 | },
26 | "devDependencies": {
27 | "@types/node": "^20.8.6"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/layout/BaseLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import "@fontsource/poppins";
3 | import '@fontsource-variable/roboto-slab';
4 |
5 | import "@/global/styles/components.css";
6 |
7 | interface Props{
8 | title : string,
9 | description : string,
10 | }
11 | const {title , description} = Astro.props;
12 | ---
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 
23 | {description}
26 | 27 | ); 28 | }; 29 | 30 | export default ModuleCard; 31 | -------------------------------------------------------------------------------- /mitsco.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "types" : [ 3 | { 4 | "type" : "add", 5 | "description" : "Se utiliza cuando se agrega un nuevo archivo al proyecto." 6 | }, 7 | { 8 | "type" : "update", 9 | "description" : "Se emplea cuando se realiza una actualización en una funcionalidad o archivo existente." 10 | }, 11 | { 12 | "type" : "feat", 13 | "description" : "Se utiliza para indicar la adición de una nueva funcionalidad al proyecto." 14 | }, 15 | { 16 | "type" : "style", 17 | "description" : "Para cambios visuales que no afectan el funcionamiento" 18 | }, 19 | { 20 | "type" : "core", 21 | "description" : "Se usa cuando se instala un nuevo paquete o se modifica la configuración de uno existente en el proyecto." 22 | }, 23 | { 24 | "type" : "delete", 25 | "description" : "Se emplea cuando se elimina un archivo o recurso del proyecto." 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /LICENCE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Juan Villegas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/reusable/molecules/Question.tsx: -------------------------------------------------------------------------------- 1 | import { useState, type FC, type ReactNode } from "react"; 2 | 3 | interface QuestionProps{ 4 | question : string, 5 | children : ReactNode 6 | } 7 | const Question : FC
17 |
31 | 
36 |
37 | 
20 |
21 |
22 | 
23 |
31 | Domina JavaScript desde sus fundamentos hasta
32 | temas avanzados. Una
convertirte en un
33 | desarrollador web ninja
34 |
28 | JavaScript es un lenguaje de programación que se utiliza en el desarrollo web para hacer que las páginas sean interactivas y dinámicas. Se ejecuta en el navegador del usuario y permite a los desarrolladores controlar y modificar el contenido de una página, responder a eventos y crear aplicaciones web interactivas. Es una parte fundamental de la tecnología web moderna. 29 |
30 |En esta guía aprenderás :
31 |
17 | 27 | ¿Tienes alguna pregunta o alguna sugerencia para mejorar nuestra pagina? No dudes en contactarnos, ya que estamos siempre dispuestos a escuchar tus inquietudes y recibir tus valiosas ideas. 28 |
29 |
38 |
39 | ## Node.js en la Terminal
40 |
41 | Para comenzar, abramos nuestra terminal. En el caso de Windows, podemos utilizar el cmd. Ejecutemos el comando node, y de inmediato, se iniciará nuestro tiempo de ejecución de Node.js.
42 |
43 | ```bash
44 | node
45 | ```
46 |
47 | En este momento, podemos escribir alguna expresión en JavaScript para ver los resultados. Vamos a mostrar el clásico **"Hola Mundo"** en nuestro REPL
48 |
49 | ```javascript
50 | console.log("Hola Mundo")
51 | ```
52 |
53 | Si pulsamos enter en nuestro teclado podremos ver el resultado inmediatamente.
54 |
55 | 
56 |
57 | En resumen, el REPL tiene un propósito único, evaluar expresiones de una sola línea y mostrar los resultados de inmediato. Es una herramienta excelente cuando deseamos probar conceptos simples. Aunque es posible escribir declaraciones más extensas y complejas en múltiples líneas, el REPL se utiliza principalmente para tareas sencillas y rápidas.
58 |
59 | ## Node.js en nuestro editor de código
60 |
61 | Ahora es el momento de ejecutar nuestro primer script de Node.js utilizando un editor de código. Esta será la forma en la que trabajaremos a lo largo de la guía, con algunas excepciones en las que necesitaremos el navegador.
62 |
63 | > Para este ejemplo, utilizaré *Visual Studio Code (VSCode)*, uno de los editores de código más populares hasta la fecha, que cuenta con una amplia comunidad de desarrolladores creando extensiones para mejorar la experiencia de desarrollo.
64 |
65 | Para comenzar, abramos VSCode utilizando una carpeta vacía. Allí crearemos nuestro script. En mi caso, lo nombraré **"app.js"**
66 |
67 | Dentro de nuestro script, escribiremos nuevamente el clásico **"Hola Mundo"**
68 |
69 | ```javascript
70 | console.log("Hola Mundo")
71 | ```
72 |
73 | Ahora, para indicarle a Node.js que ejecute este script, abriremos una terminal. Podríamos utilizar nuevamente el cmd, pero optaremos por emplear la terminal integrada en VSCode. Para hacerlo, dirigiremos nuestro cursor hacia el panel superior y buscaremos el botón **"Terminal"**, luego seleccionaremos **"Crear nueva terminal"**
74 |
75 | 
76 |
77 | Una vez que tengamos la terminal abierta, esta se ubicará automáticamente en la ruta de nuestro proyecto, lo cual es muy conveniente. Sin embargo, ten en cuenta que no debes ejecutar el comando node en este momento, ya que eso volvería a abrir el REPL. Lo que realmente deseamos es ejecutar nuestro script. Para lograrlo, usaremos el siguiente comando:
78 |
79 |
80 | ```bash
81 | node app.js
82 | ```
83 |
84 | 
85 |
86 | La consola mostrará el resultado de nuestro script. ¡Felicidades! Ahora sabes cómo ejecutar un script con Node.js y estás listo para continuar tu aprendizaje con el resto de guías en ILoveJS.
87 |
88 |
89 |
--------------------------------------------------------------------------------
/public/resource/svg/crown.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/pages/articles/01-introduccion/04-guia-para-instalar-y-configurar-nodejs-y-npm.md:
--------------------------------------------------------------------------------
1 | ---
2 | articleName: Guía para instalar Node.js y NPM
3 |
4 | # Para las Cards
5 |
6 | iconName: box
7 | summary: Echa un vistazo a la instalación y configuración de Nodejs y NPM con esta guía detallada
8 |
9 | # Metadatos
10 |
11 | layout: ../../../layout/ArticleLayout.astro
12 | title: Guía paso a paso para instalar y configurar Node.js y NPM en Windows | ILoveJS
13 | description: Echa un vistazo a la instalación y configuración de node.js con esta detallada guía de programación. Tanto si estás empezando, como si eres un programador experimentado, esta guía te llevará a través del proceso con facilidad.
14 | keywords:
15 | [
16 | "tutorial de programacion",
17 | "como instalar node.js",
18 | "configurar node.js",
19 | "como instalar npm",
20 | "como configurar npm",
21 | "tutorial de node.js",
22 | "guia de node.js",
23 | ]
24 |
25 | # Adjuntar
26 |
27 | author: Juan Villegas
28 | pubDate: 2023-11-03
29 | ---
30 |
31 | # Guía para instalar y configurar Node.js y NPM
32 |
33 | En esta guía, aprenderás cómo instalar y configurar Node.js en windows. Utilizar Node.js facilita la depuración del código y la visualización de resultados en la consola, en contraste con la necesidad de alternar entre pantallas y abrir las herramientas de desarrollo del navegador.
34 |
35 | Además en el proceso también instalaremos _NPM (node package manager)_, que nos permitirá instalar un sin fin de bibliotecas que forman parte del repositorio open source más grande que hay.
36 |
37 | ## Como Descargar e Instalar Node.js
38 |
39 | El primer paso es dirigirse al sitio web oficial de Node.js. Una vez allí, sigue los siguientes pasos.
40 |
41 | Haz clic en el recuadro marcado en rojo para descargar la versión _LTS (Long Term Support)_. Esta elección garantiza que recibirás actualizaciones regulares, que incluyen correcciones de errores y mejoras de seguridad, entre otras.
42 |
43 | 
44 |
45 | Una vez finalizada la descarga, ejecuta el instalador de Node.js. Entonces deberías ver el asistente de instalación.
46 |
47 | Haz clic en el botón **Next**
48 |
49 | 
50 |
51 | Acepta los términos y condiciones de uso y continúa haciendo clic en el botón **Next**
52 |
53 | 
54 |
55 | A continuación, puedes elegir la ruta de instalación de Node.js. Si la ruta por defecto es adecuada para ti, puedes dejarla así. Si deseas cambiarla, siéntete libre de hacerlo, luego haz clic en el botón **Next**
56 |
57 | 
58 |
59 | En este punto, comenzamos a explorar los módulos de instalación que se incluirán con Node.js.
60 |
61 | Continúa haciendo clic en el botón **Next**
62 |
63 | 
64 |
65 | La siguiente ventana te brinda la opción de instalar la herramienta "Chocolatey," que facilita el trabajo con bibliotecas de Node.js que utilizan C/C++. Normalmente, esto se requiere para tareas complejas de bajo nivel. En mi caso, no lo necesitaré, así que dejaré esta opción desmarcada.
66 |
67 | Continúa haciendo clic en el botón **Next**
68 |
69 | 
70 |
71 | Finalmente, llegarás a la pantalla final, que te ofrece una oportunidad para retroceder y cambiar alguna configuración, lo cual no es necesario en nuestro caso.
72 |
73 | Continúa haciendo clic en el botón **Install**
74 |
75 | 
76 |
77 | Después de unos segundos, la instalación habrá finalizado. Ahora es el momento de verificar si todo se ha realizado correctamente.
78 |
79 | Presiona las teclas **Windows + R** y busca _cmd (abreviatura de CoMmanD)_.
80 |
81 | 
82 |
83 | Una vez que tengas el CMD abierto, ejecuta los siguientes comandos para verificar las versiones de Node.js y NPM que tienes instaladas:
84 |
85 | Para verificar la versión de Node.js, ejecuta el siguiente comando:
86 |
87 | ```shell
88 | node --version
89 | ```
90 |
91 | Luego, para verificar la versión de NPM, ejecuta este comando:
92 |
93 | ```shell
94 | npm --version
95 | ```
96 |
97 | Deberías ver un resultado similar al siguiente:
98 |
99 | 
100 |
101 | ## Conclusión
102 |
103 | ¡Listo! Ahora has instalado Node.js en tu dispositivo Windows. Ahora estás preparado para continuar con los demás módulos de la guía, donde utilizarás Node.js de forma constante para depurar tus scripts.
104 |
--------------------------------------------------------------------------------
/src/layout/ArticleLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import "@fontsource/poppins";
3 | import "@fontsource-variable/roboto-slab";
4 |
5 | import ArticleNavigator from "@/components/reusable/organisms/ArticleNavigator.astro";
6 | import HomeFooter from "@/components/unique/HomeFooter.astro";
7 | import Writers from "@/components/reusable/molecules/Writers.astro";
8 | import References from "@/components/reusable/molecules/References.astro";
9 | import ConditionalRender from "@/components/reusable/atoms/ConditionalRender.astro";
10 | import HomeHeader from "@/components/unique/HomeHeader.astro";
11 |
12 | const { frontmatter } = Astro.props;
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |