eleventy webpack

onze-webpack ?

Un modèle Barebone Eleventy et Webpack. Fourchette et c'est parti.

Caractéristiques

• Barebone 11ty (littéralement ?)
• ⚡ Construction rapide avec des configurations par environnement (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel, Polyfills)
• .css (Sass, PostCSS, préfixe automatique)
• ✅ Optimisé pour la production (cartes sources, en-têtes, code minifié...)
• ? Images réactives et images distantes mises en cache (@11ty/eleventy-img)
• ? Génération de sprites d'icônes SVG
• ? Métadonnées SEO et balises Open Graph
• ? Liens externes sécurisés ( noopener et noreferrer )
• Shortcodes et filtres utiles (date, démarque, icônes de sprite, images réactives...)
• Superposition d'erreurs soignée (eleventy-plugin-error-overlay)
• ? Plus joli pour le formatage

Démo en direct https://eleventy-webpack.netlify.app

Usage

Installez d'abord les dépendances :

npm install

Vous pourrez alors :

Commande	Description
npm run start	Exécutez votre site Web sur http://localhost:8080
npm run build	Créez votre site Web de production dans /_site
npm run format	Fonctionne plus joliment sur toutes les filles sauf /_site
npm run analyze	Informations de sortie sur la taille de votre bundle

Assurez-vous d'utiliser la bonne version de node.js :

 # with bash nvm 
nvm use ` cat .nvmrc `
# with windows nvm
nvm use $( cat .nvmrc )
# or just install the version specified inside `.nvmrc` 

Pack Web

Un webpack.config.js très simple est inclus. N'hésitez pas à le changer.

Codes courts

Tous les shortcodes peuvent être utilisés dans des fichiers .md ou .njk .

icon

Tout SVG ajouté à src/assets/icons est regroupé dans un fichier de sprite de symbole et rendu disponible via ce shortcode.

 <!-- Assuming `src/assets/icons/github.svg` exist -->
{% icon "github" %} Github icon
<!-- Will be rendered as -->
< svg class =" icon icon--github " role =" img " aria-hidden =" true " >
  < use xlink:href =" /assets/images/sprite.svg#github " > </ use >
</ svg >

---

image

Crée une version WebP de l'image et le JPEG/PNG optimisé correspondant. Les images seront créées en plusieurs tailles. Voir utils/shortcodes.js pour les valeurs par défaut.

 <!-- Assuming `src/assets/images/image.jpeg` of width 330px exist -->
{% image "image.jpeg", "Image alt" %}
<!-- Will be rendered as -->
< picture >
  < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
  < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
  < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
</ picture >

<!-- If a title is passed the shortcode will output a <figure> with <figcaption> -->
{% image "image.jpeg", "Image alt", "Image title" %}
<!-- Will be rendered as -->
< figure >
  < picture >
    < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
    < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
    < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >

<!-- Additional options -->
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
<!-- Will be rendered as -->
< figure class =" fig-my-class " >
  < picture >
    < source type =" image/webp " srcset =" ... " sizes =" 90vw " >
    < source type =" image/png " srcset =" ... " sizes =" 90vw " >
    < img class =" img-my-class " loading =" eager " src =" ... " alt =" Image alt " width =" 100 " height =" 100 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >

---

markdown

Intégrez facilement la démarque.

{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

---

Filtres

Tous les filtres peuvent être utilisés dans des fichiers .md ou .njk .

format

Formatez la date passée avec date-fns :

 <!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020

---

formatISO

Formatez la date passée selon le format ISO :

 <!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z

---

markdown

Analysez la chaîne transmise avec markdown :

 <!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
< h1 > My header </ h1 > 

---

Merci

• https://github.com/gregives/twelvety
• https://github.com/hankchizljaw/hylia
• https://github.com/MadeByMike/supermaya
• https://github.com/jeromecoupe/webstoemp
• https://github.com/maxboeck/eleventastic
• https://github.com/deviousdodo/elevenpack
• https://github.com/ixartz/Eleventy-Starter-Boilerplate
• https://github.com/google/eleventy-high-performance-blog
• https://github.com/danurbanowicz/eleventy-netlify-boilerplate