From d1640205ec14a1f50cbfddcec6a2ccb191837caf Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Fri, 18 Jun 2021 16:11:54 +0200
Subject: [PATCH] Added reading time + refactoring sidebar
---
components/app/AppReadingTime.vue | 40 +++++++++++++++++++++++++++++++
components/blog/BlogMeta.vue | 2 +-
components/page/PageContainer.vue | 5 ----
nuxt.config.js | 6 +++++
package.json | 2 ++
pages/_slug.vue | 11 ++++++++-
pages/blog/_slug.vue | 7 ++++++
pages/faq/_slug.vue | 7 ++++++
pages/lexique/_slug.vue | 2 ++
yarn.lock | 17 +++++++++++++
10 files changed, 92 insertions(+), 7 deletions(-)
create mode 100644 components/app/AppReadingTime.vue
diff --git a/components/app/AppReadingTime.vue b/components/app/AppReadingTime.vue
new file mode 100644
index 00000000..e31209a0
--- /dev/null
+++ b/components/app/AppReadingTime.vue
@@ -0,0 +1,40 @@
+<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>
diff --git a/components/blog/BlogMeta.vue b/components/blog/BlogMeta.vue
index 04114f71..18a126c1 100644
--- a/components/blog/BlogMeta.vue
+++ b/components/blog/BlogMeta.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/components/page/PageContainer.vue b/components/page/PageContainer.vue
index 4f598b3e..0f851f16 100644
--- a/components/page/PageContainer.vue
+++ b/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>
diff --git a/nuxt.config.js b/nuxt.config.js
index a32fe199..b8a6c344 100644
--- a/nuxt.config.js
+++ b/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)
+ }
+ },
},
/**
diff --git a/package.json b/package.json
index a6c5521e..d9469fe1 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_slug.vue b/pages/_slug.vue
index a5203429..c9403237 100644
--- a/pages/_slug.vue
+++ b/pages/_slug.vue
@@ -1,5 +1,14 @@
<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>
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
index 852afd03..b00cf005 100644
--- a/pages/blog/_slug.vue
+++ b/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>
diff --git a/pages/faq/_slug.vue b/pages/faq/_slug.vue
index a253b465..597b14ab 100644
--- a/pages/faq/_slug.vue
+++ b/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>
diff --git a/pages/lexique/_slug.vue b/pages/lexique/_slug.vue
index a5c73a66..d3e09711 100644
--- a/pages/lexique/_slug.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 978c6cdd..35531ca8 100644
--- a/yarn.lock
+++ b/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"
--
GitLab