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/routes/api/studio/preview-mode/disable.ts

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

apps/docs/app/routes/api/studio/preview-mode/enable.ts

@@ -0,0 +1,29 @@
+import { client } from '@/lib/sanity';
+import { validatePreviewUrl } from '@sanity/preview-url-secret';
+import { createAPIFileRoute } from '@tanstack/start/api';
+import { sendRedirect, setCookie } from 'vinxi/http';
+
+export const APIRoute = createAPIFileRoute('/api/studio/preview-mode/enable')({
+  GET: async ({ request }) => {
+    if (!process.env.SANITY_VIEWER_TOKEN) {
+      throw new Response('Preview mode missing token', { status: 401 });
+    }
+
+    const clientWithToken = client.withConfig({
+      token: process.env.SANITY_VIEWER_TOKEN,
+    });
+
+    const {
+      isValid,
+      redirectTo = '/',
+    } = await validatePreviewUrl(clientWithToken, request.url);
+
+    if (!isValid) {
+      throw new Response('Invalid secret', { status: 401 });
+    }
+
+    // we can use sameSite: 'strict' because we're running an embedded studio
+    setCookie('__sanity_preview', 'test', { path: '/', secure: import.meta.env.PROD, httpOnly: true, sameSite: 'strict' });
+    sendRedirect(redirectTo)
+  },
+});

apps/docs/dktp/main.yml

@@ -16,6 +16,9 @@ properties:
     containers:
       - image: dktprodacr.azurecr.io/grunnmuren/docs:${IMAGE_TAG}
         name: docs
+        env:
+          - name: SANITY_VIEWER_TOKEN
+            secretRef: ${todo}
         resources:
           cpu: 0.25
           memory: 0.5Gi

apps/docs/package.json

@@ -23,6 +23,8 @@
     "@portabletext/react": "3.2.0",
     "@sanity/client": "6.24.1",
     "@sanity/code-input": "5.1.2",
+    "@sanity/presentation": "1.20.0",
+    "@sanity/preview-url-secret": "2.0.5",
     "@sanity/vision": "3.68.3",
     "@tanstack/react-router": "1.95.1",
     "@tanstack/start": "1.95.1",

apps/docs/sanity.config.ts

@@ -2,6 +2,7 @@ import { obosAuthStore } from '@code-obos/sanity-auth';
 import { codeInput } from '@sanity/code-input';
 import { visionTool } from '@sanity/vision';
 import { defineConfig } from 'sanity';
+import { defineDocuments, presentationTool } from 'sanity/presentation';
 import { structureTool } from 'sanity/structure';
 import { schemaTypes } from './studio/schema-types';
 
@@ -13,7 +14,27 @@ export default defineConfig({
   basePath: '/studio',
   title: 'Grunnmuren - Sanity Studio',
   auth: obosAuthStore({ dataset }),
-  plugins: [structureTool(), visionTool(), codeInput()],
+  plugins: [
+    structureTool(),
+    visionTool(),
+    codeInput(),
+    presentationTool({
+      previewUrl: {
+        previewMode: {
+          enable: '/api/studio/preview-mode/enable',
+          disable: '/api/studio/preview-mode/disable',
+        },
+      },
+      resolve: {
+        mainDocuments: defineDocuments([
+          {
+            route: '/komponenter/:slug',
+            filter: `_type == "component" && slug.current == $slug`,
+          },
+        ]),
+      },
+    }),
+  ],
   schema: {
     types: schemaTypes,
   },