21:["$","section","a5d885ea8bb3",{"className":"section space-y-8","children":[["$","header",null,{"className":"richtext","children":[["$","h2","ef479b3ae92f",{"children":["Helpful Articles on Modules"]}],["$","p","0fe1c6bcba3b",{"children":["Read more on ",["$","a","11c180356330",{"href":"/blog","children":["The SanityPress Blog"]}]]}]]}],false,["$","$22",null,{"fallback":["$","ul",null,{"className":"items-stretch gap-x-8 gap-y-12 carousel max-xl:full-bleed md:overflow-fade-r pb-4 [--size:320px] max-xl:px-4","children":[["$","li","0",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","1",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","2",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","3",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","4",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","5",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-xl text-accent/20","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}]]}],"children":["$","$L23",null,{"posts":[{"_updatedAt":"2024-12-05T18:15:22Z","_createdAt":"2024-11-26T06:55:53Z","_rev":"gZ7ct0x8T7smCC4tWCpzF1","_type":"blog.post","publishDate":"2024-12-05","_id":"7a1e779d-2eba-4807-ab48-96364df4d27c","categories":[{"_createdAt":"2024-08-05T23:56:00Z","_rev":"zkLJSc3z66UIgKQBgMqqi7","_type":"blog.category","_id":"138f145c-5b1c-4b27-8e8c-0b5369f68154","title":"Modules","_updatedAt":"2024-11-24T21:53:37Z","slug":{"current":"modules","_type":"slug"}},{"_updatedAt":"2024-11-24T21:53:12Z","slug":{"current":"updates","_type":"slug"},"_createdAt":"2024-10-22T02:43:36Z","_rev":"RjClaUZK08fNd8ACdQNE8s","_type":"blog.category","_id":"2d68f54f-fe64-41a9-baf4-ffe71631b967","title":"Updates"}],"body":[{"asset":{"_ref":"image-b65d1346d8e0425d0cd4fe94ffab0cc55d309f62-1344x896-jpg","_type":"reference"},"loading":"lazy","_type":"image","alt":"Delorian in front of tire marks in flames, the movie title text \"Scheduler\" in the style of Back to the Future. Elon Musk wearing a red down jacket and wearing sunglasses standing next to the Delorian, Big Ben London in the back, 70s film still","_key":"ed9c45389f06"},{"style":"blockquote","_key":"909c0943c0bf","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Welcome to time-Based Content Management in SanityPress","_key":"49df87a4bd1a0"}],"_type":"block"},{"children":[{"_key":"960b84072efd0","_type":"span","marks":[],"text":"We're excited to announce a powerful new addition to SanityPress: the Schedule module. This feature brings time-based content management to your Next.js + Sanity.io website, allowing you to schedule when specific content modules appear and disappear automatically."}],"_type":"block","style":"normal","_key":"e724330cf1e7","markDefs":[]},{"_type":"block","style":"h2","_key":"65acef1bcd85","markDefs":[],"children":[{"_type":"span","marks":[],"text":"What is the ","_key":"66f978aebf140"},{"_type":"span","marks":["em"],"text":"Schedule Module","_key":"b4a1418ecf20"},{"_type":"span","marks":[],"text":"?","_key":"b2e46deed5c5"}]},{"style":"normal","_key":"41f49a71d851","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The Schedule module is a sophisticated wrapper component that enables you to control the visibility of any existing SanityPress module based on date and time. Built as a client component while maintaining compatibility with server components, it provides seamless integration with your existing content structure.","_key":"eaf66548f15e0"}],"_type":"block"},{"_type":"block","style":"h2","_key":"88653d31b124","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Key Features","_key":"43fbf7473ed30"}]},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Flexible Date Range Control","_key":"6944cc19dc820"},{"_type":"span","marks":[],"text":": Set specific start and end dates for content visibility.","_key":"6944cc19dc821"}],"level":1,"_type":"block","style":"normal","_key":"84cb366f9e87","listItem":"bullet"},{"children":[{"text":"Module Nesting","_key":"3c07b948c3d20","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":": Wrap any existing SanityPress module to make it time-sensitive.","_key":"3c07b948c3d21"}],"level":1,"_type":"block","style":"normal","_key":"d82cc875878d","listItem":"bullet","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Real-Time Updates","_key":"31403ff2e1850"},{"_type":"span","marks":[],"text":": Automatic content updates through efficient interval checking with the wrapper client component.","_key":"31403ff2e1851"}],"level":1,"_type":"block","style":"normal","_key":"6c23a0498e5e","listItem":"bullet"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Server Component Compatible","_key":"a61fa734f41e0"},{"_type":"span","marks":[],"text":": Works seamlessly with both client and server components.","_key":"a61fa734f41e1"}],"level":1,"_type":"block","style":"normal","_key":"1c224ec8d4bd"},{"_type":"block","style":"h2","_key":"a43e66db35f4","markDefs":[],"children":[{"_type":"span","marks":[],"text":"How It Works","_key":"c20471df619d"}]},{"style":"normal","_key":"a5caa849f9d5","markDefs":[{"_type":"link","href":"https://github.com/nuotsu/sanitypress/blob/main/src/ui/Scheduler.tsx","_key":"30c14e938eff"}],"children":[{"_type":"span","marks":[],"text":"The Schedule module is built around the ","_key":"ad06225a55d7"},{"text":"","_key":"71a8c80b5816","_type":"span","marks":["code","30c14e938eff"]},{"_type":"span","marks":[],"text":" wrapper React component, which handles all the timing logic. It uses ","_key":"55453d0a3b9f"},{"_type":"span","marks":["code"],"text":"setInterval","_key":"ea06df3e66d8"},{"_type":"span","marks":[],"text":" to continuously check if the current time falls within the specified datetime ranges, ensuring your content appears and disappears exactly when you want it to.","_key":"c77eea2ba6bd"}],"_type":"block"},{"_key":"2e889a2d7858","markDefs":[],"children":[{"marks":[],"text":"This works without the need for Sanity's Scheduled publishing paid feature—it will work on the free plan! All that's needed are a ","_key":"03a724ee4c6b","_type":"span"},{"_type":"span","marks":["code"],"text":"start","_key":"041b5b791221"},{"_type":"span","marks":[],"text":" and ","_key":"cb66f235a85d"},{"_key":"163260104a46","_type":"span","marks":["code"],"text":"end"},{"_type":"span","marks":[],"text":" \"datetime\" schema type.","_key":"cb08e3b82d43"}],"_type":"block","style":"normal"},{"_key":"53673ea89e45","_type":"custom-html","html":{"code":"","_type":"code"}},{"style":"normal","_key":"861d5f127f39","markDefs":[],"children":[{"marks":[],"text":"Feel free to repurpose this code into your project—SanityPress or not!","_key":"45c250c30b56","_type":"span"}],"_type":"block"},{"markDefs":[],"children":[{"marks":[],"text":"How to Use","_key":"20c4ac5b15c5","_type":"span"}],"_type":"block","style":"h2","_key":"22f1f258507e"},{"style":"normal","_key":"ae1a83e75e87","markDefs":[],"children":[{"_type":"span","marks":[],"text":"To start using the Schedule module, simply add it to your Page document. Then, add start and/or end dates and times. Lastly, populate your content with the list of modules from the dropdown.","_key":"c27c644da04b"}],"_type":"block"},{"loading":"lazy","crop":{"bottom":0.13301682151188954,"_type":"sanity.imageCrop","right":0.15408805031446549,"top":0.4843176578125215,"left":0.25471698113207547},"hotspot":{"height":0.38266552067558895,"_type":"sanity.imageHotspot","width":0.591194968553459,"x":0.550314465408805,"y":0.675650418150316},"_type":"image","alt":"Select the Schedule module from the list of modules","caption":"Select the Schedule module from the list of modules","_key":"4069c52f7911","asset":{"_ref":"image-be542f2bb735e305eef1cd96c6f32a7273b44cd1-2192x2022-png","_type":"reference"}},{"markDefs":[{"_key":"68a5f4577e68","_type":"link","href":"https://github.com/nuotsu/sanitypress/blob/main/src/sanity/schemas/modules/schedule-module.ts#L27-L34"}],"children":[{"_type":"span","marks":[],"text":"You can add more modules to use in the Scheduler by editing the ","_key":"400207542eeb"},{"marks":["code","68a5f4577e68"],"text":"schedule-module.ts","_key":"e3260019072d","_type":"span"},{"_type":"span","marks":[],"text":" Sanity schema file:","_key":"c8942d81f9f0"}],"_type":"block","style":"normal","_key":"1f981712b7a2"},{"_type":"code","language":"typescript","_key":"3a32d6210ad9","highlightedLines":[16],"code":"export default defineType({\n name: 'schedule-module',\n // ...\n fields: [\n // ...\n defineField({\n name: 'modules',\n type: 'array',\n of: [\n { type: 'callout' },\n { type: 'custom-html' },\n { type: 'hero' },\n { type: 'hero.saas' },\n { type: 'hero.split' },\n { type: 'testimonial.featured' },\n // ... add more modules here\n ],\n }),\n ],\n})\n","filename":"src/sanity/schemas/modules/schedule-module.ts"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Real-World Applications","_key":"07c0d2d745ed0"}],"_type":"block","style":"h2","_key":"20924298ab97"},{"style":"h3","_key":"e4e96768b36a","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Seasonal Website Themes","_key":"0a0ceb5e9b4c0"}],"_type":"block"},{"_key":"b6435e30e48c","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Using the Schedule module with our Custom HTML module, you can automatically apply seasonal styling to your website. Imagine automatically activating holiday decorations during December.","_key":"360055a931560"}],"_type":"block","style":"normal"},{"caption":"Custom HTML module with seasonal CSS, nested in a Schedule module","_key":"cd3a73e87903","asset":{"_ref":"image-e9790d945098a0ca8423e2ec17c69f74f1337304-3158x1776-png","_type":"reference"},"loading":"lazy","_type":"image","alt":"Custom HTML module with seasonal CSS, nested in a Schedule module"},{"_key":"32a425efc64b","markDefs":[],"children":[{"text":"Temporary Announcements","_key":"4c699c8831970","_type":"span","marks":[]}],"_type":"block","style":"h3"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"The Schedule module powers our Announcement component, allowing you to display time-sensitive notifications above your site header, such as:","_key":"83b12a8006ec0"}],"_type":"block","style":"normal","_key":"7b3d2423ff61"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Flash announcements","_key":"ddec980fd2e00"}],"level":1,"_type":"block","style":"normal","_key":"25f2c27e2bdf"},{"_key":"c64a9e19499a","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Limited-time offers","_key":"144176e301e8"}],"level":1,"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"06dcb90b4ae1","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Temporary service notifications","_key":"bc83169a0de7"}],"level":1},{"_key":"b9bcf9cf662e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Dynamic Homepage Content","_key":"e4d29e0726a90"}],"_type":"block","style":"h3"},{"style":"normal","_key":"13059baf43b2","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Schedule different hero banners to showcase various content throughout the year:","_key":"fe0486fe0e330"}],"_type":"block"},{"markDefs":[],"children":[{"text":"Seasonal promotions","_key":"75ef9e764f550","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"ceaaefcb45bd","listItem":"bullet"},{"level":1,"_type":"block","style":"normal","_key":"b06056142287","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Event highlights","_key":"fe9cd8ee3fea"}]},{"level":1,"_type":"block","style":"normal","_key":"85b77b730b43","listItem":"bullet","markDefs":[],"children":[{"text":"Time-limited features","_key":"abdbd1eb5897","_type":"span","marks":[]}]},{"_key":"732f5420ce3a","listItem":"bullet","markDefs":[],"children":[{"_key":"1bb9f727e93c","_type":"span","marks":[],"text":"Campaign-specific messaging"}],"level":1,"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Looking Forward","_key":"2585d5c4bd430"}],"_type":"block","style":"h2","_key":"d4b1e6657904"},{"children":[{"_type":"span","marks":[],"text":"The Schedule module is just the beginning of our efforts to make content management more dynamic and flexible in SanityPress. We're excited to see how you'll use this feature to create more engaging, timely content experiences for your users.","_key":"5fc4e44fc5560"}],"_type":"block","style":"normal","_key":"41310173ac71","markDefs":[]},{"markDefs":[{"_type":"link","href":"https://github.com/nuotsu/sanitypress/discussions","_key":"2c6a296aa794"},{"_key":"43ab8f766b3c","_type":"link","href":"https://github.com/nuotsu/sanitypress"}],"children":[{"_type":"span","marks":[],"text":"Have questions or want to contribute? Join our ","_key":"9971eeb5417c0"},{"_type":"span","marks":["2c6a296aa794"],"text":"GitHub discussion","_key":"748f8122ce8c"},{"_key":"8be4f42d89c7","_type":"span","marks":[],"text":" or or give us "},{"_key":"3b2e627d6327","_type":"span","marks":["43ab8f766b3c"],"text":"a star on GitHub"},{"_type":"span","marks":[],"text":"!","_key":"7fbaff6c76c7"}],"_type":"block","style":"normal","_key":"54cf8eaa33c4"},{"hotspot":{"height":1,"_type":"sanity.imageHotspot","width":0.9961019220711297,"x":0.49805096103556484,"y":0.5},"_type":"image","alt":"Delorian with the text \"SanityPress\", levitating above LA rush hour traffic in sunset, Back to the Future 70s film still","_key":"d0f447a85351","asset":{"_ref":"image-a1fe0a59389756d8152bfbd7dcd26ced5ef1ef2b-1344x896-jpg","_type":"reference"},"loading":"lazy","crop":{"_type":"sanity.imageCrop","right":0.003898077928870314,"top":0,"left":0,"bottom":0}},{"_key":"4ee0337f31bd","markDefs":[],"children":[{"_key":"41936f8ef039","_type":"span","marks":[],"text":""}],"_type":"block","style":"normal"}],"authors":[{"name":"Mitchell Christ","_id":"e226087a-1a6f-497e-a072-e939811c7602","_updatedAt":"2024-11-05T04:23:27Z","image":{"_type":"image","asset":{"_ref":"image-3202079e06e0b118c6194d3ccfa895949a35edd7-477x477-jpg","_type":"reference"}},"_createdAt":"2024-09-28T00:24:31Z","_rev":"3YZ4L6cpINaymKayFBr8Ls","_type":"person"}],"featured":false,"metadata":{"description":"Discover the new Schedule module for SanityPress. Control content visibility with time-based management, perfect for seasonal themes and dynamic updates.","title":"Introducing the Schedule Module","noIndex":false,"slug":{"current":"introducing-the-schedule-module","_type":"slug"},"image":{"hotspot":{"y":0.47533654208601905,"height":0.9494215057107316,"_type":"sanity.imageHotspot","width":0.8907230648535565,"x":0.5000735486401674},"_type":"image","asset":{"_ref":"image-b65d1346d8e0425d0cd4fe94ffab0cc55d309f62-1344x896-jpg","_type":"reference"},"crop":{"right":0.054564918933054374,"top":0.0006257892306532472,"left":0.054712016213389156,"bottom":0.049952705058615154,"_type":"sanity.imageCrop"}},"_type":"metadata"},"hideTableOfContents":false},{"categories":[{"_type":"blog.category","_id":"2f4e56a1-40df-4eee-b11d-e4a283b6f134","title":"Customization","_updatedAt":"2024-11-24T21:54:40Z","slug":{"current":"customization","_type":"slug"},"_createdAt":"2024-04-29T23:32:42Z","_rev":"zkLJSc3z66UIgKQBgMra6z"},{"_type":"blog.category","_id":"138f145c-5b1c-4b27-8e8c-0b5369f68154","title":"Modules","_updatedAt":"2024-11-24T21:53:37Z","slug":{"current":"modules","_type":"slug"},"_createdAt":"2024-08-05T23:56:00Z","_rev":"zkLJSc3z66UIgKQBgMqqi7"}],"hideTableOfContents":false,"publishDate":"2024-10-03","_id":"90df24e3-1487-4f14-a4fc-bf33951266ad","authors":[{"_rev":"3YZ4L6cpINaymKayFBr8Ls","_type":"person","name":"Mitchell Christ","_id":"e226087a-1a6f-497e-a072-e939811c7602","_updatedAt":"2024-11-05T04:23:27Z","image":{"_type":"image","asset":{"_ref":"image-3202079e06e0b118c6194d3ccfa895949a35edd7-477x477-jpg","_type":"reference"}},"_createdAt":"2024-09-28T00:24:31Z"}],"metadata":{"image":{"_type":"image","asset":{"_ref":"image-e576f8d397dd559fbbc33d7be716564091fae1cf-1456x816-jpg","_type":"reference"}},"_type":"metadata","description":"Learn how to add custom CSS to your SanityPress website using the Custom HTML module, enabling full design control directly from the CMS studio.","title":"How to Add Custom CSS","noIndex":false,"slug":{"current":"how-to-add-custom-css","_type":"slug"}},"_updatedAt":"2024-10-03T07:33:23Z","featured":false,"_createdAt":"2024-09-23T06:48:42Z","_type":"blog.post","body":[{"_key":"a9808bd9a5b4","asset":{"_ref":"image-e576f8d397dd559fbbc33d7be716564091fae1cf-1456x816-jpg","_type":"reference"},"loading":"lazy","_type":"image","alt":"Dior-style perfume bottle with green liquid contents with the Dior logo \"Custom CSS\", sunlight and shadows shining through the bottle, a beautiful elegant woman's hand rested on the table to the side, lifestyle product photography on marble, photorealism Hasselblad"},{"_key":"77ab85ca93eb","markDefs":[],"children":[{"_type":"span","marks":[],"text":"In web development, there’s always that need to tweak a design or customize a layout beyond the default settings of your theme. With SanityPress, you can easily integrate custom CSS right from your CMS using the Custom HTML module. In this post, we'll guide you through adding custom styles to your website and show how you can enhance specific elements like headers, text, and more.","_key":"61be30493c0a0"}],"_type":"block","style":"normal"},{"children":[{"marks":[],"text":"Why inject custom CSS?","_key":"12b2b61cbda90","_type":"span"}],"_type":"block","style":"h3","_key":"5131cc2d1698","markDefs":[]},{"markDefs":[],"children":[{"text":"Your website needs to stand out and sometimes the default options aren’t enough. Whether it’s making a header bigger, changing colors, or adjusting margins, custom CSS is essential to fine-tune those details and create a unique web experience. With the Custom HTML module in SanityPress, adding CSS directly inside the CMS is intuitive and flexible.","_key":"5d68d2ded8030","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"5d227aa71b54"},{"children":[{"_key":"2284c56198500","_type":"span","marks":[],"text":"Adding CSS with the Custom HTML Module"}],"_type":"block","style":"h3","_key":"3352b92fdfae","markDefs":[]},{"_key":"e5c03b5b03e8","markDefs":[],"children":[{"_type":"span","marks":[],"text":"SanityPress makes it easy to add custom styles without digging into your codebase. Let’s walk through an example where we customize the main hero section's heading using the module.","_key":"4cf42e9eba1d0"}],"_type":"block","style":"normal"},{"style":"normal","_key":"bcb7ecc2b924","listItem":"number","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Open the Sanity Studio","_key":"a01ea11b53d10"},{"_type":"span","marks":[],"text":": Navigate to \"Editor\" tab, then to the page where you want to add your custom styles.","_key":"a01ea11b53d11"}],"level":1,"_type":"block"},{"level":1,"_type":"block","style":"normal","_key":"7daf1023fbe7","listItem":"number","markDefs":[],"children":[{"text":"Select the \"Custom HTML\" Module","_key":"f85eb12ae7190","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":": You'll find this module on the right-hand side of your editor panel. This allows you to input custom HTML and CSS for that specific page or section.","_key":"f85eb12ae7191"}]},{"_type":"block","style":"normal","_key":"8916e57a57e1","listItem":"number","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Input Your Custom CSS","_key":"745ed5bfa70c0"},{"marks":[],"text":": Make sure to include your CSS code inside a ","_key":"745ed5bfa70c1","_type":"span"},{"_type":"span","marks":["code"],"text":"","_type":"code"},{"markDefs":[{"_type":"link","href":"/blog/adding-jump-links-to-modules","_key":"cac0ad29c92f"}],"children":[{"_type":"span","marks":[],"text":"In most cases, modules will come included with a ","_key":"14147768d563"},{"text":"data-module","_key":"928ab2d54af9","_type":"span","marks":["code"]},{"_key":"be23359a831b","_type":"span","marks":[],"text":" attribute you can use to reference specific modules. You can also "},{"_type":"span","marks":["cac0ad29c92f"],"text":"add a unique identifier","_key":"ab558afd5cf7"},{"text":" with the ","_key":"f876a4da572c","_type":"span","marks":[]},{"_type":"span","marks":["code"],"text":"moduleProps()","_key":"114e8b0e9a62"},{"marks":[],"text":" helper to reference even more specifically.","_key":"e360bf87c683","_type":"span"}],"_type":"block","style":"normal","_key":"5ee7ca50b9b0"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Real-Time Customization Benefits","_key":"dc699940c0440"}],"_type":"block","style":"h3","_key":"feaab97872ae"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"By using the Custom HTML module in SanityPress, you get full control over how different parts of your site look and behave across different devices. There’s no need to modify the main theme files, which keeps your setup clean and future-proof.","_key":"08f7899766020"}],"_type":"block","style":"normal","_key":"22d6ba38e584"},{"_type":"block","style":"normal","_key":"c502f36be19c","markDefs":[],"children":[{"_type":"span","marks":[],"text":"As seen in the example, you can easily adjust layout and typography on specific breakpoints with just a few lines of code. Whether it’s enhancing the visual hierarchy of your content or aligning design elements with your brand guidelines, the Custom HTML module makes it straightforward to integrate custom styles into your workflow.","_key":"08227c8c73150"}]},{"_type":"image","alt":"Custom CSS inside the Custom HTML module in Visual Editing mode","caption":"Custom CSS inside the Custom HTML module in Visual Editing mode","_key":"8b6b39e18d30","asset":{"_type":"reference","_ref":"image-8da43c4043af45110ad8d5f1544c790e58be3a57-2950x2040-png"},"loading":"lazy"},{"children":[{"_type":"span","marks":[],"text":"Get Started with SanityPress","_key":"545253a945a80"}],"_type":"block","style":"h3","_key":"6a1c0fc22067","markDefs":[]},{"children":[{"_type":"span","marks":[],"text":"SanityPress is designed to be both developer-friendly and easy for non-technical users. With features like the Custom HTML module, you can shape your site exactly as you envision without compromising on flexibility or performance. If you're not already using SanityPress, try it out today and see how quickly you can build and customize stunning websites!","_key":"c3850be6da980"}],"_type":"block","style":"normal","_key":"e63baa3f1c79","markDefs":[]},{"loading":"lazy","_type":"image","alt":"Wicked Witch holding a syringe, green liquid inside a large caudron with the text \"Custom CSS\" next to her, inside a dark castle, 60s film screengrab from Wizard of Oz","_key":"4a37821ed1f4","asset":{"_ref":"image-63ff42b7de0aa2e3de2343aa4ed4e05aee16275c-1456x816-jpg","_type":"reference"}}],"_rev":"fJc1txCIj2oyCQJAzsLGPx"},{"hideTableOfContents":false,"publishDate":"2024-06-12","_updatedAt":"2024-09-28T01:09:27Z","_rev":"78B1Ir6NtKEo1yxjN2JqMG","body":[{"_type":"image","alt":"1980s action movie film still of realistic Goku training by carrying a metal massive ship anchor in a dojo with the text \"Jump Link Dojo\"","_key":"68fe87303a73","asset":{"_type":"reference","_ref":"image-c9a5ae9b8a28721f08dcb227e844bfc5dba8191a-1344x896-jpg"},"loading":"eager"},{"children":[{"_type":"span","marks":[],"text":"Want to add a link that takes a user to a specific module on a page?","_key":"b214824a2d30"}],"_type":"block","style":"normal","_key":"12164c5ea483","markDefs":[]},{"style":"blockquote","_key":"ad99ada26a0d","markDefs":[{"_key":"0efc8cc83dbe","_type":"link","href":"/docs#faqs"}],"children":[{"_key":"c71d71480df4","_type":"span","marks":[],"text":"... like "},{"text":"this one","_key":"c64132b4cc17","_type":"span","marks":["0efc8cc83dbe"]},{"_type":"span","marks":[],"text":" (to the FAQs)","_key":"d2e7bf667907"}],"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"SanityPress comes included with a Studio component and a frontend helper function to make this possible—and it's quite easy.","_key":"c05d386d8f1a"}],"_type":"block","style":"normal","_key":"e34b24d7bd72","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"The Studio Component","_key":"0498b75b2bec"}],"_type":"block","style":"h2","_key":"e66859dc3abf"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"The ","_key":"df7ae15d31a1"},{"_type":"span","marks":["strong"],"text":"Accordion list","_key":"040b5f333740"},{"_type":"span","marks":[],"text":" module has the code already added:","_key":"86d015a167df"}],"_type":"block","style":"normal","_key":"b5ec104b7fde"},{"code":"export default defineType({\n\tname: 'accordion-list',\n\t...\n\tfields: [\n\t\t...\n\t\tdefineField({\n\t\t\tname: 'uid',\n\t\t\ttitle: 'Unique Identifier',\n\t\t\ttype: 'uid',\n\t\t\tgroup: 'options',\n\t\t}),\n\t],\n})\n","filename":"sanity/schemas/modules/accordion-list.ts","_type":"code","language":"typescript","_key":"213ef04f6b0a","highlightedLines":[6,7,8,9,10,11]},{"children":[{"text":"Which adds the following component:","_key":"7f89a7dd692b","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"4acdc696cc79","markDefs":[]},{"caption":"Leave blank to default to the module's `_key` value, or type one to override it","_key":"a563c2fdb461","asset":{"_ref":"image-7a1457aa736ced90f713ff59a400f7728efdd19f-1388x288-png","_type":"reference"},"loading":"lazy","_type":"image","alt":"Unique Identifier Studio input component"},{"_key":"f187a9a9e5c0","markDefs":[{"_type":"link","href":"https://github.com/nuotsu/sanitypress/blob/main/sanity/schemas/objects/uid.tsx","_key":"5c2f111a97bb"}],"children":[{"_type":"span","marks":[],"text":"Checkout the ","_key":"50acda625317"},{"text":"source code","_key":"8cba725a314c","_type":"span","marks":["5c2f111a97bb"]},{"_type":"span","marks":[],"text":" for this schema+input component; it's all in a single file for easy copy/paste.","_key":"14e7b300fade"}],"_type":"block","style":"normal"},{"style":"h2","_key":"7f995b56c875","markDefs":[],"children":[{"text":"The Frontend","_key":"2f946746ea3a","_type":"span","marks":[]}],"_type":"block"},{"_key":"1b96bc23ebcb","markDefs":[],"children":[{"marks":[],"text":"Then in your Next.js frontend component file, make the following additions to set the id attribute to then be able to use as jump links.","_key":"a1fe1a8b7980","_type":"span"}],"_type":"block","style":"normal"},{"_key":"58b801caa565","highlightedLines":[5,9],"code":"import moduleProps from '@/lib/moduleProps'\n\nexport default function AccordionList({\n ...props\n}: Partial<{ ... }> & Sanity.Module) {\n return (\n \n ...\n \n )\n}\n","filename":"src/ui/modules/AccordionList.tsx","_type":"code","language":"tsx"},{"_type":"block","style":"normal","_key":"7695b17f0326","markDefs":[],"children":[{"_key":"b9d9cc626a6b","_type":"span","marks":[],"text":"This will add the following HTML attributes that you can use as reference for jump links or with CSS."}]},{"code":"

\n ...\n

","_type":"code","language":"html","_key":"cae42214b156"},{"_type":"block","style":"normal","_key":"eacabcc78690","markDefs":[],"children":[{"_key":"0216841557c3","_type":"span","marks":[],"text":"Say, you set the "},{"_type":"span","marks":["code"],"text":"uid","_key":"9f1db71019e1"},{"_type":"span","marks":[],"text":" value as ","_key":"76ddc81e0588"},{"_type":"span","marks":["code"],"text":"my-jump-link","_key":"c13cad193fca"},{"_type":"span","marks":[],"text":". Now, your module can be linked directly like this:","_key":"61215a34b2ac"}]},{"code":"Jump link\n\n\nJump link","_type":"code","language":"html","_key":"a94fba26cd74"},{"asset":{"_ref":"image-681aac8921c08f150d601631c4ed3feb88e12977-1344x896-jpg","_type":"reference"},"loading":"lazy","_type":"image","alt":"a massive ship anchor falling onto a city bus with the text \"Modules\" in New York, 1980s","_key":"ccad179ff945"}],"featured":false,"_type":"blog.post","_id":"3ba17ece-79dd-4744-9636-fa7831ab0d01","categories":[{"_rev":"JqI5nRUGTfRK9pQSN98yly","_type":"blog.category","_id":"aad86c2f-c52f-415c-aab2-b5e7c07f5288","title":"Tips & Tricks","_updatedAt":"2024-11-24T21:54:07Z","slug":{"current":"tips-tricks","_type":"slug"},"_createdAt":"2024-05-31T22:27:18Z"},{"slug":{"current":"modules","_type":"slug"},"_createdAt":"2024-08-05T23:56:00Z","_rev":"zkLJSc3z66UIgKQBgMqqi7","_type":"blog.category","_id":"138f145c-5b1c-4b27-8e8c-0b5369f68154","title":"Modules","_updatedAt":"2024-11-24T21:53:37Z"}],"authors":[{"_createdAt":"2024-09-28T00:24:31Z","_rev":"3YZ4L6cpINaymKayFBr8Ls","_type":"person","name":"Mitchell Christ","_id":"e226087a-1a6f-497e-a072-e939811c7602","_updatedAt":"2024-11-05T04:23:27Z","image":{"_type":"image","asset":{"_ref":"image-3202079e06e0b118c6194d3ccfa895949a35edd7-477x477-jpg","_type":"reference"}}}],"metadata":{"image":{"_type":"image","asset":{"_ref":"image-c9a5ae9b8a28721f08dcb227e844bfc5dba8191a-1344x896-jpg","_type":"reference"}},"_type":"metadata","description":"SanityPress comes included with a Studio component and a frontend helper function to make jump linking quite easy.","title":"Adding Jump Links to Modules","noIndex":false,"slug":{"current":"adding-jump-links-to-modules","_type":"slug"}},"_createdAt":"2024-06-12T23:16:44Z"},{"metadata":{"title":"Adding New Modules","noIndex":false,"slug":{"current":"adding-new-modules","_type":"slug"},"image":{"_type":"image","asset":{"_ref":"image-3f5cf7217cab4f3eb398972ffabdebcd4a85ea94-1344x896-jpg","_type":"reference"}},"_type":"metadata","description":"How to add new custom modules in 3 simple steps."},"_rev":"346DdhHdOTkptN3aEtHx0c","_type":"blog.post","hideTableOfContents":false,"_createdAt":"2024-05-27T00:23:10Z","publishDate":"2024-05-26","featured":false,"authors":[{"name":"Mitchell Christ","_id":"e226087a-1a6f-497e-a072-e939811c7602","_updatedAt":"2024-11-05T04:23:27Z","image":{"_type":"image","asset":{"_ref":"image-3202079e06e0b118c6194d3ccfa895949a35edd7-477x477-jpg","_type":"reference"}},"_createdAt":"2024-09-28T00:24:31Z","_rev":"3YZ4L6cpINaymKayFBr8Ls","_type":"person"}],"_id":"bac0183b-304a-4364-88c5-29d06a913273","categories":[{"_type":"blog.category","_id":"2f4e56a1-40df-4eee-b11d-e4a283b6f134","title":"Customization","_updatedAt":"2024-11-24T21:54:40Z","slug":{"current":"customization","_type":"slug"},"_createdAt":"2024-04-29T23:32:42Z","_rev":"zkLJSc3z66UIgKQBgMra6z"},{"_createdAt":"2024-08-05T23:56:00Z","_rev":"zkLJSc3z66UIgKQBgMqqi7","_type":"blog.category","_id":"138f145c-5b1c-4b27-8e8c-0b5369f68154","title":"Modules","_updatedAt":"2024-11-24T21:53:37Z","slug":{"current":"modules","_type":"slug"}}],"body":[{"_type":"image","alt":"original power rangers posing exaggeratedly with an belts reading \"Modules\", comical fire explosion in the distant background, vintage 70s technicolor movie film still","_key":"9bb988562efe","asset":{"_ref":"image-6053d182140d4d34b778efad972b5abf2ea4b8ce-1344x896-jpg","_type":"reference"},"loading":"eager"},{"style":"normal","_key":"64d09df7a0e7","markDefs":[],"children":[{"text":"Adding new custom modules is as easy as 3 steps:","_key":"31256b4ddae5","_type":"span","marks":[]}],"_type":"block"},{"markDefs":[],"children":[{"_key":"4a4ef9d16c93","_type":"span","marks":[],"text":"Define the schema."}],"level":1,"_type":"block","style":"normal","_key":"4a9b6338c2ad","listItem":"number"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Create a frontend component.","_key":"ff8f8292b3f9"}],"level":1,"_type":"block","style":"normal","_key":"f5e10d8458d4","listItem":"number"},{"listItem":"number","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Assign the component in ","_key":"a58596f5ef64"},{"_key":"dd4aece4bf32","_type":"span","marks":["code"],"text":""},{"_type":"span","marks":[],"text":".","_key":"78f97cc994b2"}],"level":1,"_type":"block","style":"normal","_key":"a690ee547190"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Define the schema in Sanity","_key":"fa88a33c7d19"}],"_type":"block","style":"h2","_key":"8cd3a4d5d553"},{"style":"normal","_key":"b42a58d1b1d5","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Create a new ","_key":"3d10c2a294bf"},{"_type":"span","marks":["code"],"text":"object","_key":"139b361aee80"},{"_type":"span","marks":[],"text":" schema type in the modules directory:","_key":"9dfa21959430"}],"_type":"block"},{"_type":"code","language":"typescript","_key":"afe45e1336bf","code":"import { defineField, defineType } from 'sanity'\n\nexport default defineType({\n\tname: 'custom-module',\n\ttitle: 'Custom module',\n\ttype: 'object',\n\tfields: [\n\t\t// ...\n\t],\n})","filename":"sanity/schemas/modules/custom-module.ts"},{"children":[{"_type":"span","marks":[],"text":"Import the newly created schema file:","_key":"3efcb722b50f"}],"_type":"block","style":"normal","_key":"b274aecec425","markDefs":[]},{"_type":"code","language":"typescript","_key":"7d8c3d2496a8","highlightedLines":[4,10],"code":"// documents\n// objects\n// modules\nimport customModule from './modules/custom-module'\n\nexport const schemaTypes = [\n\t// documents\n\t// objects\n\t// modules\n\tcustomModule,\n]","filename":"sanity/schemas/index.ts"},{"children":[{"marks":[],"text":"Then, include the module name to all page documents where you'd like to use the module:","_key":"f4c9583457bb","_type":"span"}],"_type":"block","style":"normal","_key":"8aaa0e21c9ec","markDefs":[]},{"language":"typescript","_key":"9f811fa85bf1","highlightedLines":[12],"code":"export default defineType({\n\tname: 'page',\n\ttitle: 'Page',\n\ttype: 'document',\n\tfields: [\n\t\t// ...\n\t\tdefineField({\n\t\t\tname: 'modules',\n\t\t\ttype: 'array',\n\t\t\tof: [\n\t\t\t\t// ...\n\t\t\t\t{ type: 'custom-module' },\n\t\t\t],\n\t\t}),\n\t],\n})","filename":"sanity/schemas/documents/page.ts","_type":"code"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Create the Frontend Component","_key":"3eb48a0a9e99"}],"_type":"block","style":"h2","_key":"fafd9790249a"},{"children":[{"_type":"span","marks":[],"text":"Create the React component in the Next.js frontend. I recommend defining the schema as TypeScript types within this component file:","_key":"29da7af848c5"}],"_type":"block","style":"normal","_key":"ae3ebf3b73db","markDefs":[]},{"language":"tsx","_key":"b29f5569f84c","code":"export default function CustomModule({}: Props) {\n\treturn (\n\t\t

\n\t\t\t...\n\t\t

\n\t)\n}","filename":"src/ui/modules/CustomModule.tsx","_type":"code"},{"children":[{"text":"Then, add a new case in the ","_key":"3004250876da","_type":"span","marks":[]},{"marks":["code"],"text":"","_key":"a253421522ab","_type":"span"},{"_type":"span","marks":[],"text":" handler component:","_key":"3790e84b0e0b"}],"_type":"block","style":"normal","_key":"d34fab1908b2","markDefs":[]},{"code":"import CustomModule from './CustomModule'\n\nexport default function Modules({ modules }: { modules?: Sanity.Module[] }) {\n\treturn (\n\t\t<>\n\t\t\t{modules?.map((module) => {\n\t\t\t\tswitch (module._type) {\n\t\t\t\t\t// ...\n\t\t\t\t\tcase 'custom-module':\n\t\t\t\t\t\treturn \n\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn

\n\t\t\t\t}\n\t\t\t})}\n\t\t\n\t)\n}","filename":"src/ui/modules/index.tsx","_type":"code","language":"tsx","_key":"a25f12e28b84","highlightedLines":[1,9,10]},{"style":"h2","_key":"e739e2847ed2","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Joining References with GROQ","_key":"b12c2acec18c"}],"_type":"block"},{"_type":"block","style":"normal","_key":"c101f41c2371","markDefs":[{"_type":"link","href":"https://www.sanity.io/docs/groq-joins","_key":"51bb40471513"}],"children":[{"_type":"span","marks":[],"text":"If your new modules includes references to other Sanity documents, you'll need to update the module GROQ query to ","_key":"710cdbe8f2c9"},{"_type":"span","marks":["51bb40471513"],"text":"\"join\" the references","_key":"6f22c78f99e9"},{"text":".","_key":"473919941c61","_type":"span","marks":[]}]},{"_type":"code","language":"typescript","_key":"4dbb151058c5","highlightedLines":[3,4,5],"code":"export const modulesQuery = groq`\n ...,\n _type == 'custom-module' => {\n yourReferencedItems[]->\n },\n`","filename":"src/lib/sanity/queries.ts"},{"_key":"84fbe5801900","markDefs":[],"children":[{"_key":"2339ea5dd7e1","_type":"span","marks":[],"text":"Now you'll have access to the referenced documents' fields."}],"_type":"block","style":"normal"},{"_type":"image","alt":"original power rangers posing exaggeratedly with an belts reading \"Modules\", comical fire explosion in the distant background, vintage 80s technicolor movie film still","_key":"86ba5b766346","asset":{"_ref":"image-3f5cf7217cab4f3eb398972ffabdebcd4a85ea94-1344x896-jpg","_type":"reference"},"loading":"lazy"}],"_updatedAt":"2024-09-28T01:10:35Z"}],"className":"items-stretch gap-x-8 gap-y-12 carousel max-xl:full-bleed md:overflow-fade-r pb-4 [--size:320px] max-xl:px-4"}]}]]}]