feat(sanity): set up sanity configuration

JanSzewczyk · Dec 22, 2022 · 9963ca1 · 9963ca1
1 parent 50b8122
commit 9963ca1
Show file tree

Hide file tree

Showing 15 changed files with 4,198 additions and 79 deletions.
diff --git a/.env.production → .env b/.env.production → .env
@@ -1,2 +1,4 @@
 NEXT_PUBLIC_SANITY_DATASET=production
 NEXT_PUBLIC_SANITY_PROJECT_ID=qy853ayl
+NEXT_PUBLIC_SANITY_API_VERSION=2021-10-21
+
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
 NEXT_PUBLIC_SANITY_DATASET=
 NEXT_PUBLIC_SANITY_PROJECT_ID=
+NEXT_PUBLIC_SANITY_API_VERSION=
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "@sanity/eslint-config-studio"]
 }
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.0.13",
     "@portabletext/react": "^2.0.0",
     "@sanity/image-url": "^1.0.1",
+    "@sanity/vision": "^3.0.0",
     "@szum-tech/design-system": "^1.1.8",
     "framer-motion": "^7.6.6",
     "next": "^13.0.3",
@@ -22,9 +23,12 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.39.3",
     "react-simple-typewriter": "^5.0.1",
-    "react-social-icons": "^5.15.0"
+    "react-social-icons": "^5.15.0",
+    "sanity": "^3.0.6",
+    "styled-components": "^5.2.0"
   },
   "devDependencies": {
+    "@sanity/eslint-config-studio": "^2.0.1",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",

diff --git a/pages/studio/[[...index]].tsx b/pages/studio/[[...index]].tsx
@@ -0,0 +1,16 @@
+import Head from "next/head";
+import { NextStudio } from "next-sanity/studio";
+import { NextStudioHead } from "next-sanity/studio/head";
+
+import config from "../../sanity.config";
+
+export default function StudioPage() {
+  return (
+    <>
+      <Head>
+        <NextStudioHead />
+      </Head>
+      <NextStudio config={config} />
+    </>
+  );
+}
diff --git a/sanity.cli.ts b/sanity.cli.ts
@@ -0,0 +1,11 @@
+import { defineCliConfig } from "sanity/cli";
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!;
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!;
+
+export default defineCliConfig({
+  api: {
+    projectId,
+    dataset
+  }
+});
diff --git a/sanity.config.ts b/sanity.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from "sanity";
+import { deskTool } from "sanity/desk";
+import { visionTool } from "@sanity/vision";
+import { schemaTypes } from "./schemas";
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!;
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!;
+
+export default defineConfig({
+  basePath: "/studio",
+  name: "janszewczyk_github_io",
+  title: "janszewczyk.github.io",
+
+  projectId,
+  dataset,
+
+  plugins: [deskTool(), visionTool()],
+
+  schema: {
+    types: schemaTypes
+  }
+});
diff --git a/sanity.ts → sanityy.ts b/sanity.ts → sanityy.ts
diff --git a/schemas/author.ts b/schemas/author.ts
@@ -0,0 +1,50 @@
+import { defineField, defineType } from "sanity";
+
+export default defineType({
+  name: "author",
+  title: "Author",
+  type: "document",
+  fields: [
+    defineField({
+      name: "name",
+      title: "Name",
+      type: "string"
+    }),
+    defineField({
+      name: "slug",
+      title: "Slug",
+      type: "slug",
+      options: {
+        source: "name",
+        maxLength: 96
+      }
+    }),
+    defineField({
+      name: "image",
+      title: "Image",
+      type: "image",
+      options: {
+        hotspot: true
+      }
+    }),
+    defineField({
+      name: "bio",
+      title: "Bio",
+      type: "array",
+      of: [
+        {
+          title: "Block",
+          type: "block",
+          styles: [{ title: "Normal", value: "normal" }],
+          lists: []
+        }
+      ]
+    })
+  ],
+  preview: {
+    select: {
+      title: "name",
+      media: "image"
+    }
+  }
+});
diff --git a/schemas/blockContent.ts b/schemas/blockContent.ts
@@ -0,0 +1,68 @@
+import { defineType, defineArrayMember } from "sanity";
+
+/**
+ * This is the schema definition for the rich text fields used for
+ * for this blog studio. When you import it in schemas.js it can be
+ * reused in other parts of the studio with:
+ *  {
+ *    name: 'someName',
+ *    title: 'Some title',
+ *    type: 'blockContent'
+ *  }
+ *
+ */
+export default defineType({
+  title: "Block Content",
+  name: "blockContent",
+  type: "array",
+  of: [
+    defineArrayMember({
+      title: "Block",
+      type: "block",
+      // Styles let you set what your user can mark up blocks with. These
+      // correspond with HTML tags, but you can set any title or value
+      // you want and decide how you want to deal with it where you want to
+      // use your content.
+      styles: [
+        { title: "Normal", value: "normal" },
+        { title: "H1", value: "h1" },
+        { title: "H2", value: "h2" },
+        { title: "H3", value: "h3" },
+        { title: "H4", value: "h4" },
+        { title: "Quote", value: "blockquote" }
+      ],
+      lists: [{ title: "Bullet", value: "bullet" }],
+      // Marks let you mark up inline text in the block editor.
+      marks: {
+        // Decorators usually describe a single property – e.g. a typographic
+        // preference or highlighting by editors.
+        decorators: [
+          { title: "Strong", value: "strong" },
+          { title: "Emphasis", value: "em" }
+        ],
+        // Annotations can be any object structure – e.g. a link or a footnote.
+        annotations: [
+          {
+            title: "URL",
+            name: "link",
+            type: "object",
+            fields: [
+              {
+                title: "URL",
+                name: "href",
+                type: "url"
+              }
+            ]
+          }
+        ]
+      }
+    }),
+    // You can add additional types here. Note that you can't use
+    // primitive types such as 'string' and 'number' in the same array
+    // as a block type.
+    defineArrayMember({
+      type: "image",
+      options: { hotspot: true }
+    })
+  ]
+});
diff --git a/schemas/category.ts b/schemas/category.ts
@@ -0,0 +1,19 @@
+import { defineField, defineType } from "sanity";
+
+export default defineType({
+  name: "category",
+  title: "Category",
+  type: "document",
+  fields: [
+    defineField({
+      name: "title",
+      title: "Title",
+      type: "string"
+    }),
+    defineField({
+      name: "description",
+      title: "Description",
+      type: "text"
+    })
+  ]
+});
diff --git a/schemas/index.ts b/schemas/index.ts
@@ -0,0 +1,7 @@
+import blockContent from "./blockContent";
+import category from "./category";
+import post from "./post";
+import author from "./author";
+import picture from "./picture";
+
+export const schemaTypes = [post, author, category, blockContent, picture];
diff --git a/schemas/picture.ts b/schemas/picture.ts
@@ -0,0 +1,24 @@
+import { defineField, defineType } from "sanity";
+
+export default defineType({
+  name: "picture",
+  title: "Picture",
+  type: "document",
+  fields: [
+    defineField({
+      name: "img",
+      title: "Image",
+      type: "image",
+      options: {
+        hotspot: true
+      },
+      validation: (Rule) => Rule.required()
+    }),
+    defineField({
+      name: "alt",
+      title: "Alternative Text",
+      type: "string",
+      validation: (Rule) => Rule.required()
+    })
+  ]
+});
diff --git a/schemas/post.ts b/schemas/post.ts
@@ -0,0 +1,65 @@
+import { defineField, defineType } from "sanity";
+
+export default defineType({
+  name: "post",
+  title: "Post",
+  type: "document",
+  fields: [
+    defineField({
+      name: "title",
+      title: "Title",
+      type: "string"
+    }),
+    defineField({
+      name: "slug",
+      title: "Slug",
+      type: "slug",
+      options: {
+        source: "title",
+        maxLength: 96
+      }
+    }),
+    defineField({
+      name: "author",
+      title: "Author",
+      type: "reference",
+      to: { type: "author" }
+    }),
+    defineField({
+      name: "mainImage",
+      title: "Main image",
+      type: "image",
+      options: {
+        hotspot: true
+      }
+    }),
+    defineField({
+      name: "categories",
+      title: "Categories",
+      type: "array",
+      of: [{ type: "reference", to: { type: "category" } }]
+    }),
+    defineField({
+      name: "publishedAt",
+      title: "Published at",
+      type: "datetime"
+    }),
+    defineField({
+      name: "body",
+      title: "Body",
+      type: "blockContent"
+    })
+  ],
+
+  preview: {
+    select: {
+      title: "title",
+      author: "author.name",
+      media: "mainImage"
+    },
+    prepare(selection) {
+      const { author } = selection;
+      return { ...selection, subtitle: author && `by ${author}` };
+    }
+  }
+});