From ba3067eab5176ae1f452d0ee9e91c893aa453577 Mon Sep 17 00:00:00 2001 From: Taj Deluca Date: Tue, 2 Jan 2024 17:28:55 +0000 Subject: [PATCH] Fix the reading time (#65) * Fix the reading time * Update config to fix meta --- package-lock.json | 19 ++++--- src/blog-utils.ts | 3 +- .../blog/01-what-why-how-of-my-portfolio.md | 2 +- src/content/experience/zen3-uk.md | 4 +- src/nuxt.config.js | 53 ------------------ src/nuxt.config.ts | 29 ++++++++++ src/package.json | 20 ++++--- src/plugins/blog-post-category-enhancer.ts | 17 ------ src/{static => public}/favicon.ico | Bin .../plugins/blog-post-details-enhancer.ts | 18 ++++++ 10 files changed, 72 insertions(+), 93 deletions(-) delete mode 100644 src/nuxt.config.js create mode 100644 src/nuxt.config.ts delete mode 100644 src/plugins/blog-post-category-enhancer.ts rename src/{static => public}/favicon.ico (100%) create mode 100644 src/server/plugins/blog-post-details-enhancer.ts diff --git a/package-lock.json b/package-lock.json index f11a7d6..86e76bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10409,10 +10409,10 @@ "node": ">=8.10.0" } }, - "node_modules/reading-time": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz", - "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==" + "node_modules/reading-time-estimator": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/reading-time-estimator/-/reading-time-estimator-1.9.3.tgz", + "integrity": "sha512-xBKNAwTtDbVxtx7P3Aag3gmMJGpNGC624swda5DT49lddb8D7ecPgo7Pq1lXWt5IQ5ENtm/+eybt+sthaH8u8Q==" }, "node_modules/redis-errors": { "version": "1.2.0", @@ -13033,18 +13033,19 @@ "src": { "name": "portfolio", "version": "1.0.0", + "hasInstallScript": true, "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/blog-utils.ts b/src/blog-utils.ts index cc885ed..957fe46 100644 --- 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 index f4b99db..3b93dad 100644 --- 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 INTO 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 index 2dc4bfe..2df5e4a 100644 --- 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 CWT Digital 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 CWT Digital, 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 deleted file mode 100644 index 452832d..0000000 --- a/src/nuxt.config.js +++ /dev/null @@ -1,53 +0,0 @@ -export default defineNuxtConfig({ - /* - ** Nuxt target - ** See https://nuxtjs.org/api/configuration-target - */ - target: 'static', - /* - ** Headers of the page - ** See https://nuxtjs.org/api/configuration-head - */ - 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' } - ] - }, - /* - ** Global CSS - */ - css: [ - 'assets/styles.css' - ], - /* - ** Plugins to load before mounting the App - ** https://nuxtjs.org/guide/plugins - */ - plugins: [ - ], - /* - ** Nuxt.js modules - */ - modules: [ - '@nuxt/content', - ], - /* - ** Build configuration - ** See https://nuxtjs.org/api/configuration-build/ - */ - build: { - extractCSS: true, - }, - typescript: { - typeCheck: true, - } -}) diff --git a/src/nuxt.config.ts b/src/nuxt.config.ts new file mode 100644 index 0000000..3056b2b --- /dev/null +++ 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 index 640d4d5..6d76c52 100644 --- 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 deleted file mode 100644 index 56a6a5f..0000000 --- a/src/plugins/blog-post-category-enhancer.ts +++ /dev/null @@ -1,17 +0,0 @@ -import readingTime from 'reading-time' - -export default defineNuxtPlugin((nuxtApp) => { - nuxtApp.hooks.hook('content:file:beforeParse' as any, async (file: any): Promise => { - console.warn(file) - if (file._id.endsWith('.md')) { - file.readingTime = readingTime(file.text); - if (file._dir === 'blog' && file?.categories) { - // Replace tags with the processed version. - const fullCategories = await queryContent('/blog/categories') - .where({ customSlug: { $in: file.categories } }) - .find(); - file.categories = fullCategories; - } - } - }) -}) diff --git a/src/static/favicon.ico b/src/public/favicon.ico similarity index 100% rename from src/static/favicon.ico rename to src/public/favicon.ico diff --git a/src/server/plugins/blog-post-details-enhancer.ts b/src/server/plugins/blog-post-details-enhancer.ts new file mode 100644 index 0000000..639e54e --- /dev/null +++ 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') + } + }) +})