blog articles

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();
+}

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();
+}