blog post page

2021-08-28 00:08:38 +08:00 · 2021-08-28 00:08:38 +08:00 · c75ed023a1
commit c75ed023a1
parent 9248e5fbbe
12 changed files with 455 additions and 153 deletions
--- a/app/blog/components/avatar.tsx
+++ b/app/blog/components/avatar.tsx
@ -0,0 +1,12 @@
+import Image from "next/image";
+
+export default function Avatar({ name, picture }: any) {
+	return (
+		<div className="flex items-center">
+			<div className="w-12 h-12 relative mr-4">
+				<Image src={picture.url} layout="fill" className="rounded-full" alt={name} />
+			</div>
+			<div className="text-xl font-bold">{name}</div>
+		</div>
+	);
+}
--- a/app/blog/components/cover-image.tsx
+++ b/app/blog/components/cover-image.tsx
@ -0,0 +1,28 @@
+import { Image } from "react-datocms";
+import clsx from "clsx";
+import Link from "next/link";
+
+export default function CoverImage({ title, responsiveImage, slug }: any) {
+	const image = (
+		<Image
+			data={{
+				...responsiveImage,
+				alt: `Cover Image for ${title}`,
+			}}
+			className={clsx("shadow-small", {
+				"hover:shadow-medium transition-shadow duration-200": slug,
+			})}
+		/>
+	);
+	return (
+		<div className="sm:mx-0">
+			{slug ? (
+				<Link href={`/posts/${slug}`}>
+					<a aria-label={title}>{image}</a>
+				</Link>
+			) : (
+				image
+			)}
+		</div>
+	);
+}
--- a/app/blog/components/date.tsx
+++ b/app/blog/components/date.tsx
@ -0,0 +1,10 @@
+const formatter = Intl.DateTimeFormat("en-US", {
+	day: "2-digit",
+	month: "short",
+	year: "numeric",
+});
+
+export default function DateComponent({ dateString }: any) {
+	const date = new Date(dateString);
+	return <time dateTime={dateString}>{formatter.format(date)}</time>;
+}
--- a/app/blog/components/more-stories.tsx
+++ b/app/blog/components/more-stories.tsx
@ -0,0 +1,82 @@
+import { Link, Routes } from "blitz";
+import PostPreview from "./post-preview";
+import type { Post } from "../../../integrations/datocms";
+
+type Props = {
+	posts: Post[];
+};
+
+const formatter = Intl.DateTimeFormat("en-US", {
+	day: "2-digit",
+	month: "short",
+	year: "numeric",
+});
+
+export default function MoreStories({ posts }: Props) {
+	return (
+		<aside>
+			<div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+				<div className="pb-12 md:pb-20">
+					<div className="max-w-3xl mx-auto">
+						<h4 className="h4 font-mackinac mb-8">Related articles</h4>
+
+						{/* Articles container */}
+						<div className="grid gap-4 sm:gap-6 sm:grid-cols-2">
+							{posts.map((post) => (
+								<article key={post.slug} className="relative group p-6 text-white">
+									<figure>
+										<img
+											className="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-75 transition duration-700 ease-out"
+											src={post.coverImage.responsiveImage.src}
+											width="372"
+											height="182"
+											alt="Related post"
+										/>
+										<div
+											className="absolute inset-0 bg-primary-500 opacity-75 group-hover:opacity-50 transition duration-700 ease-out"
+											aria-hidden="true"
+										/>
+									</figure>
+									<div className="relative flex flex-col h-full">
+										<header className="flex-grow">
+											<Link href={Routes.PostPage({ slug: post.slug })}>
+												<a className="hover:underline">
+													<h3 className="text-lg font-mackinac font-bold tracking-tight mb-2">
+														{post.title}
+													</h3>
+												</a>
+											</Link>
+											<div className="text-sm opacity-80">
+												{formatter.format(new Date(post.date))}
+											</div>
+										</header>
+										<footer>
+											{/* Author meta */}
+											<div className="flex items-center text-sm mt-5">
+												<a href="#0">
+													<img
+														className="rounded-full flex-shrink-0 mr-3"
+														src={post.author.picture.url}
+														width="32"
+														height="32"
+														alt={post.author.name}
+													/>
+												</a>
+												<div>
+													<span className="opacity-75">By </span>
+													<span className="font-medium hover:underline">
+														{post.author.name}
+													</span>
+												</div>
+											</div>
+										</footer>
+									</div>
+								</article>
+							))}
+						</div>
+					</div>
+				</div>
+			</div>
+		</aside>
+	);
+}
--- a/app/blog/components/post-body.tsx
+++ b/app/blog/components/post-body.tsx
@ -0,0 +1,16 @@
+import styles from "../styles/post-body.module.css";
+
+type Props = {
+	content: string;
+};
+
+export default function PostBody({ content }: Props) {
+	return (
+		<div className="max-w-2xl mx-auto">
+			<div
+				className={`prose prose-lg prose-blue ${styles.markdown}`}
+				dangerouslySetInnerHTML={{ __html: content }}
+			/>
+		</div>
+	);
+}
--- a/app/blog/components/post-preview.tsx
+++ b/app/blog/components/post-preview.tsx
@ -0,0 +1,25 @@
+import Link from "next/link";
+
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+
+export default function PostPreview({ title, coverImage, date, excerpt, author, slug }: any) {
+	return (
+		<div>
+			<div className="mb-5">
+				<CoverImage slug={slug} title={title} responsiveImage={coverImage.responsiveImage} />
+			</div>
+			<h3 className="text-3xl mb-3 leading-snug">
+				<Link href={`/posts/${slug}`}>
+					<a className="hover:underline">{title}</a>
+				</Link>
+			</h3>
+			<div className="text-lg mb-4">
+				<Date dateString={date} />
+			</div>
+			<p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+			<Avatar name={author.name} picture={author.picture} />
+		</div>
+	);
+}
--- a/app/blog/components/section-separator.tsx
+++ b/app/blog/components/section-separator.tsx
@ -0,0 +1,3 @@
+export default function SectionSeparator() {
+	return <hr className="border-accent-2 mt-28 mb-24" />;
+}
--- a/app/blog/pages/articles/[slug].tsx
+++ b/app/blog/pages/articles/[slug].tsx
@ -1,8 +1,13 @@
-import { BlitzPage, GetStaticPaths, GetStaticProps, Head, useRouter } from "blitz";
+import type { BlitzPage, GetStaticPaths, GetStaticProps } from "blitz";
+import { Head, useRouter } from "blitz";
 import ErrorPage from "next/error";

 import type { Post } from "integrations/datocms";
 import { getAllPostsWithSlug, getPostAndMorePosts, markdownToHtml } from "integrations/datocms";
+import Header from "../../../landing-page/components/header";
+import PostBody from "../../components/post-body";
+import SectionSeparator from "../../components/section-separator";
+import MoreStories from "../../components/more-stories";

 type Props = {
 	post: Post;
@ -10,15 +15,96 @@ type Props = {
 	preview: boolean;
 };

+const formatter = Intl.DateTimeFormat("en-US", {
+	day: "2-digit",
+	month: "short",
+	year: "numeric",
+});
+
 const PostPage: BlitzPage<Props> = ({ post, morePosts, preview }) => {
 	const router = useRouter();
 	if (!router.isFallback && !post?.slug) {
 		return <ErrorPage statusCode={404} />;
 	}
-
 	console.log("post", post);

-	// TODO
+	return (
+		<div className="flex flex-col min-h-screen overflow-hidden">
+			<Header />
+
+			<main className="flex-grow">
+				<section className="relative">
+					{/* Background image */}
+					<div className="absolute inset-0 h-128 pt-16 box-content">
+						<img
+							className="absolute inset-0 w-full h-full object-cover opacity-25"
+							src={post.coverImage.responsiveImage.src}
+							width={post.coverImage.responsiveImage.width}
+							height={post.coverImage.responsiveImage.height}
+							alt={post.coverImage.responsiveImage.alt ?? `${post.title} cover image`}
+						/>
+						<div
+							className="absolute inset-0 bg-gradient-to-t from-white dark:from-gray-900"
+							aria-hidden="true"
+						/>
+					</div>
+
+					<div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+						<div className="pt-32 pb-12 md:pt-40 md:pb-20">
+							<div className="max-w-3xl mx-auto">
+								<article>
+									{/* Article header */}
+									<header className="mb-8">
+										{/* Title and excerpt */}
+										<div className="text-center md:text-left">
+											<h1 className="h1 font-mackinac mb-4">{post.title}</h1>
+											<p className="text-xl text-gray-600 dark:text-gray-400">{post.excerpt}</p>
+										</div>
+										{/* Article meta */}
+										<div className="md:flex md:items-center md:justify-between mt-5">
+											{/* Author meta */}
+											<div className="flex items-center justify-center">
+												<img
+													className="rounded-full flex-shrink-0 mr-3"
+													src={post.author.picture.url}
+													width="32"
+													height="32"
+													alt="Author 04"
+												/>
+												<div>
+													<span className="text-gray-600 dark:text-gray-400">By </span>
+													<a
+														className="font-medium text-gray-800 dark:text-gray-300 hover:underline"
+														href="#0"
+													>
+														{post.author.name}
+													</a>
+													<span className="text-gray-600 dark:text-gray-400">
+														{" "}
+														· {formatter.format(new Date(post.date))}
+													</span>
+												</div>
+											</div>
+										</div>
+									</header>
+									<hr className="w-5 h-px pt-px bg-gray-400 dark:bg-gray-500 border-0 mb-8" />
+
+									{/* Article content */}
+									<div className="text-lg text-gray-600 dark:text-gray-400">
+										<PostBody content={post.content} />
+									</div>
+								</article>
+
+								<SectionSeparator />
+								{morePosts.length > 0 && <MoreStories posts={morePosts} />}
+							</div>
+						</div>
+					</div>
+				</section>
+			</main>
+		</div>
+	);
+
 	/*return (
 		<Layout preview={preview}>
 			<Container>
@ -49,8 +135,6 @@ const PostPage: BlitzPage<Props> = ({ post, morePosts, preview }) => {
 			</Container>
 		</Layout>
 	);*/
-
-	return null;
 };

 export default PostPage;
--- a/app/blog/styles/post-body.module.css
+++ b/app/blog/styles/post-body.module.css
@ -0,0 +1,18 @@
+.markdown {
+	@apply text-lg leading-relaxed;
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+	@apply my-6;
+}
+
+.markdown h2 {
+	@apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.markdown h3 {
+	@apply text-2xl mt-8 mb-4 leading-snug;
+}
--- a/blitz.config.ts
+++ b/blitz.config.ts
@ -25,6 +25,9 @@ type Module = Omit<NodeModule, "exports"> & { exports: BlitzConfig };
 			isAuthorized: simpleRolesIsAuthorized,
 		}),
 	],
+	images: {
+		domains: ["www.datocms-assets.com"],
+	},
 	serverRuntimeConfig: {
 		paddle: {
 			apiKey: process.env.PADDLE_API_KEY,
--- a/package-lock.json
+++ b/package-lock.json
@ -1369,14 +1369,6 @@
 				"superjson": "1.7.2"
 			},
 			"dependencies": {
-				"@babel/runtime": {
-					"version": "7.12.5",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-					"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				},
 				"ansi-styles": {
 					"version": "4.3.0",
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@ -1385,15 +1377,6 @@
 						"color-convert": "^2.0.1"
 					}
 				},
-				"buffer": {
-					"version": "5.6.0",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
-					"integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
-					"requires": {
-						"base64-js": "^1.0.2",
-						"ieee754": "^1.1.4"
-					}
-				},
 				"chalk": {
 					"version": "4.1.2",
 					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -1431,142 +1414,11 @@
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
 				},
-				"next": {
-					"version": "npm:@blitzjs/next@11.1.0-0.40.0-canary.5",
-					"resolved": "https://registry.npmjs.org/@blitzjs/next/-/next-11.1.0-0.40.0-canary.5.tgz",
-					"integrity": "sha512-HKo0LYyvUHAx8qv/3LMbGiuGbzxKPaljrCc+XVHUBouZyRKsZVgaxmybJbVdXZt+Xe+51zTxMI2ENPhXzd7oAg==",
-					"requires": {
-						"@babel/helper-module-imports": "^7.0.0",
-						"@babel/runtime": "7.12.5",
-						"@hapi/accept": "5.0.2",
-						"@next/env": "11.1.0",
-						"@next/polyfill-module": "11.1.0",
-						"@next/react-dev-overlay": "11.1.0",
-						"@next/react-refresh-utils": "11.1.0",
-						"@node-rs/helper": "1.2.1",
-						"@types/secure-password": "3.1.0",
-						"assert": "2.0.0",
-						"ast-types": "0.13.2",
-						"b64-lite": "^1.4.0",
-						"bad-behavior": "^1.0.1",
-						"browserify-zlib": "0.2.0",
-						"browserslist": "4.16.6",
-						"buffer": "5.6.0",
-						"caniuse-lite": "^1.0.30001228",
-						"chalk": "2.4.2",
-						"chokidar": "3.5.1",
-						"constants-browserify": "1.0.0",
-						"cookie-session": "^1.4.0",
-						"crypto-browserify": "3.12.0",
-						"cssnano-simple": "3.0.0",
-						"debug": "4.3.1",
-						"domain-browser": "4.19.0",
-						"encoding": "0.1.13",
-						"esbuild": "^0.11.12",
-						"etag": "1.8.1",
-						"fs-extra": "^9.1.0",
-						"get-orientation": "1.1.2",
-						"https-browserify": "1.0.0",
-						"image-size": "1.0.0",
-						"jest-worker": "27.0.0-next.5",
-						"native-url": "0.3.4",
-						"node-fetch": "2.6.1",
-						"node-html-parser": "1.4.9",
-						"node-libs-browser": "^2.2.1",
-						"null-loader": "4.0.1",
-						"os-browserify": "0.3.0",
-						"p-limit": "3.1.0",
-						"passport": "0.4.1",
-						"path-browserify": "1.0.1",
-						"pnp-webpack-plugin": "1.6.4",
-						"postcss": "8.2.15",
-						"process": "0.11.10",
-						"querystring-es3": "0.2.1",
-						"raw-body": "2.4.1",
-						"react-is": "17.0.2",
-						"react-query": "3.16.0",
-						"react-refresh": "0.8.3",
-						"secure-password": "4.0.0",
-						"stream-browserify": "3.0.0",
-						"stream-http": "3.1.1",
-						"string_decoder": "1.3.0",
-						"styled-jsx": "4.0.0",
-						"superjson": "1.7.2",
-						"timers-browserify": "2.0.12",
-						"tslog": "^3.1.1",
-						"tty-browserify": "0.0.1",
-						"use-subscription": "1.5.1",
-						"util": "0.12.3",
-						"vm-browserify": "1.1.2",
-						"watchpack": "2.1.1"
-					},
-					"dependencies": {
-						"ansi-styles": {
-							"version": "3.2.1",
-							"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-							"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-							"requires": {
-								"color-convert": "^1.9.0"
-							}
-						},
-						"chalk": {
-							"version": "2.4.2",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-							"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-							"requires": {
-								"ansi-styles": "^3.2.1",
-								"escape-string-regexp": "^1.0.5",
-								"supports-color": "^5.3.0"
-							}
-						},
-						"color-convert": {
-							"version": "1.9.3",
-							"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-							"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-							"requires": {
-								"color-name": "1.1.3"
-							}
-						},
-						"color-name": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-							"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-						},
-						"has-flag": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-							"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-						},
-						"supports-color": {
-							"version": "5.5.0",
-							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-							"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-							"requires": {
-								"has-flag": "^3.0.0"
-							}
-						}
-					}
-				},
 				"path-key": {
 					"version": "3.1.1",
 					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
 					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
 				},
-				"postcss": {
-					"version": "8.2.15",
-					"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
-					"integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
-					"requires": {
-						"colorette": "^1.2.2",
-						"nanoid": "^3.1.23",
-						"source-map": "^0.6.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-				},
 				"shebang-command": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -5107,6 +4959,11 @@
 			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
 			"integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg=="
 		},
+		"array-flatten": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
+			"integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
+		},
 		"array-includes": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
@ -7484,6 +7341,27 @@
 			"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.5.1.tgz",
 			"integrity": "sha512-OD0TZ+B7yP7ZgpJf5K2DIbj3FZvFvxgFUuaqA/V5zTjAtAAXZ1E8bktHxmAGs4x5b7PflqA9LeQ84Og7wYtF7Q=="
 		},
+		"datocms-listen": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/datocms-listen/-/datocms-listen-0.1.3.tgz",
+			"integrity": "sha512-k1UfXMdPqZgKw/6Q6TXSXLbrwKzXpbsaG/d1/9H7sKMbWD87HU7FT6ilNFjda7ODPLZozC1SmF2GEHXg83MfPQ=="
+		},
+		"datocms-structured-text-generic-html-renderer": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/datocms-structured-text-generic-html-renderer/-/datocms-structured-text-generic-html-renderer-1.2.0.tgz",
+			"integrity": "sha512-77w/bfO0GE43ck4ClhkeNs7vG3zmsgo1uyBLEomeALtfj0rlbCWS5jI33svMl3ek1BbBukTVdqLaliyrxCwpWg==",
+			"requires": {
+				"datocms-structured-text-utils": "^1.2.0"
+			}
+		},
+		"datocms-structured-text-utils": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/datocms-structured-text-utils/-/datocms-structured-text-utils-1.2.0.tgz",
+			"integrity": "sha512-8qfpSWU/nVrMr8C0aT5n16WN0/KQbtYD2GJXd9WDf01bfr+WzJCi5szZF1dBLhD2zhs41A4gtO3aM4J1CQe4wA==",
+			"requires": {
+				"array-flatten": "^3.0.0"
+			}
+		},
 		"dayjs": {
 			"version": "1.10.6",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.6.tgz",
@ -7695,6 +7573,11 @@
 			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
 			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
 		},
+		"dequal": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+			"integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+		},
 		"des.js": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@ -10293,6 +10176,11 @@
 				"side-channel": "^1.0.4"
 			}
 		},
+		"intersection-observer": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.0.tgz",
+			"integrity": "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
+		},
 		"ioredis": {
 			"version": "4.27.7",
 			"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-4.27.7.tgz",
@ -13912,6 +13800,110 @@
 			"resolved": "https://registry.npmjs.org/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz",
 			"integrity": "sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA=="
 		},
+		"next": {
+			"version": "npm:@blitzjs/next@11.1.0-0.40.0-canary.5",
+			"resolved": "https://registry.npmjs.org/@blitzjs/next/-/next-11.1.0-0.40.0-canary.5.tgz",
+			"integrity": "sha512-HKo0LYyvUHAx8qv/3LMbGiuGbzxKPaljrCc+XVHUBouZyRKsZVgaxmybJbVdXZt+Xe+51zTxMI2ENPhXzd7oAg==",
+			"requires": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/runtime": "7.12.5",
+				"@hapi/accept": "5.0.2",
+				"@next/env": "11.1.0",
+				"@next/polyfill-module": "11.1.0",
+				"@next/react-dev-overlay": "11.1.0",
+				"@next/react-refresh-utils": "11.1.0",
+				"@node-rs/helper": "1.2.1",
+				"@types/secure-password": "3.1.0",
+				"assert": "2.0.0",
+				"ast-types": "0.13.2",
+				"b64-lite": "^1.4.0",
+				"bad-behavior": "^1.0.1",
+				"browserify-zlib": "0.2.0",
+				"browserslist": "4.16.6",
+				"buffer": "5.6.0",
+				"caniuse-lite": "^1.0.30001228",
+				"chalk": "2.4.2",
+				"chokidar": "3.5.1",
+				"constants-browserify": "1.0.0",
+				"cookie-session": "^1.4.0",
+				"crypto-browserify": "3.12.0",
+				"cssnano-simple": "3.0.0",
+				"debug": "4.3.1",
+				"domain-browser": "4.19.0",
+				"encoding": "0.1.13",
+				"esbuild": "^0.11.12",
+				"etag": "1.8.1",
+				"fs-extra": "^9.1.0",
+				"get-orientation": "1.1.2",
+				"https-browserify": "1.0.0",
+				"image-size": "1.0.0",
+				"jest-worker": "27.0.0-next.5",
+				"native-url": "0.3.4",
+				"node-fetch": "2.6.1",
+				"node-html-parser": "1.4.9",
+				"node-libs-browser": "^2.2.1",
+				"null-loader": "4.0.1",
+				"os-browserify": "0.3.0",
+				"p-limit": "3.1.0",
+				"passport": "0.4.1",
+				"path-browserify": "1.0.1",
+				"pnp-webpack-plugin": "1.6.4",
+				"postcss": "8.2.15",
+				"process": "0.11.10",
+				"querystring-es3": "0.2.1",
+				"raw-body": "2.4.1",
+				"react-is": "17.0.2",
+				"react-query": "3.16.0",
+				"react-refresh": "0.8.3",
+				"secure-password": "4.0.0",
+				"stream-browserify": "3.0.0",
+				"stream-http": "3.1.1",
+				"string_decoder": "1.3.0",
+				"styled-jsx": "4.0.0",
+				"superjson": "1.7.2",
+				"timers-browserify": "2.0.12",
+				"tslog": "^3.1.1",
+				"tty-browserify": "0.0.1",
+				"use-subscription": "1.5.1",
+				"util": "0.12.3",
+				"vm-browserify": "1.1.2",
+				"watchpack": "2.1.1"
+			},
+			"dependencies": {
+				"@babel/runtime": {
+					"version": "7.12.5",
+					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+					"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+					"requires": {
+						"regenerator-runtime": "^0.13.4"
+					}
+				},
+				"buffer": {
+					"version": "5.6.0",
+					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
+					"integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
+					"requires": {
+						"base64-js": "^1.0.2",
+						"ieee754": "^1.1.4"
+					}
+				},
+				"postcss": {
+					"version": "8.2.15",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
+					"integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+					"requires": {
+						"colorette": "^1.2.2",
+						"nanoid": "^3.1.23",
+						"source-map": "^0.6.1"
+					}
+				},
+				"react-is": {
+					"version": "17.0.2",
+					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+				}
+			}
+		},
 		"next-pwa": {
 			"version": "5.3.1",
 			"resolved": "https://registry.npmjs.org/next-pwa/-/next-pwa-5.3.1.tgz",
@ -16016,6 +16008,19 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"react-datocms": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/react-datocms/-/react-datocms-1.6.3.tgz",
+			"integrity": "sha512-/6+3ogPYFA9lE9MZ7kqhSAcqFq9SAdiFW+/IDtLv8v8j8ApxRx/gEU96xiWFC+iBVL/8SwQoEVO0FFXCMeF31g==",
+			"requires": {
+				"datocms-listen": "^0.1.3",
+				"datocms-structured-text-generic-html-renderer": "^1.1.0",
+				"datocms-structured-text-utils": "^1.1.0",
+				"intersection-observer": "^0.12.0",
+				"react-intersection-observer": "^8.31.1",
+				"use-deep-compare-effect": "^1.6.1"
+			}
+		},
 		"react-dom": {
 			"version": "18.0.0-alpha-64f83a6fd-20210819",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0-alpha-64f83a6fd-20210819.tgz",
@ -16042,6 +16047,11 @@
 			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.12.2.tgz",
 			"integrity": "sha512-cpxocjrgpMAJCMJQR51BQhMoEx80/EQqePNihMTgoTYTqCRbd2GExi+N4GJIr+cFqrmbwNj9wxk5oLWYQsUefg=="
 		},
+		"react-intersection-observer": {
+			"version": "8.32.1",
+			"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.32.1.tgz",
+			"integrity": "sha512-FOmMkMw7MeJ8FkuADpU8TRcvGuTvPB+DRkaikS1QXcWArYLCWC3mjRorq2XeRGBuqmaueOBd27PUazTu9AgInw=="
+		},
 		"react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -18856,6 +18866,16 @@
 			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
 			"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
 		},
+		"use-deep-compare-effect": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz",
+			"integrity": "sha512-VB3b+7tFI81dHm8buGyrpxi8yBhzYZdyMX9iBJra7SMFMZ4ci4FJ1vFc1nvChiB1iLv4GfjqaYfvbNEpTT1rFQ==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@types/react": "^17.0.0",
+				"dequal": "^2.0.2"
+			}
+		},
 		"use-isomorphic-layout-effect": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -63,6 +63,7 @@
 		"pino-pretty": "5.1.3",
 		"quirrel": "1.7.1",
 		"react": "18.0.0-alpha-64f83a6fd-20210819",
+		"react-datocms": "1.6.3",
 		"react-dom": "18.0.0-alpha-64f83a6fd-20210819",
 		"react-hook-form": "7.12.2",
 		"react-spring": "9.2.4",