blog articles

2021-08-04 05:04:17 +08:00
parent 1f80ce4114
commit 6f64d80170
7 changed files with 1763 additions and 174 deletions
--- a/app/blog/api/articles/exit-preview.ts
+++ b/app/blog/api/articles/exit-preview.ts
@ -0,0 +1,10 @@
+import type { BlitzApiRequest, BlitzApiResponse } from "blitz";
+
+export default async function preview(req: BlitzApiRequest, res: BlitzApiResponse) {
+	// Exit the current user from "Preview Mode". This function accepts no args.
+	res.clearPreviewData();
+
+	// Redirect the user back to the index page.
+	res.writeHead(307, { Location: "/" });
+	res.end();
+}
--- a/app/blog/api/articles/preview.ts
+++ b/app/blog/api/articles/preview.ts
@ -0,0 +1,34 @@
+import type { BlitzApiRequest, BlitzApiResponse } from "blitz";
+import { getConfig } from "blitz";
+
+import { getPreviewPostBySlug } from "../../../../integrations/datocms";
+
+const { serverRuntimeConfig } = getConfig();
+
+export default async function preview(req: BlitzApiRequest, res: BlitzApiResponse) {
+	// Check the secret and next parameters
+	// This secret should only be known to this API route and the CMS
+	if (
+		req.query.secret !== serverRuntimeConfig.datoCms.previewSecret ||
+		!req.query.slug ||
+		Array.isArray(req.query.slug)
+	) {
+		return res.status(401).json({ message: "Invalid token" });
+	}
+
+	// Fetch the headless CMS to check if the provided `slug` exists
+	const post = await getPreviewPostBySlug(req.query.slug);
+
+	// If the slug doesn't exist prevent preview mode from being enabled
+	if (!post) {
+		return res.status(401).json({ message: "Invalid slug" });
+	}
+
+	// Enable Preview Mode by setting the cookies
+	res.setPreviewData({});
+
+	// Redirect to the path from the fetched post
+	// We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+	res.writeHead(307, { Location: `/posts/${post.slug}` });
+	res.end();
+}
--- a/app/blog/pages/articles/[slug].tsx
+++ b/app/blog/pages/articles/[slug].tsx
@ -0,0 +1,86 @@
+import { BlitzPage, GetStaticPaths, GetStaticProps, Head, useRouter } from "blitz";
+import ErrorPage from "next/error";
+
+import type { Post } from "integrations/datocms";
+import { getAllPostsWithSlug, getPostAndMorePosts, markdownToHtml } from "integrations/datocms";
+
+type Props = {
+	post: Post;
+	morePosts: Post[];
+	preview: boolean;
+};
+
+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 (
+		<Layout preview={preview}>
+			<Container>
+				<Header />
+				{router.isFallback ? (
+					<PostTitle>Loading…</PostTitle>
+				) : (
+					<>
+						<article>
+							<Head>
+								<title>
+									{post.title} | Next.js Blog Example with {CMS_NAME}
+								</title>
+								<meta property="og:image" content={post.ogImage.url} />
+							</Head>
+							<PostHeader
+								title={post.title}
+								coverImage={post.coverImage}
+								date={post.date}
+								author={post.author}
+							/>
+							<PostBody content={post.content} />
+						</article>
+						<SectionSeparator />
+						{morePosts.length > 0 && <MoreStories posts={morePosts} />}
+					</>
+				)}
+			</Container>
+		</Layout>
+	);*/
+
+	return null;
+};
+
+export default PostPage;
+
+export const getStaticProps: GetStaticProps = async ({ params, preview = false }) => {
+	if (!params || !params.slug || Array.isArray(params.slug)) {
+		return {
+			notFound: true,
+		};
+	}
+
+	const data = await getPostAndMorePosts(params.slug, preview);
+	const content = await markdownToHtml(data.post.content || "");
+
+	return {
+		props: {
+			preview,
+			post: {
+				...data.post,
+				content,
+			},
+			morePosts: data.morePosts,
+		},
+	};
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+	const allPosts = await getAllPostsWithSlug();
+	return {
+		paths: allPosts.map((post) => `/articles/${post.slug}`),
+		fallback: true,
+	};
+};