v3 - multi-workspace config

sanity.config.ts

@@ -0,0 +1,11 @@
+/**
+ * This configuration is used to for the Sanity Studio that’s mounted on the routes:
+ * - `/app/studio/[[...index]]/page.tsx`
+ * - `/app/studioShared/[[...index]]/page.tsx`
+ */
+
+import { defineConfig } from "sanity";
+import sharedStudioConfig from "./studioShared/studioConfig";
+import studioConfig from "./studio/studioConfig";
+
+export default defineConfig([studioConfig, sharedStudioConfig]);

src/app/shared/[[...index]]/page.tsx

@@ -11,7 +11,7 @@
 
 import { NextStudio } from "next-sanity/studio";
 
-import config from "../../../../studioShared/sanity.config";
+import config from "sanity.config";
 
 export default function StudioPage() {
   return <NextStudio config={config} />;

src/app/studio/[[...index]]/page.tsx

@@ -11,7 +11,7 @@
 
 import { NextStudio } from "next-sanity/studio";
 
-import config from "../../../../studio/sanity.config";
+import config from "sanity.config";
 
 export default function StudioPage() {
   return <NextStudio config={config} />;

studio/components/studioIcon/StudioIcon.tsx

@@ -0,0 +1,16 @@
+import styles from "./studioIcon.module.css";
+import Image from "next/image";
+
+const StudioIcon = ({ variant }: { variant: "studio" | "shared" }) => {
+  return (
+    <Image
+      alt={"Studio Icon"}
+      width={540}
+      height={540}
+      className={styles.icon}
+      src={variant === "studio" ? "/studioIcon.png" : "/sharedStudioIcon.png"}
+    />
+  );
+};
+
+export default StudioIcon;

studio/components/studioIcon/studioIcon.module.css

@@ -0,0 +1,5 @@
+.icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

studio/sanity.config.ts → studio/studioConfig.tsx

@@ -1,29 +1,24 @@
-/**
- * This configuration is used to for the Sanity Studio that’s mounted on the `/app/studio/[[...index]]/page.tsx` route
- */
-
 import { visionTool } from "@sanity/vision";
-import { defineConfig, StudioToolMenu } from "sanity";
 import { presentationTool } from "sanity/presentation";
 import { structureTool } from "sanity/structure";
 
 // Go to https://www.sanity.io/docs/api-versioning to learn how API versioning works
 import { apiVersion, dataset, projectId } from "./env";
 import { schema } from "./schema";
 import deskStructure from "./schemas/deskStructure";
-import CustomToolMenu from "./components/CustomToolMenu";
+import { WorkspaceOptions } from "sanity";
+import StudioIcon from "./components/studioIcon/StudioIcon";
 
-export default defineConfig({
+const config: WorkspaceOptions = {
+  name: "studio",
+  title: "Studio",
+  subtitle: "Our Own Space",
+  icon: () => <StudioIcon variant={"studio"} />,
   basePath: "/studio",
   projectId,
   dataset,
   // Add and edit the content schema in the './studio/schema' folder
   schema,
-  studio: {
-    components: {
-      toolMenu: CustomToolMenu,
-    },
-  },
   plugins: [
     structureTool({
       structure: deskStructure,
@@ -39,4 +34,6 @@ export default defineConfig({
       },
     }),
   ],
-});
+};
+
+export default config;

studioShared/studioConfig.tsx

@@ -0,0 +1,19 @@
+import { dataset, projectId } from "./env";
+import { schema } from "./schema";
+import { structureTool } from "sanity/structure";
+import { WorkspaceOptions } from "sanity";
+import StudioIcon from "../studio/components/studioIcon/StudioIcon";
+
+const config: WorkspaceOptions = {
+  name: "sharedStudio",
+  title: "Shared Studio",
+  subtitle: "Sharing is Caring!",
+  icon: () => <StudioIcon variant={"shared"} />,
+  basePath: "/shared",
+  projectId,
+  dataset,
+  schema,
+  plugins: [structureTool()],
+};
+
+export default config;