Move to a Metalsmith based static generated site with new design (#62)

* clean up for metalsmith PoC

* metalsmith PoC

* add basic nutjuck

* remove handlebars

* structure layouts and component folders

* create an event from a fake file (stubbed api)

* use yarn

* Add README.md

* Add sass support

* Remove build folder from repo

* Reestrucutre folders

* Base scss structure

* Add basic next events layout

* Show upcoming events

* Show time in Madrid timezone

* Add basic event page and navigation

* Use variables for margins

* Add event details

* Add editor config

* Improve readability

* Add actions to event buttons

* Fixes 53. Add title & description for opengraph

* Add links to footer

* Basic new event form

* Add navigation to new event form

* Add html5 required validation

* Fix typos in readme

* prepare repo to hold js files

* Fix routes

* Add date, time inputs and css validation

* Fix empty event hashtag image

* Submit new event form to api, show notifications

* Serve logo from assets

* Read correct env variable for api root

* Add media queries

* Able to consume https apis

* Fix datetime format

* Fix timezone

* Sanitize markdowns to avoid simple xss

* Improve page titles

* Basic job listing, detail and form

* Add style to job detail

* Add job links to footer

* Add freshness info to jobs

* Add files via upload

* Add font

* Add link base style

* Add style to event image hover

* Add more styles

* Add selection style

* Send new job

* Refactor production build

* Add css, js fingerprint

* Add favicon

* Refactor build file

* Refactor, move api version to api root

* Add Content Security Policy. Fix some favicons

* Improve styles for menu, buttons. Add CoC to new conference

* Randomize nonce

* Add rss to jobs and events

* Add company name to rss item title. Refactor

* Fix event img size in mobile

* Make next event clickable area bigger

* Force code blocks to repect column rule

* Use api through its dns

* Make event page more like job page

* Remove hr from footer

* Remove hr from job board

* Extend contribution guide

* Add info in contribution guide on how to launch the site using Python 3

* Configure ESLint and Prettier

Format all files, resolve all linting errors and configure a lint
workflow for GitHub Actions.

* Use VLCTechHub API v2

* Use two-phase publishing workflow with API v2

* Add license text

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8
@@ -13,22 +12,8 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2
 
-[*.js]
-indent_style = space
-indent_size = 2
-
-[*.hbs]
+[*.njk]
 insert_final_newline = false
-indent_style = space
-indent_size = 2
-
-[*.css]
-indent_style = space
-indent_size = 2
-
-[*.html]
-indent_style = space
-indent_size = 2
 
 [*.{diff,md}]
 trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,4 @@
+/bin/
+/dist/
+/tmp/
+/node-modules/

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "globals": {
+    "Site": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018
+  },
+  "rules": {
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "never"],
+    "no-console": "off"
+  }
+}

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Lint
+
+on: [push]
+
+jobs:
+  ESLint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v1
+      - name: Set up Node 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - name: Set up ESLint
+        run: npm install --global eslint
+      - name: Run ESLint checks
+        run: eslint .
+
+  Prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v1
+      - name: Setup up Node 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - name: Set up Prettier
+        run: npm install --global prettier
+      - name: Run Prettier checks
+        run: prettier -c "**/*.{md,scss,js,json}"

.github/workflows/site-refresh.yml

@@ -2,22 +2,29 @@ name: Refresh site in Surge
 
 on:
   schedule:
-      - cron: '*/15 * * * *'
+    - cron: "*/15 * * * *"
 jobs:
   refresh:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout source code
+        uses: actions/checkout@v1
+      - name: Set up Node 10.x
+        uses: actions/setup-node@v1
         with:
-          ref: metalsmith
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - run: yarn install
-      - run: yarn run build
+          node-version: 10.x
+      - name: Set up dependencies
+        run: yarn install
+      - name: Build site
+        run: yarn run build
         env:
           NODE_ENV: production
-      - run: npx surge --project $GITHUB_WORKSPACE/dist --domain vlctechhub-revamp.surge.sh
+      - name: Publish site to Surge
+        run: npx surge --project $GITHUB_WORKSPACE/dist --domain vlctechhub.org
         env:
-          SURGE_LOGIN: ${{secrets.SURGE_LOGIN}}        
+          SURGE_LOGIN: ${{secrets.SURGE_LOGIN}}
           SURGE_TOKEN: ${{secrets.SURGE_TOKEN}}
+      - name: Report published items
+        run: yarn run report-published
+        env:
+          NODE_ENV: production

.gitignore

@@ -1,17 +1,14 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
-/tmp
+/tmp/
+/dist/
 
 # dependencies
-/node_modules
-/bower_components
+/node_modules/
 
 # misc
 /.sass-cache
-/connect.lock
-/coverage/*
-/libpeerconnection.log
-npm-debug.log*
-testem.log
+/testem.log
+/yarn-error.log
+

.prettierignore

@@ -0,0 +1,4 @@
+/bin/
+/dist/
+/tmp/
+/node-modules/

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": false
+}

CONTRIBUTING.md

@@ -0,0 +1,113 @@
+# Preguntas
+
+Esta es la web de http://vlctechhub.org. Si tienes alguna pregunta puedes contactar con el equipo en el canal #vlctchhub de https://slack.vlctechhub.org
+
+# Bugs y petición de funcionalidades
+
+Crees que has encontrado un bug o tienes una nueva funcionalidad que proponer? Háznoslo saber!
+
+## Cómo reportar un bug
+
+1. Actualiza al commit mas reciente de master. Es posible que el bug ya esté arreglado.
+
+2. Busca issues similares, es posible que alguien haya encontrado este bug antes.
+
+3. [Abre una issue](https://github.com/VLCTechHub/VLCTechHub-site/issues/new). Contra más información proveas, más fácil es para nosotros validar que se trata de un bug y así actuaremos lo más rápido posible.
+
+## Petición de funcionalidad
+
+1. Proporciona una explicación clara y detallada de la funcionalidad que quieres y por qué es importante anyadirla. Ten en cuenta que queremos funcionalidades que resulten útiles a la mayoría de usuarios en lugar de un pequenyo conjunto de estos.
+2. Después de comentar la funcionalidad es posible que [pruebes a crear un Pull Request](https://help.github.com/en/articles/creating-a-pull-request). Si puedes, empieza escribiendo algo de código. Siempre tenemos más cosas que hacer que tiempo disponible para hacerlas. Si puedes escribir algo de código esto acelerará el proceso.
+
+# 🚀 Construyendo el sitio web
+
+La web de VLCTechHub está desarrollada como un sitio estático con el generador metalsmith.
+
+1. **Instala yarn**
+
+   Yarn es un gestor de dependencias de proyectos en node. Para instalarlo en tu sistema sigue [sus instrucciones](https://yarnpkg.com/en/docs/install).
+
+2. **Clona este repo en tu máquina**
+
+```sh
+  git clone [email protected]:VLCTechHub/VLCTechHub-site.git
+```
+
+3. **Instala las dependencias con yarn**
+
+Entra en el directorio creado e instala las dependencias.
+
+```sh
+  cd VLCTechHub-site/
+  yarn install
+```
+
+4. **Construye el sitio**
+
+Cuando ejecutas el comando `build` el sitio se contruye dentro del directorio _dist_.
+
+```sh
+  yarn run build
+```
+
+Cuando se construye el site, se usa la API de vlctechhub. Por defecto, usa la dirección local de desarrollo `localhost:5000` para hacer llamadas a la API y enviar los formularios de creación.
+
+Para construir el sitio contra producción hay que construir el sitio con la variable de entorno `NODE_ENV` con el valor `production`:
+
+```sh
+ NODE_ENV=production yarn run build
+```
+
+5. **Levanta un servidor para ver el sitio**
+
+Ya tienes construido el sitio estático! Puedes levantar un sencillo servidor con Python desde la linea de comandos.
+
+Con Python 2:
+
+```sh
+  cd dist/
+  python -m SimpleHTTPServer --port=8080
+```
+
+Con Python 3:
+
+```sh
+  cd dist/
+  python3 -m http.server 8080
+```
+
+Ahora el sitio esta corriendo en `http://localhost:8080`.
+
+# Contribuyendo con pull requests
+
+Nos encantan los pull requests! Aquí tienes una breve guía de como contribuir:
+
+1. Forkea el repositorio
+
+2. Introduce tus cambios siguiendo la guía de estilos de sintaxis:
+
+- Dos espacios, no tabs
+- Sigue las convenciones que vas en el código
+
+3. Commitea tus cambios
+
+4. Pushea a tu fork y crea un pull request. Proporciona alguna explicación de por qué has hecho esos cambios.
+
+## 🎓 Aprendiendo MetalSmith y Nunjucks
+
+La documentación de MetalSmith se encuentra en [su web](https://metalsmith.io).
+
+El sistema de plantillas que usa este repo es [Nunjucks](https://mozilla.github.io/nunjucks/), un lenguaje de plantillas sencillo y potente desarrollado por Mozilla.
+
+La jerarquia de plantillas de Nunjucks esta basada en un artículo sobre [patrones de disenyo orientados a componentes](https://css-tricks.com/component-led-design-patterns-nunjucks-grunt/) sobre Nunjucks.
+
+## Creando una página nueva
+
+Para crear una página nueva se necesitan dos cosas: una plantilla y unos datos.
+Por ejemplo: todos los eventos comparten la misma plantilla `templates/event.njk`, cada página de evento son los datos de un evento con la plantilla anterior.
+
+Si ya existe una plantilla para la página que quieres crear, tan solo deberas inclucir el fichero de los datos de la página. Normalmente sera un fichero markdown con extension `.md` dentro de la carpeta `data`. Ten en cuenta que la estructura que elijas determinará la url final.
+
+Si la plantilla no existe, puedes crearla dentro de `templates` y luego usarla siguiendo los pasos anteriores.
+
+Para modificar/anyadir css, javascript y/o imagenes usa la carpeta `assets`

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 VLCTechHub
+
+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.