customization : add reading time

.eleventy.js

@@ -1,4 +1,5 @@
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
 const markdownConfig = require('./src/11ty/utils/markdown');
 const browserSyncConfig = require('./src/11ty/utils/browsersync');
 const UserConfig = require("@11ty/eleventy/src/UserConfig");
@@ -30,11 +31,19 @@ module.exports = function (eleventyConfig) {
   });
 
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
+  eleventyConfig.addPlugin(emojiReadTime, {
+    emoji: "🍿",
+    label: "min.",
+    wpm: 250,
+    bucketSize: 3,
+  });
 
   passthroughItems.forEach(item => {
     eleventyConfig.addPassthroughCopy(item);
   })
 
+  eleventyConfig.addWatchTarget("./src/scss/*.scss");
+
   eleventyConfig.setBrowserSyncConfig(browserSyncConfig);
   eleventyConfig.setLibrary("md", markdownConfig);
   eleventyConfig.setDataDeepMerge(true);

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-navigation": "^0.3.2",
+    "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
     "autoprefixer": "^10.4.2",
     "beautify": "^0.0.8",
     "html-validate": "^6.3.1",

src/_data/helpers.js

@@ -1,9 +1,4 @@
 module.exports = {
-  getReadingTime(text) {
-    const wordsPerMinute = 200;
-    const numberOfWords = text.split(/\s/g).length;
-    return Math.ceil(numberOfWords / wordsPerMinute);
-  },
   url() {
     // TODO Nunjucks configure access to process.env
     if (typeof process === 'undefined') {

src/_data/home.json

@@ -1,6 +1,4 @@
 {
   "title": "Bonjour, je suis Sylvain",
-  "image": "/static/img/profile.png",
-  "subtitle": "Développeur web à Bordeaux, vous trouverez ici mes articles et projets.",
-  "image_alt": "Avatar de Sylvain"
+  "subtitle": "Développeur web à Bordeaux, vous trouverez ici mes articles et projets."
 }

src/_includes/assets/css/blog.css

@@ -50,7 +50,7 @@
   border-radius: var(--border-radius-sm);
   color: var(--color-secondary);
   white-space: nowrap;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 500;
 }
 

src/_includes/assets/css/home-page.css

@@ -69,7 +69,7 @@
 
 @media (min-width: 1024px) {
   .hero__title {
-    font-size: 3.3em;
+    font-size: 3em;
   }
 }
 

src/_includes/assets/css/site-header.css

@@ -55,13 +55,13 @@
 .site-header__item {
 	margin: 0 6px;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 17px;
 }
 
 @media (min-width: 1024px) {
   .site-header__item {
     margin: 0 20px;
-    font-size: 15px;
+    font-size: 17px;
   }
 }
 

src/_includes/assets/css/utilites.css

@@ -29,7 +29,7 @@
   border-radius: var(--border-radius-sm);
   background-color: var(--color-secondary);
   color: var(--color-text-alt);
-  font-size: 14px;
+  font-size: 15px;
   white-space: nowrap;
 }
 

src/_includes/components/postslist.njk

@@ -12,10 +12,11 @@
           </a>
         </h5>
         {% if post.data.date %}
-            {{ post.data.date | date }}
+          {{ post.data.date | date }}
+        {% endif %}
+        {% if post._templateContent %}
+          <span>{{ post._templateContent | emojiReadTime }} de lecture</span>
         {% endif %}
-        {% set readingTime = helpers.getReadingTime(post._templateContent) -%}
-        <span>— Temps de lecture: {{ readingTime }} minute{% if readingTime > 1 %}s{% endif %}</span>
         {% if post.data.excerpt %}
           <p class="article-card__summary">
             {{ post.data.excerpt }}

src/_includes/components/projectlist.njk

@@ -15,6 +15,12 @@
               {% endif %}
             </a>
           </h4>
+          {% if post.data.date %}
+            {{ post.data.date | date }}
+          {% endif %}
+          {% if post._templateContent %}
+            <span>{{ post._templateContent | emojiReadTime }} de lecture</span>
+          {% endif %}
           {% if post.data.summary %}
             <p>
               {{ post.data.summary }}
@@ -30,7 +36,7 @@
             </p>
           {% endif %}
         </div>
-        {% endif %}
+      {% endif %}
     {% endfor %}
   </div>
 </section>

src/_includes/layouts/post.njk

@@ -6,10 +6,13 @@ section: post
   <article>
     <h1>{{ title }}</h1>
     <p>
-      <small>
-        <time datetime="{{ date | machineDate }}">{{ date | date }}</time>
-      </small>
+      <time datetime="{{ date | machineDate }}">{{ date | date }}</time> par {{ author }}
     </p>
+    {% if layoutContent %}
+    <p>
+      {{ layoutContent | emojiReadTime }} de lecture
+    </p>
+    {% endif %}
     <hr>
 
     {{ layoutContent | safe }}