mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-07-27 12:42:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

added read time on index and post pages

Browse Source
This commit is contained in:
Rick van Lieshout
2022-09-29 22:28:06 +02:00
parent 619758c175
commit 6a9ceb9670
22 changed files with 103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Feed/Feed.tsx
View File

@@ -5,7 +5,6 @@ import { Link } from "gatsby";
import * as styles from "./Feed.module.scss";
import { Edge } from "@/types";
type Props = {
edges: Array<Edge>;
};
@@ -17,12 +16,14 @@ const Feed: React.FC<Props> = ({ edges }: Props) => (
<div className={styles.meta}>
<time
className={styles.time}
dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString(
"en-US",
{ year: "numeric", month: "long", day: "numeric" },
)}
dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
>
{new Date(edge.node.frontmatter.date).toLocaleDateString("en-US", {
{new Date(edge.node.frontmatter.date).toLocaleDateString("en-Us", {
day: "numeric",
year: "numeric",
month: "long",
})}
@@ -39,11 +40,9 @@ const Feed: React.FC<Props> = ({ edges }: Props) => (
{edge.node.frontmatter.title}
</Link>
</h2>
<p className={styles.description}>
{edge.node.frontmatter.description}
</p>
<p className={styles.description}>{edge.node.frontmatter.description}</p>
<Link className={styles.more} to={edge.node.fields.slug}>
Read
Read ({edge.node.fields.readingTime?.text})
</Link>
</div>
))}

10
src/components/Feed/__snapshots__/Feed.test.tsx.snap
View File

@@ -7,7 +7,7 @@ exports[`Feed renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -31,7 +31,8 @@ exports[`Feed renders correctly 1`] = `
<a
href="/posts/perfecting-the-art-of-perfection"
>
Read
Read (
)
</a>
</div>
<div>
@@ -39,7 +40,7 @@ exports[`Feed renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -63,7 +64,8 @@ exports[`Feed renders correctly 1`] = `
<a
href="/posts/the-birth-of-movable-type"
>
Read
Read (
)
</a>
</div>
</div>

16
src/components/Post/Content/Content.module.scss
View File

@@ -9,13 +9,23 @@
.title {
font-size: $typographic-base-font-size * 2;
font-weight: 600;
margin-bottom: 0px !important;
margin-left: auto;
margin-right: auto;
max-width: $layout-post-width;
text-align: center;
@include line-height(1.65);
@include margin-top(1);
@include margin-bottom(0);
}
.subTitle {
font-size: $typographic-base-font-size;
font-style: italic;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
max-width: $layout-post-width;
text-align: center;
}
.body {
@@ -48,7 +58,7 @@
max-width: $layout-post-width;
}
h2 > a {
h2>a {
visibility: hidden;
}
@@ -80,7 +90,7 @@
@include margin-bottom(1.125);
}
h2 > a {
h2>a {
visibility: unset;
@include padding-right(1);
}

4
src/components/Post/Content/Content.tsx
View File

@@ -6,15 +6,17 @@ import * as styles from "./Content.module.scss";
interface Props {
title: string;
body: string;
subTitle?: string;
}
const Content: React.FC<Props> = ({ body, title }: Props) => {
const Content: React.FC<Props> = ({ body, title, subTitle }: Props) => {
const { author } = useSiteMetadata();
return (
<>
<PostHeader author={author} />
<div className={styles.content}>
<h1 className={styles.title}>{title}</h1>
<h2 className={styles.subTitle}>- {subTitle}</h2>
<div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
</div>
</>

3
src/components/Post/Content/__snapshots__/Content.test.tsx.snap
View File

@@ -138,6 +138,9 @@ exports[`Content renders correctly 1`] = `
<h1>
Perfecting the Art of Perfection
</h1>
<h2>
-
</h2>
<div
dangerouslySetInnerHTML={
{

4
src/components/Post/Post.tsx
View File

@@ -13,13 +13,13 @@ interface Props {
const Post: React.FC<Props> = ({ post }: Props) => {
const { html } = post;
const { tagSlugs, slug } = post.fields;
const { tagSlugs, slug, readingTime } = post.fields;
const { tags, title, date, disqusId } = post.frontmatter;
return (
<div className={styles.post}>
<div className={styles.content}>
<Content body={html} title={title} />
<Content body={html} title={title} subTitle={readingTime?.text} />
</div>
<div className={styles.footer}>

3
src/components/Post/__snapshots__/Post.test.tsx.snap
View File

@@ -139,6 +139,9 @@ exports[`Post renders correctly 1`] = `
<h1>
Perfecting the Art of Perfection
</h1>
<h2>
-
</h2>
<div
dangerouslySetInnerHTML={
{

10
src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap
View File

@@ -258,7 +258,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -282,7 +282,8 @@ exports[`CategoryTemplate renders correctly 1`] = `
<a
href="/posts/perfecting-the-art-of-perfection"
>
Read
Read (
)
</a>
</div>
<div>
@@ -290,7 +291,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -314,7 +315,8 @@ exports[`CategoryTemplate renders correctly 1`] = `
<a
href="/posts/the-birth-of-movable-type"
>
Read
Read (
)
</a>
</div>
</div>

3
src/templates/IndexTemplate/IndexTemplate.tsx
View File

@@ -54,6 +54,9 @@ export const query = graphql`
fields {
categorySlug
slug
readingTime {
text
}
}
frontmatter {
description

10
src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap
View File

@@ -255,7 +255,7 @@ exports[`IndexTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -279,7 +279,8 @@ exports[`IndexTemplate renders correctly 1`] = `
<a
href="/posts/perfecting-the-art-of-perfection"
>
Read
Read (
)
</a>
</div>
<div>
@@ -287,7 +288,7 @@ exports[`IndexTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -311,7 +312,8 @@ exports[`IndexTemplate renders correctly 1`] = `
<a
href="/posts/the-birth-of-movable-type"
>
Read
Read (
)
</a>
</div>
</div>

3
src/templates/PostTemplate/PostTemplate.tsx
View File

@@ -38,6 +38,9 @@ export const query = graphql`
fields {
slug
tagSlugs
readingTime {
text
}
}
frontmatter {
date

3
src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap
View File

@@ -140,6 +140,9 @@ exports[`PostTemplate renders correctly 1`] = `
<h1>
Perfecting the Art of Perfection
</h1>
<h2>
-
</h2>
<div
dangerouslySetInnerHTML={
{

10
src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap
View File

@@ -258,7 +258,7 @@ exports[`TagTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -282,7 +282,8 @@ exports[`TagTemplate renders correctly 1`] = `
<a
href="/posts/perfecting-the-art-of-perfection"
>
Read
Read (
)
</a>
</div>
<div>
@@ -290,7 +291,7 @@ exports[`TagTemplate renders correctly 1`] = `
<time
dateTime="September 1, 2016"
>
September 2016
September 1, 2016
</time>
<span />
<span>
@@ -314,7 +315,8 @@ exports[`TagTemplate renders correctly 1`] = `
<a
href="/posts/the-birth-of-movable-type"
>
Read
Read (
)
</a>
</div>
</div>

3
src/types/fields.ts
View File

@@ -2,6 +2,9 @@ interface Fields {
slug: string;
categorySlug: string;
tagSlugs?: Array<string>;
readingTime?: {
text: string;
};
}
export default Fields;