add keystatic preview

BibliothecaDAO · Oct 8, 2024 · a8f994a · a8f994a
1 parent 94b910e
commit a8f994a
Show file tree

Hide file tree

Showing 16 changed files with 433 additions and 676 deletions.
diff --git a/apps/nextjs/keystatic.config.ts b/apps/nextjs/keystatic.config.ts
@@ -16,6 +16,7 @@ export default config({
       label: "Games",
       slugField: "title",
       path: "content/games/*",
+      previewUrl: `/preview/start?branch={branch}&to=/games/{slug}`,
       format: { contentField: "content" },
       columns: ["title", "icon"],
       schema: {
@@ -162,6 +163,7 @@ export default config({
       slugField: "title",
       path: "content/blogs/*",
       format: { contentField: "content" },
+      previewUrl: `/preview/start?branch={branch}&to=/blogs/{slug}`,
       columns: ["title", "subtitle"],
       schema: {
         author: fields.text({ label: "Author" }),

diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -18,7 +18,7 @@
     "@avnu/avnu-sdk": "^2.1.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@keystatic/core": "^0.5.30",
+    "@keystatic/core": "^0.5.36",
     "@keystatic/next": "^5.0.1",
     "@markdoc/markdoc": "^0.4.0",
     "@mdx-js/loader": "^3.0.1",

diff --git a/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx b/apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx
@@ -2,7 +2,7 @@ import { BlogCard } from "./BlogCard";
 import { reader } from "@/utils/keystatic";
 
 export const BlogGrid = async () => {
-  const blogs = await reader.collections.blogs.all();
+  const blogs = await reader().collections.blogs.all();
   const blogsSortedByDate = blogs.sort(function (a, b) {
     // Turn your strings into dates, and then subtract them
     // to get a value that is either negative, positive, or zero.

diff --git a/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx b/apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx
@@ -18,7 +18,7 @@ export async function generateMetadata({
 }: {
   params: { slug: string };
 }): Promise<Metadata> {
-  let blog = await reader.collections.blogs.read(params.slug);
+  let blog = await reader().collections.blogs.read(params.slug);
 
   return {
     title: `${blog?.title}`,
@@ -46,7 +46,7 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const blog = await reader.collections.blogs.read(params.slug);
+  const blog = await reader().collections.blogs.read(params.slug);
   if (!blog) {
     return <div>No Blog Found</div>;
   }
@@ -111,6 +111,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
 }
 
 export async function generateStaticParams() {
-  const blogSlugs = await reader.collections.blogs.list();
+  const blogSlugs = await reader().collections.blogs.list();
   return blogSlugs.map((blogSlug) => ({ slug: blogSlug }));
 }
diff --git a/apps/nextjs/src/app/(app)/events/EventGrid.tsx b/apps/nextjs/src/app/(app)/events/EventGrid.tsx
@@ -1,40 +1,44 @@
-
 import { EventCard } from "./EventCard";
 import { reader } from "@/utils/keystatic";
 
-
 interface EventGridProps {
   isHomepage?: boolean;
 }
 
 export const EventGrid = async ({ isHomepage }: EventGridProps) => {
   const currentDate = new Date();
-  const events = await reader.collections.events.all();
+  const events = await reader().collections.events.all();
 
-  const upcomingEvents = events.filter(event => event.entry.startDate && new Date(event.entry.startDate) > currentDate);
-  const pastEvents = events.filter(event => event.entry.endDate && new Date(event.entry.endDate) < currentDate);
+  const upcomingEvents = events.filter(
+    (event) =>
+      event.entry.startDate && new Date(event.entry.startDate) > currentDate,
+  );
+  const pastEvents = events.filter(
+    (event) =>
+      event.entry.endDate && new Date(event.entry.endDate) < currentDate,
+  );
 
   return (
     <div>
-      {
-        upcomingEvents.length
-          ?
-          <div className="mb-4">
-            <h2 className="text-xl font-bold mb-2">Upcoming Events</h2>
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
-              {upcomingEvents.map((event, index) => (
-                <EventCard key={index} event={event.entry} slug={event.slug} />
-              ))}
-            </div>
-          </div>
-          :
-          <div className="mb-4">
-            <h2 className="text-xl font-bold mb-2">Check back soon for upcoming events!</h2>
+      {upcomingEvents.length ? (
+        <div className="mb-4">
+          <h2 className="mb-2 text-xl font-bold">Upcoming Events</h2>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
+            {upcomingEvents.map((event, index) => (
+              <EventCard key={index} event={event.entry} slug={event.slug} />
+            ))}
           </div>
-      }
+        </div>
+      ) : (
+        <div className="mb-4">
+          <h2 className="mb-2 text-xl font-bold">
+            Check back soon for upcoming events!
+          </h2>
+        </div>
+      )}
       {!isHomepage && (
         <div>
-          <h2 className="text-xl font-bold mb-2">Past Events</h2>
+          <h2 className="mb-2 text-xl font-bold">Past Events</h2>
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
             {pastEvents.map((event, index) => (
               <EventCard key={index} event={event.entry} slug={event.slug} />

diff --git a/apps/nextjs/src/app/(app)/events/[slug]/page.tsx b/apps/nextjs/src/app/(app)/events/[slug]/page.tsx
@@ -7,30 +7,28 @@ import Markdoc from "@markdoc/markdoc";
 import { Button } from "@realms-world/ui/components/ui/button";
 import { reader } from "@/utils/keystatic";
 
-
 export async function generateMetadata({
   params,
 }: {
   params: { slug: string };
 }): Promise<Metadata> {
-  let event = await reader.collections.events.read(params.slug);
+  let event = await reader().collections.events.read(params.slug);
   return {
     title: `${event?.name}`,
     description: `${params.slug} - Created for Adventurers by Bibliotheca DAO`,
   };
 }
 
-
 export default async function Page({ params }: { params: { slug: string } }) {
-  const event = await reader.collections.events.read(params.slug);
+  const event = await reader().collections.events.read(params.slug);
   if (!event) {
     return <div>No Event Found</div>;
   }
   const { node } = await event.content();
   const errors = Markdoc.validate(node);
   if (errors.length) {
     console.error(errors);
-    throw new Error('Invalid content');
+    throw new Error("Invalid content");
   }
   const renderable = Markdoc.transform(node);
   return (
@@ -45,13 +43,16 @@ export default async function Page({ params }: { params: { slug: string } }) {
         />
       )}
       <div className="py-4">
-        <span className={`rounded border px-2 py-1 `}>
-          {new Date(event?.startDate || '').toLocaleDateString()} to {new Date(event?.endDate || '').toLocaleDateString()}
+        <span className={`rounded border px-2 py-1`}>
+          {new Date(event?.startDate || "").toLocaleDateString()} to{" "}
+          {new Date(event?.endDate || "").toLocaleDateString()}
         </span>
       </div>
 
       <div className="text-lg">{event.description}</div>
-      <div className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ul:text-bright-yellow md:mt-12">      {Markdoc.renderers.react(renderable, React)}
+      <div className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ul:text-bright-yellow md:mt-12">
+        {" "}
+        {Markdoc.renderers.react(renderable, React)}
       </div>
       <hr className="my-8" />
       <Button asChild>
@@ -61,9 +62,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
   );
 }
 
-
 export async function generateStaticParams() {
-  const eventSlugs = await reader.collections.events.list()
-  console.log(eventSlugs)
-  return eventSlugs.map((eventSlug) => ({ slug: eventSlug }))
-}
+  const eventSlugs = await reader().collections.events.list();
+  console.log(eventSlugs);
+  return eventSlugs.map((eventSlug) => ({ slug: eventSlug }));
+}
diff --git a/apps/nextjs/src/app/(app)/games/[slug]/page.tsx b/apps/nextjs/src/app/(app)/games/[slug]/page.tsx
@@ -35,15 +35,15 @@ export async function generateMetadata({
 }: {
   params: { slug: string };
 }): Promise<Metadata> {
-  let game = await reader.collections.games.read(params.slug);
+  let game = await reader().collections.games.read(params.slug);
   return {
     title: `${game?.title}`,
     description: `${params.slug} - Created for Adventurers by Bibliotheca DAO`,
   };
 }
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const keyStaticGame = await reader.collections.games.read(params.slug);
+  const keyStaticGame = await reader().collections.games.read(params.slug);
 
   if (!keyStaticGame) return;
   const { node } = await keyStaticGame.content();
@@ -60,7 +60,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   }));
 
   // grab studio via developer slug from game so we can spit out the studio's title instead of its slug
-  const studio = await reader.collections.studios.read(
+  const studio = await reader().collections.studios.read(
     keyStaticGame?.developer || "",
   );
 
@@ -324,6 +324,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
 }
 
 export async function generateStaticParams() {
-  const gameSlugs = await reader.collections.games.list();
+  const gameSlugs = await reader().collections.games.list();
   return gameSlugs.map((gameSlug) => ({ slug: gameSlug }));
 }
diff --git a/apps/nextjs/src/app/(app)/games/page.tsx b/apps/nextjs/src/app/(app)/games/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  const allGames = await reader.collections.games.all();
+  const allGames = await reader().collections.games.all();
 
   const games = allGames.sort((a, b) => {
     if (a.slug === "realms-eternum") return -1;

diff --git a/apps/nextjs/src/app/(app)/layout.tsx b/apps/nextjs/src/app/(app)/layout.tsx
@@ -7,7 +7,7 @@ import "@realms-world/styles/globals.css";
 import "@rainbow-me/rainbowkit/styles.css";
 
 import { cache } from "react";
-import { headers } from "next/headers";
+import { headers, cookies, draftMode } from "next/headers";
 import { Footer } from "@/app/_components/Footer";
 import { StarknetLoginModal } from "@/app/_components/modal/StarknetLoginModal";
 import { TopNav } from "@/app/_components/TopNav";
@@ -21,6 +21,8 @@ import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster } from "@realms-world/ui/components/ui/toaster";
 import { TooltipProvider } from "@realms-world/ui/components/ui/tooltip";
 import { ArkClientProvider } from "@/lib/ark/useArkClient";
+import { Button } from "@realms-world/ui/components/ui/button";
+import { Alert } from "@realms-world/ui/components/ui/alert";
 const bebas_neue = Bebas_Neue({
   subsets: ["latin"],
   variable: "--font-bebas-neue",
@@ -46,6 +48,8 @@ const backgroundImageStyle = {
 const getHeaders = cache(() => Promise.resolve(headers()));
 
 export default function Layout(props: { children: React.ReactNode }) {
+  const { isEnabled } = draftMode();
+
   return (
     <html lang="en">
       <body
@@ -65,6 +69,15 @@ export default function Layout(props: { children: React.ReactNode }) {
                         <div className="flex-grow pt-[var(--site-header-height)] sm:mb-24 sm:pl-[var(--site-sidemenu-width)]">
                           {props.children}
                         </div>
+                        {isEnabled && (
+                          <Alert className="w-full">
+                            Draft mode ({cookies().get("ks-branch")?.value}){" "}
+                            <form method="POST" action="/preview/end">
+                              <Button>End preview</Button>
+                            </form>
+                          </Alert>
+                        )}
+                        {isEnabled.toString()}
                         <Footer />
                       </div>
                     </main>

diff --git a/apps/nextjs/src/app/(app)/page.tsx b/apps/nextjs/src/app/(app)/page.tsx
@@ -19,7 +19,7 @@ import Image from "next/image";
 import { reader } from "@/utils/keystatic";
 
 export default async function Home() {
-  const games = await reader.collections.games.all();
+  const games = await reader().collections.games.all();
   const carouselItems = games
     .filter((a) => a.entry.status === "beta" || a.entry.status === "mainnet")
     .map((game) => ({

diff --git a/apps/nextjs/src/app/(app)/preview/end/route.tsx b/apps/nextjs/src/app/(app)/preview/end/route.tsx
@@ -0,0 +1,14 @@
+import { cookies, draftMode } from "next/headers";
+
+export function POST(req: Request) {
+  if (req.headers.get("origin") !== new URL(req.url).origin) {
+    return new Response("Invalid origin", { status: 400 });
+  }
+  const referrer = req.headers.get("Referer");
+  if (!referrer) {
+    return new Response("Missing Referer", { status: 400 });
+  }
+  draftMode().disable();
+  cookies().delete("ks-branch");
+  return Response.redirect(referrer, 303);
+}
diff --git a/apps/nextjs/src/app/(app)/preview/start/route.tsx b/apps/nextjs/src/app/(app)/preview/start/route.tsx
@@ -0,0 +1,20 @@
+import { redirect } from "next/navigation";
+import { draftMode, cookies } from "next/headers";
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const params = url.searchParams;
+  const branch = params.get("branch");
+  const to = params.get("to");
+  console.log(to);
+  console.log(branch);
+  if (!branch || !to) {
+    return new Response("Missing branch or to params", { status: 400 });
+  }
+  draftMode().enable();
+  cookies().set("ks-branch", branch);
+  const toUrl = new URL(to, url.origin);
+  toUrl.protocol = url.protocol;
+  toUrl.host = url.host;
+  redirect(toUrl.toString());
+}