Initial commit
94
.eleventy.js
Normal 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 template’s output)
|
||||
*
|
||||
* Storing these modules in separate directories,
|
||||
* rather than all in this file,
|
||||
* helps keep the codebase organized—at least that’s the idea.
|
||||
*/
|
||||
import includes from './_includes/'
|
||||
|
||||
/**
|
||||
* 11ty’s configuration module
|
||||
* @module .eleventy
|
||||
* @param {Object} eleventyConfig 11ty’s Config API
|
||||
* @return {Object} 11ty’s Config object optional
|
||||
* @see {@link https://www.11ty.dev/docs/config/ Configuring 11ty}
|
||||
*/
|
||||
export default function (eleventyConfig) {
|
||||
|
||||
// Pass 11ty’s 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
@@ -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
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"cjs": {
|
||||
"dedefault": true
|
||||
}
|
||||
}
|
||||
27
.github/workflows/main.yml
vendored
Normal 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
@@ -0,0 +1,5 @@
|
||||
# Ignore installed npm packages
|
||||
node_modules/
|
||||
|
||||
# Ignore eleventy output during manual tests
|
||||
_site/
|
||||
1
.tool-versions
Normal file
@@ -0,0 +1 @@
|
||||
nodejs 12.16.2
|
||||
88
CONTRIBUTING.md
Normal 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
@@ -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
@@ -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
|
||||
```
|
||||
© 2021 by [Horacio Gonzalez](https://twitter.com/LostInBrittany)
|
||||
70
_data/README.md
Normal 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.
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com.com/LostinBrittany/drowstar-com)
|
||||
|
||||
© 2021 by [Horacio Gonzalez](https://twitter.com/LostInBrittany)
|
||||
49
_data/author.js
Normal 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 shouldn’t 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
@@ -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 shouldn’t 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
@@ -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 shouldn’t 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
@@ -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 shouldn’t 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
@@ -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 shouldn’t 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
@@ -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 shouldn’t 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
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @file Exposes environment variables to templates
|
||||
* @author Reuben L. Lillie <reubenlillie@gmail.com>
|
||||
*/
|
||||
|
||||
/**
|
||||
* Uses Node.js’s `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
@@ -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 shouldn’t 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
@@ -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)).
|
||||
5
_includes/filters/README.md
Normal 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)).
|
||||
28
_includes/filters/file-to-string.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @file Defines a filter to convert a file’s 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 11ty’s Config API
|
||||
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* Converts a file’s contents to a string
|
||||
* @param {String} file The path of the file to convert
|
||||
* (relative to the input directory)
|
||||
* @return {String} The file’s contents
|
||||
* @example `${this.fileToString('css/inline.css')}`
|
||||
*/
|
||||
eleventyConfig.addFilter('fileToString', file =>
|
||||
readFileSync(`${file}`).toString()
|
||||
)
|
||||
26
_includes/filters/index.js
Normal 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 11ty’s 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
|
||||
}
|
||||
37
_includes/filters/minify-css.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* @file Defines a filter to minify CSS inline
|
||||
* @author Reuben L. Lillie <reubenlillie@gmail.com>
|
||||
*/
|
||||
|
||||
/*
|
||||
* Import Jakup Pawlowicz’s 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 11ty’s 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
|
||||
})
|
||||
41
_includes/filters/minify-js.js
Normal 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 11ty’s 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 file’s 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
@@ -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 11ty’s 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
|
||||
}
|
||||
15
_includes/layouts/README.md
Normal 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 Eleventy’s `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. It’s 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 new–old 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.
|
||||
36
_includes/layouts/archive.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
29
_includes/layouts/base.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
110
_includes/layouts/episodes.11ty.js
Normal 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 11ty’s 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>
|
||||
`
|
||||
}
|
||||
34
_includes/layouts/guests.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
36
_includes/layouts/home.11ty.js
Normal 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 11ty’s 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>
|
||||
|
||||
`
|
||||
}
|
||||
30
_includes/layouts/page.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
46
_includes/layouts/person.11ty.js
Normal 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 11ty’s 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>
|
||||
`;
|
||||
|
||||
}
|
||||
30
_includes/layouts/post.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
34
_includes/layouts/team.11ty.js
Normal 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 11ty’s 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>`
|
||||
}
|
||||
5
_includes/shortcodes/README.md
Normal 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)).
|
||||
53
_includes/shortcodes/archive.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* A section of articles
|
||||
* @method
|
||||
* @name archive
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
30
_includes/shortcodes/author-meta.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* HTML author metadata
|
||||
* @method
|
||||
* @name authorMeta
|
||||
* @param {Object} data 11ty’s 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}">`
|
||||
)
|
||||
25
_includes/shortcodes/author.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* Content author markup
|
||||
* @method
|
||||
* @name author
|
||||
* @param {Object} 11ty’s 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>`
|
||||
)
|
||||
29
_includes/shortcodes/colophon.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The colophon markup
|
||||
* @method
|
||||
* @name colophon
|
||||
* @param {Object} data 11ty’s 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}`
|
||||
})
|
||||
29
_includes/shortcodes/copyright-notice.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* Copyright notice markup
|
||||
* @method
|
||||
* @name copyrightNotice
|
||||
* @param {Object} 11ty’s 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">© ${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>`
|
||||
)
|
||||
60
_includes/shortcodes/css-root.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* CSS `:root` custom properties
|
||||
* @method
|
||||
* @name cssRoot
|
||||
* @param {Object} data 11ty’s 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);
|
||||
}
|
||||
}`)
|
||||
30
_includes/shortcodes/description.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* HTML description
|
||||
* @method
|
||||
* @name description
|
||||
* @param {Object} data 11ty’s 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}">`
|
||||
)
|
||||
26
_includes/shortcodes/edit-this-page.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The link markup
|
||||
* @method
|
||||
* @name editThisPage
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
)
|
||||
44
_includes/shortcodes/external-css.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* Create one or more `link` references
|
||||
* @method
|
||||
* @name externalCSS
|
||||
* @param {Object} data 11ty’s 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
|
||||
})
|
||||
33
_includes/shortcodes/favicon.js
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @file Defines a shortcode to load a favicon for the user’s 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 11ty’s 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 11ty’s 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">`;
|
||||
})
|
||||
37
_includes/shortcodes/getting-started.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default function (eleventyConfig) {
|
||||
|
||||
/**
|
||||
* “Getting Started” `section` markup
|
||||
* @method
|
||||
* @name gettingStarted
|
||||
* @param {Object} 11ty’s 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 site’s 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>`
|
||||
})
|
||||
|
||||
}
|
||||
41
_includes/shortcodes/head-tag.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* HTML `<head>` markup
|
||||
* @method
|
||||
* @name headTag
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
66
_includes/shortcodes/index.js
Normal 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 11ty’s 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
|
||||
}
|
||||
32
_includes/shortcodes/inline-css.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* HTML `<style>` markup
|
||||
* @method
|
||||
* @name inlineCSS
|
||||
* @param {Object} data 11ty’s 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}`
|
||||
})
|
||||
48
_includes/shortcodes/jumbo.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default (eleventyConfig) =>
|
||||
/**
|
||||
* Content author markup
|
||||
* @method
|
||||
* @name author
|
||||
* @param {Object} 11ty’s 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>
|
||||
`;
|
||||
}
|
||||
);
|
||||
56
_includes/shortcodes/nav.js
Normal 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 11ty’s 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>`
|
||||
: ''
|
||||
})
|
||||
|
||||
|
||||
35
_includes/shortcodes/page-date.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @file Defines a shortcode for displaying a page’s 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* Page date markup
|
||||
* @method
|
||||
* @name pageDate
|
||||
* @param {Object} data 11ty’s 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)}`
|
||||
: ''
|
||||
})
|
||||
84
_includes/shortcodes/pagination-nav.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The pagination navigation markup
|
||||
* @method
|
||||
* @name paginationNav
|
||||
* @param {Object} data 11ty’s 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 there’s 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>`
|
||||
: '' }`
|
||||
})
|
||||
31
_includes/shortcodes/site-footer.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The page footer markup
|
||||
* @method
|
||||
* @name siteFooter
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
52
_includes/shortcodes/site-header.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The page header markup
|
||||
* @method
|
||||
* @name siteHeader
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
54
_includes/shortcodes/social-icons.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* A social icon
|
||||
* @method
|
||||
* @name archive
|
||||
* @param {Object} data 11ty’s 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>`;
|
||||
})
|
||||
|
||||
|
||||
46
_includes/shortcodes/social-meta.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* OpenGraph and Twitter metadata with fallbacks (./_data/site.js)
|
||||
* @method
|
||||
* @name socialMeta
|
||||
* @param {Object} data 11ty’s 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
|
||||
})
|
||||
59
_includes/shortcodes/team.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* The team
|
||||
* @method
|
||||
* @name archive
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
35
_includes/shortcodes/title-tag.js
Normal 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 11ty’s Config API
|
||||
*/
|
||||
export default eleventyConfig =>
|
||||
|
||||
/**
|
||||
* HTML `<title>` markup
|
||||
* @method
|
||||
* @name titleTag
|
||||
* @param {Object} data 11ty’s 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>`
|
||||
})
|
||||
5
_includes/transforms/README.md
Normal 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)).
|
||||
22
_includes/transforms/index.js
Normal 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 11ty’s 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
|
||||
}
|
||||
40
_includes/transforms/minify-html.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @file Defines a filter to minify HTML template files
|
||||
* @author Reuben L. Lillie <reubenlillie@gmail.com>
|
||||
*/
|
||||
|
||||
/*
|
||||
* Import Juriy Zaytsev’s 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 11ty’s 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
@@ -0,0 +1,24 @@
|
||||
# eleventy-dot-js-blog/content
|
||||
|
||||
By default, [Eleventy works with your project’s existing directory structure](https://www.11ty.dev/docs/). Unlike other static site generators, Eleventy let’s 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).
|
||||
|
||||
Here’s 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 (_don’t 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/)._
|
||||
18
content/content.11tydata.js
Normal 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
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Accueil
|
||||
layout: layouts/home
|
||||
tags: ['home', 'nav']
|
||||
weight: 1
|
||||
permalink: '/'
|
||||
thumbnail: 'next/card.jpg'
|
||||
---
|
||||
|
||||
22
content/pages/pages.11tydata.js
Normal 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
@@ -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 11ty’s data object
|
||||
* @return {String} The rendered template
|
||||
*/
|
||||
export function render(data) {
|
||||
return `<!-- ${data.page.inputPath} -->`
|
||||
}
|
||||
16
content/team/aurelie_vache.md
Normal 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' ]
|
||||
---
|
||||
|
||||
16
content/team/francois_teychene.md
Normal 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' ]
|
||||
---
|
||||
|
||||
21
content/team/horacio_gonzalez.md
Normal 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 d’une vingtaine d’années. Passionné d’informatique, dans laquelle il est tombé depuis tout petit, il a découvert le développement web en 1997 et depuis il n’a 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.
|
||||
15
content/team/philippe_charriere.md
Normal 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'
|
||||
---
|
||||
|
||||
17
content/team/pierre_tibulle.md
Normal 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).
|
||||
|
||||
15
content/team/sebastien_blanc.md
Normal 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' ]
|
||||
---
|
||||
|
||||
16
content/team/stephanie_moallic.md
Normal 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...
|
||||
22
content/team/team.11tydata.js
Normal 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
@@ -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 template’s `data.form` key to a value of `true`.
|
||||
*/
|
||||
121
css/home.css
Normal 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
@@ -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
@@ -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
@@ -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
|
After Width: | Height: | Size: 254 KiB |
BIN
img/backgrounds/camping-des-speakers.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
img/backgrounds/les-briques-du-web.jpg
Normal file
|
After Width: | Height: | Size: 345 KiB |
BIN
img/backgrounds/les-briques-du-web.png
Normal file
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/banner.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
1
img/deploy-to-netlify-button.svg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
img/favicon-164.png
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
img/favicon.ico
Normal file
|
After Width: | Height: | Size: 9.4 KiB |
BIN
img/favicon.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
img/guests/angela_ricci.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
img/guests/cecile_freyd-foucault.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
img/guests/fanny_demey.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
img/guests/francois_beaufort.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
img/guests/greg_quinio.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
img/guests/julie-moynat.jpg
Normal file
|
After Width: | Height: | Size: 227 KiB |
BIN
img/guests/laurent_thiebault.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
img/guests/shirley.jpeg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
img/guests/stephanie_walter.jpeg
Normal file
|
After Width: | Height: | Size: 42 KiB |