add content with code input to sanity (#1077)

Author: alexanbj

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -2,13 +2,14 @@ import * as badgeExamples from '@/examples/badge';
 import * as buttonExamples from '@/examples/button';
 import { sanityFetch } from '@/lib/sanity';
 import { ComponentPreview } from '@/ui/component-preview';
+import { Content } from '@/ui/content';
 import { PropsTable } from '@/ui/props-table';
 import { createFileRoute, notFound } from '@tanstack/react-router';
 import * as props from 'docgen';
 import { defineQuery } from 'groq';
 
 const COMPONENT_QUERY = defineQuery(
-  `*[_type == "component" && slug.current == $slug][0]{ "name": coalesce(name, '') }`,
+  `*[_type == "component" && slug.current == $slug][0]{ content, "name": coalesce(name, '') }`,
 );
 
 export const Route = createFileRoute('/_docs/komponenter/$slug')({
@@ -43,6 +44,8 @@ function Page() {
     <>
       <h1 className="heading-l mb-12 mt-9">{data.name}</h1>
 
+      <Content content={data.content ?? []} />
+
       {examples.map(({ title, code }) => (
         <ComponentPreview scope={scope} key={title} title={title} code={code} />
       ))}

apps/docs/app/ui/content.tsx

@@ -0,0 +1,12 @@
+import { PortableText } from '@portabletext/react';
+import type { Content as IContent } from 'sanity.types';
+
+const components = {};
+
+export function Content({ content }: { content: IContent }) {
+  return (
+    <div className="prose">
+      <PortableText value={content} components={components} />
+    </div>
+  );
+}

apps/docs/package.json

@@ -20,7 +20,9 @@
     "@obosbbl/grunnmuren-icons-react": "workspace:*",
     "@obosbbl/grunnmuren-icons-svg": "workspace:*",
     "@obosbbl/grunnmuren-react": "workspace:*",
+    "@portabletext/react": "3.2.0",
     "@sanity/client": "6.24.1",
+    "@sanity/code-input": "5.1.2",
     "@sanity/vision": "3.68.3",
     "@tanstack/react-router": "1.95.1",
     "@tanstack/start": "1.95.1",

apps/docs/sanity.config.ts

@@ -1,4 +1,5 @@
 import { obosAuthStore } from '@code-obos/sanity-auth';
+import { codeInput } from '@sanity/code-input';
 import { visionTool } from '@sanity/vision';
 import { defineConfig } from 'sanity';
 import { structureTool } from 'sanity/structure';
@@ -12,7 +13,7 @@ export default defineConfig({
   basePath: '/studio',
   title: 'Grunnmuren - Sanity Studio',
   auth: obosAuthStore({ dataset }),
-  plugins: [structureTool(), visionTool()],
+  plugins: [structureTool(), visionTool(), codeInput()],
   schema: {
     types: schemaTypes,
   },

apps/docs/sanity.types.ts

@@ -125,6 +125,36 @@ export type SanityAssetSourceData = {
   url?: string;
 };
 
+export type CodeBlock = {
+  _type: 'code-block';
+  code?: Code;
+  caption?: string;
+};
+
+export type Content = Array<
+  | {
+      children?: Array<{
+        marks?: Array<string>;
+        text?: string;
+        _type: 'span';
+        _key: string;
+      }>;
+      style?: 'normal' | 'h2' | 'h3' | 'h4' | 'h5' | 'blockquote';
+      listItem?: 'bullet' | 'number';
+      markDefs?: Array<{
+        href?: string;
+        _type: 'link';
+        _key: string;
+      }>;
+      level?: number;
+      _type: 'block';
+      _key: string;
+    }
+  | ({
+      _key: string;
+    } & CodeBlock)
+>;
+
 export type Component = {
   _id: string;
   _type: 'component';
@@ -133,6 +163,7 @@ export type Component = {
   _rev: string;
   name?: string;
   slug?: Slug;
+  content?: Content;
 };
 
 export type Slug = {
@@ -141,6 +172,14 @@ export type Slug = {
   source?: string;
 };
 
+export type Code = {
+  _type: 'code';
+  language?: string;
+  filename?: string;
+  code?: string;
+  highlightedLines?: Array<number>;
+};
+
 export type AllSanitySchemaTypes =
   | SanityImagePaletteSwatch
   | SanityImagePalette
@@ -152,8 +191,11 @@ export type AllSanitySchemaTypes =
   | SanityImageMetadata
   | Geopoint
   | SanityAssetSourceData
+  | CodeBlock
+  | Content
   | Component
-  | Slug;
+  | Slug
+  | Code;
 export declare const internalGroqTypeReferenceTo: unique symbol;
 // Source: ./app/routes/_docs.tsx
 // Variable: COMPONENTS_NAVIGATION_QUERY
@@ -164,10 +206,11 @@ export type COMPONENTS_NAVIGATION_QUERYResult = Array<{
   slug: string | '';
 }>;
 
-// Source: ./app/routes/_docs/komponenter.$slug.tsx
+// Source: ./app/routes/_docs/komponenter/$slug.tsx
 // Variable: COMPONENT_QUERY
-// Query: *[_type == "component" && slug.current == $slug][0]{ "name": coalesce(name, '') }
+// Query: *[_type == "component" && slug.current == $slug][0]{ content, "name": coalesce(name, '') }
 export type COMPONENT_QUERYResult = {
+  content: Content | null;
   name: string | '';
 } | null;
 
@@ -187,6 +230,6 @@ declare module '@sanity/client' {
     "*[_type == \"component\"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)":
       | COMPONENTS_NAVIGATION_QUERYResult
       | COMPONENTS_INDEX_QUERYResult;
-    '*[_type == "component" && slug.current == $slug][0]{ "name": coalesce(name, \'\') }': COMPONENT_QUERYResult;
+    '*[_type == "component" && slug.current == $slug][0]{ content, "name": coalesce(name, \'\') }': COMPONENT_QUERYResult;
   }
 }