Add temporary recipe block renderer

components/portable-text/serializers.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 
 import CaptionedImage from '../media/CaptionedImage';
 import CaptionedVideo from '../media/CaptionedVideo';
+import Recipe from '../recipe/Recipe';
 
 import routesConfig from '../../routes-config';
 import { compileDynamicItem } from '../../scripts/compile-routes';
@@ -13,6 +14,7 @@ import {
   SanityCaptionedImage,
   SanityCaptionedVideo,
   SanityMediaGallery,
+  SanityRecipe,
 } from '../../typings';
 
 const InternalLink: React.FC<SanityMarkNode> = ({ children, mark }) => {
@@ -71,13 +73,17 @@ const MediaGalleryWrapper: React.FC<SanityBlockType<SanityMediaGallery>> = (prop
   </div>
 );
 
+const RecipeWrapper: React.FC<SanityBlockType<SanityRecipe>> = (props) => (
+  <Recipe recipe={props.node} />
+);
+
 const richSerializers = {
   ...simpleSerializers,
   types: {
     captionedImage: CaptionedImageWrapper,
     captionedVideo: CaptionedVideoWrapper,
     mediaGallery: MediaGalleryWrapper,
-    // 'recipe'
+    recipe: RecipeWrapper,
   },
 };
 

components/recipe/Recipe.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SanityRecipe } from '../../typings';
+
+type RecipeProps = {
+  recipe: SanityRecipe & {
+    _key: string;
+  };
+};
+const Recipe: React.FC<RecipeProps> = ({ recipe, ...props }) => (
+  <article {...props}>
+    <h2>{recipe.title}</h2>
+    <p>{recipe.description}</p>
+  </article>
+);
+
+export default Recipe;

sanity/projections.js

@@ -21,20 +21,22 @@ const captionedVideoProjection = /* groq */ `{
   video->${accessibleVideoProjection}
 }`;
 
-const simplePortabletextProjection = /* groq */ `{
+const portableTextCustomMarkDefProjection = /* groq */ `{
   ...,
-  "markDefs": markDefs[]{
-    ...,
-    _type == "internalLink" => {
-      "reference": reference->{
-        _id,
+  _type == "internalLink" => {
+    "reference": reference->{
+      _id,
+      "slug": slug.current,
+      "category": category->{
         "slug": slug.current,
-        "category": category->{
-          "slug": slug.current,
-        },
       },
     },
-  }
+  },
+}`;
+
+const simplePortabletextProjection = /* groq */ `{
+  ...,
+  "markDefs": markDefs[] ${portableTextCustomMarkDefProjection}
 }`;
 
 const richPortabletextProjection = /* groq */ `{
@@ -48,18 +50,15 @@ const richPortabletextProjection = /* groq */ `{
       _type == "captionedVideo" => ${captionedVideoProjection},
     },
   },
-  "markDefs": markDefs[]{
+  _type == "recipe" => {
     ...,
-    _type == "internalLink" => {
-      "reference": reference->{
-        _id,
-        "slug": slug.current,
-        "category": category->{
-          "slug": slug.current,
-        }
-      }
+    ingredients[] {
+      ...,
+      "unit": unit[0],
     },
-  }
+    method[] ${simplePortabletextProjection},
+  },
+  "markDefs": markDefs[] ${portableTextCustomMarkDefProjection},
 }`;
 
 const categoryPreviewProjection = /* groq */ `{

typings/index.ts

@@ -4,6 +4,7 @@ export * from './routes';
 // CMS data
 export * from './media';
 export * from './portable-text';
+export * from './recipe';
 export * from './person';
 export * from './category';
 export * from './tag';

typings/recipe.ts

@@ -0,0 +1,21 @@
+import { SanityBlock } from '.';
+
+export type SanityIngredientUnit = 'kg' | 'ml' | 'l' | 'unitless';
+
+export type SanityIngredient = {
+  _key: string;
+  name: string;
+  quantity: number;
+  unit: SanityIngredientUnit;
+};
+
+export type SanityRecipe = {
+  _type: string;
+  title: string;
+  description: string;
+  cookingTime: number;
+  preparationTime: number;
+  servings: number;
+  ingredients: SanityIngredient[];
+  method: SanityBlock[];
+};