primer commit - template starter kit de Adalab

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "parserOptions": {
+      "ecmaFeatures": {
+        "experimentalObjectRestSpread":true
+      }
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "indent": [2, 2],
+        "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+        "semi": [2, "always"],
+        "eqeqeq": 2,
+        "strict": [2, "global"],
+        "no-debugger": 1,
+        "no-console": 1,
+        "array-callback-return": 1,
+        "block-scoped-var": 1,
+        "consistent-return": 1,
+        "curly": [1, "multi-line", "consistent"],
+        "no-empty-function": 1,
+        "no-useless-return": 1,
+        "vars-on-top": 1,
+        "no-use-before-define": [1, "nofunc"],
+        "global-require": 1,
+        "camelcase": 1,
+        "new-cap": 1,
+        "no-lonely-if": 1,
+        "no-multiple-empty-lines": [1, { "max": 3 }],
+        "no-trailing-spaces": 1,
+
+        "no-restricted-properties": [1, {
+          "property": "lenght",
+          "message": "Use length instead of lenght (notice the position of the h)"
+        }]
+
+    }
+}

.gitignore

@@ -0,0 +1,67 @@
+# Created by https://www.gitignore.io/api/sass,node,bower,macos
+
+# Bower
+bower_components
+.bower-cache
+.bower-registry
+.bower-tmp
+
+# macOS
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Linux
+*.directory
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+dist
+dist-ssr
+*.local
+
+# Sass
+.sass-cache/
+*.css.map
+
+# JS Sourcemaps
+*.js.map
+
+# vscode
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Adalab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,125 @@
+![Adalab](https://beta.adalab.es/resources/images/adalab-logo-155x61-bg-white.png)
+
+# Adalab web starter kit
+
+Ahoy! Este es nuestro Starter Kit creado en **node y vite**. ¿Y qué es un Starter kit? Pues es una **plantilla de proyecto con funcionalidades preinstaladas y preconfiguradas**.
+
+Este Kit incluye un motor de plantillas HTML, el preprocesador SASS y un servidor local y muchas cosas más. El Kit nos ayuda a trabajar más cómodamente, nos automatiza tareas.
+
+En el Kit hay 3 tipos de ficheros y carpetas:
+
+- Los ficheros que están sueltos en la raíz del repositorio, como vite.config.js, package.json... Son la configuración del proyecto y no necesitamos modificarlos (excepto este README.md, para describir tu proyecto).
+- La carpeta `src/`: son los ficheros de nuestra página web, como HTML, CSS, JS...
+- La carpeta `public/`, que tiene fichero estáticos como imágenes, fuentes, favicon, librerías de JavaScript antiguas (jQuery, ...)
+- Y la carpeta `docs/`, que es generada automáticamente cuando arrancamos el proyecto. El Kit lee los ficheros que hay dentro de `src/` y `public/`, los procesa y los genera dentro de `public/` y `docs/`.
+
+## Guía de inicio rápido
+
+> **NOTA:** Necesitas tener instalado [Node JS](https://nodejs.org/) con una versión superior a la 14 para trabajar con este Starter Kit:
+
+### Pasos a seguir cada vez que queremos arrancar un proyecto desde cero:
+
+1. **Crea tu propio repositorio.**
+1. Descarga este **Starter kit desde GitHub**.
+   - No recomendamos que clones este repo ya que no podrás añadir commits.
+1. **Copia todos los ficheros** de este Starter kit en la carpeta raíz de tu repositorio.
+   - Recuerda que debes copiar **también los ficheros ocultos** que comienzan por un punto.
+   - Si has decidido clonar este repo, no debes copiar la carpeta `.git`. Si lo haces estarás machacando tu propio repositorio.
+1. **Abre una terminal** en la carpeta raíz de tu repositorio.
+1. **Instala las dependencias** locales ejecutando en la terminal el comando:
+
+```bash
+npm install
+```
+
+### Pasos para arrancar el proyecto:
+
+Una vez hemos instalado las dependencias, vamos a arrancar el proyecto. **El proyecto hay que arrancarlo cada vez que te pongas a programar.** Para ello ejecuta el comando:
+
+```bash
+npm run dev
+```
+
+Este comando:
+
+- **Abre una ventana de Chrome y muestra tu página web**, al igual que hace el plugin de VS Code Live Server (Go live).
+- También **observa** todos los ficheros que hay dentro de la carpeta `src/`, para que cada vez que modifiques un fichero **refresca tu página en Chrome**.
+- También **procesa los ficheros** HTML, SASS / CSS y JS. Por ejemplo:
+   - Convierte los ficheros SASS en CSS.
+   - Combina los diferentes ficheros de HTML y los agrupa en uno o varios ficheros HTML.
+
+Después de ejecutar `npm run dev` ya puedes empezar a editar todos los ficheros que están dentro de la carpeta `src/` y programar cómodamente.
+
+### Pasos para publicar el proyecto en GitHub Pages:
+
+Para generar tu página para producción ejecuta el comando:
+
+```bash
+npm run build
+```
+
+Y a continuación:
+
+1. Sube a tu repo la carpeta `docs/` que se te acaba de generar.
+1. Entra en la pestaña `settings` de tu repo.
+1. Y en el apartado de GitHub Pages activa la opción **master branch /docs folder**.
+1. Y ya estaría!!!
+
+Además, los comandos:
+
+```bash
+npm run push-docs
+```
+o
+
+```bash
+npm run deploy
+```
+
+son un atajo que nos genera la versión de producción y hace push de la carpeta `docs/` del tirón. Te recomendamos ver el fichero `package.json` para aprender cómo funciona.
+<!--
+## Flujo de archivos con Gulp
+
+Estas tareas de Gulp producen el siguiente flujo de archivos:
+
+![Gulp flow](./gulp-flow.png)
+
+## `gulpfile.js` y `config.json`
+
+Nuestro **gulpfile.js** usa el fichero `config.json` de configuración con las rutas de los archivos a generar / observar.
+
+De esta manera separarmos las acciones que están en `gulpfile.js` de la configuración de las acciones que están en `config.json`.
+-->
+## Estructura de carpetas
+
+La estructura de carpetas tiene esta pinta:
+
+```
+src
+ ├─ api // los ficheros de esta carpeta se copian en public/api/
+ |  └─ data.json
+ ├─ images
+ |  └─ logo.jpg
+ ├─ js // los ficheros de esta carpeta se concatenan en el fichero main.js y este se guarda en public/main.js
+ |  ├─ main.js
+ |  └─ events.js
+ ├─ scss
+ |  ├─ components
+ |  ├─ core
+ |  ├─ layout
+ |  └─ pages
+ └─ html
+    └─ partials
+```
+
+> **NOTA:** Los partials de HTML y SASS del proyecto son orientativos. Te recomendamos usar los que quieras, y borrar los que no uses.
+<!--
+## Vídeotutoriales del Starter kit
+
+- [Qué es, trabajar con la versión de desarrollo y rutas relativas](https://www.youtube.com/watch?v=XwvhXvBijos)
+- [Migración de un proyecto, trabajar con la versión de producción y GitHub Pages](https://www.youtube.com/watch?v=qqGClcgt9Uc)
+- [Motor de plantillas](https://www.youtube.com/watch?v=4GwXOJ045Zg)
+-->
+## Falta algo?
+
+Echas de menos que el kit haga algo en concreto? Pidelo sin problema a través de las issues o si te animas a mejorarlo mándanos un PR :)

docs/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Adalab Web Starter Kit</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
+
+    <link rel="icon" href="./images/favicon.png" />
+    <link rel="stylesheet" href="./assets/main-62015576.css">
+  </head>
+
+  <body>
+    <div class="page">
+      <header class="page__header">
+  <img src="./images/logo-adalab.png" alt="Adalab">
+  <h1>Bienvenidos a Adalab</h1>
+</header>
+
+      <main class="page__main">
+  <h2>Este es el starter kit de Adalab</h2>
+  <p>Lo usamos para aprender:</p>
+  <ul class="main__list">
+    <li>Sass</li>
+    <li>HTML partials</li>
+    <li>Gulp</li>
+    <li>y muchas cosas más</li>
+  </ul>
+  <p>Si quieres saber cúales son las rutas correctas para:</p>
+  <ul class="main__list">
+    <li>
+      una <code class="code">&lt;img /&gt;</code> mira el fichero
+      <code class="code">./src/html/partials/header.html</code>.
+    </li>
+    <li>
+      y para un <code class="code">background-image</code> mira el fichero
+      <code class="code">./src/html/scss/layout/_page.scss</code>.
+    </li>
+  </ul>
+  <p>
+    Si quieres saber cómo usar un partial HTML dentro de otro partial, busca en la carperta
+    <code class="code">./src/html/index.html</code> y
+    <code class="code">./src/html/partials/main.html</code>, y verás cómo estamos creando estos
+    enlaces:
+  </p>
+  <ul class="main__list">
+    <li>
+      <a class="link__adalab" href="https://adalab.es">Adalab</a>
+
+    </li>
+    <li>
+      <a class="{=$aClass}" href="./more-info.html">Más info del starter kit</a>
+
+    </li>
+  </ul>
+</main>
+
+      <footer class="page__footer">
+  <small>
+    &copy; Todos los derechos reservados
+    <a class="link__adalab" href="https://adalab.es">Adalab</a>
+
+  </small>
+</footer>
+
+    </div>
+    <script src="./js/main.js"></script>
+  </body>
+</html>

docs/more-info.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Adalab Web Starter Kit</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
+
+    <link rel="icon" href="./images/favicon.png" />
+    <link rel="stylesheet" href="./assets/main-62015576.css">
+  </head>
+
+  <body>
+    <div class="page">
+      <header class="page__header">
+  <img src="./images/logo-adalab.png" alt="Adalab">
+  <h1>Otra página del starter kit</h1>
+</header>
+
+      <main>
+        <p>
+          Esta es otra segunda página del Starter kit. Mira el fichero
+          <code class="code">./src/html/partials/main.html</code> para cómo hemos creado el enlace
+          que te ha traído hasta aquí.
+        </p>
+        <p>
+          <a class="link__adalab" href="./index.html">Volver a la página principal</a>
+
+        </p>
+      </main>
+      <footer class="page__footer">
+  <small>
+    &copy; Todos los derechos reservados
+    <a class="link__adalab" href="https://adalab.es">Adalab</a>
+
+  </small>
+</footer>
+
+    </div>
+    <script src="./js/main.js"></script>
+  </body>
+</html>