Fix studio and update components (#938)

Author: hafffe

.eslintignore

@@ -0,0 +1 @@
+src/lib/sanity/types.ts

.zed/settings.json

@@ -0,0 +1,5 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{}

package.json

@@ -23,11 +23,10 @@
     "@sanity/asset-utils": "^2.2.1",
     "@sanity/client": "^6.28.0",
     "@sanity/image-url": "^1.1.0",
-    "@sanity/overlays": "^2.3.59",
     "@sanity/preview-url-secret": "^2.1.4",
     "@sanity/react-loader": "1.10.45",
     "@sanity/types": "^3.75.1",
-    "@sanity/ui": "^2.13.4",
+    "@sanity/ui": "^2.15.2",
     "@sanity/vision": "^3.75.1",
     "@vercel/analytics": "^1.5.0",
     "clsx": "^2.1.1",
@@ -43,8 +42,7 @@
     "react-icons": "^5.4.0",
     "react-is": "^19.0.0",
     "react-youtube": "^10.1.0",
-    "rxjs": "^7.8.1",
-    "sanity": "^3.75.1",
+    "sanity": "^3.78.0",
     "slugify": "^1.6.6",
     "sonner": "^1.7.4",
     "styled-components": "^6.1.15",

pnpm-lock.yaml

@@ -13,6 +13,7 @@ Setup following environment variables (as plain text variables)
 
 `NEXT_PUBLIC_SANITY_PROJECT_ID` with value for your prefered dataset
 `NEXT_PUBLIC_SANITY_DATASET` with your sanity project id
+`SANITY_API_READ_TOKEN` with a read token
 
 ### Setup for local development
 
@@ -22,6 +23,7 @@ Create `.env` file in root path with the environment variables
 # For Next Locally
 NEXT_PUBLIC_SANITY_PROJECT_ID = "abcd1245"
 NEXT_PUBLIC_SANITY_DATASET = "production"
+SANITY_API_READ_TOKEN = "abc12345"
 ```
 
 ### Development
@@ -39,8 +41,8 @@ Add http://localhost:3000 in sanity settings -> api - CORS Origins
 
 ### Things to know
 
-* Frontend startpage is fetched with slug `frontpage`
-* Posts list is fetched with the slug `posts`
+- Frontend startpage is fetched with slug `frontpage`
+- Posts list is fetched with the slug `posts`
 
 ### Tech Stack
 

readme.md

@@ -1,12 +1,9 @@
 import {defineConfig} from "sanity";
-import {deskTool} from "sanity/desk";
-
 import {visionTool} from "@sanity/vision";
-import {singletonPlugin} from "./src/studio/plugins/singletonPlugin";
-import {presentationTool} from "sanity/presentation";
 import {schemasTypes} from "./src/studio/schemas";
-import {structure} from "./src/studio/structure";
-import {locate} from "./src/studio/plugins/locate";
+import {structure} from "./src/studio/plugins/structure";
+import {presentation} from "./src/studio/plugins/presentation";
+import {singletonPlugin} from "./src/studio/plugins/singleton";
 
 export default defineConfig({
   projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID as string,
@@ -16,20 +13,5 @@ export default defineConfig({
   schema: {
     types: schemasTypes,
   },
-  plugins: [
-    deskTool({
-      structure,
-    }),
-    presentationTool({
-      previewUrl: {
-        origin: process.env.SANITY_STUDIO_PREVIEW_ORIGIN,
-        preview: "/",
-        previewMode: {
-          enable: "/api/draft-mode/enable",
-        },
-      },
-    }),
-    singletonPlugin({types: ["siteSettings"]}),
-    visionTool(),
-  ],
+  plugins: [structure, presentation, singletonPlugin({types: ["siteSettings"]}), visionTool()],
 });

sanity.config.ts

@@ -362,47 +362,6 @@
       }
     }
   },
-  {
-    "name": "spacer",
-    "type": "type",
-    "value": {
-      "type": "object",
-      "attributes": {
-        "_type": {
-          "type": "objectAttribute",
-          "value": {
-            "type": "string",
-            "value": "spacer"
-          }
-        },
-        "size": {
-          "type": "objectAttribute",
-          "value": {
-            "type": "union",
-            "of": [
-              {
-                "type": "string",
-                "value": "small"
-              },
-              {
-                "type": "string",
-                "value": "medium"
-              },
-              {
-                "type": "string",
-                "value": "large"
-              },
-              {
-                "type": "string",
-                "value": "xlarge"
-              }
-            ]
-          },
-          "optional": true
-        }
-      }
-    }
-  },
   {
     "name": "blockContent",
     "type": "type",
@@ -1487,21 +1446,6 @@
                   "name": "blockContent"
                 }
               },
-              {
-                "type": "object",
-                "attributes": {
-                  "_key": {
-                    "type": "objectAttribute",
-                    "value": {
-                      "type": "string"
-                    }
-                  }
-                },
-                "rest": {
-                  "type": "inline",
-                  "name": "spacer"
-                }
-              },
               {
                 "type": "object",
                 "attributes": {
@@ -1855,21 +1799,6 @@
                   "name": "blockContent"
                 }
               },
-              {
-                "type": "object",
-                "attributes": {
-                  "_key": {
-                    "type": "objectAttribute",
-                    "value": {
-                      "type": "string"
-                    }
-                  }
-                },
-                "rest": {
-                  "type": "inline",
-                  "name": "spacer"
-                }
-              },
               {
                 "type": "object",
                 "attributes": {

schema.json

@@ -2,7 +2,7 @@ import type {Metadata} from "next";
 import {allPagesSlug, pageQuery} from "~/lib/sanity/queries";
 import {sanityFetch} from "~/lib/sanity/live";
 import {urlForOpenGraphImage} from "~/lib/sanity/utils";
-import {RenderSection} from "~/components/sections";
+import {RenderSection, Sections} from "~/components/sections";
 
 export const generateStaticParams = async () => {
   const {data} = await sanityFetch({query: allPagesSlug, perspective: "published", stega: false});
@@ -43,13 +43,14 @@ const Page = async ({params}: {params: Promise<{slug: string}>}) => {
 
   return (
     <>
-      {data?.content?.map((section) => {
-        if (!section || Object.keys(section).length === 0) {
-          return null;
-        }
-
-        return <RenderSection key={section._key} section={section} />;
-      })}
+      {data?.content
+        ?.filter(
+          (section): section is Sections =>
+            section !== null && typeof section === "object" && "_key" in section && Object.keys(section).length > 0,
+        )
+        .map((section) => {
+          return <RenderSection key={section._key} section={section} />;
+        })}
     </>
   );
 };

src/app/(blog)/(category)/[slug]/page.tsx

@@ -1,9 +1,9 @@
 import type {Metadata} from "next";
-import {pageWithPostsQuery} from "~/lib/sanity/queries";
+import {pageQuery, pageWithPostsQuery, postsQuery} from "~/lib/sanity/queries";
 import {sanityFetch} from "~/lib/sanity/live";
 import {Heading} from "~/components/ui";
 import {PostList} from "~/components/shared";
-import {RenderSection} from "~/components/sections";
+import {RenderSection, type Sections} from "~/components/sections";
 
 import {urlForOpenGraphImage} from "~/lib/sanity/utils";
 
@@ -36,19 +36,22 @@ export const generateMetadata = async (): Promise<Metadata> => {
 
 const IndexRoute = async () => {
   const params = {slug: "frontpage", limit: 2};
-  const {data} = await sanityFetch({query: pageWithPostsQuery, params: params});
-
-  const {page, posts} = data ?? {};
+  const [{data: page}, {data: posts}] = await await Promise.all([
+    sanityFetch({query: pageQuery, params: params}),
+    sanityFetch({query: postsQuery, params}),
+  ]);
 
   return (
     <>
-      {page?.content?.map((section) => {
-        if (!section || Object.keys(section).length === 0) {
-          return null;
-        }
+      {page?.content
+        ?.filter(
+          (section): section is Sections =>
+            section !== null && typeof section === "object" && "_key" in section && Object.keys(section).length > 0,
+        )
+        .map((section) => {
+          return <RenderSection key={section._key} section={section} />;
+        })}
 
-        return <RenderSection key={section._key} section={section} />;
-      })}
       <Heading level="h2" weight="semibold" className="py-8">
         Recent articles
       </Heading>

src/app/(blog)/page.tsx

@@ -3,7 +3,7 @@ import {urlForOpenGraphImage} from "~/lib/sanity/utils";
 import {sanityFetch} from "~/lib/sanity/live";
 import {allPostSlugQuery, postQuery} from "~/lib/sanity/queries";
 import {Date, Heading, Tag} from "~/components/ui";
-import {RenderSection} from "~/components/sections";
+import {RenderSection, Sections} from "~/components/sections";
 
 export const generateStaticParams = async () => {
   const {data} = await sanityFetch({query: allPostSlugQuery, perspective: "published", stega: false});
@@ -54,13 +54,14 @@ const Page = async ({params}: {params: Promise<{slug: string}>}) => {
           <div className="flex flex-row">{keywords}</div>
         </div>
       </div>
-      {data?.content?.map((section) => {
-        if (!section || Object.keys(section).length === 0) {
-          return null;
-        }
-
-        return <RenderSection key={section._key} section={section} />;
-      })}
+      {data?.content
+        ?.filter(
+          (section): section is Sections =>
+            section !== null && typeof section === "object" && "_key" in section && Object.keys(section).length > 0,
+        )
+        .map((section) => {
+          return <RenderSection key={section._key} section={section} />;
+        })}
     </article>
   );
 };