Added reading time timer
This commit is contained in:
parent
17c3115a06
commit
2f362eaf09
@ -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],
|
||||
},
|
||||
});
|
||||
|
34
package-lock.json
generated
34
package-lock.json
generated
@ -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",
|
||||
|
@ -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": {
|
||||
|
@ -1,5 +0,0 @@
|
||||
---
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
---
|
||||
|
||||
<link href={canonicalURL} rel="canonical" />
|
@ -1,24 +0,0 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
---
|
||||
|
||||
<style>
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<BaseLayout>
|
||||
<div class="header">
|
||||
<h1>Title</h1>
|
||||
<p>
|
||||
<small>
|
||||
Posted
|
||||
<time datetime="#">#</time>
|
||||
by Valentin Popov ‐
|
||||
<strong>1 min read</strong>
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<slot />
|
||||
</BaseLayout>
|
@ -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();
|
||||
---
|
||||
|
||||
<style>
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Layout>
|
||||
<div class="header">
|
||||
<h1>Title</h1>
|
||||
<p>
|
||||
<small>
|
||||
Posted
|
||||
<time datetime="#">#</time>
|
||||
by Valentin Popov ‐
|
||||
<strong>{remarkPluginFrontmatter.minutesRead}</strong>
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<Content />
|
||||
</Layout>
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
---
|
||||
|
11
src/plugins/remarkReadingTime.ts
Normal file
11
src/plugins/remarkReadingTime.ts
Normal file
@ -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;
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue
Block a user