Initial commit

.eleventy.js

@@ -0,0 +1,72 @@
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const toBootstrapNav = require('eleventy-navigation-bootstrap')
+const pluginTOC = require('eleventy-plugin-toc')
+const markdownIt = require('markdown-it')
+const markdownItAnchor = require('markdown-it-anchor')
+const markdownItHighlightJS = require('markdown-it-highlightjs')
+const readerBar = require('henry-reader-bar')
+const readingTime = require('henry-reading-time')
+
+const mdOptions = {
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: true,
+}
+
+const mdAnchorOpts = {
+  permalink: true,
+  permalinkClass: 'anchor-link',
+  permalinkSymbol: '',
+  level: [1, 2, 3, 4],
+}
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.setLibrary(
+    'md',
+    markdownIt(mdOptions)
+      .use(markdownItAnchor, mdAnchorOpts)
+      .use(markdownItHighlightJS)
+  )
+
+  eleventyConfig.addPlugin(eleventyNavigationPlugin)
+  eleventyConfig.addPlugin(readingTime)
+  eleventyConfig.addPlugin(readerBar)
+  eleventyConfig.addPlugin(syntaxHighlight)
+
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ['h2', 'h3'],
+    ul: true,
+  })
+
+  eleventyConfig.addPassthroughCopy('_src/assets')
+
+  eleventyConfig.addNunjucksFilter('bootstrapNav', toBootstrapNav)
+
+  eleventyConfig.addLinter(
+    'Spelling check',
+    function (content, inputPath, outputPath) {
+      let words = 'lenght, .lenght, .rigth'.split(',')
+
+      // Eleventy 1.0+: use this.inputPath and this.outputPath instead
+      if (inputPath.endsWith('.md')) {
+        for (let word of words) {
+          let regexp = new RegExp('\\b(' + word + ')\\b', 'gi')
+          if (content.match(regexp)) {
+            console.warn(`Spelling check (${inputPath}) Found: ${word}`)
+          }
+        }
+      }
+    }
+  )
+
+  return {
+    dir: {
+      layouts: '/_src/layouts',
+      data: '/_src/data',
+      output: '_dist',
+      pathPrefix: '/Prep-Course/',
+    },
+  }
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+# Eleventy build
+_dist
+package-lock.json

01 - La primera clase - Example/README.json

@@ -0,0 +1,11 @@
+{
+  "lessonTitle": "Primera clase",
+  "feedbackID": "01-lesson1",
+  "permalink": "/Tema_Uno/",
+  "homeworkUrl": "https://github.com/soyHenry/Prep-Course/tree/main/05-JS-IV/homework",
+  "eleventyNavigation": {
+    "key": "Tema 1",
+    "order": 1
+  }
+}
+

01 - La primera clase - Example/README.md

@@ -0,0 +1,71 @@
+![HenryLogo](https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Assets/logo-henry-white-lg.png)
+
+<!-- el logo de Henry se oculta en el build -->
+
+# Ejemplo de H1
+
+#### Ejemplo de anexo del H1
+
+Este readme corresponde al contenido de una clase o lección.
+
+## Qué cambia en este layout?
+
+Para el contenido de las clases se utiliza el layout `lesson` por default (no hace falta setearlo).
+
+Este layout incluye:
+
+### Tabla de contenidos
+
+Se genera una TOC a la izquierda de la pantalla (solo en web) con links de navegación a los H2 y H3 encontrados en el contenido.
+
+### Tiempo de lectura
+
+Se utiliza la librería personalizada `henry-reading-time` para establecer un tiempo de lectura aproximado.
+
+### Botón de Homework
+
+En caso de que la clase tenga homework (existencia de la variable `homeworkUrl`) se genera un botón junto al tiempo de lectura, con link a la homework.
+
+### Botón de Feedback
+
+En caso de que la clase tenga un `feedbackID` (correspondiente a *AirTable*) renderiza un botón que lleva a dicho form.
+
+## Imágenes
+
+Cualquier imagen que queramos incluir debe estar dentro de la carpeta `assets` (es posible incluir subcarpetas) y por default va a tener **_BoxShadow_**.
+
+![unaImagenConBoxShadow](/_src/assets/1.png)
+
+Si no queremos que tenga _BoxShadow_, sólo necesitamos ponerle al Alt text el valor `no-box`.
+
+![no-box](/_src/assets/1.png)
+
+Es ùtil especialmente para imagenes con fondo transparente, logos, etc.
+
+![no-box](/_src/assets/2.png)
+
+Morbi ultricies euismod tortor, eu finibus massa. In vehicula diam iaculis, pulvinar leo sed, aliquet leo. Suspendisse at hendrerit nisi, vitae finibus enim. Donec id pretium urna. Ut ullamcorper tortor sit amet dolor blandit, quis venenatis urna tempus. Curabitur efficitur blandit blandit. Aliquam placerat justo leo, ut porttitor turpis gravida sed. Suspendisse varius varius urna quis faucibus. Proin lacus erat, mollis nec finibus eget, lobortis vel metus. In elit quam, euismod vitae magna condimentum, cursus condimentum tellus. Quisque vel dictum ante, vel laoreet dolor. Suspendisse eleifend ut nibh nec mollis. Pellentesque dignissim, tortor at pellentesque porttitor, nisi lorem viverra turpis, ut viverra enim ipsum bibendum arcu. Donec lacinia cursus consequat. Fusce quis ultrices magna.
+
+## Contenido oculto en la web
+
+Si queremos mostrar contenido al visualizar el markdown desde nuestro editor de texto, o desde GitHub, pero *NO* cuando generamos el sitio web, debemos utilizar un elemento HTML con la clase `hide`.
+
+Por ejemplo, debemos incluir un link al feedback para quienes esten viendo el contenido desde el editor, pero no queremos que aparezca en la web porque ya tenemos un botón para ello.
+
+Acá tenemos un div con la clase hide, que en la web no se muestra:
+
+<table class="hide" width="100%" style='table-layout:fixed;'>
+  <tr>
+    <td>
+      <a href="https://airtable.com/shrSzEYT4idEFGB8d?prefill_clase=05-JS-IV">
+        <img src="https://static.thenounproject.com/png/204643-200.png" width="100"/>
+        <br>
+        Hacé click acá para dejar tu feedback sobre esta clase.
+      </a>
+    </td>
+  </tr>
+</table>
+
+## Homework
+
+Al final de cada lección generalmente ponemos un enlace a la homework. Al haber un H2 con el texto "Homework" el mismo tendrá un estilo propio.

02 - La segunda clase - Example/README.json

@@ -0,0 +1,8 @@
+{
+  "lessonTitle": "Segunda clase",
+  "permalink": "/Tema_Dos/",
+  "eleventyNavigation": {
+    "key": "Tema 2",
+    "order": 2
+  }
+}

02 - La segunda clase - Example/README.md

@@ -0,0 +1,29 @@
+![HenryLogo](https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Assets/logo-henry-white-lg.png)
+
+# Ejemplo de H1
+
+#### Ejemplo de anexo del H1
+
+En esta clase no se incluyeron `feedbackID` ni `homeworkUrl` por ende los correspondientes botones no son renderizados.
+
+## Un H2
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sem nibh, sagittis nec velit vitae, suscipit consectetur augue. Morbi vel odio nunc. Cras vel lectus non dolor volutpat vulputate. Etiam feugiat est a massa tincidunt tincidunt. Vivamus imperdiet laoreet turpis, sed cursus magna rutrum nec. Phasellus dolor augue, facilisis ac ultricies eget, lacinia id dui. Vivamus faucibus semper diam non fermentum. Nulla congue consequat scelerisque. Cras in aliquam purus. Quisque scelerisque sodales dui vitae luctus. Sed vel ante vitae lorem sagittis rutrum.
+
+Ut placerat ligula est, et interdum est vestibulum eu. Nulla eu leo nec est porta interdum non eu sapien. Curabitur sit amet mattis velit. Fusce sollicitudin condimentum nibh, sit amet eleifend nibh mattis et. Nulla elementum lorem at bibendum mollis. Nulla consectetur tortor ipsum, nec dictum diam sodales sit amet. Nunc placerat, orci a eleifend molestie, nibh odio convallis mi, nec sollicitudin arcu libero et neque. Sed consequat velit eget arcu lobortis, at mollis odio eleifend. Suspendisse nec faucibus ipsum. In sodales, ex nec maximus posuere, libero lectus blandit ipsum, vitae tempus velit turpis sed libero. Ut finibus neque sed dui sagittis rutrum. Maecenas vel magna molestie, faucibus est eget, maximus ipsum.
+
+### Un H3
+
+Morbi ultricies euismod tortor, eu finibus massa. In vehicula diam iaculis, pulvinar leo sed, aliquet leo. Suspendisse at hendrerit nisi, vitae finibus enim. Donec id pretium urna. Ut ullamcorper tortor sit amet dolor blandit, quis venenatis urna tempus. Curabitur efficitur blandit blandit. Aliquam placerat justo leo, ut porttitor turpis gravida sed. Suspendisse varius varius urna quis faucibus. Proin lacus erat, mollis nec finibus eget, lobortis vel metus. In elit quam, euismod vitae magna condimentum, cursus condimentum tellus. Quisque vel dictum ante, vel laoreet dolor. Suspendisse eleifend ut nibh nec mollis. Pellentesque dignissim, tortor at pellentesque porttitor, nisi lorem viverra turpis, ut viverra enim ipsum bibendum arcu. Donec lacinia cursus consequat. Fusce quis ultrices magna.
+
+### Otro H3
+
+Donec posuere suscipit congue. Aenean in bibendum velit. Fusce dignissim mattis augue id fringilla. Praesent eu odio elementum, mattis nulla vitae, fringilla sapien. Suspendisse rutrum ante ex, at volutpat arcu ullamcorper eget. Nulla nec laoreet sapien, eu ultrices nisi. Etiam mattis aliquet vehicula. Nullam non nunc dictum, accumsan ipsum ut, fermentum libero. Aliquam erat volutpat. In ultrices dui eget urna lobortis, scelerisque egestas elit blandit. Pellentesque ultricies, ipsum non venenatis aliquam, orci elit vehicula erat, sed cursus magna justo eu augue. Phasellus viverra aliquet neque, in convallis nisl feugiat sed. Sed eu justo mauris.
+
+## Otro H2
+
+Maecenas semper porttitor rhoncus. Quisque cursus dictum posuere. Nulla venenatis urna eu eros tristique, non tristique metus tempor. Proin eu enim a elit maximus fermentum. Cras et consectetur erat. Nam diam velit, viverra sed suscipit nec, vehicula at felis. Nam molestie diam ligula. Aliquam at erat et ex tempor efficitur. Aliquam ante metus, gravida sed blandit eget, maximus ac enim. Curabitur id orci quis nisi fermentum lacinia. Duis euismod leo eu turpis semper, vel gravida libero aliquet. Fusce ultricies mauris a massa rutrum, vel mattis felis vehicula. Nunc porttitor, massa vel rutrum volutpat, purus mauris accumsan leo, in placerat lacus sem a felis. Nullam mattis lacus vel ipsum congue tincidunt. Cras id leo augue. Etiam at risus in ipsum porttitor molestie.
+
+## Homework
+
+Curabitur dapibus sem nec tellus tempus, at placerat nibh varius. Ut rutrum mi mollis, faucibus orci sed, feugiat elit. Morbi hendrerit convallis nisi, in efficitur est ultricies ac. Fusce varius purus iaculis finibus lobortis. Vivamus accumsan enim non ipsum egestas vehicula. Morbi rhoncus neque at arcu mollis vulputate. Vestibulum porttitor et massa eu bibendum. Fusce mollis interdum nisl quis lacinia. In fermentum ultrices porttitor. Sed cursus commodo erat non vestibulum. Morbi a neque nibh. Etiam in volutpat quam. Vestibulum elit magna, sodales sed dignissim nec, auctor ac risus. Mauris pretium semper nisi. Cras cursus tellus vel molestie dignissim.

README.json

@@ -0,0 +1,8 @@
+{
+  "permalink": "/index.html",
+  "layout": "intro",
+  "eleventyNavigation": {
+    "key": "Intro",
+    "order": 0
+  }
+}

README.md

@@ -0,0 +1,11 @@
+![HenryLogo](https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Assets/logo-henry-white-lg.png)
+
+# Content-template
+
+#### Template para la creación de contenido académico
+
+A partir de este repositorio se puede crear un sitio web, generado automáticamente a partir del contenido de sus archivos markdown.
+
+## Readme principal
+
+Este archivo principal contiene la introducción al contenido del repo. Utiliza el layout `intro` y no genera tabla de contenidos (índice), botón de feedback ni de homework.

_src/data/config.json

@@ -0,0 +1,4 @@
+{
+  "repoTitle": "Titulo del repo",
+  "airtableFormId": "hash del formulario Airtable"
+}

_src/data/layout.js

@@ -0,0 +1 @@
+module.exports = 'lesson.njk'

_src/layouts/intro.njk

@@ -0,0 +1,72 @@
+---
+logoNav: 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Assets/logo-henry-white-sm.png'
+favicon: 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Assets/favicon.png'
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="{{ 'https://kit.fontawesome.com/2c38f3d850.js' | url }}" crossorigin="anonymous"></script>
+    <script src="{{ 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' | url }}" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <link rel="icon" type="image/x-icon" href="{{ favicon }}">
+    <link href="{{ 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' | url }}" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/fonts.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/header.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/main.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/topbar.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/sidebar.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/lessonIntro.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/code.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/footer.css' | url }}">
+    <link rel="stylesheet" href="{{ 'https://henry-11ty-resources.s3.sa-east-1.amazonaws.com/Styles/responsive.css' | url }}">
+    <title>{{ config.repoTitle }}</title>
+  </head>
+
+  <body>
+    <div class="headerResponsive">
+      <div class="leftContent">
+        <span><img src="{{ logoNav | url }}" alt='logo Henry' height=22px class="d-inline-block align-text-top"></span><span>{{ config.repoTitle }}</span>
+      </div>
+      <div class="menuDiv">
+        <input type="checkbox">
+        <i class="fas fa-bars"></i>
+        <i class="fas fa-times"></i>
+        <nav>
+          {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+        </nav>
+      </div>
+    </div>
+
+    <div class="headerContainer">
+      <div class="headerContained">
+        <img src="{{ logoNav | url }}" alt='logo Henry' height=27px class="d-inline-block align-text-top">
+        <div>
+          <span>{{ config.repoTitle }}</span>
+        </div>
+      </div>
+    </div>
+
+    <main>
+      <div class="topnav" id='myTopnav' >
+        {# Navigation #}
+        {{ collections.all | eleventyNavigation | bootstrapNav({
+            listChildItemClass: "dropdown-menu shadow", 
+            activeKey: eleventyNavigation.key,
+            listItemClass: "link",
+            activeListItemClass: "activeLink"
+          }) | safe }}
+      </div>
+
+      <div class='lesson'>
+        <div>
+          {# Lesson (markdown content) #}
+          {{ content | safe }}
+        </div>
+      </div>
+
+    </main>
+
+  </body>
+</html>