Compare commits
1 Commits
33fe1c722f
...
feat/integ
| Author | SHA1 | Date | |
|---|---|---|---|
| 4b0e7fd23c |
@@ -9,14 +9,10 @@ const htmlmin = require('html-minifier');
|
||||
|
||||
let options = {
|
||||
// whatever options you have set for the library here
|
||||
typographer: true,
|
||||
quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
|
||||
};
|
||||
let mdfigcaption = require('markdown-it-image-figures');
|
||||
let figoptions = {
|
||||
figcaption: true,
|
||||
lazy: true,
|
||||
async: true,
|
||||
figcaption: true
|
||||
};
|
||||
const mdLib = markdownIt(options).use(mdfigcaption, figoptions);
|
||||
|
||||
@@ -31,10 +27,10 @@ module.exports = function(eleventyConfig) {
|
||||
//eleventyConfig.addWatchTarget('./src/compiled-assets/main.js');
|
||||
//eleventyConfig.addWatchTarget('./src/compiled-assets/vendor.js');
|
||||
|
||||
// Copy src/compiled-assets to /blog_assets
|
||||
eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'blog_assets' });
|
||||
// Copy src/compiled-assets to /assets
|
||||
eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'assets' });
|
||||
// Copy all images
|
||||
eleventyConfig.addPassthroughCopy('src/blog_images');
|
||||
eleventyConfig.addPassthroughCopy('src/images');
|
||||
|
||||
// Add plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
@@ -70,30 +66,19 @@ module.exports = function(eleventyConfig) {
|
||||
return Math.min.apply(null, numbers);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("filterDraft", articles => {
|
||||
return articles.filter(article => !article.data.draft);
|
||||
});
|
||||
|
||||
// Return all the tags used in a collection
|
||||
eleventyConfig.addFilter("getAllTags", collection => {
|
||||
let tags = new Map();
|
||||
let tagSet = new Set();
|
||||
for(let item of collection) {
|
||||
if (item.data.draft) {
|
||||
continue;
|
||||
}
|
||||
(item.data.tags || []).forEach(tag => {
|
||||
let number = tags.get(tag) || 0;
|
||||
tags.set(tag, ++number);
|
||||
});
|
||||
(item.data.tags || []).forEach(tag => tagSet.add(tag));
|
||||
}
|
||||
let sortedTags = new Map([...tags.entries()].sort((a, b) => b[1] - a[1]));
|
||||
return Array.from(sortedTags.keys());
|
||||
return Array.from(tagSet).sort((a, b) => {
|
||||
return a.localeCompare(b, undefined, {sensitivity: 'base'});
|
||||
});
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
|
||||
return (tags || []).filter(tag => ["all", "nav", "article", "articles"].indexOf(tag) === -1);
|
||||
// const filters = ["all", "nav", "article", "articles"];
|
||||
// return new Map([...tags].filter(([k, _]) => filters.indexOf(k) === -1));
|
||||
return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("readableAuthors", (authors) => {
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
<div class="post-list">
|
||||
{% for article in articlesList | reverse %}
|
||||
<article class="post-list-item">
|
||||
<header class="post-list-header">
|
||||
<h2>
|
||||
<a href="{{ article.url }}" class="post-list-link">{% if article.data.title %}{{ article.data.title }}{% else %}<code>{{ article.url }}</code>{% endif %}</a>
|
||||
</h2>
|
||||
<div class="post-metadata">
|
||||
<div>
|
||||
Le <time datetime="{{ article.data.date | htmlDateString }}">{{ article.data.date | readableDate }}</time> {{ article.data.authors | readableAuthors }}
|
||||
</div>
|
||||
<ul class="post-tags">
|
||||
{%- for tag in article.data.tags | filterTagList %}
|
||||
{%- set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<p>{{ article.data.description }}</p>
|
||||
<footer class="post-list-footer">
|
||||
<a href="{{ article.url }}">Lire la suite</a>
|
||||
</footer>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
26
src/_components/postslist.njk
Normal file
26
src/_components/postslist.njk
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="post-list">
|
||||
{% for post in postslist | reverse %}
|
||||
<article class="post-list-item">
|
||||
<header class="post-list-header">
|
||||
<h2>
|
||||
<a href="{{ post.url }}" class="post-list-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
|
||||
</h2>
|
||||
<div class="post-metadata">
|
||||
<div>
|
||||
Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}
|
||||
</div>
|
||||
<ul >
|
||||
{%- for tag in post.data.tags | filterTagList %}
|
||||
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<p>{{ post.data.description }}</p>
|
||||
<footer class="post-list-footer">
|
||||
<a href="{{ post.url }}">Lire la suite</a>
|
||||
</footer>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="title">Catégories</div>
|
||||
<ul class="tags">
|
||||
{% for tag in collections.all | getAllTags | filterTagList %}
|
||||
{% set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a></li>
|
||||
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"title": "Blog IT's on us",
|
||||
"url": "https://www.itsonus.fr/blog",
|
||||
"url": "https://blog.itsonus.fr/",
|
||||
"language": "fr",
|
||||
"description": "Blog traitant de numérique responsable"
|
||||
}
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
layout: blog.njk
|
||||
templateClass: tmpl-post
|
||||
---
|
||||
<div class="main-content">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<div class="post-metadata__header">
|
||||
Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
|
||||
</div>
|
||||
<ul class="post-tags article-tags">
|
||||
{%- for tag in tags | filterTagList %}
|
||||
{%- set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
<hr>
|
||||
|
||||
{%- set articles = collections.articles | filterDraft %}
|
||||
{%- if articles %}
|
||||
{# these filters are locale-aware in 2.0.0-canary.14 #}
|
||||
{%- set previousArticle = articles | getPreviousCollectionItem %}
|
||||
{%- set nextArticle = articles | getNextCollectionItem %}
|
||||
{%- if nextArticle or previousArticle %}
|
||||
<nav class="post-nav">
|
||||
<ul>
|
||||
{%- if nextArticle %}<li class="next">
|
||||
<a href="{{ nextArticle.url }}" title="Article suivant">
|
||||
<span class="icon" aria-hidden="true">«</span>
|
||||
<span>{{ nextArticle.data.title }}</span>
|
||||
</a>
|
||||
</li>{% endif %}
|
||||
{%- if previousArticle %}<li class="previous">
|
||||
<a href="{{ previousArticle.url }}" title="Article précédent">
|
||||
<span>{{ previousArticle.data.title }}</span>
|
||||
<span class="icon" aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "tagslist.njk" %}
|
||||
{% include "other_links.njk" %}
|
||||
</aside>
|
||||
@@ -6,34 +6,17 @@
|
||||
<title>{{ title or metadata.title }}</title>
|
||||
<meta name="description" content="{{ description or metadata.description }}">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
<link rel="stylesheet" href="/blog_assets/main.css?{{ cacheBust.mainCss }}"/>
|
||||
<link rel="stylesheet" media="print" href="/blog_assets/print.css?{{ cacheBust.printCss }}" />
|
||||
<link rel="alternate" href="/blog/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="/blog/feed/feed.json" type="application/json" title="{{ metadata.title }}">
|
||||
<link rel="icon" href="/blog_images/favicon.svg">
|
||||
{% if "ELEVENTY_ENV" | env == "production"%}
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://itsonus.matomo.cloud/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src='//cdn.matomo.cloud/itsonus.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="/assets/main.css?{{ cacheBust.mainCss }}"/>
|
||||
<link rel="stylesheet" media="print" href="/assets/print.css?{{ cacheBust.printCss }}" />
|
||||
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
|
||||
<link rel="icon" href="/images/favicon.svg">
|
||||
</head>
|
||||
<body class="container">
|
||||
<header class="main-header">
|
||||
<div>
|
||||
<a class="main-header-logo" href="/blog">
|
||||
<img src="/blog_images/logo.svg" alt="IT's on us" width="165" height="33">
|
||||
<a class="main-header-logo" href="/">
|
||||
<img src="/images/logo.svg" alt="IT's on us" width="165" height="33">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
@@ -57,7 +40,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/feed/feed.xml" download>
|
||||
<a href="/feed/feed.xml" download>
|
||||
<svg width="32" height="32" viewBox="0 0 461.432 461.432" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-rss"><title id="title-rss">Accéder au flux RSS du blog</title><g fill="#fff"><path d="M125.896 398.928c0 33.683-27.308 60.999-61.022 60.999-33.684 0-61.006-27.316-61.006-60.999 0-33.729 27.322-61.038 61.006-61.038 33.714 0 61.022 27.308 61.022 61.038zM0 229.636c0 8.441 6.606 15.379 15.036 15.809 60.318 3.076 100.885 25.031 138.248 62.582 36.716 36.864 60.071 89.759 64.082 137.769.686 8.202 7.539 14.524 15.77 14.524h56.701c4.344 0 8.498-1.784 11.488-4.935a15.852 15.852 0 004.333-11.729c-8.074-158.152-130.669-278.332-289.013-286.23a15.846 15.846 0 00-11.709 4.344A15.848 15.848 0 000 173.247v56.389z"/><path d="M0 73.411c0 8.51 6.713 15.482 15.216 15.819 194.21 7.683 350.315 161.798 358.098 355.879.34 8.491 7.32 15.208 15.818 15.208h56.457c4.297 0 8.408-1.744 11.393-4.834a15.857 15.857 0 004.441-11.552C453.181 199.412 261.024 9.27 16.38 1.121A15.844 15.844 0 004.838 5.568 15.842 15.842 0 000 16.954v56.457z"/></g>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -65,7 +48,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-center">
|
||||
Blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
|
||||
Ceci est le blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
|
||||
</div>
|
||||
</footer>
|
||||
{# <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: blog.njk
|
||||
layout: base.njk
|
||||
templateClass: tmpl-home
|
||||
---
|
||||
{{ content | safe }}
|
||||
|
||||
41
src/_layouts/post.njk
Normal file
41
src/_layouts/post.njk
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
layout: base.njk
|
||||
templateClass: tmpl-post
|
||||
---
|
||||
<div class="main-content">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<div class="post-metadata__header">
|
||||
Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
|
||||
</div>
|
||||
<ul>
|
||||
{%- for tag in tags | filterTagList %}
|
||||
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
<hr>
|
||||
|
||||
{%- if collections.posts %}
|
||||
{# these filters are locale-aware in 2.0.0-canary.14 #}
|
||||
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{%- if nextPost or previousPost %}
|
||||
<nav class="post-nav">
|
||||
<ul>
|
||||
{%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
|
||||
{%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "tagslist.njk" %}
|
||||
{% include "other_links.njk" %}
|
||||
</aside>
|
||||
18
src/_pages/404.njk
Normal file
18
src/_pages/404.njk
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
layout: home.njk
|
||||
permalink: 404.html
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<div class="main-content">
|
||||
<p>Cette page n'existe pas !</p>
|
||||
|
||||
|
||||
<p>ous avez fait fausse route ¯\_(ツ)_/¯</p>
|
||||
|
||||
<p><a href="/">Aller à la page d’accueil</a></p>
|
||||
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "tagslist.njk" %}
|
||||
{% include "other_links.njk" %}
|
||||
</aside>
|
||||
@@ -9,8 +9,8 @@ eleventyNavigation:
|
||||
<nav>
|
||||
{% include "tagslist.njk" %}
|
||||
</nav>
|
||||
{% set articlesList = collections.articles | filterDraft %}
|
||||
{% include "articlesList.njk" %}
|
||||
{% set postslist = collections.posts %}
|
||||
{% include "postslist.njk" %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "other_links.njk" %}
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: "Benchmark 2023 : initier l'évaluation de l'empreinte environnementale de son organisation"
|
||||
description: "Évaluer l'empreinte environnementale de son organisation avec une analyse du cycle de vie simplifiée, en conformité avec les préconisations de la commission européenne."
|
||||
date: 2022-11-18
|
||||
tags:
|
||||
- benchmark
|
||||
- greenIT
|
||||
- ACV
|
||||
authors:
|
||||
- Margaux Escande
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
À ce jour, le numérique a plus d'impacts environnementaux que l'aviation civile et ses impacts continuent d'augmenter.
|
||||
|
||||
Beaucoup d'entreprises initient un Bilan Carbone du Numérique. Il faut tout de même savoir que le gros des impacts du numérique se situent non pas sur l'émission de Gaz à Effet de Serre (11%), mais sur l'épuisement de ressources en métaux et minéraux (52%).
|
||||
|
||||
S'intéresser à seulement 11% du problème n'est pas suffisant.
|
||||
|
||||
Il est donc important de suivre la recommandation de la Commission Européenne d'utiliser la méthode d'analyse du Cycle de Vie. En prenant en compte la phase de fabrication, d'utilisation et de fin de vie, et 16 critères environnementaux (pour respecter le Product Environnemental Footprint), vous vous assurez de ne pas avoir de transfert d'impacts et de mettre en œuvre des actions pertinentes.
|
||||
|
||||
[Recommandation (UE) 2021/2279 de la Commission du 15 décembre 2021 relative à l'utilisation de méthodes d'empreinte environnementale pour mesurer et indiquer la performance environnementale des produits et des organisations sur l'ensemble du cycle de vie.](https://eur-lex.europa.eu/legal-content/FR/TXT/?uri=CELEX%3A32021H2279&qid=1641580519072)
|
||||
|
||||
Afin d'aider les entreprises à initier cette mesure, chaque année depuis 2016, un benchmark green IT est réalisé.
|
||||
En rejoignant ce benchmark, une organisation, quelque soit son secteur ou sa taille, peut évaluer son empreinte environnementale selon les standards ISO et le PEF.
|
||||
|
||||
Cela permet de :
|
||||
|
||||
- comprendre où se situent les impacts environnementaux de son système d'information
|
||||
- connaître sa maturité sur les 74 bonnes pratiques Green IT.
|
||||
- comparer son positionnement avec celui des aux organisations
|
||||
- identifier des actions pertinentes et prioritaires à mettre en œuvre
|
||||
- répondre à la pression réglementaire
|
||||
- échanger avec d'autres organisations ayant le même objectif de réduction de l'empreinte environnementale du numérique
|
||||
|
||||
Les rapports sont accessibles sur le site du [Club Green IT](https://club.greenit.fr/).
|
||||
Par exemple, le benchmark de 2021 était composé de 25 grandes entreprises privées et publiques, en France, Belgique, Luxembourg et Suisse, qui au global avaient :
|
||||
|
||||
- 356 000 utilisateurs ;
|
||||
- 1 000 000 d'équipements numériques (informatiques et télécoms) ;
|
||||
- 9 900 m² DC (salle informatique).
|
||||
|
||||
Le coût pour participer au Benchmark varie selon le chiffre d'affaires de l'entreprise de 2 000€ HT à 15 000€ HT.
|
||||
|
||||
Vous avez jusqu'à mi-décembre pour rejoindre le Benchmark 2023.
|
||||
|
||||
Si vous souhaitez en savoir plus nous vous invitons à nous contacter : [contact@itsonus.fr](mailto:contact@itsonus.fr) et à vous inscrire à [la dernière session de présentation du Benchmark 2022 et lancement du Benchmark 2023](https://www.eventbrite.fr/e/billets-benchmark-green-it-2022-et-2023-session-3-452610930477)
|
||||
|
||||
Si vous souhaitez réaliser un accompagnement individuel et des recommandations détaillées, nous vous invitons à découvrir notre offre de [réduction des impacts environnementaux](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/)
|
||||
@@ -1,122 +0,0 @@
|
||||
---
|
||||
title: Comment choisir un ERP responsable ?
|
||||
description: Choisir un ERP responsable et être en conformité avec la loi de finance pour les petites et moyennes entreprises.
|
||||
date: 2022-11-17
|
||||
tags:
|
||||
- choix de solution
|
||||
- cadrage
|
||||
- open source
|
||||
- écoconception
|
||||
authors:
|
||||
- Margaux Escande
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
|
||||
Un ERP (Enterprise Resource Planning) est un progiciel de gestion intégré qui permet "de gérer l'ensemble des processus
|
||||
d'une entreprise en intégrant l'ensemble de ses fonctions, dont la gestion des ressources humaines, la gestion
|
||||
comptable et financière, l'aide à la décision, mais aussi la vente, la distribution, l'approvisionnement et le commerce
|
||||
électronique" [Wikipedia](https://fr.wikipedia.org/wiki/Progiciel_de_gestion_int%C3%A9gr%C3%A9)
|
||||
|
||||
## Les entreprises doivent s'outiller pour suivre l'évolution de la réglementation
|
||||
|
||||
[D'ici à 2026, toutes les entreprises vont devoir émettre des factures électroniques à transmettre aux clients
|
||||
comme à l'administration fiscale.](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000044044176) Cela devrait permettre
|
||||
de lutter contre les fraudes, notamment à la TVA.
|
||||
|
||||
La date d'application varie en fonction de la taille de la structure : juillet 2024 pour les grandes
|
||||
entreprises, janvier 2025 pour les entreprises de tailles intermédiaires et janvier 2026 pour les PME et les
|
||||
microentreprises.
|
||||
|
||||
Les entreprises doivent donc s'outiller pour rendre cela possible. C'est dans ce contexte que nous avons rencontré Equip'tout.
|
||||
|
||||
Equip'tout est une société familiale créée en 2000, devenue une référence dans le Nord de la France dans le domaine
|
||||
de la [location de matériels](http://www.equiptout.fr/index.php?id_cms=1&controller=cms) pour les particuliers, les
|
||||
professionnels et les collectivités.
|
||||
|
||||
Equip'tout défend des valeurs environnementales et sociales qui nous ont amenées à travailler ensemble pour répondre
|
||||
aux nouvelles contraintes de dématérialisation de la facturation.
|
||||
|
||||
## La démarche pour choisir un ERP responsable
|
||||
|
||||
Avant toute chose, il est important que chaque partie prenante du projet et notamment les décisionnaires aient une bonne [compréhension des enjeux du numérique](https://www.itsonus.fr/enjeux_numerique/). C'est pourquoi nous avons commencé notre mission par une sensibilisation.
|
||||
|
||||
Puis, comme toute démarche projet, il convient d'explorer par des interviews et de l'observation le geste métier
|
||||
actuel. Cela nous a permis d’identifier les irritants et les points de satisfaction pour chercher la meilleure réponse.
|
||||
|
||||
Par exemple, nous avons appris qu'une partie du geste métier ne doit pas être numérisée pour s'assurer de la fluidité du
|
||||
parcours. En effet, des fiches papiers sont utilisées dans le processus d'entretien des machines, ce qui donne de façon
|
||||
rapide l'information du travail à réaliser sans manipuler un ordinateur.
|
||||
|
||||
|
||||
|
||||
Après avoir pris connaissance de l'existant, nous avons validé le périmètre du projet, identifié la parcours
|
||||
utilisateur, validé les fonctionnalités prioritaires et réalisé une analyse d'architecture pour comprendre la gestion
|
||||
des échanges et du stockage de données.
|
||||
|
||||
Nous avons ensuite réalisé une grille d’évaluation des outils selon différents critères : fonctionnels, techniques
|
||||
et responsables.
|
||||
|
||||
Cette démarche a abouti à la réalisation d'un prototype permettant à Equip'tout de valider le choix de l'ERP,
|
||||
ainsi que de créer de la confiance entre l'organisation retenue et Equip'tout.
|
||||
|
||||
## 4 critères pour choisir un ERP responsable
|
||||
|
||||
Au-delà de l'objectif d'avoir un ERP adapté au métier d'Equip'tout et conforme au futur changement de
|
||||
réglementation, nous avions 4 objectifs complémentaires.
|
||||
|
||||
**Le service numérique est écoconçu** afin de réduire les impacts environnementaux :
|
||||
|
||||
* le service fonctionne sur des vieux ordinateurs ;
|
||||
* les fonctionnalités sont utiles, utilisables et utilisées ;
|
||||
* les bonnes pratiques d'écoconception sont respectées. Vérifiez s'ils ont fait : une analyse du cycle de
|
||||
* vie (ACV), une analyse de la maturité des 115 bonnes pratiques d'écoconception web ou une estimation des impacts
|
||||
* avec EcoIndex.
|
||||
|
||||
**L'ERP est accessible** à tous quelque soit son contexte d'utilisation :
|
||||
|
||||
* le service numérique a une interface simple et une navigation possible au clavier ;
|
||||
* il possède une version web lisible par un lecteur d'écran ;
|
||||
* une démarche d'évaluation et d'amélioration est en cours. Par exemple, ils ont fait : un audit RGAA, ils sont
|
||||
* certifiés OPQUAST et/ou formé à l'accessibilité numérique.
|
||||
|
||||
**Le logiciel est open source,** le service est accessible sans limites et le code est accessible, étudiable,
|
||||
modifiable et redistribuable :
|
||||
|
||||
* il n'y a pas de surcoût de licence pour accéder à certaines fonctionnalités ;
|
||||
* une communauté existe ;
|
||||
* nous sommes libres de développer sur la plateforme avec n'importe quel partenaire.
|
||||
|
||||
**La solution est durable**, le service est modulable, il est possible de connecter / déconnecter des modules internes
|
||||
et externes au service :
|
||||
|
||||
* le langage utilisé pour s'assurer que les connaissances sont présentes localement ;
|
||||
* la possibilité d'avoir une assistance et d'être formé à l'administration technique et métier ;
|
||||
* le service est exploitable au travers d'API.
|
||||
|
||||
Cela n'a pas été le cas ici, mais il aurait été possible que certaines organisations soient labellisées, comme le Label
|
||||
Numérique Responsable, le label B Corp ou face référence à des reconnaissances comme WattImpact. Cela ne doit pas
|
||||
dispenser de questionner et de vérifier les véritables intentions des organisations.
|
||||
|
||||
## Nous avons choisi de travailler avec Tryton
|
||||
|
||||
Nous avons constaté que les ERPs répondent assez peu aux critères d'écoconception et d'accessibilité.
|
||||
|
||||
Cependant, notre choix s'est naturellement porté sur Tryton, pour plusieurs raisons :
|
||||
|
||||
* L'opportunité de concevoir de façon responsable le module de location non existant à date
|
||||
* La possibilité de naviguer au clavier et d'ajuster l'interface pour répondre au geste métier
|
||||
* L'absence de frais d'utilisation de l'ERP et la liberté de choisir les partenaires (véritablement open source)
|
||||
* La possibilité d'utiliser le service sans être connectée au réseau internet
|
||||
|
||||
|
||||
Cerdic Krier, manager chez B2CK qui est l'entreprise référente dans le déploiement de Tryton :
|
||||
"Nous sommes ravis d'avoir été choisi pour faire les développements et les adaptations pour l'implémentation de
|
||||
Tryton chez Equip'Tout. Cela va permettre d'étendre les fonctionnalités de base de Tryton avec un nouveau module
|
||||
de gestion de location."
|
||||
|
||||
Si vous souhaitez [réduire l'empreinte environnementale et sociale de votre
|
||||
solution](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/) ou si vous souhaitez
|
||||
vous [former au numérique responsable](https://www.itsonus.fr/nos_services/formations/), pensez à
|
||||
nous [contacter](https://www.itsonus.fr/contact/).
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
---
|
||||
title: "Écoconception d'un site de contenu pour le Musée de Bretagne"
|
||||
description: "Retour d'expérience sur le site « Celtique ? L'expo »."
|
||||
date: 2022-11-01
|
||||
tags:
|
||||
- écoconception
|
||||
- retour d'expérience
|
||||
authors:
|
||||
- Anne Faubry
|
||||
- Aurélie Baton
|
||||
- Nicolas Doby
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
En 2022, nous avons conçu et développé le site ["Celtique ? L'expo"](https://www.exposition-celtique.bzh) dans une
|
||||
démarche d’écoconception, afin d'accompagner l'exposition éponyme du Musée de Bretagne. L'écoconception étant un sujet
|
||||
récent, nous avons dû expérimenter et faire certains arbitrages pour trouver les meilleures solutions. Nous souhaitons
|
||||
partager ce retour d’expérience dans cet article et nous espérons que ce retour d'expérience pourra servir à :
|
||||
* Illustrer ce qu'implique concrètement une démarche d'écoconception ;
|
||||
* Diffuser des solutions sobres répondant à certaines problématiques client ou utilisateur ;
|
||||
* Éviter à d'autres concepteurs de commettre les mêmes erreurs et de passer par les mêmes tâtonnements que nous dans leurs projets.
|
||||
|
||||
## Contexte du projet
|
||||
|
||||
### Objectifs du site
|
||||
|
||||
Le [Musée de Bretagne](https://www.musee-bretagne.fr/) a lancé du 18 mars au 4 décembre 2022 l'exposition "Celtique ?", qui interroge l'identité celte de la Bretagne contemporaine. Pour accompagner cette exposition physique, le Musée de Bretagne a souhaité lancer un site internet répondant à deux objectifs principaux :
|
||||
* Rendre les contenus de l'exposition accessibles au plus grand nombre, notamment pour les personnes éloignées géographiquement ainsi qu'une fois l'exposition finie ;
|
||||
* Permettre aux visiteurs de poursuivre leur expérience en ligne via des ressources complémentaires.
|
||||
|
||||
Le site reprend donc les contenus de l'exposition en les adaptant à un contexte web et en les enrichissant d'autres ressources disponibles en ligne.
|
||||
|
||||
### Cahier des charges du site
|
||||
|
||||
En cohérence avec ses valeurs de démocratisation de la culture et de rôle civique des institutions publiques, le cahier des charges émis imposait que le site soit :
|
||||
* accessible (le plus possible)
|
||||
* éco-conçu (le plus sobre possible)
|
||||
* open-source (utilisant des solutions libres et partageant son code source)
|
||||
* cookie-free (ne collectant aucune donnée personnelle des utilisateurs).
|
||||
|
||||
### Équipe
|
||||
|
||||
L'équipe ayant réalisé ce projet était composée de :
|
||||
* [Hélène Maître-Marchois](https://www.linkedin.com/in/h%C3%A9l%C3%A8ne-ma%C3%AEtre-marchois-56758259/) de [Fairness](https://fairness.coop/), interlocutrice commerciale
|
||||
* [Nicolas Doby](https://www.linkedin.com/in/nicolas-doby-a4a96b96/) de [IT's on Us](https://www.itsonus.fr/), développeur
|
||||
* [Aurélie Baton](https://www.linkedin.com/in/aureliebaton/) et [Anne Faubry](https://www.linkedin.com/in/anne-faubry-3b2b8390/), UX/UI Designers
|
||||
|
||||
Côté Musée de Bretagne, les interlocuteurs privilégiés avec lesquels l'équipe de développement a co-créé le site final étaient :
|
||||
* [Manuel Moreau](https://www.linkedin.com/in/manuel-moreau-44b66214a/), Prospective et Innovation
|
||||
* [Sarah Lemiale](https://www.linkedin.com/in/sarah-lemiale/), Cheffe de projet d'exposition
|
||||
|
||||
### Résultat
|
||||
|
||||
La conception et le développement du site se sont déroulés de fin novembre 2021 à mars 2022. Le site a été publié le 13 juin 2022.
|
||||
|
||||
**Les 15 pages de contenu du site sont toutes notées A ou B par ecoindex.** Le nombre moyen de requêtes est de 15, **le poids
|
||||
moyen des pages est de 658 Ko** et la taille moyenne du DOM est de 310. Le site se charge en 2,5 secondes avec une connexion
|
||||
3G moyenne. L’empreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
|
||||
et 15 cl d’eau selon les mesures effectuées avec GreenIT Analysis.
|
||||
|
||||
Retrouvez le détail des mesures d'impacts environnementaux effectuées et leurs explications sur la page [Écoconception](https://www.exposition-celtique.bzh/ecoconception/).
|
||||
|
||||
L'écoconception de services numériques a permis de minimiser les impacts environnementaux du service web tout en
|
||||
améliorant la performance d'usage pour le visiteur du site.
|
||||
|
||||
## Problématiques rencontrées
|
||||
|
||||
Cet article vise avant tout à partager les problématiques de conception rencontrées ainsi que les solutions adoptées.
|
||||
|
||||
### Navigation
|
||||
|
||||
**En écoconception de services numériques :** L'un des ressorts principaux de l'écoconception consiste à fluidifier au maximum le parcours
|
||||
utilisateur. Une navigation complexe entraîne des allers-retours et des chargements de pages superflus.
|
||||
|
||||
**Problèmes rencontrés :** L'arborescence initialement prévue correspondait à l'architecture de l'exposition et au
|
||||
parcours physique des visiteurs. Or, elle était beaucoup trop complexe pour une architecture de site web. Les tests menés
|
||||
nous ont en effet révélé que les utilisateurs ne parvenaient pas à savoir où ils se trouvaient sur le site ou à retrouver
|
||||
une page sur laquelle ils étaient allés auparavant.
|
||||
|
||||
Par ailleurs le cahier des charges indiquait que le site devait répondre à deux usages de navigation distincts :
|
||||
- Navigation linéaire : lecture des contenus dans l'ordre chronologique, celui des chapitres
|
||||
- Navigation transverse : lecture des contenus selon les sujets abordés, en sautant des parties, dans le désordre
|
||||
|
||||
**Solutions :** Les 4 niveaux de profondeur de l'arborescence ont été réduits à 3. Les longueurs de chaque partie ont été harmonisées afin de se retrouver avec 2 parties de 3 et 5 chapitres au lieu de 4 parties de 1 à 4 chapitres. Cela a nécessité des réécritures et des coupes dans le texte, choisies avec le Musée de Bretagne.
|
||||
Deux palettes de couleurs distinctes ont également été retenues pour aider les utilisateurs à identifier où ils se trouvaient.
|
||||
Dans les parties les plus riches, nous avons ajouté un sommaire sous l'introduction et un chemin de fer cliquable en haut de page, permettant des navigations transverses selon les centres d'intérêt de l'internaute. Des boutons "précédent" et "suivant" ont également été travaillés pour les usages de navigation plus linéaires.
|
||||
|
||||
|
||||
|
||||
Ces modes de navigation devaient être également accessibles sur mobile. Le chemin de fer a dû être simplifié.
|
||||
|
||||
__Nota bene :__ Certains utilisateurs, notamment les moins à l'aise avec le numérique, ne pensent pas nécessairement à cliquer sur le logo pour revenir à l'accueil. Il est important de prévoir une entrée "Accueil" dans le menu pour ces personnes.
|
||||
|
||||
### Photos
|
||||
|
||||
**En écoconception de services numériques :** En 2022, les images d'une page web représentent en moyenne plus
|
||||
de 1 Mo ([HTTP Archive](https://httparchive.org/reports/page-weight)). Or GreenIT.fr recommande de rester sous
|
||||
la barre de 1 Mo pour le poids d'une page.
|
||||
|
||||
**Problèmes rencontrés :** Le site “Celtique ?” est un site de contenu, présentant des photos de collections de
|
||||
musées. Plusieurs pages intègrent une dizaine d'images de bonne qualité. Certains utilisateurs, comme des enseignants
|
||||
et des chercheurs, peuvent avoir besoin d'accéder aux images en haute définition. Certaines photos des œuvres transmises
|
||||
étaient d'excellente qualité à des fins de conservation, et pesaient à l'origine plus de 50 Mo.
|
||||
|
||||
**Solutions :** Comme toujours en écoconception, il s'agit tout d'abord d'interroger le besoin. Ici, il est
|
||||
double : accompagner les textes explicatifs et s'immerger dans les collections. Certaines images superflues ont ainsi
|
||||
été écartées pour réduire leur nombre à 10 par page de contenu au maximum.
|
||||
|
||||
Deuxièmement, nous nous sommes interrogés sur la définition nécessaire pour les images. Nous avons choisi de les
|
||||
afficher en taille moyenne pour la plupart (entre 300 et 800 pixels de large) avec une **option "Voir en résolution
|
||||
maximale"** pour accéder à la haute définition.
|
||||
|
||||
|
||||
|
||||
Les photos ont été fortement optimisées. Ainsi, même en haute définition, les images ne font pas plus de 1024 pixels
|
||||
de large et conservent un poids inférieur à 2 Mo. Les images de taille moyenne font quant à elles généralement
|
||||
entre 50 et 200 Ko.
|
||||
|
||||
Pour accéder à notre méthode de compression des
|
||||
images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
|
||||
|
||||
Pour les images vectorielles, nous avons privilégié le format SVG qui est généralement plus léger que le JPEG,
|
||||
sauf pour les images vectorielles complexes telles que la "Carte des flux de populations et échanges économiques et
|
||||
culturels au haut Moyen ge" qui était plus lourde au format SVG.
|
||||
|
||||
Lorsque possible, certaines images vectorielles ont été remplacées par des glyphes : par exemple la flèche
|
||||
précédent / suivant est un caractère.
|
||||
|
||||
### Vidéos
|
||||
|
||||
**En écoconception de services numériques :** Les vidéos représentent environ 80% des données transférées sur
|
||||
internet. Gourmand en énergie, le streaming a des impacts environnementaux considérables : obsolescence accélérée du
|
||||
matériel, renouvellement des infrastructures générant un effet rebond, exigences élevées en stockage, transfert de
|
||||
données… Il s'agit de les réduire au maximum.
|
||||
|
||||
**Problèmes rencontrés :** La vidéo est un média populaire, efficace en communication. Les expositions sont souvent présentées par une vidéo, généralement positionnées haut sur la page d'accueil pour inciter au visionnage. Plusieurs interviews et vidéos explicatives font également partie de l'exposition, pesant 200 Mo à 500 Mo chacune. Par ailleurs, le plugin Youtube, souvent utilisé pour incruster les vidéos dans la page pèse à lui seul 2,5 Mo et nécessite de nombreuses requêtes.
|
||||
|
||||
**Solutions :** Certaines vidéos ont été placées plus bas sur les pages, voire en lien externe vers Youtube pour ne pas trop inciter à les visionner lorsqu’elles n’étaient pas essentielles à la compréhension.
|
||||
|
||||
Elles ont été **compressées à 720p et fortement optimisées**, permettant souvent de diviser leur poids par 15. Pour accéder à
|
||||
notre méthode de compression des images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
|
||||
|
||||
Les vidéos ont été incrustées en HTML5. Cela permet de ne pas avoir à télécharger un nouveau lecteur réduisant fortement le nombre de requêtes.
|
||||
|
||||
### Police
|
||||
|
||||
**En écoconception de services numériques :** Même si les polices ne sont pas l'élément le plus impactant, elles contribuent à accroître
|
||||
le poids de la page et les transferts nécessaires à leur téléchargement. En utilisant des polices
|
||||
standards, pré-installées sur l’ordinateur on économise donc de la bande passante tout en accélérant l’affichage de la page.
|
||||
|
||||
**Problèmes rencontrés :** Comme de nombreux évènement culturels, l’exposition “Celtique ?” a une forte identité
|
||||
et la typographie choisie pour l’exposition physique est très marquée et rappelle le caractère celtique. Cependant, cette
|
||||
typographie n’est pas utile pour le texte de la page et télécharger une police de caractère simplement pour appliquer à un
|
||||
titre n’est pas un choix pertinent.
|
||||
|
||||
**Solutions :** Pour répondre à l’objectif d'écoconception tout en gardant l’identité de l’exposition, nous avons utilisé la
|
||||
police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver
|
||||
l’apparence de la typographie dans le titre de l’exposition.
|
||||
|
||||
|
||||
|
||||
### Interactions
|
||||
|
||||
**En écoconception de services numériques :** Certaines interactions et animations peuvent être coûteuses en termes de ressources car elles
|
||||
nécessitent dans certains cas l’implémentation de JavaScript ou de certaines propriétés CSS à éviter.
|
||||
|
||||
**Problèmes rencontrés :**
|
||||
Pour rendre l’exposition interactive et accessible au plus grand nombre, le Musée de Bretagne avait prévu un test (quiz) pour que chacun puisse découvrir son “profil celte”. L’idée était donc de conserver ce questionnaire pour la version en ligne de l’exposition. Mais comment rendre un test suffisamment interactif tout en limitant l’utilisation de ressources ?
|
||||
|
||||
Les questions du questionnaire étaient au départ au nombre de 12. Nous avions envisagé une barre de progression afin que l’utilisateur ait une indication visuelle de sa progression dans le questionnaire.
|
||||
|
||||
**Solutions :**
|
||||
Après plusieurs tests utilisateurs sur les maquettes il est finalement devenu apparent qu’il y avait trop de questions. Nous
|
||||
avons donc proposé de passer à 9 questions au lieu de 12. Les tests utilisateurs ont été concluants et la barre de
|
||||
progression était finalement superflue. Nous avons finalement décidé d’éliminer la barre de progression ce qui
|
||||
nécessitait également moins de développement.
|
||||
|
||||
Cependant, afin que l’utilisateur ait un retour clair avant validation, nous avons conservé un **simple décompte
|
||||
des réponses** en utilisant un simple code Javascript.
|
||||
|
||||
|
||||
|
||||
### Page Écoconception
|
||||
|
||||
**En écoconception de services numériques :** Une des bonnes pratiques de l’écoconception consiste à documenter la démarche pour faire
|
||||
avancer le sujet et partager l’expérience, mais aussi afin d’expliquer le contexte et les limites du projet.
|
||||
|
||||
**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche d’écoconception, il y a d’un côté,
|
||||
l’objectif à atteindre, et de l’autre, les limites auxquelles nous sommes confrontés. Nous avons pu mettre
|
||||
en place une grande partie des bonnes pratiques d’écoconception, mais certaines n’ont pas pu être mises en place
|
||||
pour le moment car elles touchent à l’écosystème plus global des Champs Libres (par exemple l’hébergement des
|
||||
vidéos sur une plateforme de type PeerTube ou les statistiques de fréquentation du site sur un outil tel que Matomo).
|
||||
|
||||
**Solutions :** Plutôt que d’afficher un score EcoIndex en bas de page ou bien une estimation de l’empreinte
|
||||
environnementale, nous avons préféré (après discussion avec l’équipe du musée) documenter notre **intention
|
||||
d’écoconception dans une page** disponible dans le pied de page du site, au même titre que la déclaration d’accessibilité.
|
||||
|
||||
|
||||
|
||||
### Techniques
|
||||
|
||||
La particularité de ce projet est qu’il ne nécessite aucune modification graphique, aucun ajout de page ou de contenu. Seules des corrections textuelles mineures seront réalisées sur ce site. De ce fait, un générateur de site statique répond amplement au besoin. Ceci permettant de générer une seule fois les ressources statiques (HTML, CSS, JS) lors de l’installation contrairement à des sites dynamiques qui génèrent les pages à la volée, à chaque visite du site web. Ce choix soulage la charge serveur, le transformant en simple fournisseur de fichiers et non un calculateur récurrent.
|
||||
|
||||
Le générateur de [sites statiques 11ty](https://www.11ty.dev/) a été retenu en utilisant pour la plupart des pages un format Markdown et un template global pour la mise en forme. Le format Markdown, étant lisible sans avoir de connaissance technique, il est aisé d’apporter des corrections sur le fond sans “casser” la forme.
|
||||
|
||||
Au fur et à mesure des avancées des maquettes, il s’est avéré que chacune des pages étaient différentes. Le Markdown perdant son avantage d’être lisible, il a été décidé de passer sur un format Nunjunk ; permettant d’avoir plus de souplesse dans le développement.
|
||||
|
||||
Ce changement a induit de former les équipes non-techniques sur ces aspects techniques :
|
||||
* l’architecture technique du projet : savoir à quel endroit se trouve les textes à modifier,
|
||||
* comment modifier des fichiers sources Nunjunk en respectant un format contraignant.
|
||||
|
||||
Une fois les modifications réalisées, les équipes techniques peuvent générer et re-déployer une version de production.
|
||||
|
||||
@@ -1,217 +0,0 @@
|
||||
---
|
||||
title: "Impacts environnementaux du numérique en France"
|
||||
description: "Grâce à l’étude de l’ADEME et de l’ARCEP de janvier 2022, quantification et analyse des impacts
|
||||
environnementaux du numérique en France."
|
||||
date: 2022-11-21
|
||||
tags:
|
||||
- impacts environnementaux
|
||||
- écoconception
|
||||
- ACV
|
||||
authors:
|
||||
- Anthony Lecerf
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
Le numérique est au cœur de notre quotidien et bouleverse nos modes de vie et de travail. Il a également des effets
|
||||
négatifs involontaires, entre autres sur notre environnement, qu’il faut absolument chercher à réduire car le numérique
|
||||
contribue au dépassement de plusieurs limites planétaires, c’est-à-dire aux quantités d’impacts environnementaux
|
||||
au-dessus desquels nous déstabiliseront les équilibres fondamentaux de la planète.
|
||||
|
||||
Rappelons que sur neuf limites planétaires, six ont désormais été dépassées : le changement climatique, l’érosion de la
|
||||
biodiversité, les perturbations globales du cycle de l’azote et du phosphore, les changements d'utilisation des sols,
|
||||
l'introduction de nouvelles substances (en 2022) et l’utilisation de l'eau douce (en 2022).
|
||||
|
||||
## Principes d’évaluation environnementale
|
||||
|
||||
Contrairement à ce que sous-entend l’univers sémantique du numérique ("cloud", dématérialisation, virtualisation...)
|
||||
**les services numériques ont une matérialité bien réelle** : des équipements et des infrastructures sont nécessaires
|
||||
pour
|
||||
exécuter les logiciels, naviguer sur les sites web et utiliser les applications.
|
||||
|
||||
C’est bien cette matérialité qui engendre des impacts environnementaux. En effet, un logiciel n’a pas d’impacts
|
||||
environnementaux à proprement parler (et ne s’écoconçoit pas) alors que les éléments physiques d’un service numérique en
|
||||
ont.
|
||||
|
||||
Pour quantifier et analyser ces impacts, il est important de prendre en compte plusieurs critères environnementaux car
|
||||
le numérique a bien plus d’effets négatifs que les seules émissions de gaz à effet de serre. Si l’analyse n’est pas
|
||||
multicritère, le risque que les solutions apportées transfèrent les impacts d’un critère vers un autre est réel.
|
||||
|
||||
Il est également essentiel d’avoir une approche multi-étapes et systémique et de considérer l’ensemble des étapes du
|
||||
cycle de vie de tous les éléments physique sous-jacents à une unité fonctionnelle. On définit l’objet d’une étude par la
|
||||
fonction qu’il remplit afin de pouvoir comparer différentes solutions.
|
||||
|
||||
C’est là tout l’intérêt de **la méthode holistique que représente l’analyse de cycle de vie (ACV)**.
|
||||
[Une évaluation environnementale](https://www.arcep.fr/uploads/tx_gspublication/etude-numerique-environnement-ademe-arcep-volet02_janv2022.pdf),
|
||||
basée sur la méthode ACV, pilotée par l’ADEME et l’ARCEP et publiée en janvier 2022, quantifie et analyse les impacts
|
||||
environnementaux du numérique en France au travers de l’unité fonctionnelle suivante :
|
||||
|
||||
"Utiliser les équipements et systèmes basés en France liés aux équipements et infrastructures numériques sur un an"
|
||||
|
||||
## Matérialité des équipements et infrastructures numériques en France
|
||||
|
||||
Selon cette étude, cette unité fonctionnelle couvre l’utilisation de plus d’un milliard d’équipements utilisateurs
|
||||
(terminaux) et notamment :
|
||||
|
||||
- plus de 120 millions de téléphones, dont 70 millions de smartphones ;
|
||||
- près de 25 millions de tablettes ;
|
||||
- près de 60 millions d’ordinateurs portables et 40 millions d’ordinateurs fixes ;
|
||||
- environ 40 millions d’écrans d’ordinateur et 60 millions de téléviseurs ;
|
||||
- plus de 20 millions d’imprimantes ;
|
||||
- environ 245 millions d’objets connectés.
|
||||
|
||||
Elle implique également des équipements réseau et des centres informatiques, entre autres :
|
||||
|
||||
- environ 30 millions d’abonnés (et donc de box internet) à des réseaux fixes ;
|
||||
- environs 95 millions d’abonnés à des réseaux mobiles, dont approximativement 20 millions pour des communications entre
|
||||
machines ;
|
||||
- 1,5 million de serveurs ;
|
||||
- 15 millions de disques durs et SSD.
|
||||
|
||||
**La matérialité du numérique est donc très fortement liée aux équipements des utilisateurs : il y a plus de 660
|
||||
terminaux pour 1 serveur.**
|
||||
|
||||
__Nota bene :__ les impacts des équipements réseaux n’ont pas pu se baser sur un nombre d’équipements et leur durée de vie
|
||||
car les opérateurs et équipementiers n’ont pas pu déterminer cette dernière. L’infrastructure réseau n’a pas été prise
|
||||
en compte car des données ont aussi manqué à ce niveau. Cela fait partie des limites de cette étude.
|
||||
|
||||
## Principaux impacts environnementaux du numérique en France
|
||||
|
||||
### Impact sur le changement climatique
|
||||
|
||||
Il se définit comme suit : "Les gaz à effet de serre (GES) sont des composés gazeux qui absorbent le rayonnement
|
||||
infrarouge émis par la surface de la Terre. L'augmentation de leur concentration dans l'atmosphère terrestre contribue
|
||||
au réchauffement climatique."
|
||||
|
||||
Il représente 16,9 milliards de tonnes équivalent CO₂ soit les émissions d’un parc de plus de 12 millions de véhicules
|
||||
parcourant plus de 12 000 km / an et émettant 112 g éq. CO₂ / km ou encore l’équivalent des émissions de plus de 2
|
||||
millions d’habitants du monde.
|
||||
|
||||
### Épuisement des ressources abiotiques – éléments (minerais, métaux)
|
||||
|
||||
La définition de cet impact est la suivante : "L'exploitation industrielle entraîne une diminution des ressources
|
||||
disponibles dont les réserves sont limitées. Cet indicateur évalue la quantité de ressources minérales et métalliques
|
||||
extraites de la nature comme s'il s'agissait d'antimoine".
|
||||
|
||||
Le numérique en France contribue à l’épuisement des ressources abiotiques – éléments à hauteur de 948 tonnes équivalent
|
||||
antimoine, soit près de 19 000 milliards de tonnes de terre excavée, ou encore, selon l’étude, l’équivalent de la
|
||||
contribution de 15 millions d’habitants du monde.
|
||||
|
||||
### Épuisement des ressources abiotiques – fossiles
|
||||
|
||||
"L'indicateur représente la consommation d'énergie primaire provenant de différentes sources non renouvelables
|
||||
(pétrole, gaz naturel, etc.). Contrairement à ce que le nom indique, la consommation d’énergie primaire issue de
|
||||
l’uranium est également considérée. Les calculs sont basés sur le Pouvoir Calorifique Inférieur (PCI) des types
|
||||
d'énergie considérés, exprimé en MJ/kg. Par exemple, 1 kg de pétrole apporteront 41,87 MJ à l'indicateur considéré."
|
||||
|
||||
Le numérique en France épuise ce type de ressource à hauteur de 796 milliards de mégajoules de ressources fossiles soit
|
||||
la contribution à l’épuisement de ressources fossiles de 12 millions d’habitants du monde.
|
||||
|
||||
### Radiations ionisantes
|
||||
|
||||
"Les radionucléides peuvent être libérés lors de plusieurs activités humaines. Lorsque les radionucléides se
|
||||
désintègrent, ils libèrent des rayonnements ionisants. L'exposition humaine aux rayonnements ionisants provoque des
|
||||
dommages à l'ADN, qui à leur tour peuvent conduire à divers types de cancer et de malformations congénitales."
|
||||
|
||||
Le numérique en France contribue aux radiations ionisantes à la hauteur de 98 milliards de kilobecquerel équivalent
|
||||
uranium 235 soit la radioactivité générée par les besoins de 25 millions d’habitants du monde.
|
||||
|
||||
### Écotoxicité, eaux douces
|
||||
|
||||
"Ces indicateurs suivent toute la chaîne d'impact depuis l'émission d'un composant chimique jusqu'à l'impact final sur
|
||||
l'Homme et les écosystèmes. Cela comprend la modélisation de la distribution et du devenir dans l'environnement,
|
||||
l'exposition des populations humaines et des écosystèmes, et les effets liés à la toxicité associés à l'exposition."
|
||||
|
||||
La contribution du numérique en France à l’écotoxicité est de 263 milliards d’unités de toxicité pour des écosystèmes.
|
||||
Cela correspond à l’écotoxicité générée par 6 millions d’habitants du monde.
|
||||
|
||||
### Autres impacts
|
||||
|
||||
Trois impacts environnementaux, parmi bien d’autres, méritent d’être soulignés. L’acidification, les émissions de
|
||||
particules fines et la création d’ozone photochimique sont des effets négatifs significatifs du numérique : leur
|
||||
quantité est équivalente à ceux générés par un million d’habitants du monde.
|
||||
|
||||
__Définitions :__
|
||||
|
||||
- Acidification :
|
||||
"L’acidification de l'air est liée aux émissions d'oxydes d'azote, d'oxydes de soufre,
|
||||
d'ammoniac et d'acide chlorhydrique. Ces polluants se transforment en acides en présence d'humidité, et leurs retombées
|
||||
peuvent endommager les écosystèmes ainsi que les bâtiments."
|
||||
|
||||
- Émissions de particules fines :
|
||||
"La présence de particules
|
||||
fines de petit diamètre dans l'air - en particulier celles d'un diamètre inférieur à 10 microns - représente un problème
|
||||
de santé humaine, car leur inhalation peut provoquer des problèmes respiratoires et cardiovasculaires."
|
||||
|
||||
- Création d’ozone photochimique :
|
||||
"L'ozone troposphérique se forme dans la basse atmosphère à partir de composés organiques volatils
|
||||
(COV) et d'oxydes d'azote résultant du rayonnement solaire. L'ozone est un oxydant très puissant connu pour avoir des
|
||||
effets sur la santé, car il pénètre facilement dans les voies respiratoires."
|
||||
|
||||
__Nota bene :__ "L’indicateur d’épuisement de la ressource en eau \[a donné\] des résultats non cohérents du fait d’une
|
||||
surreprésentation de la fin de vie liée aux données utilisées. Ce point a été identifié \[par les auteurs\], mais n’a pas
|
||||
pu être corrigé dans le temps de l’étude. Soyons conscient que le numérique contribue aussi fortement au stress
|
||||
hydrique. [L’étude iNum : impacts environnementaux du numérique en France](https://www.greenit.fr/impacts-environnementaux-du-numerique-en-france/) de [GreenIT.fr](https://www.greenit.fr/), également basé sur une méthode ACV,
|
||||
concluait que le numérique en France contribuait à la tension sur l’eau douce à hauteur de 559 millions de m³ d'eau
|
||||
douce soit 5 fois la consommation d’eau des Parisiens."
|
||||
|
||||
### Impacts du numérique en France par habitant
|
||||
|
||||
L’impact annuel du numérique sur le changement climatique est de 235 kg éq. CO₂ par français, soit les émissions de gaz
|
||||
à effet de serre équivalentes à celles d’un trajet de 2 259 km en voiture.
|
||||
|
||||
La production annuelle de déchets numériques est de 299 kg par habitant.
|
||||
|
||||
Pour répondre à ses besoins numériques un Français génère une masse de matériaux déplacée considérable de 932 kg chaque
|
||||
année.
|
||||
|
||||
## Source des impacts du numérique en France
|
||||
|
||||
Par leur nombre les équipements des utilisateurs représentent 63 à 92% de ces impacts!
|
||||
|
||||
À part pour les indicateurs épuisement des ressources – fossiles, radiations ionisantes et émissions de particules
|
||||
fines, auxquels l’utilisation de ces équipements, et donc la production d’électricité pour les alimenter, contribue le
|
||||
plus, **c’est la fabrication des équipements des utilisateurs qui concentre la majorité des impacts** et ce pour deux
|
||||
raisons :
|
||||
|
||||
- ces équipements requièrent une quantité importante de métaux et de minerais, dont l’extraction demande beaucoup
|
||||
d’énergie motrice – produite à partir de moteurs à explosion et d’hydrocarbures, de ressources et d’intrants
|
||||
chimiques, et engendre beaucoup de déchets ;
|
||||
- la fabrication des équipements et infrastructures du numérique nécessite énormément d’énergie produite dans des pays
|
||||
avec un mix énergétique très carboné ainsi qu’une grande force motrice générée par des moteurs à explosion.
|
||||
|
||||
### Poids des différents équipements dans l’empreinte environnementale du numérique français
|
||||
|
||||
Par leur nombre et leurs impacts unitaires importants, tant pour les fabriquer que pour les utiliser, les téléviseurs
|
||||
représentent 11 à 30% des impacts du numérique français. Ils participent particulièrement à l’épuisement des ressources
|
||||
– éléments.
|
||||
|
||||
Viennent ensuite les ordinateurs portables et fixes, les smartphones, les box TV, les consoles de jeu vidéo, les
|
||||
imprimantes et les autres écrans qui par leur nombre et leurs impacts unitaires élevés expliquent 5 à 15% des impacts.
|
||||
|
||||
Les objets connectés, peu impactants unitairement, mais très nombreux, contribuent pour la majorité des impacts, de 3 à
|
||||
6% de l’empreinte environnementale du numérique en France.
|
||||
|
||||
### Réseau fixe VS réseau mobile
|
||||
|
||||
Les impacts environnementaux des réseaux mobiles sont plus importants que ceux des réseaux fixes, par quantité de
|
||||
données transférées.
|
||||
|
||||
### Usages personnels VS usages professionnels
|
||||
|
||||
Les résultats de l’étude de l’ADEME et de l’ARCEP montrent que les usages professionnels contribuent de 37 à 48% des
|
||||
impacts et les usages personnels contribuent de 42 à 63% des impacts.
|
||||
|
||||
## Recommandations et réponses de IT’s on us
|
||||
|
||||
La fabrication est la principale source d'impacts pour l'environnement. Cela s’explique notamment par la quantité
|
||||
importante d’énergies fossiles nécessaire à leur production et à l'extraction des minerais. L’utilisation représente
|
||||
"seulement" 21 % de la contribution au changement climatique en raison du mix énergétique peu carboné de la France.
|
||||
|
||||
Les auteurs de l'étude recommandent donc d’allonger au maximum la durée de vie des équipements "à travers la durabilité
|
||||
des produits, le réemploi, le reconditionnement, l’économie de la fonctionnalité ou la réparation".
|
||||
|
||||
Les membres du collectif IT’s on us [accompagnent les organisations](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/) et les aident à :
|
||||
- utiliser moins d’équipements numériques et à les faire durer plus longtemps grâce à la démarche Numérique Responsable.
|
||||
- écoconcevoir les services numériques en les dotant de couches applicatives fonctionnant sur de vieux équipements et
|
||||
- [changer de modèle économique](https://www.itsonus.fr/nos_services/developper_modeles_durables/), quand elles appartiennent secteur du numérique, afin de sortir de la logique de volume
|
||||
et corréler leurs intérêts économiques avec les intérêts socio-environnementaux.
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"tags": [
|
||||
"articles"
|
||||
"posts"
|
||||
]
|
||||
}
|
||||
56
src/_pages/blog/exemple.md
Normal file
56
src/_pages/blog/exemple.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Exemple d'article
|
||||
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
date: 2022-10-14
|
||||
tags:
|
||||
- ACV
|
||||
- EFC
|
||||
- écoconception
|
||||
authors:
|
||||
- John Doe
|
||||
layout: post.njk
|
||||
---
|
||||
|
||||
## Introduction
|
||||
Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
|
||||
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
|
||||
## Partie une
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```diff-js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
+ let counter = 0;
|
||||
- let counter = 1;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Partie deux
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
let counter = 0;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
59
src/_pages/blog/exemple_2.md
Normal file
59
src/_pages/blog/exemple_2.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Second exemple d'article
|
||||
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
date: 2022-10-15
|
||||
tags:
|
||||
- cryptographie
|
||||
authors:
|
||||
- Alice
|
||||
- Bob
|
||||
layout: post.njk
|
||||
---
|
||||
|
||||
## Introduction
|
||||
Les personnages Alice et Bob sont des figures classiques en cryptologie. Ces noms sont utilisés au lieu
|
||||
de « personne A » et « personne B » ; Alice et Bob cherchent dans la plupart des cas à communiquer de manière sécurisée.
|
||||
|
||||
Ces noms ont été inventés par Ron Rivest, Adi Shamir et Leonard Adleman pour leur article de 1978 dans le Communications
|
||||
of the ACM qui présentait le cryptosystème RSA (le rapport technique de 1977 sur RSA n'utilisait pas encore ces noms)
|
||||
Rivest nie tout lien avec le film de 1969 intitulé Bob et Carole et Ted et Alice. Les personnages sont rapidement devenus
|
||||
populaires dans la communauté des cryptographes, entre autres après que leur « histoire » a été racontée lors d'un after-dinner
|
||||
speech de John Gordon lors d'une conférence à Zurich.
|
||||
|
||||
D'autres prénoms sont utilisés pour décrire d'autres rôles, comme Oscar (l'adversaire, opponent en anglais) ou Eve (une « écouteuse » ou eavesdropper) ou Robert (le responsable, Roberto en espagnol). Ces personnages font souvent partie des démonstrations d'attaques et d'explications sur les protocoles. Selon la langue, on peut trouver d'autres prénoms (Bernard ou Carole en français, par exemple).
|
||||
## Partie une
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```diff-js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
+ let counter = 0;
|
||||
- let counter = 1;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Partie deux
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
let counter = 0;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
51
src/_pages/blog/exemple_3.md
Normal file
51
src/_pages/blog/exemple_3.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Troisième exemple d'article
|
||||
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
date: 2022-10-17
|
||||
tags:
|
||||
- accessibilité
|
||||
authors:
|
||||
- John Murdock
|
||||
layout: post.njk
|
||||
---
|
||||
|
||||
## Introduction
|
||||
Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
## Partie une
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```diff-js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
+ let counter = 0;
|
||||
- let counter = 1;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Partie deux
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
|
||||
```js
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
let counter = 0;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
# Metadata comes from _data/metadata.json
|
||||
permalink: /blog/feed/feed.json
|
||||
---
|
||||
{
|
||||
"version": "https://jsonfeed.org/version/1.1",
|
||||
"title": "{{ metadata.title }}",
|
||||
"language": "{{ metadata.language }}",
|
||||
"home_page_url": "{{ metadata.url | addPathPrefixToFullUrl }}",
|
||||
"feed_url": "{{ permalink | htmlBaseUrl(metadata.url) }}",
|
||||
"description": "{{ metadata.description }}",
|
||||
"author": {
|
||||
"name": "{{ metadata.author.name }}",
|
||||
"url": "{{ metadata.author.url }}"
|
||||
},
|
||||
"items": [
|
||||
{%- for article in collections.articles | filterDraft | reverse %}
|
||||
{%- set absoluteArticleUrl = article.url | htmlBaseUrl(metadata.url) %}
|
||||
{
|
||||
"id": "{{ absoluteArticleUrl }}",
|
||||
"url": "{{ absoluteArticleUrl }}",
|
||||
"title": "{{ article.data.title }}",
|
||||
"content_html": {% if article.templateContent %}{{ article.templateContent | transformWithHtmlBase(absoluteArticleUrl, article.url) | dump | safe }}{% else %}""{% endif %},
|
||||
"date_published": "{{ article.date | dateToRfc3339 }}"
|
||||
}
|
||||
{% if not loop.last %},{% endif %}
|
||||
{%- endfor %}
|
||||
]
|
||||
}
|
||||
@@ -1,15 +1,14 @@
|
||||
---
|
||||
title: Intégrer une vidéo sur une page Web
|
||||
description: Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique.
|
||||
date: 2022-11-25
|
||||
date: 2022-11-02
|
||||
tags:
|
||||
- écoconception
|
||||
- accessibilité
|
||||
- éthique
|
||||
authors:
|
||||
- Nicolas DOBY
|
||||
draft: true
|
||||
layout: article.njk
|
||||
layout: post.njk
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
# Metadata comes from _data/metadata.json
|
||||
permalink: /blog/feed/feed.xml
|
||||
permalink: /feed/feed.xml
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
|
||||
@@ -8,20 +8,20 @@ permalink: /blog/feed/feed.xml
|
||||
<subtitle>{{ metadata.description }}</subtitle>
|
||||
<link href="{{ permalink | htmlBaseUrl(metadata.url) }}" rel="self"/>
|
||||
<link href="{{ metadata.url | addPathPrefixToFullUrl }}"/>
|
||||
<updated>{{ collections.articles | filterDraft | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
|
||||
<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
|
||||
<id>{{ metadata.url }}</id>
|
||||
<author>
|
||||
<name>{{ metadata.author.name }}</name>
|
||||
<email>{{ metadata.author.email }}</email>
|
||||
</author>
|
||||
{%- for article in collections.articles | filterDraft | reverse %}
|
||||
{% set absolutePostUrl %}{{ article.url | htmlBaseUrl(metadata.url) }}{% endset %}
|
||||
{%- for post in collections.posts | reverse %}
|
||||
{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %}
|
||||
<entry>
|
||||
<title>{{ article.data.title }}</title>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<link href="{{ absolutePostUrl }}"/>
|
||||
<updated>{{ article.date | dateToRfc3339 }}</updated>
|
||||
<updated>{{ post.date | dateToRfc3339 }}</updated>
|
||||
<id>{{ absolutePostUrl }}</id>
|
||||
<content type="html">{{ article.templateContent | transformWithHtmlBase(absolutePostUrl, article.url) }}</content>
|
||||
<content type="html">{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) }}</content>
|
||||
</entry>
|
||||
{%- endfor %}
|
||||
</feed>
|
||||
29
src/_pages/feed/json.njk
Normal file
29
src/_pages/feed/json.njk
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
# Metadata comes from _data/metadata.json
|
||||
permalink: /feed/feed.json
|
||||
---
|
||||
{
|
||||
"version": "https://jsonfeed.org/version/1.1",
|
||||
"title": "{{ metadata.title }}",
|
||||
"language": "{{ metadata.language }}",
|
||||
"home_page_url": "{{ metadata.url | addPathPrefixToFullUrl }}",
|
||||
"feed_url": "{{ permalink | htmlBaseUrl(metadata.url) }}",
|
||||
"description": "{{ metadata.description }}",
|
||||
"author": {
|
||||
"name": "{{ metadata.author.name }}",
|
||||
"url": "{{ metadata.author.url }}"
|
||||
},
|
||||
"items": [
|
||||
{%- for post in collections.posts | reverse %}
|
||||
{%- set absolutePostUrl = post.url | htmlBaseUrl(metadata.url) %}
|
||||
{
|
||||
"id": "{{ absolutePostUrl }}",
|
||||
"url": "{{ absolutePostUrl }}",
|
||||
"title": "{{ post.data.title }}",
|
||||
"content_html": {% if post.templateContent %}{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) | dump | safe }}{% else %}""{% endif %},
|
||||
"date_published": "{{ post.date | dateToRfc3339 }}"
|
||||
}
|
||||
{% if not loop.last %},{% endif %}
|
||||
{%- endfor %}
|
||||
]
|
||||
}
|
||||
@@ -5,13 +5,15 @@ eleventyNavigation:
|
||||
order: 1
|
||||
---
|
||||
<div class="main-content">
|
||||
{% set maxPosts = collections.posts.length | min(5) %}
|
||||
<h1 class="main-title">Blog numérique responsable</h1>
|
||||
<p class="sub-title">par le collectif IT's on us</p>
|
||||
<nav>
|
||||
{% include "tagslist.njk" %}
|
||||
</nav>
|
||||
{% set articlesList = collections.articles | filterDraft | head(-5) %}
|
||||
{% include "articlesList.njk" %}
|
||||
{% set postslist = collections.posts | head(-5) %}
|
||||
{% set postslistCounter = collections.posts | length %}
|
||||
{% include "postslist.njk" %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "other_links.njk" %}
|
||||
9
src/_pages/robots/robots.njk
Normal file
9
src/_pages/robots/robots.njk
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
permalink: '/robots.txt'
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: {{ site.url }}/sitemap.xml
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
permalink: /blog/sitemap.xml
|
||||
permalink: /sitemap.xml
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
@@ -12,13 +12,13 @@ pagination:
|
||||
layout: home.njk
|
||||
eleventyComputed:
|
||||
title: Tags “{{ tag }}”
|
||||
permalink: /blog/tags/{{ tag | slugify }}/
|
||||
permalink: /tags/{{ tag | slugify }}/
|
||||
---
|
||||
<div class="main-content">
|
||||
<h1>#{{ tag }}</h1>
|
||||
|
||||
{% set articlesList = collections[ tag ] | filterDraft %}
|
||||
{% include "articlesList.njk" %}
|
||||
{% set postslist = collections[ tag ] %}
|
||||
{% include "postslist.njk" %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "tagslist.njk" %}
|
||||
@@ -72,7 +72,7 @@ main {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
align-self: flex-start;
|
||||
width: 320px;
|
||||
width: 300px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
@@ -127,31 +127,16 @@ h2 {
|
||||
font-weight: 700;
|
||||
letter-spacing: .02rem;
|
||||
line-height: 1.7rem;
|
||||
margin: 3rem 0 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 1.4rem;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p, li {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
p ~ ul {
|
||||
margin-top: .5rem;
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -189,6 +174,9 @@ hr {
|
||||
margin: 4rem 15vw;
|
||||
}
|
||||
|
||||
p + h2 {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
figure + h2,
|
||||
pre + h2 {
|
||||
margin-top: 2rem;
|
||||
@@ -200,7 +188,7 @@ img {
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
margin: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
@@ -250,11 +238,8 @@ figure figcaption {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
.post-list-item p {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.post-list-header h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.post-list-link {
|
||||
flex-basis: calc(100% - 1.5rem);
|
||||
@@ -266,25 +251,15 @@ figure figcaption {
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
margin: 0.5rem 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.post-tag {
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
background: var(--text-color-tertiary);
|
||||
}
|
||||
.article-tags {
|
||||
margin: 0;
|
||||
}
|
||||
.post-tag a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-color);
|
||||
background: var(--text-color-tertiary);
|
||||
padding: 4px;
|
||||
font-size: 0.8125rem; /* 13px /16 */
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -300,6 +275,14 @@ figure figcaption {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-metadata ul {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 + .post-metadata {
|
||||
margin: 0 0 4rem;
|
||||
}
|
||||
@@ -311,43 +294,10 @@ h1 + .post-metadata {
|
||||
}
|
||||
.post-nav ul {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
justify-content: space-around;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
color: var(--text-color);
|
||||
height: 100%;
|
||||
}
|
||||
.icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
.previous, .next {
|
||||
flex-basis: 50%;
|
||||
background: var(--color-gray-20);
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
.previous {
|
||||
.icon {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
.icon {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
margin: 2rem 1rem 0 0;
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
@@ -424,7 +374,6 @@ pre[class*="language-diff-"] {
|
||||
--eleventy-code-padding: 1.25em;
|
||||
padding-left: var(--eleventy-code-padding);
|
||||
padding-right: var(--eleventy-code-padding);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.token.deleted {
|
||||
background-color: hsl(0, 51%, 37%);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
BIN
src/images/blog/kitty_1.jpeg
Normal file
BIN
src/images/blog/kitty_1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/images/blog/kitty_2.jpeg
Normal file
BIN
src/images/blog/kitty_2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
@@ -5,8 +5,8 @@ const path = require('path');
|
||||
module.exports = {
|
||||
// Our "entry" point
|
||||
entry: {
|
||||
main: './src/blog_assets/js/index.js',
|
||||
print: './src/blog_assets/js/print.js'
|
||||
main: './src/assets/js/index.js',
|
||||
print: './src/assets/js/print.js'
|
||||
},
|
||||
output: {
|
||||
// The global variable name any `exports` from `index.js` will be available at
|
||||
|
||||
Reference in New Issue
Block a user