update with sanity live API

.env.example

@@ -2,4 +2,7 @@ NEXT_PUBLIC_BASE_URL =
 
 NEXT_PUBLIC_SANITY_PROJECT_ID =
 NEXT_PUBLIC_SANITY_DATASET =
-NEXT_PUBLIC_SANITY_TOKEN =	# "Viewer" token from https://sanity.io/manage
+
+SANITY_API_READ_TOKEN =	# "Viewer" token from https://sanity.io/manage
+
+NEXT_PUBLIC_GITHUB_TOKEN = # used for Reputation blocks

README.md

@@ -4,7 +4,7 @@
 
 An opinionated, fully customizable Next.js (App Router) and Sanity starter template with Tailwind CSS and pre-built schema for rapid website development.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnuotsu%2Fsanitypress&env=NEXT_PUBLIC_BASE_URL,NEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASET,NEXT_PUBLIC_SANITY_TOKEN&envDescription=Values%20needed%20to%20connect%20a%20Sanity%20CMS&envLink=https%3A%2F%2Fsanitypress.dev%2Fdocs%2Fgetting-started&demo-title=SanityPress&demo-description=Official%20website%20and%20blog%20for%20SanityPress%2C%20built%20with%20SanityPress&demo-url=https%3A%2F%2Fsanitypress.dev&demo-image=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Felyfelq1%2Fproduction%2F7fb61a2b110f509582f0f43cb1e397f8fa9e5c07-2814x1798.png%3Fw%3D1600)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnuotsu%2Fsanitypress&env=NEXT_PUBLIC_BASE_URL,NEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASET,SANITY_API_READ_TOKEN&envDescription=Values%20needed%20to%20connect%20a%20Sanity%20CMS&envLink=https%3A%2F%2Fsanitypress.dev%2Fdocs%2Fgetting-started&demo-title=SanityPress&demo-description=Official%20website%20and%20blog%20for%20SanityPress%2C%20built%20with%20SanityPress&demo-url=https%3A%2F%2Fsanitypress.dev&demo-image=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Felyfelq1%2Fproduction%2F7fb61a2b110f509582f0f43cb1e397f8fa9e5c07-2814x1798.png%3Fw%3D1600)
 
 ![](https://cdn.sanity.io/images/elyfelq1/production/a095b5478b3173381915c5a0a973fdb3d8898094-5088x3458.jpg)
 
@@ -49,7 +49,8 @@ From the [Sanity.io Manage](https://sanity.io/manage) dashboard, create a new pr
 NEXT_PUBLIC_BASE_URL = ... # https://sanitypress.dev
 NEXT_PUBLIC_SANITY_PROJECT_ID = ... # abcdefgh
 NEXT_PUBLIC_SANITY_DATASET = ... # production
-NEXT_PUBLIC_SANITY_TOKEN = ... # "Viewer" token from https://sanity.io/manage
+
+SANITY_API_READ_TOKEN = ... # "Viewer" token from https://sanity.io/manage
 ```
 
 ### 4. Populate the Studio with your content

next.config.ts

@@ -1,11 +1,12 @@
 import { createClient, groq } from 'next-sanity'
+// import { token } from '@/lib/sanity/token'
 import type { NextConfig } from 'next'
 
 const client = createClient({
 	projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
 	dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
-	// token: process.env.NEXT_PUBLIC_SANITY_TOKEN for private datasets
-	apiVersion: '2024-10-30',
+	// token, // for private datasets
+	apiVersion: '2024-11-01',
 	useCdn: true,
 })
 
@@ -27,6 +28,10 @@ const nextConfig: NextConfig = {
 		}`)
 	},
 
+	env: {
+		SC_DISABLE_SPEEDY: 'false',
+	},
+
 	// logging: {
 	// 	fetches: {
 	// 		fullUrl: true,

package.json

@@ -6,6 +6,7 @@
 	"license": "ISC",
 	"scripts": {
 		"dev": "next dev",
+		"dev:turbo": "next dev --turbo",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"
@@ -31,7 +32,6 @@
 		"react-dom": "^18",
 		"react-icons": "^5.3.0",
 		"react-is": "^18.3.1",
-		"rxjs": "^7.8.1",
 		"sanity": "^3.62.3",
 		"sanity-plugin-dashboard-widget-vercel": "^2.0.1",
 		"shiki": "^1.22.2",

sanity/sanity.cli.ts

@@ -2,7 +2,7 @@ import { defineCliConfig } from 'sanity/cli'
 
 export default defineCliConfig({
 	api: {
-		projectId: '',
-		dataset: '',
+		projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
+		dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
 	},
 })

sanity/sanity.config.ts

@@ -1,9 +1,9 @@
 import { defineConfig } from 'sanity'
-import { BASE_URL, projectId, dataset } from './src/env'
+import { projectId, dataset } from './src/env'
 import { structureTool } from 'sanity/structure'
 import structure from './src/structure'
 import { presentationTool } from 'sanity/presentation'
-import { locations } from './src/presentation'
+import { resolve } from './src/presentation/resolve'
 import {
 	dashboardTool,
 	projectInfoWidget,
@@ -35,11 +35,11 @@ export default defineConfig({
 			name: 'editor',
 			title: 'Editor',
 			previewUrl: {
-				draftMode: {
-					enable: `${BASE_URL}/api/draft`,
+				previewMode: {
+					enable: '/api/draft-mode/enable',
 				},
 			},
-			resolve: { locations },
+			resolve,
 		}),
 		dashboardTool({
 			name: 'deployment',

sanity/src/presentation/resolve.ts

@@ -0,0 +1,40 @@
+import {
+	defineLocations,
+	type PresentationPluginOptions,
+} from 'sanity/presentation'
+
+export const resolve: PresentationPluginOptions['resolve'] = {
+	locations: {
+		page: defineLocations({
+			select: {
+				metadata: 'metadata',
+			},
+			resolve: (doc) => {
+				const slug = doc?.metadata?.slug?.current
+
+				return {
+					locations: [
+						{
+							title: doc?.metadata?.title,
+							href: slug === 'index' ? '/' : `/${slug}`,
+						},
+					],
+				}
+			},
+		}),
+
+		'blog.post': defineLocations({
+			select: {
+				metadata: 'metadata',
+			},
+			resolve: (doc) => ({
+				locations: [
+					{
+						title: doc?.metadata?.title,
+						href: `/blog/${doc?.metadata?.slug?.current}`,
+					},
+				],
+			}),
+		}),
+	},
+}

src/app/(frontend)/api/draft-mode/disable/route.ts

@@ -0,0 +1,10 @@
+import { draftMode } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+	;(await draftMode()).disable()
+
+	const url = new URL(request.nextUrl)
+
+	return NextResponse.redirect(new URL('/', url.origin))
+}

src/app/(frontend)/api/draft-mode/enable/route.ts

@@ -0,0 +1,7 @@
+import { defineEnableDraftMode } from 'next-sanity/draft-mode'
+import client from '@/lib/sanity/client'
+import { token } from '@/lib/sanity/token'
+
+export const { GET } = defineEnableDraftMode({
+	client: client.withConfig({ token }),
+})

src/app/(frontend)/layout.tsx

@@ -3,9 +3,10 @@ import SkipToContent from '@/ui/SkipToContent'
 import Announcement from '@/ui/Announcement'
 import Header from '@/ui/header'
 import Footer from '@/ui/footer'
+import { SanityLive } from '@/lib/sanity/fetch'
+import VisualEditingControls from '@/ui/VisualEditingControls'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
-import VisualEditingControls from '@/ui/VisualEditingControls'
 import '@/styles/app.css'
 
 export default async function RootLayout({
@@ -26,9 +27,11 @@ export default async function RootLayout({
 				</main>
 				<Footer />
 
+				<SanityLive />
+				<VisualEditingControls />
+
 				<Analytics />
 				<SpeedInsights />
-				<VisualEditingControls />
 			</body>
 		</html>
 	)

src/app/(frontend)/not-found.tsx

@@ -1,4 +1,4 @@
-import { fetchSanity, groq } from '@/lib/sanity/fetch'
+import { groq, sanityFetch } from '@/lib/sanity/fetch'
 import { modulesQuery } from '@/lib/sanity/queries'
 import Modules from '@/ui/modules'
 
@@ -13,11 +13,12 @@ export async function generateMetadata() {
 }
 
 async function get404() {
-	return await fetchSanity<Sanity.Page>(
-		groq`*[_type == 'page' && metadata.slug.current == '404'][0]{
+	const { data } = await sanityFetch({
+		query: groq`*[_type == 'page' && metadata.slug.current == '404'][0]{
 			...,
 			modules[]{ ${modulesQuery} }
 		}`,
-		{ tags: ['404'] },
-	)
+	})
+
+	return data as Sanity.Page
 }

src/app/(frontend)/page.tsx

@@ -1,4 +1,4 @@
-import { fetchSanity, groq } from '@/lib/sanity/fetch'
+import { groq, sanityFetch } from '@/lib/sanity/fetch'
 import { modulesQuery } from '@/lib/sanity/queries'
 import Modules from '@/ui/modules'
 import processMetadata from '@/lib/processMetadata'
@@ -14,22 +14,21 @@ export async function generateMetadata() {
 }
 
 async function getPage() {
-	const page = await fetchSanity<Sanity.Page>(
-		groq`*[_type == 'page' && metadata.slug.current == 'index'][0]{
+	const { data } = await sanityFetch({
+		query: groq`*[_type == 'page' && metadata.slug.current == 'index'][0]{
 			...,
 			modules[]{ ${modulesQuery} },
 			metadata {
 				...,
 				'ogimage': image.asset->url + '?w=1200',
 			}
 		}`,
-		{ tags: ['homepage'] },
-	)
+	})
 
-	if (!page)
+	if (!data)
 		throw new Error(
 			"Missing 'page' document with metadata.slug 'index' in Sanity Studio",
 		)
 
-	return page
+	return data as Sanity.Page
 }

src/lib/env.ts

@@ -1 +1 @@
-export default process.env.NODE_ENV === 'development'
+export const dev = process.env.NODE_ENV === 'development'

src/lib/sanity/client.ts

@@ -1,14 +1,13 @@
 import { createClient } from 'next-sanity'
-import dev from '@/lib/env'
+import { projectId, dataset, apiVersion } from '@/lib/sanity/env'
+import { dev } from '@/lib/env'
 
 export default createClient({
-	projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
-	dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
-	// token: process.env.NEXT_PUBLIC_SANITY_TOKEN for private datasets
-	apiVersion: '2024-10-30',
+	projectId,
+	dataset,
+	apiVersion,
 	useCdn: !dev,
 	stega: {
-		enabled: false,
 		studioUrl: '/admin',
 	},
 })

src/lib/sanity/env.ts

@@ -0,0 +1,5 @@
+export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
+export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
+
+export const apiVersion =
+	process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2024-11-01'

src/lib/sanity/fetch.ts

@@ -1,7 +1,8 @@
 import client from '@/lib/sanity/client'
-import dev from '@/lib/env'
+import { token } from '@/lib/sanity/token'
+import { dev } from '@/lib/env'
 import { draftMode } from 'next/headers'
-import type { QueryParams, QueryOptions } from 'next-sanity'
+import { type QueryParams, type QueryOptions, defineLive } from 'next-sanity'
 
 export { groq } from 'next-sanity'
 
@@ -14,8 +15,7 @@ export async function fetchSanity<T = any>(
 		params?: QueryParams
 	} & QueryOptions['next'] = {},
 ) {
-	const isDraft = (await draftMode()).isEnabled
-	const preview = dev || isDraft
+	const preview = dev || (await draftMode()).isEnabled
 
 	return client.fetch<T>(
 		query,
@@ -25,7 +25,7 @@ export async function fetchSanity<T = any>(
 					stega: true,
 					perspective: 'previewDrafts',
 					useCdn: false,
-					token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
+					token,
 					next: {
 						revalidate: 0,
 						...next,
@@ -41,3 +41,9 @@ export async function fetchSanity<T = any>(
 				},
 	)
 }
+
+export const { sanityFetch, SanityLive } = defineLive({
+	client,
+	serverToken: token,
+	browserToken: token,
+})