sanity-io · snorrees · Jan 16, 2023 · Jan 13, 2023 · Jan 13, 2023 · Jan 16, 2023
@@ -1,7 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-.vscode
-
 # dependencies
 /node_modules
 /studio/node_modules
@@ -23,6 +21,8 @@
 .DS_Store
 *.pem
 .vscode
+*.iml
+.idea
 
 # debug
 npm-debug.log*
@@ -41,4 +41,4 @@ yarn-error.log*
 
 # Env files created by scripts for working locally
 .env
-studio/.env.development
+studio/.env.development
@@ -7,12 +7,14 @@ import IntroTemplate from 'intro-template'
 import * as demo from 'lib/demo.data'
 import type { Post, Settings } from 'lib/sanity.queries'
 
-export default function IndexPage(props: {
+export interface IndexPageProps {
   preview?: boolean
   loading?: boolean
   posts: Post[]
   settings: Settings
-}) {
+}
+
+export default function IndexPage(props: IndexPageProps) {
   const { preview, loading, posts, settings } = props
   const [heroPost, ...morePosts] = posts || []
   const { title = demo.title, description = demo.description } = settings || {}

@@ -1,14 +1,18 @@
 import BlogMeta from 'components/BlogMeta'
 import MetaDescription from 'components/MetaDescription'
 import * as demo from 'lib/demo.data'
-import { getSettings } from 'lib/sanity.client'
+import { Settings } from 'lib/sanity.queries'
 
-export default async function PageHead() {
+export interface IndexPageHeadProps {
+  settings: Settings
+}
+
+export default function IndexPageHead({ settings }: IndexPageHeadProps) {
   const {
     title = demo.title,
     description = demo.description,
     ogImage = {},
-  } = await getSettings()
+  } = settings
   const ogImageTitle = ogImage?.title || demo.ogImageTitle
 
   return (

@@ -8,16 +8,23 @@ import PostTitle from 'components/PostTitle'
 import SectionSeparator from 'components/SectionSeparator'
 import * as demo from 'lib/demo.data'
 import type { Post, Settings } from 'lib/sanity.queries'
+import Head from 'next/head'
 import { notFound } from 'next/navigation'
 
-export default function PostPage(props: {
+import PostPageHead from './PostPageHead'
+
+export interface PostPageProps {
   preview?: boolean
   loading?: boolean
-  data: { post: Post; morePosts: Post[] }
+  post: Post
+  morePosts: Post[]
   settings: Settings
-}) {
-  const { preview, loading, data, settings } = props
-  const { post = {} as any, morePosts = [] } = data || {}
+}
+
+const NO_POSTS: Post[] = []
+
+export default function PostPage(props: PostPageProps) {
+  const { preview, loading, morePosts = NO_POSTS, post, settings } = props
   const { title = demo.title } = settings || {}
 
   const slug = post?.slug
@@ -27,27 +34,33 @@ export default function PostPage(props: {
   }
 
   return (
-    <Layout preview={preview} loading={loading}>
-      <Container>
-        <BlogHeader title={title} level={2} />
-        {preview && !post ? (
-          <PostTitle>Loading…</PostTitle>
-        ) : (
-          <>
-            <article>
-              <PostHeader
-                title={post.title}
-                coverImage={post.coverImage}
-                date={post.date}
-                author={post.author}
-              />
-              <PostBody content={post.content} />
-            </article>
-            <SectionSeparator />
-            {morePosts?.length > 0 && <MoreStories posts={morePosts} />}
-          </>
-        )}
-      </Container>
-    </Layout>
+    <>
+      <Head>
+        <PostPageHead settings={settings} post={post} />
+      </Head>
+
+      <Layout preview={preview} loading={loading}>
+        <Container>
+          <BlogHeader title={title} level={2} />
+          {preview && !post ? (
+            <PostTitle>Loading…</PostTitle>
+          ) : (
+            <>
+              <article>
+                <PostHeader
+                  title={post.title}
+                  coverImage={post.coverImage}
+                  date={post.date}
+                  author={post.author}
+                />
+                <PostBody content={post.content} />
+              </article>
+              <SectionSeparator />
+              {morePosts?.length > 0 && <MoreStories posts={morePosts} />}
+            </>
+          )}
+        </Container>
+      </Layout>
+    </>
   )
 }
@@ -1,17 +1,15 @@
 import BlogMeta from 'components/BlogMeta'
 import * as demo from 'lib/demo.data'
-import { getPostBySlug, getSettings } from 'lib/sanity.client'
 import { urlForImage } from 'lib/sanity.image'
+import { Post, Settings } from 'lib/sanity.queries'
 
-export default async function SlugHead({
-  params,
-}: {
-  params: { slug: string }
-}) {
-  const [{ title = demo.title }, post] = await Promise.all([
-    getSettings(),
-    getPostBySlug(params.slug),
-  ])
+export interface PostPageHeadProps {
+  settings: Settings
+  post: Post
+}
+
+export default function PostPageHead({ settings, post }: PostPageHeadProps) {
+  const title = settings.title ?? demo.title
   return (
     <>
       <title>{post.title ? `${post.title} | ${title}` : title}</title>

@@ -1,5 +1,3 @@
-'use client'
-
 import IndexPage from 'components/IndexPage'
 import { usePreview } from 'lib/sanity.preview'
 import {

@@ -1,29 +1,25 @@
-'use client'
-
-import PostPage from 'components/PostPage'
+import PostPage, { PostPageProps } from 'components/PostPage'
 import { usePreview } from 'lib/sanity.preview'
-import {
-  type Post,
-  type Settings,
-  postAndMoreStoriesQuery,
-  settingsQuery,
-} from 'lib/sanity.queries'
+import { type Post, postAndMoreStoriesQuery } from 'lib/sanity.queries'
 
 export default function PreviewPostPage({
   token,
-  slug,
+  post,
+  settings,
 }: {
   token: null | string
-  slug: string
-}) {
-  const data: { post: Post; morePosts: Post[] } = usePreview(
-    token,
-    postAndMoreStoriesQuery,
-    {
-      slug,
-    }
-  ) || { post: null, morePosts: [] }
-  const settings: Settings = usePreview(token, settingsQuery) || {}
+} & PostPageProps) {
+  const { post: postPreview, morePosts }: { post: Post; morePosts: Post[] } =
+    usePreview(token, postAndMoreStoriesQuery, {
+      slug: post.slug,
+    }) || { post: null, morePosts: [] }
 
-  return <PostPage preview data={data} settings={settings} />
+  return (
+    <PostPage
+      preview
+      post={postPreview}
+      morePosts={morePosts}
+      settings={settings}
+    />
+  )
 }
@@ -1,3 +1 @@
-'use client'
-
 export { PreviewSuspense } from 'next-sanity/preview'
@@ -1,5 +1,3 @@
-'use client'
-
 import Image from 'next/image'
 import Link from 'next/link'
 import { memo, useEffect, useState } from 'react'

@@ -1,5 +1,3 @@
-import 'server-only'
-
 import { apiVersion, dataset, projectId, useCdn } from 'lib/sanity.api'
 import {
   type Post,

@@ -1,9 +1,5 @@
 /** @type {import('next').NextConfig} */
 const config = {
-  experimental: {
-    appDir: true,
-  },
-
   images: {
     remotePatterns: [
       { hostname: 'cdn.sanity.io' },