Added reading time + refactoring sidebar

components/app/AppReadingTime.vue

+<template>
+  <div class="flex items-center mb-8">
+    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+
+    <div>
+      <span>{{ readingTimeToStr }}</span>
+      <span class="text-gray-400 text-sm pl-1">
+        {{ `(${readingTime.words} mots)` }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    readingTime: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    readingTimeToStr() {
+      const minutes = this.readingTime.minutes
+      if (minutes > 1) {
+        return (
+          'Environ ' +
+          Math.round(minutes) +
+          ' minute' +
+          (Math.round(minutes) > 1 ? 's' : '')
+        )
+      }
+
+      return "Moins d'une minute"
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

components/blog/BlogMeta.vue

 <template>
-  <div class="px-4 pt-3 pb-4 border-t border-gray-300">
+  <div class="pb-4 mb-4 border-b border-gray-300">
     <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">
       AUTEUR
     </div>

components/page/PageContainer.vue

@@ -10,7 +10,6 @@
       <div
         class="sticky h-full top-12 lg:w-1/4 lg:ml-12 mt-8 lg:mt-0 border-t pt-8 lg:pt-0 lg:border-none"
       >
-        <PageToc v-if="toc" :document="document" class="mb-8" />
         <slot name="sidebar" />
       </div>
     </div>
@@ -29,10 +28,6 @@ export default {
       type: Object,
       required: true,
     },
-    toc: {
-      type: Boolean,
-      default: true,
-    },
   },
 }
 </script>

nuxt.config.js

@@ -65,6 +65,7 @@ export default {
         component: 'fa', // component name
         addCss: false,
         icons: {
+          regular: ['faClock'],
           solid: [
             'faHome',
             'faSearch',
@@ -205,6 +206,11 @@ export default {
         return
       file.data = JSON.stringify(JSON.parse(file.data).ressources)
     },
+    'content:file:beforeInsert': (document) => {
+      if (document.extension === '.md') {
+        document.readingTime = require('reading-time')(document.text)
+      }
+    },
   },
 
   /**

package.json

@@ -33,6 +33,7 @@
     "nuxt-i18n": "^6.19.0",
     "particles.vue": "^2.10.0",
     "postcss": "^7",
+    "reading-time": "^1.3.0",
     "remark-breaks": "^2.0.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tailwindcss-dark-mode": "^1.1.7",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@ava/babel": "^1.0.1",
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@nuxtjs/eslint-config": "^5.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",

pages/_slug.vue

 <template>
-  <PageContainer :document="document" />
+  <PageContainer :document="document">
+    <template #sidebar>
+      <AppReadingTime
+        v-if="document.readingTime"
+        :reading-time="document.readingTime"
+      />
+
+      <PageToc v-if="document.toc" :document="document" class="mb-8" />
+    </template>
+  </PageContainer>
 </template>
 
 <script>

pages/blog/_slug.vue

@@ -21,6 +21,13 @@
 
     <template #sidebar>
       <BlogMeta />
+
+      <AppReadingTime
+        v-if="document.readingTime"
+        :reading-time="document.readingTime"
+      />
+
+      <PageToc v-if="document.toc" :document="document" class="mb-8" />
     </template>
 
     <template #footer>

pages/faq/_slug.vue

@@ -6,6 +6,13 @@
     </template>
 
     <template #sidebar>
+      <AppReadingTime
+        v-if="document.readingTime"
+        :reading-time="document.readingTime"
+      />
+
+      <PageToc v-if="document.toc" :document="document" class="mb-8" />
+
       <PageRelated :document="document" path="faq" />
     </template>
   </PageContainer>

pages/lexique/_slug.vue

@@ -9,6 +9,8 @@
     </template>
 
     <template #sidebar>
+      <PageToc v-if="document.toc" :document="document" class="mb-8" />
+
       <aside v-if="pagesWithTerm.length" class="mb-8">
         <h1 class="text-2xl">Pages contenant "{{ document.title }}"</h1>
 

yarn.lock

@@ -901,6 +901,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
   integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
+"@fortawesome/fontawesome-common-types@^0.2.35":
+  version "0.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
+  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
+
 "@fortawesome/fontawesome-svg-core@^1.2.27":
   version "1.2.34"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
@@ -915,6 +920,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.34"
+"@fortawesome/free-regular-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
+  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
 "@fortawesome/free-solid-svg-icons@^5.15.2":
   version "5.15.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943"
@@ -10135,6 +10147,11 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
+reading-time@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.3.0.tgz#d13e74431589a4a9038669f24d5acbc08bbb015d"
+  integrity sha512-RJ8J5O6UvrclfZpcPSPuKusrdRfoY7uXXoYOOdeswZNtSkQaewT3919yz6RyloDBR+iwcUyz5zGOUjhgvfuv3g==
+
 reduce-css-calc@^2.1.6, reduce-css-calc@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"