docs: presentation mode

Author: alexanbj

.gitignore

@@ -5,6 +5,7 @@ dist/
 storybook-static/
 next-env.d.ts
 
+packages/icons-react/icons.tsx
 
 # editors
 .idea/
@@ -17,5 +18,4 @@ next-env.d.ts
 
 # Secrets
 .FIGMA_TOKEN
-.vercel
-packages/icons-react/icons.tsx
+.env.local

apps/docs/.env.example

@@ -0,0 +1,2 @@
+# Creata a viewer token at sanity.io/manage
+SANITY_VIEWER_TOKEN=

apps/docs/.gitignore

@@ -1,4 +1,6 @@
 .output
 .vinxi
 public/resources/icons/
-docgen.ts
+docgen.ts
+
+.env

apps/docs/app/lib/preview-middleware.ts

@@ -0,0 +1,12 @@
+import { createMiddleware } from '@tanstack/start';
+import { getCookie } from 'vinxi/http';
+
+export const previewMiddleware = createMiddleware().server(async ({ next }) => {
+  const isPreview = getCookie('__sanity_preview') === 'true';
+  console.log({ isPreview });
+  return next({
+    context: {
+      previewMode: isPreview,
+    },
+  });
+});

apps/docs/app/lib/sanity.server.ts

@@ -0,0 +1,22 @@
+import type { QueryParams } from '@sanity/client';
+import { createServerFn } from '@tanstack/start';
+import { previewMiddleware } from './preview-middleware';
+import { sanityFetch as _sanityFetch, client } from './sanity';
+
+export const sanityFetch = createServerFn({ method: 'GET' })
+  .middleware([previewMiddleware])
+  .validator((data: { query: string; params: QueryParams }) => data)
+  .handler(async ({ data, context }) => {
+    const { query, params } = data;
+
+    if (context.previewMode) {
+      const previewClient = client.withConfig({
+        perspective: 'previewDrafts',
+        token: process.env.SANITY_VIEWER_TOKEN, // Needed for accessing previewDrafts perspective
+        useCdn: false, // the previewDrafts perspective requires this to be `false
+      });
+      return _sanityFetch({ query, params, client: previewClient });
+    }
+
+    return _sanityFetch({ query, params });
+  });

apps/docs/app/lib/sanity.ts

@@ -5,17 +5,20 @@ export const client = createClient({
   dataset: 'grunnmuren',
   apiVersion: '2024-09-18',
   useCdn: true,
+  perspective: 'published',
 });
 
 export async function sanityFetch<const QueryString extends string>({
   query,
   params = {},
+  client: _client = client,
 }: {
   query: QueryString;
   params?: QueryParams;
+  client?: typeof client;
 }) {
   // Not sure what's happening here, but I need to set filterReponse to false to get the data as an array?
-  const { result } = await client.fetch(query, params, {
+  const { result } = await _client.fetch(query, params, {
     filterResponse: false,
   });
 

apps/docs/app/lib/visual-editing.ts

@@ -0,0 +1,41 @@
+import { enableVisualEditing } from '@sanity/visual-editing'
+import { useNavigate, useRouter } from '@tanstack/react-router';
+import { useEffect } from 'react'
+
+export function VisualEditing() {
+  const router = useRouter();
+
+
+  useEffect(() => {
+    const disable = enableVisualEditing({
+      history: {
+        // subscribe: (_navigate) => {
+        //   router.history.subscribe
+        // },
+        // subscribe: (_navigate) => {
+        // },
+        // subscribe: (_navigate) => {
+        //   setNavigate(() => _navigate)
+        //   return () => setNavigate(undefined)
+        // },
+        update: (update) => {
+          console.log(update);
+          switch (update.type) {
+            case 'push':
+              router.history.push(update.url);
+              break;
+            case 'replace':
+              router.history.replace(update.url);
+              break;
+            case 'pop':
+              router.history.back();
+              break;
+          }
+        },
+      }
+    })
+
+  }, [router]);
+
+  return null;
+}

apps/docs/app/routes/_docs.tsx

@@ -1,4 +1,5 @@
 import { sanityFetch } from '@/lib/sanity';
+import { VisualEditing } from '@/lib/visual-editing';
 import appCss from '@/styles/app.css?url';
 import { Footer } from '@/ui/footer';
 import { MainNav } from '@/ui/main-nav';
@@ -56,6 +57,7 @@ function RootLayout() {
         </div>
       </GrunnmurenProvider>
       <ScrollRestoration />
+      <VisualEditing />
     </>
   );
 }

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -1,6 +1,6 @@
 import * as badgeExamples from '@/examples/badge';
 import * as buttonExamples from '@/examples/button';
-import { sanityFetch } from '@/lib/sanity';
+import { sanityFetch } from '@/lib/sanity.server';
 import { Content } from '@/ui/content';
 import { PropsTable } from '@/ui/props-table';
 import { createFileRoute, notFound } from '@tanstack/react-router';
@@ -15,8 +15,10 @@ export const Route = createFileRoute('/_docs/komponenter/$slug')({
   component: Page,
   loader: async ({ params }) => {
     const res = await sanityFetch({
-      query: COMPONENT_QUERY,
-      params: { slug: params.slug },
+      data: {
+        query: COMPONENT_QUERY,
+        params: { slug: params.slug },
+      },
     });
 
     if (res.data == null) {

apps/docs/app/routes/api/preview-mode/disable.ts

@@ -0,0 +1,14 @@
+import { createAPIFileRoute } from '@tanstack/start/api';
+import { deleteCookie, sendRedirect } from 'vinxi/http';
+
+export const APIRoute = createAPIFileRoute('/api/preview-mode/disable')({
+  GET: () => {
+    deleteCookie('__sanity_preview', {
+      path: '/',
+      secure: import.meta.env.PROD,
+      httpOnly: true,
+      sameSite: 'strict',
+    });
+    sendRedirect('/');
+  },
+});