Fix the reading time (#65)

* Fix the reading time * Update config to fix meta
tajdeluca · Jan 2, 2024 · ba3067e · ba3067e
1 parent f8c8255
commit ba3067e
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/blog-utils.ts b/src/blog-utils.ts
@@ -10,8 +10,7 @@ export function getCreatedDate(article: ParsedContent) {
 }
 
 export function getReadingTime(article: ParsedContent) {
-  const readingTimeInMinutes = Math.ceil(article.readingTime / 60 / 60 / 60);
-  return `${readingTimeInMinutes} minutes`;
+  return `${article.readingTime?.minutes} minutes`;
 }
 
 export async function getArticleCategories() {

diff --git a/src/content/blog/01-what-why-how-of-my-portfolio.md b/src/content/blog/01-what-why-how-of-my-portfolio.md
@@ -9,7 +9,7 @@ createdAt: 2020-11-01
 ---
 
 ### It's hard to market yourself when all your work is private.
-As I've worked at <nuxt-link to="/experience/into-university-partnerships">INTO</nuxt-link> I've come to understand that the way you market yourself is becoming increasingly important, especially as I progress in my career. It's hard to stand out when the world is full of talented individuals and you like keeping to yourself! Do you struggle to represent yourself in interviews? Find it hard to show the results of what you've implemented because of commercial secrecy or some other such thing? I know I've had problems with it! So that's why I set out to fix that.
+As I've worked at [INTO](/experience/into-university-partnerships) I've come to understand that the way you market yourself is becoming increasingly important, especially as I progress in my career. It's hard to stand out when the world is full of talented individuals and you like keeping to yourself! Do you struggle to represent yourself in interviews? Find it hard to show the results of what you've implemented because of commercial secrecy or some other such thing? I know I've had problems with it! So that's why I set out to fix that.
 
 #### Who is this aimed at?
 This blog post assumes you have at least a basic understanding of the following:

diff --git a/src/content/experience/zen3-uk.md b/src/content/experience/zen3-uk.md
@@ -9,7 +9,7 @@ gradientDirection: '134'
 ---
 
 ### Background
-My role at Zen3 UK encapsulated many of the responsibilities I had at <nuxt-link to="/experience/cwt-digital/">CWT Digital</nuxt-link> with an increase in focus of leading the offshore team in implementing front-end solutions.
+My role at Zen3 UK encapsulated many of the responsibilities I had at [CWT Digital](/experience/cwt-digital/) with an increase in focus of leading the offshore team in implementing front-end solutions.
 
 ---
 
@@ -23,7 +23,7 @@ Some of the notable things I worked on were:
 ---
 
 ### What I worked with and the skills I developed
-An extension of what I worked on at <nuxt-link to="/experience/cwt-digital/">CWT Digital</nuxt-link>, these are the key things I developed:
+An extension of what I worked on at [CWT Digital](/experience/cwt-digital/), these are the key things I developed:
 
 - Front-End Architecture
 - Customer Support Skills

diff --git a/src/nuxt.config.js b/src/nuxt.config.js
diff --git a/src/nuxt.config.ts b/src/nuxt.config.ts
@@ -0,0 +1,29 @@
+export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      title: process.env.npm_package_name || '',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: process.env.npm_package_description || '' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      ]
+    },
+  },
+  css: [
+    'assets/styles.css'
+  ],
+  plugins: [
+  ],
+  modules: [
+    '@nuxt/content',
+  ],
+  typescript: {
+    typeCheck: true,
+  }
+})
diff --git a/src/package.json b/src/package.json
@@ -2,24 +2,26 @@
   "name": "portfolio",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "start": "nuxi preview",
-    "generate": "nuxi generate"
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "@nuxt/content": "^2.10.0",
     "concurrently": "^5.3.0",
     "date-fns": "^2.17.0",
-    "nuxt": "^3.9.0",
-    "reading-time": "^1.2.1",
+    "reading-time-estimator": "^1.9.3",
     "typeface-raleway": "0.0.75",
-    "typeface-zilla-slab": "0.0.72",
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.5"
+    "typeface-zilla-slab": "0.0.72"
   },
   "devDependencies": {
+    "nuxt": "^3.9.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
   }
 }
diff --git a/src/plugins/blog-post-category-enhancer.ts b/src/plugins/blog-post-category-enhancer.ts
diff --git a/src/static/favicon.ico → src/public/favicon.ico b/src/static/favicon.ico → src/public/favicon.ico
diff --git a/src/server/plugins/blog-post-details-enhancer.ts b/src/server/plugins/blog-post-details-enhancer.ts
@@ -0,0 +1,18 @@
+import { readingTime } from 'reading-time-estimator'
+
+const afterParse = 'content:file:afterParse' as any
+const beforeParse = 'content:file:beforeParse' as any
+
+export default defineNitroPlugin((nitroApp) => {
+  const fileBodies: { [key: string]: string } = {}
+  nitroApp.hooks.hook(beforeParse, (file: any) => {
+    if (file._id.endsWith('.md')) {
+      fileBodies[file._id] = file.body
+    }
+  })
+  nitroApp.hooks.hook(afterParse, (file: any) => {
+    if (file._id.endsWith('.md')) {
+      file.readingTime = readingTime(fileBodies[file._id], 180, 'en')
+    }
+  })
+})