🐛 Fix preview rendering for videos and same published/updated dates (#771)

* Remove microcopy preventing previews from working

* Fix showing last updated on posts if it's the same as published

* Add reading time to posts

* Pass in microcopy

* Add reading time microcopy

---------

Co-authored-by: Sam Richard <samrichard@google.com>

Author: Snugug

cms/schemas/microcopy.tsx

@@ -350,6 +350,12 @@ export default defineType({
           type: 'string',
           validation: (Rule) => Rule.required(),
         }),
+        defineField({
+          name: 'readtime',
+          title: 'Reading Time',
+          type: 'string',
+          validation: (Rule) => Rule.required(),
+        }),
         defineField({
           name: 'posted',
           title: 'Posted',

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/pnpm-lock.yaml

@@ -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/components/ReadingTime.svelte

@@ -14,14 +14,15 @@ import Footnote from './Footnote.svelte';
 
 import { slugify } from '$lib/data';
 
-import { microcopy as micro } from '$$sanity';
-import type { Microcopy } from '$types/sanity';
+// import { microcopy as micro } from '$$sanity';
+// import type { Microcopy } from '$types/sanity';
 
 const { node: props /* , isInline, class */ } = Astro.props;
-const { lang } = Astro.params;
-const microcopy = Object.values(micro).find(
-  (m) => m._langCode === lang,
-) as Microcopy;
+// const { lang } = Astro.params;
+// const microcopy = Object.values(micro).find(
+//   (m) => m._langCode === lang,
+// ) as Microcopy;
+// TODO: YouTube's "Load Video" label needs to be swapped with `microcopy.actions.loadVideo` one we can properly pass down the microcopy we need for both build time and preview runtime.
 ---
 
 {
@@ -47,12 +48,7 @@ const microcopy = Object.values(micro).find(
       <PortableText body={props.quote} wrapped={false} />
     </Quote>
   ) : props._type === 'youtube' ? (
-    <YouTube
-      id={props.id}
-      alt=""
-      label={microcopy.actions.loadVideo}
-      client:visible
-    />
+    <YouTube id={props.id} alt="" label="Load Video" client:visible />
   ) : props._type === 'table' ? (
     <Table block={props} />
   ) : props._type === 'break' ? (

site/src/components/portable-text/DynamicBody.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 {
@@ -54,6 +55,24 @@ const authors = {
 
 const toc = buildTOC(post.body);
 const share = (post.share as Share) || null;
+
+/**
+ *
+ * @param {Date} d
+ * @return {string}
+ */
+function localeDate(d: Date) {
+  return d.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+const showUpdated =
+  post?.dates?.published &&
+  post?.dates?.updated &&
+  localeDate(post.dates.published) !== localeDate(post.dates.updated);
 ---
 
 <Article
@@ -84,6 +103,12 @@ const share = (post.share as Share) || null;
   <Fragment slot="extras">
     <!-- Author Info -->
     <Authors {...authors} />
+    <!-- Reading Time -->
+    <ReadingTime
+      body={post.body}
+      label={microcopy.meta?.readtime}
+      duration={microcopy.tutorials.minutes}
+    />
     <!-- Published date info -->
     <Published
       locale={locale.code}
@@ -92,7 +117,7 @@ const share = (post.share as Share) || null;
       wrapper="section"
     />
     {
-      post.dates.updated && (
+      showUpdated && (
         <Published
           locale={locale.code}
           label={microcopy.meta.updated}

site/src/layouts/views/Post.astro

@@ -462,6 +462,7 @@ export type Microcopy = {
   };
   meta: {
     authored: string;
+    readtime: string;
     toc: string;
     updated: string;
     posted: string;