diff --git a/astro.config.mjs b/astro.config.mjs index fe8b8e9..3ad2f6a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,6 +3,7 @@ import { defineConfig } from "astro/config" import svelte from "@astrojs/svelte" import UnoCSS from "unocss/astro" import mdx from "@astrojs/mdx" +import { remarkReadingTime } from "./remark-reading-time.mjs" // https://astro.build/config export default defineConfig({ @@ -15,5 +16,8 @@ export default defineConfig({ experimental: { viewTransitions: true }, - trailingSlash: "always" + trailingSlash: "always", + markdown: { + remarkPlugins: [remarkReadingTime] + } }) diff --git a/package-lock.json b/package-lock.json index 5198d9c..2fdf70b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@astrojs/rss": "^2.4.3", "@astrojs/svelte": "^3.1.0", "astro": "^2.9.1", + "mdast-util-to-string": "^4.0.0", + "reading-time": "^1.5.0", "svelte": "^4.1.1" }, "devDependencies": { @@ -3825,6 +3827,18 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdast-util-from-markdown/node_modules/mdast-util-to-string": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz", + "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==", + "dependencies": { + "@types/mdast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/mdast-util-frontmatter": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.1.tgz", @@ -4049,7 +4063,7 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/mdast-util-to-string": { + "node_modules/mdast-util-to-markdown/node_modules/mdast-util-to-string": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz", "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==", @@ -4061,6 +4075,26 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "dependencies": { + "@types/mdast": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-to-string/node_modules/@types/mdast": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz", + "integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", @@ -5386,6 +5420,11 @@ "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/rehype": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/rehype/-/rehype-12.0.1.tgz", diff --git a/package.json b/package.json index adb3aa3..45d8815 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "@astrojs/rss": "^2.4.3", "@astrojs/svelte": "^3.1.0", "astro": "^2.9.1", + "mdast-util-to-string": "^4.0.0", + "reading-time": "^1.5.0", "svelte": "^4.1.1" }, "devDependencies": { diff --git a/remark-reading-time.mjs b/remark-reading-time.mjs new file mode 100644 index 0000000..b837972 --- /dev/null +++ b/remark-reading-time.mjs @@ -0,0 +1,12 @@ +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 + } +} \ No newline at end of file diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro index 6599946..b031532 100644 --- a/src/components/BlogPost.astro +++ b/src/components/BlogPost.astro @@ -1,5 +1,8 @@ --- -const { title, url } = Astro.props +const { title, url, minutesRead, pubDate } = Astro.props --- -
  • {title}
    • \ No newline at end of file +
  • + {title}
    + approximately {minutesRead}, published {pubDate.slice(0,10)} +
    • \ No newline at end of file diff --git a/src/pages/blog.astro b/src/pages/blog.astro index f57cdce..dc11e7d 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -1,5 +1,6 @@ --- import Layout from "../layouts/Layout.astro" +import BlogPost from "../components/BlogPost.astro" const allPosts = await Astro.glob("../pages/posts/*.mdx") const pageTitle = "bitbloxhub's blog" --- @@ -7,7 +8,7 @@ const pageTitle = "bitbloxhub's blog"

    bitbloxhub's blog!

    \ No newline at end of file diff --git a/src/pages/posts/first-post.mdx b/src/pages/posts/first-post.mdx index 17da948..c0a04cc 100644 --- a/src/pages/posts/first-post.mdx +++ b/src/pages/posts/first-post.mdx @@ -4,8 +4,5 @@ title: "I have a new blog!" pubDate: 2023-07-22 description: "This is the first post of my new blog." author: "bitbloxhub" -image: - url: "https://docs.astro.build/assets/full-logo-light.png" - alt: "The full Astro logo." --- Welcome to my new blog i have built using astro! \ No newline at end of file