Initial commit

This commit is contained in:
Horacio Gonzalez
2021-12-03 14:05:19 +01:00
commit 88765f0964
117 changed files with 14524 additions and 0 deletions

94
.eleventy.js Normal file
View File

@@ -0,0 +1,94 @@
/**
* @file Configures preferences for Eleventy
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/config/ 11ty Documentation}
*/
// Require native Node.js modules
import { readFileSync } from 'fs'
/**
* Require the includes module for the following.
*
* - Filters (for modifying content on input)
* - Shortcodes (for reusable content)
* - Transforms (for modifying a templates output)
*
* Storing these modules in separate directories,
* rather than all in this file,
* helps keep the codebase organized—at least thats the idea.
*/
import includes from './_includes/'
/**
* 11tys configuration module
* @module .eleventy
* @param {Object} eleventyConfig 11tys Config API
* @return {Object} 11tys Config object optional
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
*/
export default function (eleventyConfig) {
// Pass 11tys Conig object to the includes module (~/_includes)
includes(eleventyConfig)
/**
* Combine data in the Eleventy data cascade, rather than overwriting it
* @see {@link https://www.11ty.dev/docs/data-deep-merge/ Data deep merge in 11ty}
*/
eleventyConfig.setDataDeepMerge(true)
/**
* Copy static assets to the output directory
* @see {@link https://www.11ty.dev/docs/copy/ Passthrough copy in 11ty}
*/
eleventyConfig.addPassthroughCopy('css')
eleventyConfig.addPassthroughCopy('img')
/**
* Have Eleventy watch the following additional files for live browsersync
* @see @{@link https://www.11ty.dev/docs/config/#add-your-own-watch-targets Add your own watch targets in 11ty}
*/
eleventyConfig.addWatchTarget('./**/*.css')
eleventyConfig.addWatchTarget('./**/*.js')
eleventyConfig.addWatchTarget('./**/*.md')
eleventyConfig.addWatchTarget('./**/*.jpg')
eleventyConfig.addWatchTarget('./**/*.png')
/**
* Serve the rendered 404 page when using `eleventy --serve` locally
* @see {@link https://www.11ty.dev/docs/quicktips/not-found/#with-serve Adding a 404 page in 11ty}
*/
eleventyConfig.setBrowserSyncConfig({
callbacks: {
ready: (err, bs) => {
bs.addMiddleware("*", (req, res) => {
const content_404 = readFileSync('_site/404.html');
// Provides the 404 content without redirect
res.write(content_404);
// Add 404 http status code in request header
// res.writeHead(404, { "Content-Type": "text/html" })
res.writeHead(404);
res.end()
})
}
}
})
// If you want to use an alternative file structure,
// then you can uncomment this return statement
// and change the values for one or more of these directories
// (defaults shown).
return {
dir: {
input: '.',
includes: '_includes',
data: '_data',
output: '_site'
},
pathPrefix: '/',
}
}

8
.eleventyignore Normal file
View File

@@ -0,0 +1,8 @@
# Eleventy will not process files or globs listed here
# Put individual file paths or globs on separate lines
# Files listed in .gitignore are automatically ignored
# For more information, see https://www.11ty.dev/docs/ignores/
# Ignore all README files
./CONTRIBUTING.md
./**/README.md

5
.esmrc.json Normal file
View File

@@ -0,0 +1,5 @@
{
"cjs": {
"dedefault": true
}
}

27
.github/workflows/main.yml vendored Normal file
View File

@@ -0,0 +1,27 @@
name: Eleventy Build
on: [push]
jobs:
build_deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [ 16.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@master
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build --if-present
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.RDV_SPEAKERS }}
publish_branch: gh-pages
publish_dir: _site
destination_dir: les-briques-du-web
external_repository: RdvSpeakers/rdv-speakers

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
# Ignore installed npm packages
node_modules/
# Ignore eleventy output during manual tests
_site/

1
.nvmrc Normal file
View File

@@ -0,0 +1 @@
17.1.0

1
.tool-versions Normal file
View File

@@ -0,0 +1 @@
nodejs 12.16.2

88
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,88 @@
# Contributing
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project.
## Pull Request Process
1. Ensure any install or build dependencies are removed before the end of the layer when doing a
build.
2. Ensure your work is thoroughly tested, to the best of your abilities
3. You may merge the Pull Request in once you have the sign-off from a maintainer
## Code of Conduct
### Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
### Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
### Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
### Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
### Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at reubenlillie@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
### Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

22
LICENSE Normal file
View File

@@ -0,0 +1,22 @@
MIT License
Copyright (c) 2020 Reuben L. Lillie
Copyright (c) 2021 Horacio Gonzalez
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.

65
README.md Normal file
View File

@@ -0,0 +1,65 @@
# Website for *Le Camping des Speakers*
🚧 Still a work in progress 🚧
## An [Eleventy](https://11ty.dev/) site
*[Le Camping des Speakers](https://github.com/RdvSpeakers/camping-des-speakers-website/)* is statically generated from this source code with the [Eleventy](https://11ty.dev/) static site generator using [JavaScript templates (*.11ty.js)](https://11ty.dev/languages/javascript/).
It's based on [eleventy-dot-js-blog](https://gitlab.com/reubenlillie/eleventy-dot-js-blog) started made by [Reuben L. Lillie](https://twitter.com/reubenlillie).
## Getting started
Run a local copy of this site on your computer.
Install [Node.js](https://nodejs.org/) on your machine (see [11ty documentation for version requirements](https://www.11ty.dev/docs/getting-started/)).
Then enter the following commands into your terminal:
### 1. Clone this repository and all its dependencies
```cli
git clone git@gitlab.com:reubenlillie/eleventy-dot-js-blog.git my-blog-directory-name
```
### 2. Go to the working directory
```cli
cd my-blog-directory-name
```
Specifically take a look at the file named [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js) to see if you want to [configure any Eleventy options differently](https://www.11ty.dev/docs/config/).
### 3. Install the project dependencies with [NPM](https://www.npmjs.com/)
```cli
npm install
```
### 4. Edit the `.js` files in the [`_data`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_data/site.js) directory with your site information
### 5. Run Eleventy
```cli
npx eleventy
```
Or build and host locally for local development
```cli
npx eleventy --serve
```
Or build automatically when a template changes
```cli
npx eleventy --watch
```
Or in debug mode
```cli
DEBUG=* npx eleventy
```
&copy; 2021 by [Horacio Gonzalez](https://twitter.com/LostInBrittany)

70
_data/README.md Normal file
View File

@@ -0,0 +1,70 @@
# Site web des Briques du Web
## An [Eleventy](https://11ty.dev/) site
*[drowstar.com](https://drowstar.com)* is statically generated from this source code with the [Eleventy](https://11ty.dev/) static site generator using [JavaScript templates (*.11ty.js)](https://11ty.dev/languages/javascript/).
It's based on [eleventy-dot-js-blog](https://gitlab.com/reubenlillie/eleventy-dot-js-blog) started made by [Reuben L. Lillie](https://twitter.com/reubenlillie).
## Getting started
Run a local copy of this site on your computer.
Install [Node.js](https://nodejs.org/) on your machine (see [11ty documentation for version requirements](https://www.11ty.dev/docs/getting-started/)).
Then enter the following commands into your terminal:
### 1. Clone this repository and all its dependencies
```cli
git clone git@gitlab.com:reubenlillie/eleventy-dot-js-blog.git my-blog-directory-name
```
### 2. Go to the working directory
```cli
cd my-blog-directory-name
```
Specifically take a look at the file named [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js) to see if you want to [configure any Eleventy options differently](https://www.11ty.dev/docs/config/).
### 3. Install the project dependencies with [NPM](https://www.npmjs.com/)
```cli
npm install
```
### 4. Edit the `.js` files in the [`_data`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_data/site.js) directory with your site information
### 5. Run Eleventy
```cli
npx eleventy
```
Or build and host locally for local development
```cli
npx eleventy --serve
```
Or build automatically when a template changes
```cli
npx eleventy --watch
```
Or in debug mode
```cli
DEBUG=* npx eleventy
```
## Publish your own copy
The command `npm run build` will generate a copy of the site files in a `_site` directory, which you can deploy with any hosting service.
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com.com/LostinBrittany/drowstar-com)
&copy; 2021 by [Horacio Gonzalez](https://twitter.com/LostInBrittany)

49
_data/author.js Normal file
View File

@@ -0,0 +1,49 @@
/**
* @file Contains global data about the site author
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Global author data module
* @module _data/author
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
name: {
fullName: 'Horacio Gonzalez',
givenName: 'Horacio',
surname: 'Gonzalez'
},
social: {
// Add or remove accounts for social media platforms
accounts: [
{
name: 'GitHub',
url: 'https://github.com/LostInBrittany/'
},
{
name: 'GitLab',
url: 'https://gitlab.com/LostInBrittany/'
},
{
name: 'Instagram',
url: 'https://www.instagram.com/LostInBrittany/'
},
{
name: 'LinkedIn',
url: 'https://linkedin.com/in/horaciogonzalez/'
},
{
name: 'Twitter',
url: 'https://twitter.com/LostInBrittany/'
}
]
}
}

25
_data/colophon.js Normal file
View File

@@ -0,0 +1,25 @@
/**
* @file Contains global data for the site colophon
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Global colophon data module
* @module _data/colophon
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
fr: {
generator: '🏗️ Créé por <a href=\"https://twitter.com/LostInBrittany\">@LostInBrittany</a>',
languages: 'Code source écrit en 🍦 vanilla JavaScript, 🕸️ HTML semantique, 🎨 CSS progressivement améliorée, et 🧂 un soupçon de Markdown.',
git: '💝 Basé dans le <a href=\"http://gitlab.com/reubenlillie/eleventy-dot-js-blog/\">eleventy-dot-js-blog</a> starter pour <a href=\"https://11ty.dev/\">🕚 Eleventy</a>, le générateur de sites statiques.',
host: '🚀 Hébérgé sur <a href="https://pages.github.com/">GitHub Pages</a>'
}
}

141
_data/colors.js Normal file
View File

@@ -0,0 +1,141 @@
/**
* @file Contains global data for color values
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Global site data module
* @module _data/colors
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
/*
* Colors generated around the named color, plum velvet
* @see {@link https://convertingcolors.com/hex-color-7D0552.html?search=Hex(7d0552) Converting Colors}
*/
grayscale: {
white: {
hex: '#fff',
rgb: '255,255,255'
},
100: {
hex: '#e6e6e6',
rgb: '230,230,230'
},
200: {
hex: '#ccc',
rgb: '204,204,204'
},
300: {
hex: '#b3b3b3',
rgb: '179,179,179'
},
400: {
hex: '#999',
rgb: '153,153,153'
},
500: {
hex: '#808080',
rgb: '128,128,128'
},
600: {
hex: '#666',
rgb: '102,102,102'
},
700: {
hex: '#323232',
rgb: '828282'
},
800: {
hex: '#333',
rgb: '515151'
},
900: {
hex: '#1a1a1a',
rgb: '26,26,26'
}
},
main: {
100: {
hex: '#fdceec',
rgb: '253,206,236'
},
200: {
hex: '#fb9dd9',
rgb: '251,157,217'
},
300: {
hex: '#f96cc7',
rgb: '249,108,199'
},
400: {
hex: '#f73bb4',
rgb: '247,59,180'
},
500: {
hex: '#f50aa1',
rgb: '245,10,161'
},
600: {
hex: '#c40881',
rgb: '196,8,129'
},
700: {
hex: '#7d0552',
rgb: '125,5,82'
},
800: {
hex: '#620440',
rgb: '984,4,64'
},
900: {
hex: '#310220',
rgb: '49,2,32'
}
},
accent: {
100: {
hex: '#decefc',
rgb: '222,206,253'
},
200: {
hex: '#be9dfb',
rgb: '190,157,251'
},
300: {
hex: '#9d6cf9',
rgb: '157,108,249'
},
400: {
hex: '#7d3bf7',
rgb: '125,59,247'
},
500: {
hex: '#5c0af5',
rgb: '92,10,245'
},
600: {
hex: '#4a08c4',
rgb: '74,8,196'
},
700: {
hex: '#2f057d',
rgb: '47,5,125'
},
800: {
hex: '#250462',
rgb: '37,4,98'
},
900: {
hex: '#120231',
rgb: '18,2,49'
}
}
}

28
_data/copyright.js Normal file
View File

@@ -0,0 +1,28 @@
/**
* @file Contains global copyright data
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Global copyright data module
* @module _data/copyright
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
* @see {@link https://creativecommons.org/ Creative Commons}
*/
export default {
// Use current year
year: new Date().getFullYear(),
holder: '<a href=\"https://twitter.com/LostInBrittany\">LostInBrittany</a>',
license: {
abbr: 'CC BY-SA',
name: 'Creative Commons Attribution-ShareAlike 4.0 International license',
},
url: 'https://creativecommons.org/licenses/by-sa/4.0/'
}

38
_data/labels.js Normal file
View File

@@ -0,0 +1,38 @@
/**
* @file Contains global data about the chronicles
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Clobal data about the chronicles
* @module _data/chronicles
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
meteo_du_web: {
name: "La Météo du Web",
emoji: "☀️",
},
entretien: {
name: "L'Entretien",
emoji: "🎙️",
},
focus_api: {
name: "Le Focus API",
emoji: "⁉️",
},
weekly_project: {
name:"Le Projet de la Semaine",
emoji: "🛠️",
},
anecdocte_historique: {
name: "L'Anecdote Historique",
emoji: "📜",
}
}

23
_data/links.js Normal file
View File

@@ -0,0 +1,23 @@
/**
* @file Contains global data about the links
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Clobal data about the chronicles
* @module _data/chronicles
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
anchor: 'https://anchor.fm/les-rdv-des-speakers',
twitter: 'https://twitter.com/LesBriquesDuWeb',
youtube: 'https://www.youtube.com/watch?v=m-i8f-a6K4Y&list=PLEkzErZ5n2i610Wmi2tstCoTdhKyJafqY',
spotify: 'https://open.spotify.com/show/2OKbLLelv3Q2hVZsQnBW2u?si=QdRSoGPZRXqtmVNv3pa9ew',
apple_podcasts: 'https://podcasts.apple.com/nl/podcast/le-rendez-vous-des-speakers/id1559843293?l=en'
}

13
_data/project.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* @file Exposes environment variables to templates
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/**
* Uses Node.jss `process.env` property
* @module _data/project
* @see {@link https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables Environment variables in 11ty}
*/
export default {
environment: process.env.ELEVENTY_ENV
}

87
_data/site.js Normal file
View File

@@ -0,0 +1,87 @@
/**
* @file Contains global data for configuring the site
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
// Edit the values for the properties in this file to fit your site.
// You can add as many new properties as you want,
// but you shouldnt remove any of the ones already included here
// without also editing the files where those properties are used.
// Otherwise, the site will probably break.
/**
* Global site data module
* @module _data/site
* @see {@link https://www.11ty.dev/docs/data-global/ Global data files in 11ty}
*/
export default {
// The root for the site domain (without a trailing slash)
baseUrl: 'https://camping-speakers.fr',
pathPrefix: '',
// Uses this locale when one is not set in content/content.11tydata.js
defaultLocale: 'fr',
// Localized strings and other options for Spanish (es)
// To add a language, copy this object, then change the values
logo: {
url: 'img/logos/logo_color_text.png'
},
fr: {
title: 'Le Camping des Speakers',
// French as used in France
locale: 'fr',
// The subtitle, slogan, or catchphrase for your site,
// used in _includes/shortcodes/site-header
tagline: "Conférence de Devs dans le Golfe du Morbihan",
when: "9-10 Juin 2022",
// Punctuation between a title and subtitle,
// used in _includes/shortcodes/title-tag
separator: ' - ',
// The link text for skip-to-content lins, used by screen readers
skipToContent: 'Aller au contenu',
// The link text to invite users to edit a page in the project Git repository
// Link path stored in package.json
editThisPage: '📝 Éditer la page',
// The paged navigation for larger archives of content
// used in _includes/shortcodes/pagination-nav
pagination: {
// The aria-label for a pagination navigation
navLabel: 'Pagination',
// The aria-label for pages within a pagination navigation
pageLabel: 'Page',
// The link text for the first page within a pagination navigation
first: '1',
// The aria-label for the first page within a pagination navigation
firstLabel: '1',
// The link text for the previous page within a pagination navigation
previous: 'Précédente',
// The link text for the next page within a pagination navigation
next: 'Suivante',
// The link text for the last page within a pagination navigation
last: 'Dernière',
// The aria-label for the last page within a pagination navigation
lastLabel: 'Dernière page'
},
team: {
url: 'team',
},
guests: {
url: 'guests',
},
/*
* Options for displaying dates in this locale
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString `toLocaleDateString()` on MDN}
*/
dateOptions: {
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC'
},
// Options for navigation elements
nav: {
// The `aria-label` to apply to the primary navigation
primary: 'primary navigation'
},
},
}

5
_includes/README.md Normal file
View File

@@ -0,0 +1,5 @@
# eleventy-dot-js-blog/\_includes
In Eleventy, the [includes directory](https://www.11ty.dev/docs/config/#directory-for-includes) is meant for reusable layouts and other extentions. Templates can use these files, but the files themselves will not be processed by Eleventy as templates.
The [`index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/index.js) file here is used to configure modules in this directory with Eleventy (in [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js)).

View File

@@ -0,0 +1,5 @@
# eleventy-dot-js-blog/\_includes/filters
In Eleventy, [filters](https://www.11ty.dev/docs/filters/) can modify content before templates are processed. They are accessible in templates via the keyword `this`.
The [`index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/filters/index.js) file here is used to configure filters in this directory with Eleventy (in [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js), loaded in [`_includes/index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/index.js)).

View File

@@ -0,0 +1,28 @@
/**
* @file Defines a filter to convert a files contents to a string
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/*
*Import Node.js native fs module for interacting with the file system
*/
import { readFileSync } from 'fs'
/**
* An Eleventy filter for stringifying a file
* @module _includes/filters/file-to-string
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
export default eleventyConfig =>
/**
* Converts a files contents to a string
* @param {String} file The path of the file to convert
* (relative to the input directory)
* @return {String} The files contents
* @example `${this.fileToString('css/inline.css')}`
*/
eleventyConfig.addFilter('fileToString', file =>
readFileSync(`${file}`).toString()
)

View File

@@ -0,0 +1,26 @@
/**
* @file Imports filters and configures them with 11ty (.eleventy.js)
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
// Import filters to include
import fileToString from './file-to-string.js'
import minifyCSS from './minify-css.js'
import minifyJS from './minify-js.js'
/**
* A loader module for filters
* @module _includes/filters
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
* @see {@link https://www.11ty.dev/docs/filters/ Filters in 11ty}
*/
export default function (eleventyConfig) {
// Function calls to filters to include
fileToString(eleventyConfig)
minifyCSS(eleventyConfig)
minifyJS(eleventyConfig)
return
}

View File

@@ -0,0 +1,37 @@
/**
* @file Defines a filter to minify CSS inline
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/*
* Import Jakup Pawlowiczs Clean-CSS module
* @see {@link https://github.com/jakubpawlowicz/clean-css GitHub}
*/
import CleanCSS from 'clean-css'
/**
* An Eleventy filter for minifying CSS inline
* @module _includes/filters/minify-css
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
export default eleventyConfig =>
/**
* Minifies CSS
* @param {String} stylesheet A raw stylesheet
* @return {String} The minified stylesheet
* @example `${this.minifyCSS($this.fileToString('css/inline.css'))}`
* @see {@link https://github.com/jakubpawlowicz/clean-css#minify-method clean-css on GitHub}
* @see {@link https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables Environment variables in 11ty}
*/
eleventyConfig.addFilter('minifyCSS', stylesheet => {
// Only minify stylesheets for production
if(process.env.ELEVENTY_ENV === 'production') {
var minified = new CleanCSS({}).minify(stylesheet).styles
return minified
}
return stylesheet
})

View File

@@ -0,0 +1,41 @@
/**
* @file Defines a filter to minify JavaScript inline
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/*
* Import Terser module
* @see {@link https://github.com/terser-js/terser GitHub}
*/
import Terser from 'terser'
/**
* An Eleventy filter for minifying JavaScript inline
* @module _includes/filters/minify-js
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
export default eleventyConfig =>
/**
* Minify JavaScript
* @param {String} script A JavaScript files contents
* @return {String} The minified script
* @example `${this.minifyJS($this.fileToString('/includes/assets/js/gratuitip.js'))}`
* See {@link https://www.11ty.dev/docs/quicktips/inline-js/ 11ty docs}
* @see {@link https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables Environment variables in 11ty}
*/
eleventyConfig.addFilter('minifyJS', script => {
// Only minify scripts for production
if(process.env.ELEVENTY_ENV === 'production') {
var minified = Terser.minify(script)
if(minified.error) {
console.log('Terser error: ', minified.error)
return script
}
return minified.script
}
return script
})

25
_includes/index.js Normal file
View File

@@ -0,0 +1,25 @@
/**
* @file Imports modules and configures them with 11ty (.eleventy.js)
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
// Import modules to include
import filters from './filters/index.js'
import shortcodes from './shortcodes/index.js'
import transforms from './transforms/index.js'
/**
* A loader module for includes
* @module _includes/index
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
*/
export default function (eleventyConfig) {
// Function calls to modules to include
filters(eleventyConfig)
shortcodes(eleventyConfig)
transforms(eleventyConfig)
return
}

View File

@@ -0,0 +1,15 @@
# eleventy-dot-js-blog/\_includes/layouts
In Eleventy, [layouts](https://www.11ty.dev/docs/layouts/) are reusable templates that can also be used to wrap other content.
You can access layouts in templates ([and chain them with other layouts](https://www.11ty.dev/docs/layout-chaining/)) via the `layout` property in Eleventys `data` object.
Eleventy supports a number of different [template languages](https://www.11ty.dev/docs/languages/). This project specifically leverages [JavaScript templates](https://www.11ty.dev/docs/languages/javascript/) (files ending in the `*.11ty.js` extension). Not only do JavaScript templates process the fastest, they are also the most flexible. Using `*.11ty.js` templates opens up the wider world of JavaScript and the Node.js ecosystem to your presentational layer. If you can imagine doing something on a website with JavaScript, you can probably achieve it with Eleventy!
Other template languages may do the job. Some folks find them attractive because of their (sometimes) shorter syntax and because there are (at the time of this writing) more plentiful code samples in those languages floating around the Web.
But template languages come at a cost. They inherently carry higher techinical debt—in addition to a basic understanding of JavaScript, you also have to become familiar with _that_ template language. Worse, you are often limited by what that template language is designed to do. In other words, using that template language makes you subject to the scope, opinions, and priorities of the maintainers for that language. By using `*.11ty.js` as often as possible, we can simultaneously lower that barrier to entry and reduce the overall cognitive overload when building and maintaining a project. Its a way of showing kindness to yourself as well as to whomever may come to the codebase after you.
Although humans have been using JavaScript to create these other template languages for “quite a while” (as far as measuring time in the computer-age is concerned), writing templates in vanilla JavaScript is still a rather novel concept. In fact, Eleventy—launched in December 2017—is at the frontier of this newold way of creating content for the Web.
A number of JavaScript frameworks (like React or Vue.js, among others) advertise writing templates in vanilla JavaScript as a major selling point. But Eleventy is unique: vanilla JavaScript templating works out of the box _without weighing down your codebase_ and _without burdening your users with any client-side JavaScript_. Eleventy is _just JavaScript_: clean, simple, fast, flexible, and limited only by your imagination.

View File

@@ -0,0 +1,36 @@
/**
* @file Defines the chained template for a collection archive page
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
return `<article>
<header class="article-header">
<h2>${data.title}</h2>
</header>
${data.content}
${this.archive(data, data.pagination.items)}
<footer>
${this.paginationNav(data)}
</footer>
</article>`
}

View File

@@ -0,0 +1,29 @@
/**
* @file Defines the base template
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#function JavaScript functions as templates in 11ty}
*/
/**
* Base JavaScript Template module
* @module _includes/layouts/base
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
* @see {@link https://www.11ty.dev/docs/shortcodes/ Shortcodes in 11ty}
*/
export function render(data) {
var l10n = data.site[data.locale]
return `<!DOCTYPE html>
<html lang="${data.locale ? l10n.locale : data.site.defaultLocale}">
${this.headTag(data)}
<body class="${(data.tags && data.tags.indexOf('posts')>=0) ? 'posts' : ''}">
${this.siteHeader(data)}
<main>
${data.content}
</main>
${this.siteFooter(data)}
</body>
</html>`
}

View File

@@ -0,0 +1,110 @@
/**
* @file Defines the chained template for episodes
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
var util = require('util')
/**
* The content of the home page template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
let teamMembers =
data.collections.team.map((item) => item.template.frontMatter.data);
let guestList =
data.collections.guests.map((item) => item.template.frontMatter.data);
let l10n = data.site[data.locale];
return `
<div class="episode_container">
<article class="episode_details">
<header class="article-header">
<div class="episode">
<div class="number">
${data.name}
</div>
<time>${this.pageDate(data)}</time>
</div>
<h1>${data.title}</h1>
<h2>${data.subtitle}</h2>
</header>
<div class="card">
<img src="${this.url(`/img/${data.name}/card.jpg`)}">
${data.references ? `
<div class="links">
${data.references
.map((ref) => {
return `<div class="link"><p>${ref.msg}</p> ${this.socialIcons(ref)}</div>`;
}).join('\n') }
</div>
` : ''}
</div>
<div class="chronicles">
<p>Au programme de l'émission</p>
<ul>
${
data.chronicles ? data.chronicles
.map((item) => {
return `
<li>
<h3 class="chronicle_name">
${data.labels[item.key].emoji} ${data.labels[item.key].name}
</h3>
${item.title ? `<h4>${item.title}</h4>` : ''}
${item.subtitle ? `<h5>${item.subtitle}</h5>` : ''}
${item.guests ?
`<p>Avec ${item.guests
.map((aGuest) =>{
return `<a href="${this.url(`${l10n.guests.url}/${aGuest}/`)}">${
guestList
.find((guest) => guest.key == aGuest) ?
guestList
.find((guest) => guest.key == aGuest)
.name.trim() : ''
}</a>`;
})
.join(', ').replace(/, ([^,]*)$/, ' et $1')}</p>` : '' }
${item.presenters ?
`<p>Présenté par ${item.presenters
.map((presenter) =>{
return `<a href="${this.url(`/${l10n.team.url}/${presenter}/`)}">${
teamMembers
.find((member) => member.key == presenter) ?
teamMembers
.find((member) => member.key == presenter)
.name.trim() : ''
}</a>`; })
.join(', ').replace(/, ([^,]*)$/, ' et $1')}</p>` : '' }
</li>
`;
})
.join('\n')
: ''
}
</ul>
</div>
</div>
</article>
</div>
`
}

View File

@@ -0,0 +1,34 @@
/**
* @file Defines the chained template for the guests page
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
return `<article>
<header class="article-header">
<h2>${data.title}</h2>
</header>
${data.content}
${this.team(data, data.pagination.items)}
<footer>
${this.paginationNav(data)}
</footer>
</article>`
}

View File

@@ -0,0 +1,36 @@
/**
* @file Defines the chained template for home page
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the home page template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
let l10n = data.site[data.locale];
return `
${this.jumbo(data)}
<div class="nextEpisode">
<h2>${l10n.tagline}</h2>
<h3>${l10n.when}</h3>
</div>
`
}

View File

@@ -0,0 +1,30 @@
/**
* @file Defines the chained template for a basic page
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the page template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/shortcodes/ Shortcodes in 11ty}
*/
export function render(data) {
return `<article>
<header class="article-header">
<h2>${data.title}</h2>
</header>
${data.content}
</article>`
}

View File

@@ -0,0 +1,46 @@
/**
* @file Defines the chained template for a person page
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
var util = require('util')
/**
* The content of the person page template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
return `
<article class="person_details">
<div class="photo">
<img class="team_member" src="${this.url(`/img/${data.photoURL}`)}">
</div>
<div class="person_data">
<h1>${data.name}</h1>
<h2>${data.company}</h2>
</div>
<div class="content">
${data.content}
</div>
${data.socials ? `
<div class="socials">
${data.socials.map((social) => {
return this.socialIcons(social);
}).join(' ')}
</div>` : ''
}
</article>
`;
}

View File

@@ -0,0 +1,30 @@
/**
* @file Defines the chained template for basic post content
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the post template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
*/
export function render (data) {
return `<article>
<header class="article-header">
<h2 class="no-margin">${data.title}</h2>
<time>${this.pageDate(data)}</time>
</header>
${data.content}
</article>`
}

View File

@@ -0,0 +1,34 @@
/**
* @file Defines the chained template for the team page
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
layout: 'layouts/base'
}
/**
* The content of the template
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
* @see {@link https://www.11ty.dev/docs/pagination/ Pagination in 11ty}
*/
export function render(data) {
return `<article>
<header class="article-header">
<h2>${data.title}</h2>
</header>
${data.content}
${this.team(data, data.pagination.items)}
<footer>
${this.paginationNav(data)}
</footer>
</article>`
}

View File

@@ -0,0 +1,5 @@
# eleventy-dot-js-blog/\_includes/shortcodes
In Eleventy, [shortcodes](https://www.11ty.dev/docs/shortcodes/) can be used to modify content. They are accessible in templates via the keyword `this`.
The [`index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/shortcodes/index.js) file here is used to configure shortcodes in this directory with Eleventy (in [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js), loaded in [`_includes/index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/index.js)).

View File

@@ -0,0 +1,53 @@
/**
* @file Defines a shortcode for displaying an archive of content
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for a `section` of `article`s
* @module _includes/shortcodes/archive
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* A section of articles
* @method
* @name archive
* @param {Object} data 11tys data object
* @param {Array} arr The 11ty content objects to list
* @return {String} The rendered shortcode
* @example `${this.archive(data, data.pagination.items)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('archive', function (data, arr) {
var l10n = data.site[data.locale]
return `<section class="grid gap">
${arr.map(item =>
`<article class="card" style="${(item.data.highlight !== undefined && item.data.highlight === true)
? 'padding:var(--base-unit);border:var(--border);' : ''}">
<div class="card_content">
<div class="card_header">
<div class="episode">
<div class="number">
${item.data.name}
</div>
<time>${this.pageDate(item.data)}</time>
</div>
<h2 class="no-margin">
<a href="${this.url(`${item.data.page.url}`)}">
${item.data.title}
</a>
</h2>
<p class="no-margin">${item.data.subtitle}</p>
</div>
<div class="filler">
<a href="${this.url(`${item.data.page.url}`)}">
<img src="${this.url(`/img/${item.data.name}/card-thumb.jpg`)}">
</a>
</div>
</div>
</article>`).join('')}
</section>`
})

View File

@@ -0,0 +1,30 @@
/**
* @file Defines a shortcode for the author metadata
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the author metadata
* @module _includes/shortcodes/author-meta
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* HTML author metadata
* @method
* @name authorMeta
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.authorMeta(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('authorMeta', data =>
`<meta name="author"
content="${data.author.name.fullName
? data.author.name.fullName
: data.copyright.holder
? data.copyright.holder
: data.site.title}">`
)

View File

@@ -0,0 +1,25 @@
/**
* @file Defines a shortcode for displaying information about an author
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the content author information
* @module _includes/shortcodes/author
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* Content author markup
* @method
* @name author
* @param {Object} 11tys data object
* @return {String} The rendered shortcode
* @example `${this.author(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('author', data =>
`<span id="author_name">${data.author.name.fullName}</span>`
)

View File

@@ -0,0 +1,29 @@
/**
* @file Defines a shortcode for the colophon markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the colophon
* @module _includes/shortcodes/colophon
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The colophon markup
* @method
* @name colophon
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.colophon(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('colophon', data => {
var l10n = data.colophon[data.locale]
return /* html */ `
${l10n.generator} ${l10n.host}<br>
${l10n.languages}<br>
${l10n.git}`
})

View File

@@ -0,0 +1,29 @@
/**
* @file Defines a shortcode for the copyright notice markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the copyright notice
* @module _includes/shortcodes/copyright-notice
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* Copyright notice markup
* @method
* @name copyrightNotice
* @param {Object} 11tys data object
* @return {String} The rendered shortcode
* @example `${this.copyrightNotice(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('copyrightNotice', data =>
`<span id="copyright_year">&copy; ${data.copyright.year}</span>
<span id="copyright_holder">${data.copyright.holder}.</span>
<span id="copyright_license">
<a href="${data.copyright.url}"><abbr title="${data.copyright.license.abbr}: ${data.copyright.license.name}">${data.copyright.license.abbr}</abbr></a>.
</span>`
)

View File

@@ -0,0 +1,60 @@
/**
* @file Defines a shortcode for inserting variable data into the CSS `:root`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for defining CSS `:root` custom properties
* @module _includes/shortcodes/cssRoot
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* CSS `:root` custom properties
* @method
* @name cssRoot
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.cssRoot(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('cssRoot', data =>
`:root {
/* Color Codes */
--black: ${data.colors.grayscale[900].hex};
--grayscale-100: ${data.colors.grayscale[100].hex};
--grayscale-200: ${data.colors.grayscale[200].hex};
--grayscale-400: ${data.colors.grayscale[400].hex};
--grayscale-600: ${data.colors.grayscale[600].hex};
--grayscale-800: ${data.colors.grayscale[800].hex};
--white: ${data.colors.grayscale.white.hex};
--redish: #800000;
/* Spaces */
--space-1: .125rem;
--space-2: .25rem;
--space-3: .5rem;
--space-4: 1rem;
/* Named Properties */
--background-color: var(white);
--text-color: var(--grayscale-800);
--gray: var(--grayscale-600);
--border: 2px dashed var(--gray);
--base-unit: 1em;
--header-background-color: var(--grayscale-800);
--header-text-color: var(--grayscale-100);
--toolbar-height: 5rem;
--jumbo-overlay-color: #b0e2fc;
--jumbo-text: var(--grayscale-100);
--jumbo-overlay-transition: 0.5s;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: var(--black);
--gray: var(--grayscale-400);
--text-color: var(--white);
}
}`)

View File

@@ -0,0 +1,30 @@
/**
* @file Defines a shortcode for the description metadata
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the description metadata
* @module _includes/shortcodes/description
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* HTML description
* @method
* @name description
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.description(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('description', data =>
`<meta name="description"
content="${data.description
? data.description
: data.site.description
? data.site.description
: data.pkg.description}">`
)

View File

@@ -0,0 +1,26 @@
/**
* @file Defines a shortcode for an “Edit in Git” link
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for “Edit in Git” link
* @module _includes/shortcodes/edit-this-page
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The link markup
* @method
* @name editThisPage
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.editThisPage(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
* @see {@link https://www.11ty.dev/docs/quicktips/edit-on-github-links/ Add Edit in Git links with 11ty}
*/
eleventyConfig.addShortcode('editThisPage', data =>
`<a href="${data.pkg.repository.editUrl}/${data.page.inputPath}">${data.site[data.locale].editThisPage}</a>`
)

View File

@@ -0,0 +1,44 @@
/**
* @file Defines a shortcode for loading external stylesheets
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the external CSS `link`
* @module _includes/shortcodes/external-css
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* Create one or more `link` references
* @method
* @name externalCSS
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.externalCSS(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('externalCSS', data => {
var stylesheets = [
'pages',
'posts'
]
var files = []
var html = '';
if (data.externalCSS !== undefined || data.tags !== undefined) {
if (Array.isArray(data.externalCSS)) {
files = [...data.externalCSS]
}
if (typeof data.externalCSS === 'string') {
files.push(data.externalCSS)
}
if (stylesheets.includes(data.tags[0])) {
files.push(data.tags[0])
}
files.map(file =>
html += `<link href="/css/${file}.css" rel="stylesheet" media="screen">`)
}
return html
})

View File

@@ -0,0 +1,33 @@
/**
* @file Defines a shortcode to load a favicon for the users platform
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
/**
* A JavaScript Template module for favicons
* @module _includes/shortcode/favicon
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/filters/ 11ty docs}
*/
export default eleventyConfig =>
/**
* Load the appropriate favicon
* @method
* @name favicon
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.favicon(data)}`
* @see {@link https://css-tricks.com/emojis-as-favicons/ “Emojis as Favicons” from _CSS-Tricks_}
* @see {@link https://realfavicongenerator.net/ Real Favicon Generator}
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('favicon', function (data) {
// You can only use one of these return statements at a time
// Comment the next line ⬇️ to disable emoji favicons
// return `<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍦</text></svg>">`
// Uncomment the next line ⬇️ to enable favicons via the Real Favicon Generator
// return `${this.fileToString('favicons/html_code.html')}`
return /* html */ `<link rel="icon" href="${this.url('/img/favicon.png')}" type="image/png">`;
})

View File

@@ -0,0 +1,37 @@
/**
* @file Defines a shortcode for displaying a `section` about getting started
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the content “Getting Started” information
* @module _includes/shortcodes/getting-started
* @param {Object} eleventyConfig 11tys Config API
*/
export default function (eleventyConfig) {
/**
* “Getting Started” `section` markup
* @method
* @name gettingStarted
* @param {Object} 11tys data object
* @return {String} The rendered shortcode
* @example `${this.gettingStarted(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('gettingStarted', function (data) {
return `<section
style="border:var(--border);padding:var(--base-unit);">
<h2>🎬 Get started!</h2>
<ul>
<li>📝 Edit <code>./_data/site.json</code> with your sites information</li>
<li>(Optional) 📝 Edit <code>.eleventy.js</code> with your configuration preferences</li>
<li>❌ Delete this message from <code>./_includes/${data.layout}.11ty.js</code></li>
</ul>
<p style="display:flex;gap:var(--base-unit);">… You could also 👉<a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/reubenlillie/eleventy-dot-js-blog">${this.fileToString('img/deploy-to-netlify-button.svg')}</a></p>
<p> More information on <a href="${data.pkg.homepage}">GitLab</a></p>
</section>`
})
}

View File

@@ -0,0 +1,41 @@
/**
* @file Defines a shortcode for the `<head>` markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the `<head>`
* @module _includes/shortcodes/head-tag
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* HTML `<head>` markup
* @method
* @name headTag
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.headTag(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('headTag', function (data) {
return `<head>
${this.titleTag(data)}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
${this.authorMeta(data)}
${this.description(data)}
${this.favicon(data)}
${this.socialMeta(data)}
<style>
${this.minifyCSS(this.inlineCSS(data))}
</style>
${this.externalCSS(data)}
</head>`
})

View File

@@ -0,0 +1,66 @@
/**
* @file Imports shortcodes and configures them with 11ty (.eleventy.js)
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
// Import shortcodes to include
import archive from './archive.js'
import author from './author.js'
import authorMeta from './author-meta.js'
import colophon from './colophon.js'
import copyrightNotice from './copyright-notice.js'
import cssRoot from './css-root.js'
import description from './description.js'
import editThisPage from './edit-this-page.js'
import externalCSS from './external-css.js'
import favicon from './favicon.js'
import gettingStarted from './getting-started.js'
import headTag from './head-tag.js'
import inlineCSS from './inline-css.js'
import jumbo from './jumbo.js'
import nav from './nav.js'
import pageDate from './page-date.js'
import paginationNav from './pagination-nav.js'
import siteFooter from './site-footer.js'
import siteHeader from './site-header.js'
import socialMeta from './social-meta.js'
import socialIcons from './social-icons.js'
import team from './team.js'
import titleTag from './title-tag.js'
/**
* A loader module for shortcodes
* @module _includes/shortcodes
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
* @see {@link https://www.11ty.dev/docs/shortcodes/ Shortcodes in 11ty}
*/
export default function (eleventyConfig) {
// Function calls to shortcodes to include
archive(eleventyConfig)
author(eleventyConfig)
authorMeta(eleventyConfig)
colophon(eleventyConfig)
copyrightNotice(eleventyConfig)
cssRoot(eleventyConfig)
description(eleventyConfig)
editThisPage(eleventyConfig)
externalCSS(eleventyConfig)
favicon(eleventyConfig)
gettingStarted(eleventyConfig)
headTag(eleventyConfig)
inlineCSS(eleventyConfig)
jumbo(eleventyConfig)
nav(eleventyConfig)
pageDate(eleventyConfig)
paginationNav(eleventyConfig)
siteFooter(eleventyConfig)
siteHeader(eleventyConfig)
socialMeta(eleventyConfig)
socialIcons(eleventyConfig)
titleTag(eleventyConfig)
team(eleventyConfig)
return
}

View File

@@ -0,0 +1,32 @@
/**
* @file Defines a shortcode for loading inline stylesheets
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/**
* A JavaScript Template module for the inline CSS `links`
* @module _includes/shortcodes/inline-css
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* HTML `<style>` markup
* @method
* @name inlineCSS
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.inlineCSS(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('inlineCSS', function (data) {
var root = `${this.cssRoot(data)}`
var css = `${this.fileToString('css/index.css')}`;
(data.page.url === '/')
? css += `${this.fileToString('css/home.css')}`
: '';
(data.form && data.form !== undefined)
? css += `${this.fileToString('css/forms.css')}`
: css += '';
return `${root}\n${css}`
})

View File

@@ -0,0 +1,48 @@
/**
* @file Defines a shortcode for displaying information about an author
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the content author information
* @module _includes/shortcodes/author
* @param {Object} eleventyConfig 11tys Config API
*/
export default (eleventyConfig) =>
/**
* Content author markup
* @method
* @name author
* @param {Object} 11tys data object
* @return {String} The rendered shortcode
* @example `${this.author(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode(
"jumbo",
(data) => {
let l10n = data.site[data.locale]
return `
<div class="jumbo">
<div class="jumbo-cover"></div>
<div class="jumbo-overlay"></div>
<div class="inner-wrapper">
<img class="jumbo-logo"
src="img/logos/logo.png"
alt="logo Le Camping des Speakers">
<div class="inner">
</div>
</div>
<!--
<div class="scroll-down" aria-hidden="true">
<svg class="icon icon-scroll-down" id="scroll-down" viewBox="0 0 25.166666 37.8704414">
<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-miterlimit="10" d="M12.5833445 36.6204414h-0.0000229C6.3499947 36.6204414 1.25 31.5204487 1.25 25.2871208V12.5833216C1.25 6.3499947 6.3499951 1.25 12.5833216 1.25h0.0000229c6.2333269 0 11.3333216 5.0999947 11.3333216 11.3333216v12.7037992C23.916666 31.5204487 18.8166714 36.6204414 12.5833445 36.6204414z"></path>
<path style="animation: scrollDownMove .8s ease-in-out alternate infinite;" fill="currentColor" d="M13.0833359 19.2157116h-0.9192753c-1.0999985 0-1.9999971-0.8999996-1.9999971-1.9999981v-5.428606c0-1.0999994 0.8999987-1.9999981 1.9999971-1.9999981h0.9192753c1.0999985 0 1.9999981 0.8999987 1.9999981 1.9999981v5.428606C15.083334 18.315712 14.1833344 19.2157116 13.0833359 19.2157116z"></path>
</svg>
</div>
-->
</div>
`;
}
);

View File

@@ -0,0 +1,56 @@
/**
* @file Defines a menucode for displaying a navigation menu
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for a navigation menu
* @module _includes/shortcodes/grid-nav
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* Navigation markup
* @method
* @name nav
* @param {Array} collection 11ty collection to map over
* @param {Object} page The current 11ty `page` object
* @param {String|Array} classes CSS classes for the `nav` (optional)
* @param {String} ariaLabel The WAI-ARIA `aria-label` to attach to the `nav` (optional)
* @return {String} The rendered shortcode
* @example `${this.nav(data.collections.policies, data.page)}`
* @see {@link https://www.11ty.dev/docs/collections/ Collections in 11ty}
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
* @see {@link https://www.w3.org/TR/wai-aria/#aria-label WAI-ARIA specification for `aria-label` property}
*/
eleventyConfig.addShortcode('nav', function(collection, page, classes, ariaLabel) {
var classList = []
if (classes !== undefined) {
if (typeof classes === 'string') {
classList.push(classes)
}
if (Array.isArray(classes)) {
classList = [...classes]
}
}
return typeof collection !== 'undefined' && collection.length > 0
? `<nav
${classes ? `class="${classList.map(item => `${item}`).join(' ')}"`: '' }
${ariaLabel ? `aria-label="${ariaLabel}"` : ''}>
<ul>
${collection
.sort((a, b) => a.data.weight - b.data.weight)
.map(item => `<li><a href="${this.url(`${item.data.url ? item.data.url : item.url}`)}"
${page.url === item.url ? 'aria-current="page"' : ''}>${item.data.navTitle
? item.data.navTitle
: item.data.title
}</a></li>`
).join('\n')}
</ul>
</nav>`
: ''
})

View File

@@ -0,0 +1,35 @@
/**
* @file Defines a shortcode for displaying a pages date
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
* @see {@link https://www.11ty.dev/docs/dates/}
*/
/**
* A JavaScript Template module for the `page.date`
* @module _includes/shortcodes/page-date
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* Page date markup
* @method
* @name pageDate
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.pageDate(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('pageDate', data => {
var date = data.page.date
var locale
data.locale
? locale = data.page.locale
: locale = data.site.defaultLocale
var options = data.site[data.locale].dateOptions
// Check that `date` is a JavaScript `Date` object.
return Object.prototype.toString.call(date) === "[object Date]"
? `${date.toLocaleDateString(locale, options)}`
: ''
})

View File

@@ -0,0 +1,84 @@
/**
* @file Defines a shortcode for pagination navigation
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for pagination navigation
* @module _includes/shortcodes/pagination-nav
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The pagination navigation markup
* @method
* @name paginationNav
* @param {Object} data 11tys data object
* @return {String} The rendered pagination navigation
* @example `${this.paginationNav(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
* @see {@link https://www.11ty.dev/docs/pagination/nav/ Pagination navigation in 11ty}
*/
eleventyConfig.addShortcode('paginationNav', (data) => {
var l10n = data.site[data.locale].pagination
// Use pagination navigation only when theres more than one page
return `${data.pagination.pages.length > 1
? `<nav aria-label="${l10n.navLabel}">
<!-- Show option to advance one page toward the beginning,
when there are more than two total pages and
when not currently on the first page -->
${data.pagination.pages.length > 2 &&
data.pagination.href.previous &&
(data.pagination.href.previous !== data.pagination.first)
? `<a href="${data.pagination.href.previous}">
${data.pagination.reverse ? `${l10n.next}`
: `${l10n.previous}`
}</a>`
: ''}
<!-- Show option to go first page
when there are no numbered pages -->
${data.pagination.pages.length < 5
? `<a href="${data.pagination.href.first}"
aria-label="${l10n.firstLabel}"
${data.page.url === data.pagination.href.first
? 'aria-current="page"'
: ''
}>${l10n.first}</a>`
: ''}
<!-- Show numbered pages
when there are at least five -->
${data.pagination.pages.length >= 5
? data.pagination.pages.map((page, index) =>
`<a href="${data.pagination.hrefs[index]}"
aria-label="${l10n.pageLabel} ${index + 1}"
${data.page.url === data.pagination.hrefs[index]
? 'aria-current="page"'
: ''
}>${index + 1}</a>`).join('')
: ''}
<!-- Show option to advance one page toward the end,
when there are more than two total pages and
when not currently on the last page -->
${data.pagination.pages.length > 2 &&
data.pagination.href.next &&
(data.pagination.href.next !== data.pagination.last)
? `<a href="${data.pagination.href.next}">
${data.pagination.reverse
? `${l10n.previous}`
: `${l10n.next}`
}</a>`
: ''}
<!-- Show option to go to last page
whenever pagination is visible -->
<a href="${data.pagination.href.last}"
aria-label="${l10n.lastLabel}"
${data.page.url === data.pagination.href.last
? 'aria-current="page"'
: ''
}>${l10n.last}</a>
</nav>`
: '' }`
})

View File

@@ -0,0 +1,31 @@
/**
* @file Defines a shortcode for the page footer markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the page footer
* @module _includes/shortcodes/site-footer
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The page footer markup
* @method
* @name siteFooter
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.siteFooter(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('siteFooter', function (data) {
return `<footer>
<div class="content">
<p>${this.copyrightNotice(data)}</p>
<p>${this.colophon(data)}</p>
</div>
</footer>`
})

View File

@@ -0,0 +1,52 @@
/**
* @file Defines a shortcode for the page header
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the page header
* @module _includes/shortcodes/site-header
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The page header markup
* @method
* @name siteHeader
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.siteHeader(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('siteHeader', function (data) {
var l10n = data.site[data.locale]
// Inform screen readers when the home page link is for the current page
return /* html */ `
<header>
<div class="top-content">
<div class="logo">
<a href="${data.site.baseUrl}">
<img src="${data.site.pathPrefix}/${data.site.logo.url}" alt="logo">
</a>
</div>
<input type="checkbox" id="menu-burger" class="visually-hidden" aria-label="Menu"/>
<label for="menu-burger">
<svg class="icon icon-menu" id="menu" viewBox="0 0 448 512">
<path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
<svg class="icon icon-close" id="close" viewBox="0 0 352 512">
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
</svg>
</label>
${this.nav(data.collections.nav, data.page, '', l10n.nav.primary)}
</div>
</header>`
})

View File

@@ -0,0 +1,54 @@
/**
* @file Defines a shortcode for displaying social icons
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for a `section` of `article`s
* @module _includes/shortcodes/archive
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* A social icon
* @method
* @name archive
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.socialIcons(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('socialIcons', function (data) {
if (!data.icon || !data.link) {
return '';
}
let icon;
switch (data.icon) {
case 'github':
icon = `<svg id="github" viewBox="0 0 496 512"><path fill="#000000" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>`;
break;
case 'twitter':
icon = `<svg id="twitter" viewBox="0 0 512 512">
<path fill="rgb(64,153,255)" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>`;
break;
case 'linkedin':
icon = `<svg id="linkedin" viewBox="0 0 448 512"><path fill="rgb(0,119,181)" d="M100.3 448H7.4V148.9h92.9V448zM53.8 108.1C24.1 108.1 0 83.5 0 53.8S24.1 0 53.8 0s53.8 24.1 53.8 53.8-24.1 54.3-53.8 54.3zM448 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448h-.1z"></path></svg>`;
break;
case 'youtube':
icon = `<svg id="youtube" viewBox="0 0 576 512"><path fill="rgb(205,32,31)" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>`;
break;
case 'sketchnote':
icon = `<svg id="sketchnote" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc"><path data-name="layer4" d="M55.7 16.3l3.7-3.7a5.7 5.7 0 10-8-8l-3.7 3.7" fill="#f27e7c"/><path data-name="layer3" fill="#fbaa51" d="M17.3 54.7l38.4-38.4-8-8L9.3 46.6"/><path data-name="layer2" fill="#fddab3" d="M17.3 54.7l-8-8.1-4.2 9.5 2.8 2.7 9.4-4.1z"/><path data-name="layer1" fill="#2e4369" d="M2.9 61l5-2.2-2.8-2.7L2.9 61z"/><path data-name="opacity" fill="#000028" opacity=".2" d="M55.7 16.3l-2.9-2.9-38.3 38.4 2.8 2.9 38.4-38.4z"/><path data-name="stroke" d="M55.7 16.3l3.7-3.7a5.7 5.7 0 10-8-8l-3.7 3.7M9.3 46.6L2.9 61l14.4-6.3-8-8.1z" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path data-name="stroke" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.3 54.7l38.4-38.4-8-8L9.3 46.6"/></svg>`;
break;
case 'spotify':
icon = `<svg id="spotify" viewBox="0 0 168 168"><path fill="#1ED760" d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"/></svg>`;
break;
}
return `<a class="social" href="${data.link}">${icon}</a>`;
})

View File

@@ -0,0 +1,46 @@
/**
* @file Defines a universal shortcode for social media metadata
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/shortcodes/ Shortcodes in 11ty}
*/
/**
* A shortcode for including social media metadata in the `<head>`
* @module _includes/shortcodes/social-meta
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* OpenGraph and Twitter metadata with fallbacks (./_data/site.js)
* @method
* @name socialMeta
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.socialMeta()}`
* @see {@link https://css-tricks.com/essential-meta-tags-social-media/ Adam Coti, “The Essential Meta Tags for Social Media,” _CSS-Tricks_ (updated December 21, 2016)}
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('socialMeta', data => {
var meta = '';
meta += (data.title)
? `<meta property="og:title" content="${data.title}">
<meta name="twitter:title" content="${data.title}">`
: `<meta property="og:title" content="${data.site.title}">
<meta name="twitter:title" content="${data.site.title}">`
meta += (data.description)
? `<meta property="og:description" content="${data.description}">
<meta property="twitter:description" content="${data.description}">`
: `<meta property="og:description" content="${data.pkg.description}">
<meta property="twitter:description" content="${data.pkg.description}">`
meta += (data.thumbnail)
? `<meta property="og:image" content="${data.site.baseUrl}/img/${data.thumbnail}">
<meta name="twitter:image" content="${data.site.baseUrl}/img/${data.thumbnail}">
<meta name="twitter:card" content="summary_large_image">`
// Create a file named ./img/next/card.jpg to make the fallback work
: `<meta property="og:image" content="${data.site.baseUrl}/img/next/card.jpg">
<meta name="twitter:image" content="${data.site.baseUrl}/img/next/card.jpg">
<meta name="twitter:card" content="summary_large_image">`
meta += `<meta property="og:url" content="${data.page.url}">`
return meta
})

View File

@@ -0,0 +1,59 @@
/**
* @file Defines a shortcode for displaying an archive of content
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for a `section` of `article`s
* @module _includes/shortcodes/archive
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* The team
* @method
* @name archive
* @param {Object} data 11tys data object
* @param {Array} arr The 11ty content objects to list
* @return {String} The rendered shortcode
* @example `${this.archive(data, data.pagination.items)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('team', function (data, arr) {
var l10n = data.site[data.locale]
return `<section class="grid gap">
${arr.map(item =>
`<article class="card team" style="${(item.data.highlight !== undefined && item.data.highlight === true)
? 'padding:var(--base-unit);border:var(--border);' : ''}">
<div class="card_content">
<div class="card_header">
<h2 class="no-margin">
<a href="${this.url(`/${item.data.tags && item.data.tags.indexOf('guests') >= 0 ? l10n.guests.url : l10n.team.url}/${item.data.key}/`)}">
${item.data.name}
</a>
</h2>
${
item.data.company
? `<p class="no-margin">${item.data.company}</p>`
: ''
}
</div>
<div class="filler">
<a href="${data.site.baseUrl}${item.data.tags && item.data.tags.indexOf('guests') >= 0 ? l10n.guests.url : l10n.team.url}/${item.data.key}/">
<img class="team_member" src="${this.url(`/img/${item.data.photoURL}`)}">
</a>
</div>
${item.data.socials ? `
<div class="socials">
${item.data.socials.map((social) => {
return this.socialIcons(social);
}).join(' ')}
</div>` : ''
}
</div>
</article>`).join('')}
</section>`
})

View File

@@ -0,0 +1,35 @@
/**
* @file Defines a shortcode for the `<title>` markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/
/**
* A JavaScript Template module for the `<title>`
* @module _includes/shortcodes/title-tag
* @param {Object} eleventyConfig 11tys Config API
*/
export default eleventyConfig =>
/**
* HTML `<title>` markup
* @method
* @name titleTag
* @param {Object} data 11tys data object
* @return {String} The rendered shortcode
* @example `${this.titleTag(data)}`
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
*/
eleventyConfig.addShortcode('titleTag', data => {
var l10n = data.site[data.locale]
// Use a different `title` on the home page
return `<title>
${data.page.url !== '/'
? `${l10n.title}${l10n.separator}${data.title}`
: data.title
? `${data.title}`
: `${l10n.title}`
}
</title>`
})

View File

@@ -0,0 +1,5 @@
# eleventy-dot-js-blog/\_includes/transforms
In Eleventy, [transforms](https://www.11ty.dev/docs/config/#transforms) can modify content after templates have been processed. Whereas [filters](https://www.11ty.dev/docs/filters/) have to be called explicitly within other files, transforms run automatically.
The [`index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/transforms/index.js) file here is used to configure transforms in this directory with Eleventy (in [`.eleventy.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/.eleventy.js), loaded in [`_includes/index.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_includes/index.js)).

View File

@@ -0,0 +1,22 @@
/**
* @file Imports transforms and configures them with 11ty (.eleventy.js)
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
// Import transforms to include
import minifyHTML from './minify-html.js'
/**
* A loader module for transforms
* @module _includes/transforms
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
* @see {@link https://www.11ty.dev/docs/config/#transforms Transforms in 11ty}
*/
export default function (eleventyConfig) {
// Function calls to transforms to include
minifyHTML(eleventyConfig)
return
}

View File

@@ -0,0 +1,40 @@
/**
* @file Defines a filter to minify HTML template files
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/*
* Import Juriy Zaytsevs HTMLMinifier module
* @see {@link https://github.com/kangax/html-minifier GitHub}
*/
import htmlmin from 'html-minifier'
/**
* An Eleventy transform for minifying HTML template files
* @module _includes/transforms/minify-html
* @param {Object} eleventyConfig 11tys Config API
* @see {@link https://www.11ty.dev/docs/config/#transforms 11ty docs}
*/
export default eleventyConfig =>
/**
* Minifies HTML
* @param {String} content An HTML document
* @param {String} outputPath Where Eleventy should output the content
* @return {String} The minified content
* @see {@link https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables Environment variables in 11ty}
*/
eleventyConfig.addTransform('minifyHTML', (content, outputPath) => {
// Only minify HTML for production
if(process.env.ELEVENTY_ENV === 'production' &&
(outputPath !== false && outputPath.endsWith('.html'))) {
var minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true
})
return minified
}
return content
})

24
content/README.md Normal file
View File

@@ -0,0 +1,24 @@
# eleventy-dot-js-blog/content
By default, [Eleventy works with your projects existing directory structure](https://www.11ty.dev/docs/). Unlike other static site generators, Eleventy lets you choose how to organize your content.
This directory shows _one way_ to organize content into pages and posts, like a typical blog. If you wanted to use this project to publish an e-book, you might use directories for each of the parts and chapters. Or, if you wanted to make a glossary, you might use directories for each letter of the alphabet.
The [`content.11tydata.js`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/content/content.11tydata.js) file here defines [directory data](https://www.11ty.dev/docs/data-template-dir/), accessible in templates via the `data` object. For example, because `content.11tydata.js` defines a `locale` property, all the templates in this directory as well as any directories nested inside this one will inherit that `data.locale` value (i.e., `en` for English). You can override that “default” value by specifying a new `locale` value in either a [template data file](https://www.11ty.dev/docs/data-template-dir/) or the [front matter data](https://www.11ty.dev/docs/data-frontmatter/) for a given template.
_See the Eleventy documentation for more information about the [data cascade](https://www.11ty.dev/docs/data-cascade/)._
To carry the `data.locale` example further, this directory structure also allows you to add support for internationalization (i18n) and localization (l10n).
Heres an example of one way you might go about adding Spanish-language content:
1. Make a directory named `es` inside this one (optionally, you could move all existing English-language content into a new `en` directory too)
1. Nest corresponding copies of the [`pages`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/tree/master/content/pages) and [`posts`] (https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/tree/master/content/posts) directories inside the newly created `es` directory (e.g., `content/es/pages` and `content/es/posts`)
1. Copy `content.11tydata.js` to the `es` directory, and rename the copied file `es.11tydata.js`
1. Do the same for `content/es/pages/pages.11tydata.js` and `content/es/posts/posts.11tydata.js`
1. Copy `content/index.md` (the blog home page) to `content/es/index.md` and set `permalink` to `'/es/'` in the front matter data
1. Add an _identical front matter data property_ to each of the multilingual content files (_dont translate the value_, e.g., add `translationKey: 'about'` in the front matter for both [`pages/about.md`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/content/pages/about.md) and `es/pages/about.md`, or `translationKey: 'home'` inside both `contect/index.md` and `content/es/index.md`)
_See [`../_data/README.md`](https://gitlab.com/reubenlillie/eleventy-dot-js-blog/-/blob/master/_data/README.md) for instructions on how to translate [global data](https://www.11ty.dev/docs/data-global/) strings._
_For a discussion of how a multilingual setup like this might work (using Nunjucks templates), check out [Jérôme Coupés](https://twitter.com/jeromecoupe) pair of blog posts from 2019 on [“Multilingual Sites with Eleventy”](https://www.webstoemp.com/blog/multilingual-sites-eleventy/) and prototype for a [“Language switcher for multilingual JAMstack sites”](https://www.webstoemp.com/blog/language-switcher-multilingual-jamstack-sites/)._

View File

@@ -0,0 +1,18 @@
/**
* @file Contains data common to all content, to reduce repetition
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
/**
* Directory data module for content
* @module content
* @see {@link https://www.11ty.dev/docs/data-template-dir/ Template and directory data files in 11ty}
*/
export default {
/**
* The ISO language code for the main content language
* @see {@link https://www.loc.gov/standards/iso639-2/php/code_list.php ISO language codes}
*/
locale: 'fr'
}

9
content/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Accueil
layout: layouts/home
tags: ['home', 'nav']
weight: 1
permalink: '/'
thumbnail: 'next/card.jpg'
---

View File

@@ -0,0 +1,22 @@
/**
* @file Contains data common to all pages, to reduce repetition
* @author Reuben L. Lillie <reubenlillie@gmail.com>
*/
/**
* Directory data module for pages
* @module content/pages
* @see {@link https://www.11ty.dev/docs/data-template-dir/ Template and directory data files in 11ty}
* @see {@link https://www.11ty.dev/docs/permalinks/ Permalinks in 11ty}
*/
export default {
layout: 'layouts/page',
// Note: The permalink value uses Nunjucks/Liquid syntax;
// a future version of 11ty may allow for JavaScript template literals
eleventyComputed: {
permalink: data => `/${data.page.fileSlug}/index.html`
},
tags: [
'pages',
]
}

42
content/team.11ty.js Normal file
View File

@@ -0,0 +1,42 @@
// JavaScript-ified ./content/team.11ty.js
/**
* @file Defines the chained layout for the archive page
* @see {@link https://www.11ty.dev/docs/layouts/#layout-chaining Layout chaining in 11ty}
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
/**
* Acts as front matter in JavaScript templates
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method Optional `data` in JavaScript templates in 11ty}
*/
export var data = {
title: "L'équipe",
navTitle: 'Équipe',
tags: 'nav',
weight: 3,
layout: 'layouts/team',
templateEngineOverride: '11ty.js',
pagination: {
data: 'collections.team',
size: 20,
alias: 'member',
reverse: false,
},
permalink: function(data) {
return this.url(
`${data.site[data.locale].team.url }/${data.pagination.pageNumber > 0
? `page-${data.pagination.pageNumber}/`
: ''}index.html`);
}
}
/**
* The archive page content
* @method
* @name render()
* @param {Object} data 11tys data object
* @return {String} The rendered template
*/
export function render(data) {
return `<!-- ${data.page.inputPath} -->`
}

View File

@@ -0,0 +1,16 @@
---
key: aurelie_vache
name: Aurélie Vache
company: OVHcloud
city: Toulouse, France
photoURL: team/aurelie_vache.jpg
socials:
- icon: twitter
link: https://twitter.com/aurelievache
name: aurelievache
- icon: github
link: https://github.com/scraly
name: scraly
tags: [ 'team' ]
---

View File

@@ -0,0 +1,16 @@
---
key: francois_teychene
name: François Teychene
company: " "
city: Montpellier, France
photoURL: ./team/francois_teychene.jpg
socials:
- icon: twitter
link: 'https://www.twitter.com/fteychene'
- icon: linkedin
link: 'https://www.linkedin.com/in/fteychene'
- icon: github
link: 'https://github.com/fteychene'
tags: [ 'team' ]
---

View File

@@ -0,0 +1,21 @@
---
key: horacio_gonzalez
name: Horacio Gonzalez
city: Brest, France
company: OVHcloud
photoURL: team/horacio_gonzalez.jpg
socials:
- icon: twitter
link: 'https://www.twitter.com/LostInBrittany'
- icon: linkedin
link: 'https://www.linkedin.com/in/horaciogonzalez'
- icon: github
link: 'https://github.com/LostInBrittany'
tags: [ 'team' ]
---
Malgré ce que son accent espagnol bien prononcé peut suggérer, Horacio est arrivé en France il y a plus dune vingtaine dannées. Passionné dinformatique, dans laquelle il est tombé depuis tout petit, il a découvert le développement web en 1997 et depuis il na pas arrêté de bosser autour.
Horacio est Directeur de Developer Relations chez OVHcloud. Il est cofondateur du @FinistDevs, et des @RdvSpeakers.
Passionné par le développement web et tout ce qui gravite autour des composants web et des standards web, Horacio aime aussi discuter de Kubernetes, AI et le cloud en général. Il est Google Developer Expert (GDE) en Web Technologies and Flutter.

View File

@@ -0,0 +1,15 @@
---
key: philippe_charriere
name: Philippe Charrière
company: GitLab
city: Lyon, France
photoURL: team/philippe_charriere.jpg
socials:
- icon: twitter
link: 'https://www.twitter.com/k33g_org'
- icon: linkedin
link: 'https://www.linkedin.com/in/phcharriere'
- icon: github
link: 'https://github.com/k33g'
---

View File

@@ -0,0 +1,17 @@
---
key: pierre_tibulle
name: Pierre Tibulle
company: IKO-BOX
photoURL: team/pierre_tibulle.jpg
socials:
- icon: twitter
link: 'https://www.twitter.com/ptibulle'
name: Twitter
- icon: linkedin
link: 'https://www.linkedin.com/in/pierre-tibulle-68674812b'
name: LinkedIn
tags: [ 'team' ]
---
Dev mobile (Android/iOS/Hybride), CTO Ikobox, je gribouille des sketchnotes colorées et je participe à l'organisation du meetup Android Nantes (GDG).

View File

@@ -0,0 +1,15 @@
---
key: sebastien_blanc
name: Sébastien Blanc
company: RedHat
photoURL: team/sebastien_blanc.jpg
socials:
- icon: twitter
link: 'https://www.twitter.com/sebi2706'
- icon: linkedin
link: 'https://www.linkedin.com/in/sébastien-blanc-08a73b1'
- icon: github
link: 'https://github.com/sebastienblanc'
tags: [ 'team' ]
---

View File

@@ -0,0 +1,16 @@
---
key: stephanie_moallic
name: Stéphanie Moallic
company: OVHcloud
city: Brest, France
photoURL: team/stephanie_moallic.jpg
socials:
- icon: twitter
link: https://twitter.com/steffy_29
name: steffy_29
- icon: github
link: https://github.com/Steffy29
name: Steffy29
tags: [ 'team' ]
---
Développeuse logicielle depuis 20 ans, j'ai commencé par faire des interfaces en langage C pour m'orienter ensuite vers les technologies Web en passant par Java et le développement mobile. En parallèle de mon activité de développeuse, j'apprécie de partager mes connaissances en donnant des cours de programmation ou en organisant des ateliers pour les enfants tels que le Devoxx4Kids by Code Ar Vugale. Je participe aussi à promouvoir les femmes dans les métiers dans l'informatique en participant aux Duchess France et à d'autres conférences autour de ce sujet. Mon prochain défi: concevoir et construire mon propre robot qui marche à base de micro:bit, carte électronique qui me permet d'imaginer pleins d'idées et de projets fous...

View File

@@ -0,0 +1,22 @@
/**
* @file Contains data common to all pages, to reduce repetition
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
*/
/**
* Directory data module for team
* @module content/team
* @see {@link https://www.11ty.dev/docs/data-template-dir/ Template and directory data files in 11ty}
* @see {@link https://www.11ty.dev/docs/permalinks/ Permalinks in 11ty}
*/
export default {
layout: 'layouts/person',
// Note: The permalink value uses Nunjucks/Liquid syntax;
// a future version of 11ty may allow for JavaScript template literals
eleventyComputed: {
permalink: data => `/team/${data.page.fileSlug}/index.html`
},
tags: [
'team'
]
}

8
css/forms.css Normal file
View File

@@ -0,0 +1,8 @@
/**
* @file Defines styles specific to pages with form elements
* Custom properties are set in `_includes/shortcodes/css-root.js`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--*CSS Custom Properties on MDN}
* To apply this stylesheet:
* Set a templates `data.form` key to a value of `true`.
*/

121
css/home.css Normal file
View File

@@ -0,0 +1,121 @@
/**
* @file Defines styles specific to the home page
* Custom properties are set in `_includes/shortcodes/css-root.js`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--*CSS Custom Properties on MDN}
*/
.jumbo {
position: relative;
height: 25em;
width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
grid-column-start: 1;
grid-column-end: span 3;
}
.jumbo .jumbo-cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url(./img/backgrounds/camping-des-speakers.jpg);
}
.jumbo .jumbo-overlay {
background-color: var(--jumbo-overlay-color);
transition: opacity var(--jumbo-overlay-transition, 0.4s);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.6 !important;
}
.jumbo .inner-wrapper {
position: relative;
color: var(--jumbo-text, white);
display: flex;
flex-flow: column;
align-items: center;
}
.jumbo .inner-wrapper .inner {
padding: var(--space-4);
color: var(--primary-txt);
position: relative;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
}
.jumbo .inner-wrapper .inner h2 {
font-size: 1.75rem;
margin: var(--space-3) 0;
font-weight: 600;
}
.jumbo .inner-wrapper .inner h3 {
font-size: 1.8rem;
margin: var(--space-3) 0;
font-size: 1.25em;
overflow-wrap: break-word;
}
.jumbo .scroll-down {
position: relative;
color: var(--base, white);
}
.jumbo .scroll-down .icon {
height: 2.5em;
width: 1.5em;
}
.jumbo img.jumbo-logo {
width: min(650px, 80%);
}
@keyframes scrollDownMove {
from {
transform: translateY(-.15em);
}
to {
transform: translateY(.65em);
}
}
.icon {
--size: 1em;
height: var(--size, 1em);
min-width: var(--size, 1em);
display: inline-block;
background-repeat: no-repeat;
margin-right: var(--space-1);
}
.nextEpisode {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-flow: column;
align-items: center;
}
.nextEpisode h2 {
margin-bottom: 2rem;
}
.nextEpisode a {
max-width: min(90%, 1200px);
margin: 0;
}

535
css/index.css Normal file
View File

@@ -0,0 +1,535 @@
/**
* @file Defines styles common to all pages
* Custom properties are set in `_includes/shortcodes/css-root.js`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @author Horacio Gonzalez <horacio.gonzalez@gmail.com>
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--*CSS Custom Properties on MDN}
*/
/* Set box-sizing for all elements */
*:
*:before
*:after {
box-sizing: border-box;
}
/* Visually hide an element, but leave it available for screen readers */
.screen-reader-text {
clip: rect(0 0 0 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 500;
}
nav {
display: flex;
flex-wrap: wrap;
column-gap: 1em;
}
/* Margin */
.no-margin {
margin: 0;
}
/* Colors */
body {
background-color: var(--background-color);
color: var(--text-color);
}
time,
footer {
color: var(--gray);
}
code {
background-color: var(--grayscale-100);
border-radius: 3px;
color: var(--black);
hyphens: manual;
padding: 1px 3px;
}
nav a{
font-weight: 700;
}
ul {
list-style: square;
}
/* Links */
a {
color: inherit;
text-decoration: none;
}
a:focus,
a:hover,
a:visited {
opacity: 0.8;
text-decoration: none;
}
nav a {
padding: 0.5em;
}
/* Border */
#site_header + nav {
border-top: var(--border);
border-bottom: var(--border);
}
header label .icon-menu {
display: block;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
/* Layout */
.grid {
display: grid;
}
.gap {
gap: var(--base-unit);
}
body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
font-family: system-ui, serif;
line-height: 1.25;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
main {
flex-grow: 1;
margin: var(--toolbar-height) 0 0;
}
main img {
max-width: 100%;
}
body > header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height: var(--toolbar-height);
box-shadow: 0 var(--space-1) var(--header-background-color),
0 var(--space-2) var(--space-1) var(--darken-3);
background: var(--header-background-color);
color: var(--header-text-color);
}
body > header .top-content {
max-width: var(--theJdrSize);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
body > header .logo img {
height: calc(var(--toolbar-height) - (2 * var(--space-2)));
}
body > header label {
display: none;
opacity: 0.5;
padding: 0.1em;
border: var(--space-2) solid transparent;
outline-offset: var(--space-2);
}
body > header label .icon {
--size: 1.5rem;
height: var(--size, 1.5rem);
width: var(--size, 1.5rem);
}
body > header label .icon-menu {
display: block;
}
body > header label .icon-close {
display: none;
}
body > header label:hover,
body > header label:focus {
opacity: 1;
outline: thin dotted currentColor;
}
body > header input[type="checkbox"]:checked ~ label .icon-menu {
display: none;
}
body > header input[type="checkbox"]:checked ~ label .icon-close {
display: block;
}
body > header input[type="checkbox"]:checked ~ nav {
display: block;
}
body > header nav {
display: flex;
align-items: center;
font-size: small;
}
body > header nav ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
body > header nav li {
opacity: 0.6;
transition: all var(--animation);
border-bottom: thin solid transparent;
border-radius: 5%;
}
body > header nav li.active {
opacity: 1;
border-bottom-color: currentColor;
}
body > header nav a {
display: block;
text-transform: uppercase;
padding: 0 var(--space-3);
text-decoration: none;
line-height: calc(var(--toolbar-height) - (4 * var(--space-2)));
color: inherit;
font-weight: 200;
}
body > header nav a svg {
max-width: 3ch;
}
body > header nav nav a:focus,
body > header nav nav a:hover {
text-shadow: var(--extruded-dark);
opacity: 0.75;
}
body > header nav ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
@media (max-width: 60em) {
body > header label {
display: block;
}
body > header nav ul {
flex-direction: column;
}
body > header nav {
display: none;
color: var(--header-text-color);
width: 100%;
padding: 0 1em;
background: var(--header-background-color);
flex-direction: column;
justify-content: flex-start;
border-top: solid 1px var(--header-text-color);
}
}
body > footer {
background: var(--header-background-color);
color: var(--header-text-color);
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr minmax(300px,min(90vw,1024px)) 1fr;
gap: var(--base-unit);
font-size: small;
background-color: var(--header-background-color);
color: var(--header-text-color);
}
body > footer > .content {
grid-column: 2;
}
article{
padding: 2rem;
}
article p {
text-align: justify;
hyphens: manual;
}
@media (max-width: 30em) {
article {
padding: 0.5rem;
}
}
main > article > header {
margin-bottom: 2rem;
}
main > article > header > .episode {
display: flex;
flex-flow: row;
justify-content: space-between;
color: var(--gray);
font-weight: 700;
font-size: small;
margin-bottom: 1rem;
}
main > article > header > h1 {
font-size: 1.50em;
line-height: 1.5;
}
main > article > header > h2 {
font-size: 1.25em;
margin-bottom: 1rem;
}
section.grid {
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
justify-items: center;
align-items: center;
}
article.card {
display: block;
width: min(calc(300px - 20px - 4px), 100%);
height: calc(300px - 20px - 4px);
border: 0px;
border-radius: 5px;
padding: 10px;
box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, .4);
}
article.card > .card_content {
width: min(calc(300px - 20px - 4px), 100%);
height: calc(300px - 20px - 4px);
overflow: hidden;
display: flex;
flex-flow: column;
justify-content: flex-start;
}
article.card .card_header > h2 {
font-size: 1.25em;
}
article.card .card_header > h2 > a {
text-decoration: none;
}
article.card .card_header > p {
text-align: left;
}
article.card .filler {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
flex-grow: 1;
}
article.card .episode {
display: flex;
flex-flow: row;
justify-content: space-between;
color: var(--gray);
font-weight: 700;
font-size: small;
}
article.team .team_member {
display: block;
width: 150px;
height: 150px;
border-radius: 125px;
}
article.team .socials {
display: flex;
flex-flow: row;
justify-content: center;
}
article.team .socials a {
display: inline-flex;
margin: var(--space-1);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
align-items: center;
text-decoration: none;
width: 1.25em;
padding-left: 0.5em;
padding-right: 0.5em;
overflow: hidden;
}
div.episode_container {
display: flex;
flex-flow: row;
justify-content: center;
}
article.episode_details {
max-width: 960px;
}
article.episode_details .card {
max-width: 840px;
}
article.episode_details a,
article.episode_details a:visited {
color: var(--redish);
}
article.episode_details .chronicles ul {
display: block;
list-style: none;
}
article.episode_details .chronicles li {
display: block;
margin-bottom: 2rem;
}
article.episode_details .chronicles h2 {
margin-bottom: 2rem;
}
article.episode_details .chronicles li h3.chronicle_name {
margin-bottom: 1rem;
margin-left: -2rem;
}
article.episode_details .links {
display: flex;
flex-flow: row;
margin-bottom: 2rem;
justify-content: space-evenly;
}
article.episode_details .links > .link {
display: flex;
flex-flow: row;
align-items: center;
}
article.episode_details .links > .link:not(:last-child) {
margin-right: 2rem;
}
article.episode_details .links > .link > *:not(:last-child) {
margin-right: 0.5rem;
}
article.episode_details .links > .link a.social {
display: inline-flex;
margin: var(--space-1);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
align-items: center;
text-decoration: none;
width: 2.5em;
padding-left: 0.5em;
padding-right: 0.5em;
overflow: hidden;
}
article.person_details {
}
article.person_details .person_data h1 {
font-size: 2rem;
}
article.person_details .photo {
float: right;
margin-left: 2rem;
}
article.person_details .photo img {
display: block;
width: 250px;
height: 250px;
border-radius: 125px;
}
article.person_details a,
article.person_details a:visited {
color: var(--redish);
}
article.person_details .socials {
}
article.person_details .socials a {
display: inline-flex;
margin: var(--space-1);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
align-items: center;
text-decoration: none;
width: 2.5em;
padding-left: 0.5em;
padding-right: 0.5em;
overflow: hidden;
}
@media (max-width: 30em) {
article.person_details .photo {
float: none;
display: flex;
flex-flow: row;
justify-content: center;
margin-left: 0;
}
article.person_details .person_data {
float: none;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 2rem;
}
article.person_details .socials {
display: flex;
flex-flow: row;
justify-content: center;
}
}

9
css/pages.css Normal file
View File

@@ -0,0 +1,9 @@
/**
* @file Defines styles specific to pages
* Custom properties are set in `_includes/shortcodes/css-root.js`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--*CSS Custom Properties on MDN}
*/
.article-header h2 {
font-size: 2.5em;
}

36
css/posts.css Normal file
View File

@@ -0,0 +1,36 @@
/**
* @file Defines styles specific to posts
* Custom properties are set in `_includes/shortcodes/css-root.js`
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/--*CSS Custom Properties on MDN}
*/
.article-header h2 {
font-size: 2.5em;
}
article {
max-width: calc(100vw - var(--base-unit) * 2);
}
blockquote {
background-color: var(--grayscale-100);
border-inline-start: var(--border);
color: var(--black);
margin: var(--base-unit);
padding: var(--base-unit);
}
pre {
background-color: var(--grayscale-100);
border-radius: 3px;
border: var(--border);
display: block;
padding: 1em;
overflow-x: auto;
}
pre code {
padding: 0;
background-color: transparent;
border-radius: unset;
}

BIN
img/backgrounds/back-01.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
img/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/favicon-164.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
img/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
img/guests/angela_ricci.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/guests/fanny_demey.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
img/guests/greg_quinio.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/guests/julie-moynat.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/guests/shirley.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Some files were not shown because too many files have changed in this diff Show More