From 2f362eaf0937360a0f2a81bac41be81111fa06a8 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Fri, 6 Sep 2024 08:21:27 +0000 Subject: Added reading time timer --- astro.config.mjs | 4 ++++ package-lock.json | 34 +++++++++++++++++++++------------- package.json | 2 ++ src/components/CanonicalURL.astro | 5 ----- src/layouts/PostLayout.astro | 24 ------------------------ src/pages/blog/[...slug].astro | 21 +++++++++++++++++++-- src/pages/feed.xml.js | 2 +- src/pages/index.astro | 2 +- src/plugins/remarkReadingTime.ts | 11 +++++++++++ 9 files changed, 59 insertions(+), 46 deletions(-) delete mode 100644 src/components/CanonicalURL.astro delete mode 100644 src/layouts/PostLayout.astro create mode 100644 src/plugins/remarkReadingTime.ts diff --git a/astro.config.mjs b/astro.config.mjs index b98292c..8f03e22 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,7 +1,11 @@ import { defineConfig } from "astro/config"; +import { remarkReadingTime } from "./src/plugins/remarkReadingTime"; import sitemap from "@astrojs/sitemap"; export default defineConfig({ site: "https://popov.link", integrations: [sitemap()], + markdown: { + remarkPlugins: [remarkReadingTime], + }, }); diff --git a/package-lock.json b/package-lock.json index 475e6f3..e038d5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@astrojs/rss": "^4.0.7", "@astrojs/sitemap": "^3.1.6", "astro": "^4.15.2", + "mdast-util-to-string": "^4.0.0", + "reading-time": "^1.5.0", "typescript": "^5.5.4" }, "devDependencies": { @@ -2245,9 +2247,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001657", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001657.tgz", - "integrity": "sha512-DPbJAlP8/BAXy3IgiWmZKItubb3TYGP0WscQQlVGIfT4s/YlFYVuJgyOsQNP7rJRChx/qdMeLJQJP0Sgg2yjNA==", + "version": "1.0.30001658", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz", + "integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==", "funding": [ { "type": "opencollective", @@ -2614,12 +2616,12 @@ } }, "node_modules/debug": { - "version": "4.3.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", - "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", "license": "MIT", "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -2724,9 +2726,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.14", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.14.tgz", - "integrity": "sha512-bEfPECb3fJ15eaDnu9LEJ2vPGD6W1vt7vZleSVyFhYuMIKm3vz/g9lt7IvEzgdwj58RjbPKUF2rXTCN/UW47tQ==", + "version": "1.5.16", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.16.tgz", + "integrity": "sha512-2gQpi2WYobXmz2q23FrOBYTLcI1O/P4heW3eqX+ldmPVDQELRqhiebV380EhlGG12NtnX1qbK/FHpN0ba+7bLA==", "license": "ISC" }, "node_modules/emmet": { @@ -4528,9 +4530,9 @@ } }, "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "license": "MIT" }, "node_modules/muggle-string": { @@ -4959,6 +4961,12 @@ "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==", + "license": "MIT" + }, "node_modules/rehype": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz", diff --git a/package.json b/package.json index 54c6fbc..4928a48 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "@astrojs/rss": "^4.0.7", "@astrojs/sitemap": "^3.1.6", "astro": "^4.15.2", + "mdast-util-to-string": "^4.0.0", + "reading-time": "^1.5.0", "typescript": "^5.5.4" }, "devDependencies": { diff --git a/src/components/CanonicalURL.astro b/src/components/CanonicalURL.astro deleted file mode 100644 index 0081f71..0000000 --- a/src/components/CanonicalURL.astro +++ /dev/null @@ -1,5 +0,0 @@ ---- -const canonicalURL = new URL(Astro.url.pathname, Astro.site); ---- - - diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro deleted file mode 100644 index 37bbe37..0000000 --- a/src/layouts/PostLayout.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -import BaseLayout from "../layouts/BaseLayout.astro"; ---- - - - - -
-

Title

-

- - Posted - -  by Valentin Popov ‐ - 1 min read - -

-
- - diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index c94fe52..a142db4 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -1,6 +1,6 @@ --- import { type CollectionEntry, getCollection } from "astro:content"; -import Layout from "../../layouts/PostLayout.astro"; +import Layout from "../../layouts/PageLayout.astro"; export async function getStaticPaths() { const posts = await getCollection("blog"); @@ -12,9 +12,26 @@ export async function getStaticPaths() { type Props = CollectionEntry<"blog">; const post = Astro.props; -const { Content } = await post.render(); +const { Content, remarkPluginFrontmatter } = await post.render(); --- + + +
+

Title

+

+ + Posted + +  by Valentin Popov ‐ + {remarkPluginFrontmatter.minutesRead} + +

+
diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js index 0fcc82f..a509386 100644 --- a/src/pages/feed.xml.js +++ b/src/pages/feed.xml.js @@ -1,5 +1,5 @@ -import rss from "@astrojs/rss"; import { getCollection } from "astro:content"; +import rss from "@astrojs/rss"; export async function GET(context) { const posts = await getCollection("blog"); diff --git a/src/pages/index.astro b/src/pages/index.astro index bc98c67..c4f5577 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,6 @@ --- -import Layout from "../layouts/PageLayout.astro"; import { getCollection } from "astro:content"; +import Layout from "../layouts/PageLayout.astro"; const posts = await getCollection("blog"); --- diff --git a/src/plugins/remarkReadingTime.ts b/src/plugins/remarkReadingTime.ts new file mode 100644 index 0000000..93f7b00 --- /dev/null +++ b/src/plugins/remarkReadingTime.ts @@ -0,0 +1,11 @@ +import type { RemarkPlugin } from "@astrojs/markdown-remark"; +import { toString } from "mdast-util-to-string"; +import getReadingTime from "reading-time"; + +export function remarkReadingTime(): RemarkPlugin { + return function (tree, { data }) { + const textOnPage = toString(tree); + const readingTime = getReadingTime(textOnPage); + data.astro.frontmatter.minutesRead = readingTime.text; + }; +} -- cgit v1.2.3