reading time

astro.config.mjs

@@ -1,23 +1,24 @@
 import react from '@astrojs/react';
 import astroSitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-import { defineConfig } from 'astro/config';
-// import astroCompress from 'astro-compress';
 import astroCritters from 'astro-critters';
+import { defineConfig } from 'astro/config';
 import astroServiceWorker from 'astrojs-service-worker';
 
+import remarkReadingTime from './reading-time.plugin.mjs';
+
 // https://astro.build/config
 export default defineConfig({
   compressHTML: false,
   integrations: [
-    import.meta.env.MODE === 'production' ? astroServiceWorker : undefined,
+    import.meta.env.MODE === 'production' ? astroServiceWorker() : undefined,
     astroSitemap(),
     astroCritters({ Logger: 1 }),
-    // astroCompress({ Logger: 1 }),
     react(),
     tailwind(),
   ],
   markdown: {
+    remarkPlugins: [remarkReadingTime],
     syntaxHighlight: 'prism',
   },
   prefetch: true,

package.json

@@ -29,9 +29,11 @@
     "classnames": "~2.5.1",
     "cssnano-preset-advanced": "~6.0.3",
     "dotenv": "~16.4.1",
+    "mdast-util-to-string": "~4.0.0",
     "mustache": "~4.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
+    "reading-time-estimator": "~1.9.4",
     "rehype-external-links": "~3.0.0",
     "remark": "~15.0.1",
     "remark-frontmatter": "~5.0.0",
@@ -48,6 +50,7 @@
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "~1.4.0",
+    "@cspell/dict-uk-ua": "~4.0.0",
     "@total-typescript/ts-reset": "0.5.1",
     "@types/jest": "~29.5.11",
     "@types/mdast": "~4.0.0",
@@ -58,6 +61,7 @@
     "@typescript-eslint/eslint-plugin": "~6.20.0",
     "@typescript-eslint/parser": "~6.20.0",
     "autoprefixer": "~10.4.17",
+    "cspell": "~8.3.2",
     "cssnano": "~6.0.3",
     "eslint": "~8.56.0",
     "eslint-config-airbnb-base": "~15.0.0",
@@ -77,6 +81,8 @@
     "eslint-plugin-tsdoc": "0.2.17",
     "eslint-plugin-unicorn": "~50.0.1",
     "jest": "~29.7.0",
+    "markdownlint-cli2": "0.12.1",
+    "markdownlint-rule-search-replace": "~1.2.0",
     "postcss": "~8.4.33",
     "postcss-html": "~1.6.0",
     "postcss-scss": "~4.0.9",

reading-time.plugin.mjs

@@ -0,0 +1,12 @@
+import { toString } from 'mdast-util-to-string';
+import { readingTime } from 'reading-time-estimator';
+
+export default function remarkReadingTime() {
+  return function (tree, { data }) {
+    const textOnPage = toString(tree);
+    const result = readingTime(textOnPage);
+    // readingTime.text will give us minutes read as a friendly string,
+    // i.e. "3 min read"
+    data.astro.frontmatter.minutesRead = 'Хвилин читання: ' + result.minutes;
+  };
+}

src/pages/uk/docs/[...slug].astro

@@ -18,19 +18,26 @@ export async function getStaticPaths() {
 
 const { slug } = Astro.params;
 const page = await getEntry('processed-content', slug);
-const { Content } = await page.render();
+const { remarkPluginFrontmatter, Content } = await page.render();
 ---
 
 <Layout title={page.data.title}>
   <main
     class="wd-doc-page container relative flex flex-wrap justify-start flex-1 w-full bg-ui-background">
     <h1>{page.data.title}</h1>
+    <span class="reading-time">{remarkPluginFrontmatter.minutesRead}</span>
     <div class="flex flex-wrap items-start justify-start">
       <div class="order-1 w-full md:w-2/3"><Content /></div>
     </div>
   </main>
 </Layout>
 <style lang="scss">
+  .reading-time {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 1em;
+  }
+
   .wd-doc-page {
     /* .sidebar {
     @apply fixed bg-ui-background px-4 inset-x-0 bottom-0 w-full border-r border-ui-border overflow-y-auto transition-all z-40;