contentstack · timbenniks · May 2, 2025 · May 2, 2025
@@ -0,0 +1,28 @@
+/* add Tailwind base styles, components, and utilities */
+@import "tailwindcss";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  body {
+    background: #e9e9e9;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { ContentstackLivePreview } from "@/components/ContentstackLivePreview";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <ContentstackLivePreview />
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,132 @@
+import { JSDOM } from "jsdom";
+import createDOMPurify from "dompurify";
+
+import { getPage, stack } from "@/lib/contentstack";
+import { headers } from "next/headers";
+import Image from "next/image";
+
+export default async function Home({
+  searchParams,
+}: {
+  searchParams: Promise<any>;
+}) {
+  await headers();
+  const { live_preview, entry_uid, content_type_uid } = await searchParams;
+
+  if (live_preview) {
+    stack.livePreviewQuery({
+      live_preview,
+      contentTypeUid: content_type_uid || "",
+      entryUid: entry_uid || "",
+    });
+  }
+
+  const page = await getPage("/");
+
+  const { window } = new JSDOM("");
+  const DOMPurify = createDOMPurify(window);
+
+  return (
+    <main className="max-w-(--breakpoint-md) mx-auto">
+      <section className="p-4">
+        {live_preview ? (
+          <ul className="mb-8 text-sm">
+            <li>
+              live_preview_hash: <code>{live_preview}</code>
+            </li>
+            <li>
+              content_type_uid: <code>{content_type_uid}</code>
+            </li>
+            <li>
+              entry_uid: <code>{entry_uid}</code>
+            </li>
+          </ul>
+        ) : null}
+
+        {page?.title ? (
+          <h1
+            className="text-4xl font-bold mb-4"
+            {...(page?.$ && page?.$.title)}
+          >
+            {page?.title}
+          </h1>
+        ) : null}
+
+        {page?.description ? (
+          <p className="mb-4" {...(page?.$ && page?.$.description)}>
+            {page?.description}
+          </p>
+        ) : null}
+
+        {page?.image ? (
+          <Image
+            className="mb-4"
+            width={768}
+            height={414}
+            src={page?.image.url}
+            alt={page?.image.title}
+            {...(page?.image?.$ && page?.image?.$.url)}
+          />
+        ) : null}
+
+        {page?.rich_text ? (
+          <div
+            {...(page?.$ && page?.$.rich_text)}
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(page?.rich_text),
+            }}
+          />
+        ) : null}
+
+        <div className="space-y-8 max-w-full mt-4">
+          {page?.blocks?.map((item, index) => {
+            const { block } = item;
+            const isImageLeft = block.layout === "image_left";
+
+            return (
+              <div
+                key={block._metadata.uid}
+                {...(page?.$ && page?.$[`blocks__${index}`])}
+                className={`flex flex-col md:flex-row items-center space-y-4 md:space-y-0 bg-slate-100 ${
+                  isImageLeft ? "md:flex-row" : "md:flex-row-reverse"
+                }`}
+              >
+                <div className="w-full md:w-1/2">
+                  {block.image ? (
+                    <Image
+                      src={block.image.url}
+                      alt={block.image.title}
+                      width={200}
+                      height={112}
+                      className="w-full"
+                      {...(block?.$ && block?.$.image)}
+                    />
+                  ) : null}
+                </div>
+                <div className="w-full md:w-1/2 p-4">
+                  {block.title ? (
+                    <h2
+                      className="text-2xl font-bold"
+                      {...(block?.$ && block?.$.title)}
+                    >
+                      {block.title}
+                    </h2>
+                  ) : null}
+                  {block.copy ? (
+                    <div
+                      {...(block?.$ && block?.$.copy)}
+                      dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(block.copy),
+                      }}
+                      className="prose"
+                    />
+                  ) : null}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: "eu-images.contentstack.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;