Add reading time to posts

site/package.json

@@ -54,6 +54,7 @@
     "pagefind": "^1.1.0",
     "posthtml": "^0.16.6",
     "posthtml-match-helper": "^2.0.0",
+    "reading-time": "^1.5.0",
     "requestidlecallback": "^0.3.0",
     "shiki": "^1.10.0",
     "slugify": "^1.6.6",

site/src/components/ReadingTime.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import readingTime from 'reading-time';
+  import { toPlainText } from 'astro-portabletext/utils';
+  import type { PortableTextBlock } from '@sanity/types';
+
+  export let body: PortableTextBlock[];
+  export let label = 'Reading time';
+  export let duration = `{{n}} minutes`;
+  export let wrapper = 'div';
+
+  const { minutes } = readingTime(toPlainText(body));
+  const length = duration.replace('{{n}}', `${Math.ceil(minutes)}`);
+</script>
+
+<svelte:element this={wrapper} class="extras-section">
+  <h4 class="type--label">{label}</h4>
+  <p class="type--h6">{length}</p>
+</svelte:element>
+
+<style>
+  .type--h6 {
+    font-weight: 400;
+  }
+</style>

site/src/layouts/views/Post.astro

@@ -8,6 +8,7 @@ import YouTube from '$components/YouTube.svelte';
 import type { PostHeroProps } from '$components/PostHero.svelte';
 import Text from '$components/Text.astro';
 import { buildTOC } from '$lib/portabletext';
+import ReadingTime from '$components/ReadingTime.svelte';
 import type { Post, Microcopy, Share } from '$types/sanity';
 
 export interface Props {
@@ -102,6 +103,8 @@ const showUpdated =
   <Fragment slot="extras">
     <!-- Author Info -->
     <Authors {...authors} />
+    <!-- Reading Time -->
+    <ReadingTime body={post.body} />
     <!-- Published date info -->
     <Published
       locale={locale.code}