add code-block and custom-html assets to hero.split

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanitypress",
-	"version": "6.3.0",
+	"version": "6.3.1",
 	"description": "An impressive Next.js + Sanity.io starter template",
 	"author": "nuotsu <[email protected]> (https://nuotsu.dev)",
 	"license": "ISC",

src/sanity/schemaTypes/modules/hero.split.ts

@@ -1,4 +1,4 @@
-import { defineField, defineType } from 'sanity'
+import { defineArrayMember, defineField, defineType } from 'sanity'
 import { TfiLayoutMediaLeft } from 'react-icons/tfi'
 import { reputationBlock } from '../misc/reputation'
 import { getBlockText } from '@/sanity/lib/utils'
@@ -32,7 +32,17 @@ export default defineType({
 			name: 'assets',
 			title: 'Assets',
 			type: 'array',
-			of: [{ type: 'img' }],
+			of: [
+				{ type: 'img' },
+				defineArrayMember({
+					title: 'Code block',
+					type: 'code',
+					options: {
+						withFilename: true,
+					},
+				}),
+				{ type: 'custom-html' },
+			],
 			validation: (Rule) => Rule.max(1),
 			group: 'asset',
 		}),

src/types/Sanity.d.ts

@@ -117,13 +117,28 @@ declare global {
 
 		// objects
 
+		interface Code {
+			readonly _type: 'code'
+			language: string
+			code: string
+			filename?: string
+			highlightedLines?: number[]
+		}
+
 		interface CTA {
 			readonly _type?: 'cta'
 			_key?: string
 			link?: Link
 			style?: string
 		}
 
+		interface CustomHTML extends Module<'custom-html'> {
+			className?: string
+			html?: {
+				code: string
+			}
+		}
+
 		interface Img {
 			readonly _type: 'img'
 			image: Image

src/ui/modules/CreativeModule/CustomHTMLSubmodule.tsx

@@ -1,7 +1,7 @@
 import CustomHTML from '@/ui/modules/CustomHTML'
 
 export type CustomHTMLSubmoduleType = Sanity.Module<'custom-html'> &
-	React.ComponentProps<typeof CustomHTML>
+	Sanity.CustomHTML
 
 export default function CustomHTMLSubmodule({
 	module,

src/ui/modules/CustomHTML/WithScript.tsx

@@ -10,7 +10,7 @@ export default function WithScript({
 	code,
 	className,
 	...props
-}: Partial<{ code: string } & Sanity.Module> & ComponentProps<'section'>) {
+}: Sanity.CustomHTML['html'] & Sanity.Module & ComponentProps<'section'>) {
 	if (!code) return null
 
 	const ref = useRef<HTMLElement>(null)

src/ui/modules/CustomHTML/index.tsx

@@ -1,19 +1,12 @@
 import moduleProps from '@/lib/moduleProps'
-import { stegaClean } from 'next-sanity'
 import WithScript from './WithScript'
+import { stegaClean } from 'next-sanity'
 
 export default function CustomHTML({
 	className,
 	html,
 	...props
-}: Partial<
-	{
-		className: string
-		html: {
-			code: string
-		}
-	} & Sanity.Module
->) {
+}: Sanity.CustomHTML & Sanity.Module) {
 	if (!html?.code) return null
 
 	return html.code.includes('<script') ? (

src/ui/modules/Hero.tsx

@@ -45,7 +45,7 @@ export default function Hero({
 			)}
 
 			{content && (
-				<div className="section flex w-full flex-col">
+				<div className="section flex w-full flex-col text-balance">
 					<div
 						className={cn(
 							'richtext headings:text-balance relative isolate max-w-xl',

src/ui/modules/HeroSplit.tsx

@@ -1,9 +1,10 @@
 import { PortableText } from 'next-sanity'
 import Pretitle from '@/ui/Pretitle'
-import CustomHTML from './CustomHTML'
-import Reputation from '@/ui/Reputation'
 import CTAList from '@/ui/CTAList'
 import { ResponsiveImg } from '@/ui/Img'
+import Code from './RichtextModule/Code'
+import CustomHTML from './CustomHTML'
+import Reputation from '@/ui/Reputation'
 import { cn } from '@/lib/utils'
 
 export default function HeroSplit({
@@ -17,7 +18,7 @@ export default function HeroSplit({
 	pretitle: string
 	content: any
 	ctas: Sanity.CTA[]
-	assets: Sanity.Img[]
+	assets: Array<Sanity.Img | Sanity.Code | Sanity.CustomHTML>
 	assetOnRight: boolean
 	assetBelowContent: boolean
 }>) {
@@ -27,7 +28,7 @@ export default function HeroSplit({
 		<section className="section grid items-center gap-8 md:grid-cols-2 md:gap-x-12">
 			<figure
 				className={cn(
-					'max-md:full-bleed',
+					asset?._type === 'img' && 'max-md:full-bleed',
 					assetOnRight && 'md:order-1',
 					assetBelowContent && 'max-md:order-last',
 				)}
@@ -38,6 +39,18 @@ export default function HeroSplit({
 							return (
 								<ResponsiveImg img={asset} imgClassName="w-full" width={1200} />
 							)
+
+						case 'code':
+							return (
+								<Code
+									className="richtext [&_.inner]:max-h-[20lh] [&_.inner]:overflow-auto"
+									value={asset}
+								/>
+							)
+
+						case 'custom-html':
+							return <CustomHTML {...asset} />
+
 						default:
 							return null
 					}

src/ui/modules/RichtextModule/Code.tsx

@@ -11,12 +11,7 @@ export default async function Code({
 	className,
 }: {
 	theme?: keyof typeof bundledThemes
-	value?: {
-		language: string
-		code: string
-		filename?: string
-		highlightedLines?: number[]
-	}
+	value?: Sanity.Code
 } & ComponentProps<'article'>) {
 	if (!value?.code) return null
 
@@ -42,23 +37,29 @@ export default async function Code({
 			data-module="code"
 		>
 			{value.filename && (
-				<div className="text-canvas -mb-1 rounded-t bg-[#1E1E1E]/90 px-2 py-1 font-mono text-xs">
+				<div className="text-canvas sticky top-0 z-1 -mb-1 rounded-t bg-[#323232] p-1 pb-0 font-mono text-xs">
 					<span className="inline-block rounded-t border-b border-blue-400 bg-[#1E1E1E] px-3 py-2">
 						📁 {value.filename}
 					</span>
 				</div>
 			)}
 
-			<div className="relative">
-				<div className={css.code} dangerouslySetInnerHTML={{ __html: html }} />
+			<div className="inner relative">
+				<div className="sticky top-1 z-1">
+					<menu className="absolute top-0 right-0 flex items-center justify-end">
+						<li>
+							<ClickToCopy
+								value={stegaClean(value.code)}
+								className={cn(
+									'anim-fade-to-l m-1 hidden rounded p-[.3em] text-lg backdrop-blur group-hover:block hover:bg-white/10 active:scale-95 active:bg-white/20 [&.pointer-events-none]:block',
+									!theme.includes('light') && 'text-white',
+								)}
+							/>
+						</li>
+					</menu>
+				</div>
 
-				<ClickToCopy
-					value={stegaClean(value.code)}
-					className={cn(
-						'anim-fade-to-l absolute top-0 right-0 m-1 hidden rounded p-[.3em] text-lg backdrop-blur group-hover:block hover:bg-white/10 active:scale-95 active:bg-white/20 [&.pointer-events-none]:block',
-						!theme.includes('light') && 'text-white',
-					)}
-				/>
+				<div className={css.code} dangerouslySetInnerHTML={{ __html: html }} />
 			</div>
 		</article>
 	)

src/ui/modules/index.tsx

@@ -61,7 +61,12 @@ export default function Modules({
 					case 'creative-module':
 						return <CreativeModule {...module} key={module._key} />
 					case 'custom-html':
-						return <CustomHTML {...module} key={module._key} />
+						return (
+							<CustomHTML
+								{...(module as Sanity.CustomHTML)}
+								key={module._key}
+							/>
+						)
 					case 'flag-list':
 						return <FlagList {...module} key={module._key} />
 					case 'hero':