From 9e7beb5024351889a32748df433eb4efe99f162e Mon Sep 17 00:00:00 2001 From: isabel Date: Sat, 24 May 2025 00:48:25 +0100 Subject: [PATCH] perf: improve runtime on build --- astro.config.ts | 5 ----- nix/default.nix | 2 +- package.json | 1 + pnpm-lock.yaml | 10 ++++++++++ remark-reading-time.mjs | 12 ------------ src/content.config.ts | 7 +++++++ src/pages/blog/[...slug].astro | 2 +- src/pages/blog/index.astro | 10 ++++------ src/pages/blog/tag/[...slug].astro | 6 ++---- src/pages/index.astro | 11 +++++------ 10 files changed, 31 insertions(+), 35 deletions(-) delete mode 100644 remark-reading-time.mjs diff --git a/astro.config.ts b/astro.config.ts index cc2c7df..bd2fe9b 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -1,6 +1,5 @@ import { defineConfig } from "astro/config"; import sitemap from "@astrojs/sitemap"; -import { remarkReadingTime } from "./remark-reading-time.mjs"; import tailwindcss from "@tailwindcss/vite"; import expressiveCode from "astro-expressive-code"; import umami from "@yeskunall/astro-umami"; @@ -20,10 +19,6 @@ export default defineConfig({ }), ], - markdown: { - remarkPlugins: [remarkReadingTime], - }, - redirects: { // legacy self healing urls "/blog/custom-lib-nixossystem-11": "/blog/custom-lib-nixossystem", diff --git a/nix/default.nix b/nix/default.nix index 9627db5..1f13a01 100644 --- a/nix/default.nix +++ b/nix/default.nix @@ -23,7 +23,7 @@ stdenvNoCC.mkDerivation (finalAttrs: { pnpmDeps = pnpm.fetchDeps { inherit (finalAttrs) pname version src; - hash = "sha256-ZnuzEBtPRSZNvvuFCo9EzLYP2rJ1qgxDxuqkDqQkUHU="; + hash = "sha256-aOAGuuxCtO2M+BIjb9kwIj9HwTcvpkdYWKnn/znhK4k="; }; dontUseJustInstall = true; diff --git a/package.json b/package.json index 08c5451..5f00513 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "markdown-it": "^14.1.0", "mdast-util-to-string": "^4.0.0", "reading-time": "^1.5.0", + "reading-time-estimator": "^1.14.0", "sanitize-html": "^2.17.0", "tailwindcss": "^4.1.7" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cb3cc16..f0d53a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: reading-time: specifier: ^1.5.0 version: 1.5.0 + reading-time-estimator: + specifier: ^1.14.0 + version: 1.14.0 sanitize-html: specifier: ^2.17.0 version: 2.17.0 @@ -1863,6 +1866,9 @@ packages: resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} engines: {node: '>= 14.18.0'} + reading-time-estimator@1.14.0: + resolution: {integrity: sha512-EWLj21Ou07uUvZWE0suAGPvEebhp91ZABl8jhTzZXY/ziBOPXfQ4tZ1eHiUV7moQ1NJ1KJj9krWuFlnoMx0upA==} + reading-time@1.5.0: resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==} @@ -4352,6 +4358,10 @@ snapshots: readdirp@4.1.2: {} + reading-time-estimator@1.14.0: + dependencies: + sanitize-html: 2.17.0 + reading-time@1.5.0: {} regex-recursion@6.0.2: diff --git a/remark-reading-time.mjs b/remark-reading-time.mjs deleted file mode 100644 index 535540a..0000000 --- a/remark-reading-time.mjs +++ /dev/null @@ -1,12 +0,0 @@ -import getReadingTime from "reading-time"; -import { toString } from "mdast-util-to-string"; - -export function remarkReadingTime() { - return function (tree, { data }) { - const textOnPage = toString(tree); - const readingTime = getReadingTime(textOnPage); - // readingTime.text will give us minutes read as a friendly string, - // i.e. "3 min read" - data.astro.frontmatter.minutesRead = readingTime.text; - }; -} diff --git a/src/content.config.ts b/src/content.config.ts index c3e491f..1c589f1 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -1,5 +1,6 @@ import { glob, type Loader } from "astro/loaders"; import { defineCollection, z } from "astro:content"; +import { readingTime } from 'reading-time-estimator'; const customLoader: Loader = { ...glob, @@ -18,6 +19,11 @@ const customLoader: Loader = { const sorted = items.sort((a, b) => b.data.date - a.data.date); + items.forEach((item) => { + const readTime = readingTime(item.body, 200); + item.data.readTime = `${readTime.minutes} mins`; + }); + sorted.forEach((item) => { store.set({ ...item }); }); @@ -34,6 +40,7 @@ const blog = defineCollection({ updated: z.coerce.date().optional(), image: z.string().optional(), tags: z.array(z.string()), + readTime: z.string().optional(), }), }); diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 26446e7..208bf99 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -16,7 +16,7 @@ export async function getStaticPaths() { type Props = CollectionEntry<'blog'>; const post = Astro.props; -const { Content, remarkPluginFrontmatter } = await render(post); +const { Content } = await render(post); const shareurl = `https://isabelroses.com/blog/${ post.id }`; --- diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 1579bc7..2736a6c 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,6 +1,6 @@ --- import Default from '../../layouts/Default.astro'; -import { render, getCollection } from 'astro:content'; +import { getCollection } from 'astro:content'; import FormattedDate from '../../components/FormattedDate.astro'; import Title from '../../components/Title.astro'; @@ -27,9 +27,7 @@ posts.forEach((post) => Array.isArray(post.data.tags) && post.data.tags.forEach( ) }
- { await Promise.all(posts.map(async (post, index) => { - const { remarkPluginFrontmatter } = await render(post); - + { posts.map((post, index) => { return (
-

{ remarkPluginFrontmatter.minutesRead }

+

{ post.data.readTime }

-
); - })) } + }) } diff --git a/src/pages/blog/tag/[...slug].astro b/src/pages/blog/tag/[...slug].astro index 0f845ab..6f88824 100644 --- a/src/pages/blog/tag/[...slug].astro +++ b/src/pages/blog/tag/[...slug].astro @@ -38,9 +38,7 @@ const description = "The parts of my life that I put out into the world"; <div class="grid grid-cols-1 gap-4 mb-16"> - { await Promise.all(posts.map(async (post, index) => { - const { remarkPluginFrontmatter } = await render(post); - + { posts.map((post, index) => { return ( <article class="ring-inset ring-1 ring-card bg-bg-lighter p-4 rounded-xl transition-all duration-200 ease-in-out hover:scale-105 lg:w-2xl md:w-xl"> <a href={`/blog/${post.id}/`}> @@ -53,7 +51,7 @@ const description = "The parts of my life that I put out into the world"; </div> <div class="text-xs text-fg-lighter flex flex-row gap-2 justify-end"> - <p>{ remarkPluginFrontmatter.minutesRead }</p> + <p>{ post.data.readTime }</p> - <FormattedDate date={post.data.date} /> </div> diff --git a/src/pages/index.astro b/src/pages/index.astro index 043a2d3..cf1b244 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import DefaultLayout from '../layouts/Default.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; -import { render, getCollection } from "astro:content"; +import { getCollection } from "astro:content"; import FormattedDate from '../components/FormattedDate.astro'; import Title from '../components/Title.astro'; import ProjectMinimal from '../components/ProjectMinimal.astro'; @@ -27,11 +27,9 @@ import { PROJECTS } from '../consts'; <Title title="Blog" description="The parts of my life that I put out into the world" /> <div class="grid lg:grid-cols-2 gap-4"> - { await Promise.all(posts.map(async (post, index) => { + { posts.map((post, index) => { if (index >= 3) return null; - const { remarkPluginFrontmatter } = await render(post); - return ( <article class="ring-inset ring-1 ring-card bg-bg-lighter p-4 rounded-xl transition-all duration-200 ease-in-out hover:scale-105"> <a class="flex flex-col gap-2" href={`/blog/${post.id}/`}> @@ -44,14 +42,15 @@ import { PROJECTS } from '../consts'; </div> <div class="text-xs text-fg-lighter flex flex-row gap-2 justify-end"> - <p>{ remarkPluginFrontmatter.minutesRead }</p> + <p>{ post.data.readTime }</p> - <FormattedDate date={post.data.date} /> </div> </a> </article> ); - })) } + + }) } <a class="ring-inset ring-1 ring-card bg-bg-lighter p-4 rounded-xl text-center content-center group text-fg hover:text-special transition ease-in-out duration-200" href="/blog/"> See more -- 2.51.2