Skip to content

Commit a74dc8a

Browse files
SnugugSam Richard
andauthored
πŸ› 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>
1 parent aa11b00 commit a74dc8a

7 files changed

Lines changed: 73 additions & 13 deletions

File tree

β€Žcms/schemas/microcopy.tsxβ€Ž

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,12 @@ export default defineType({
350350
type: 'string',
351351
validation: (Rule) => Rule.required(),
352352
}),
353+
defineField({
354+
name: 'readtime',
355+
title: 'Reading Time',
356+
type: 'string',
357+
validation: (Rule) => Rule.required(),
358+
}),
353359
defineField({
354360
name: 'posted',
355361
title: 'Posted',

β€Žsite/package.jsonβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"pagefind": "^1.1.0",
5555
"posthtml": "^0.16.6",
5656
"posthtml-match-helper": "^2.0.0",
57+
"reading-time": "^1.5.0",
5758
"requestidlecallback": "^0.3.0",
5859
"shiki": "^1.10.0",
5960
"slugify": "^1.6.6",

β€Žsite/pnpm-lock.yamlβ€Ž

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts">
2+
import readingTime from 'reading-time';
3+
import { toPlainText } from 'astro-portabletext/utils';
4+
import type { PortableTextBlock } from '@sanity/types';
5+
6+
export let body: PortableTextBlock[];
7+
export let label = 'Reading time';
8+
export let duration = `((n)) minutes`;
9+
export let wrapper = 'div';
10+
11+
const { minutes } = readingTime(toPlainText(body));
12+
const length = duration.replace('((n))', `${Math.ceil(minutes)}`);
13+
</script>
14+
15+
<svelte:element this={wrapper} class="extras-section">
16+
<h4 class="type--label">{label}</h4>
17+
<p class="type--h6">{length}</p>
18+
</svelte:element>
19+
20+
<style>
21+
.type--h6 {
22+
font-weight: 400;
23+
}
24+
</style>

β€Žsite/src/components/portable-text/DynamicBody.astroβ€Ž

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@ import Footnote from './Footnote.svelte';
1414
1515
import { slugify } from '$lib/data';
1616
17-
import { microcopy as micro } from '$$sanity';
18-
import type { Microcopy } from '$types/sanity';
17+
// import { microcopy as micro } from '$$sanity';
18+
// import type { Microcopy } from '$types/sanity';
1919
2020
const { node: props /* , isInline, class */ } = Astro.props;
21-
const { lang } = Astro.params;
22-
const microcopy = Object.values(micro).find(
23-
(m) => m._langCode === lang,
24-
) as Microcopy;
21+
// const { lang } = Astro.params;
22+
// const microcopy = Object.values(micro).find(
23+
// (m) => m._langCode === lang,
24+
// ) as Microcopy;
25+
// 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.
2526
---
2627

2728
{
@@ -47,12 +48,7 @@ const microcopy = Object.values(micro).find(
4748
<PortableText body={props.quote} wrapped={false} />
4849
</Quote>
4950
) : props._type === 'youtube' ? (
50-
<YouTube
51-
id={props.id}
52-
alt=""
53-
label={microcopy.actions.loadVideo}
54-
client:visible
55-
/>
51+
<YouTube id={props.id} alt="" label="Load Video" client:visible />
5652
) : props._type === 'table' ? (
5753
<Table block={props} />
5854
) : props._type === 'break' ? (

β€Žsite/src/layouts/views/Post.astroβ€Ž

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import YouTube from '$components/YouTube.svelte';
88
import type { PostHeroProps } from '$components/PostHero.svelte';
99
import Text from '$components/Text.astro';
1010
import { buildTOC } from '$lib/portabletext';
11+
import ReadingTime from '$components/ReadingTime.svelte';
1112
import type { Post, Microcopy, Share } from '$types/sanity';
1213
1314
export interface Props {
@@ -54,6 +55,24 @@ const authors = {
5455
5556
const toc = buildTOC(post.body);
5657
const share = (post.share as Share) || null;
58+
59+
/**
60+
*
61+
* @param {Date} d
62+
* @return {string}
63+
*/
64+
function localeDate(d: Date) {
65+
return d.toLocaleDateString(locale, {
66+
year: 'numeric',
67+
month: 'long',
68+
day: 'numeric',
69+
});
70+
}
71+
72+
const showUpdated =
73+
post?.dates?.published &&
74+
post?.dates?.updated &&
75+
localeDate(post.dates.published) !== localeDate(post.dates.updated);
5776
---
5877

5978
<Article
@@ -84,6 +103,12 @@ const share = (post.share as Share) || null;
84103
<Fragment slot="extras">
85104
<!-- Author Info -->
86105
<Authors {...authors} />
106+
<!-- Reading Time -->
107+
<ReadingTime
108+
body={post.body}
109+
label={microcopy.meta?.readtime}
110+
duration={microcopy.tutorials.minutes}
111+
/>
87112
<!-- Published date info -->
88113
<Published
89114
locale={locale.code}
@@ -92,7 +117,7 @@ const share = (post.share as Share) || null;
92117
wrapper="section"
93118
/>
94119
{
95-
post.dates.updated && (
120+
showUpdated && (
96121
<Published
97122
locale={locale.code}
98123
label={microcopy.meta.updated}

β€Žsite/types/sanity.d.tsβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,7 @@ export type Microcopy = {
462462
};
463463
meta: {
464464
authored: string;
465+
readtime: string;
465466
toc: string;
466467
updated: string;
467468
posted: string;

0 commit comments

Comments
Β (0)