Support both static and dynamic code snippets (#1081)

* Support both static and dynamic code snippets

* Orginze imports

Author: oscarcarlstrom

apps/docs/schema.json

@@ -663,7 +663,7 @@
     }
   },
   {
-    "name": "code-block",
+    "name": "live-code-block",
     "type": "type",
     "value": {
       "type": "object",
@@ -672,7 +672,38 @@
           "type": "objectAttribute",
           "value": {
             "type": "string",
-            "value": "code-block"
+            "value": "live-code-block"
+          }
+        },
+        "code": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "inline",
+            "name": "code"
+          },
+          "optional": true
+        },
+        "caption": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "string"
+          },
+          "optional": true
+        }
+      }
+    }
+  },
+  {
+    "name": "static-code-block",
+    "type": "type",
+    "value": {
+      "type": "object",
+      "attributes": {
+        "_type": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "string",
+            "value": "static-code-block"
           }
         },
         "code": {
@@ -877,7 +908,22 @@
             },
             "rest": {
               "type": "inline",
-              "name": "code-block"
+              "name": "live-code-block"
+            }
+          },
+          {
+            "type": "object",
+            "attributes": {
+              "_key": {
+                "type": "objectAttribute",
+                "value": {
+                  "type": "string"
+                }
+              }
+            },
+            "rest": {
+              "type": "inline",
+              "name": "static-code-block"
             }
           }
         ]

apps/docs/studio/objects/content.ts

@@ -16,7 +16,8 @@ const content = defineType({
         { title: 'Quote', value: 'blockquote' },
       ],
     },
-    { type: 'code-block' },
+    { type: 'live-code-block' },
+    { type: 'static-code-block' },
   ],
 });
 

apps/docs/studio/objects/live-code-block.ts

@@ -0,0 +1,34 @@
+import { defineField, defineType } from 'sanity';
+
+const codeBlock = defineType({
+  name: 'live-code-block',
+  title: 'Live Code Block',
+  description:
+    "For editable code snippets that also can control rendering. Use 'Static Code Block' for static, non editable code snippets.",
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'code',
+      title: 'Code',
+      type: 'code',
+      options: {
+        language: 'tsx',
+        languageAlternatives: [{ title: 'TypeScript / React', value: 'tsx' }],
+      },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: 'caption',
+      title: 'Caption',
+      description: 'A description or summary of the code',
+      type: 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      title: 'caption',
+    },
+  },
+});
+
+export { codeBlock as default };

apps/docs/studio/objects/code-block.ts renamed to apps/docs/studio/objects/static-code-block.ts

@@ -1,8 +1,8 @@
 import { defineField, defineType } from 'sanity';
 
 const codeBlock = defineType({
-  name: 'code-block',
-  title: 'Code Block',
+  name: 'static-code-block',
+  title: 'Static Code Block',
   description:
     "Great for simple code snippets that doesn't vary based on the language selected",
   type: 'object',
@@ -18,6 +18,7 @@ const codeBlock = defineType({
           { title: 'Bash', value: 'bash' },
         ],
       },
+      validation: (rule) => rule.required(),
     }),
     defineField({
       name: 'caption',

apps/docs/studio/schema-types.ts

@@ -1,6 +1,7 @@
 import component from './documents/component';
-import codeBlock from './objects/code-block';
 import content from './objects/content';
+import liveCodeBlock from './objects/live-code-block';
+import staticCodeBlock from './objects/static-code-block';
 
 // Export an array of all the schema types.  This is used in the Sanity Studio configuration. https://www.sanity.io/docs/schema-types
-export const schemaTypes = [component, content, codeBlock];
+export const schemaTypes = [component, content, staticCodeBlock, liveCodeBlock];