Richtext module adjustments

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sanitypress",
-	"version": "4.9.3",
+	"version": "4.9.4",
 	"description": "A Next.js + Sanity.io Starter Template",
 	"author": "nuotsu <mitchell@nuotsu.dev> (https://nuotsu.dev)",
 	"license": "ISC",

sanity/schemas/modules/richtext-module.ts

@@ -13,6 +13,12 @@ export default defineType({
 		{ name: 'options', title: 'Options' },
 	],
 	fields: [
+		defineField({
+			name: 'uid',
+			title: 'Unique Identifier',
+			type: 'uid',
+			group: 'options',
+		}),
 		defineField({
 			name: 'content',
 			type: 'array',
@@ -46,6 +52,13 @@ export default defineType({
 			initialValue: 'right',
 			group: 'options',
 		}),
+		defineField({
+			name: 'stretch',
+			type: 'boolean',
+			initialValue: false,
+			hidden: ({ parent }) => parent.tableOfContents,
+			group: 'options',
+		}),
 	],
 	preview: {
 		select: {

src/styles/app.css

@@ -123,7 +123,6 @@
 	.is-external::after {
 		content: ' ↗';
 		font-size: 0.7em;
-		vertical-align: top;
 	}
 
 	/* layout */

src/ui/Announcement.tsx

@@ -27,12 +27,12 @@ export default async function Announcement() {
 	if (!active) return null
 
 	return (
-		<aside className="flex items-center justify-center gap-x-4 bg-accent p-2 text-center text-canvas max-md:text-sm md:gap-x-6">
-			<div className="anim-fade-to-r [&_a]:link text-balance">
+		<aside className="flex items-center justify-center gap-x-4 text-balance bg-accent p-2 text-center text-canvas max-md:text-sm md:gap-x-6">
+			<div className="anim-fade-to-r [&_a]:link">
 				<PortableText value={active.content} />
 			</div>
 
-			<CTA className="link anim-fade-to-l shrink-0" link={active.cta} />
+			<CTA className="link anim-fade-to-l shrink" link={active.cta} />
 		</aside>
 	)
 }

src/ui/modules/RichtextModule/index.tsx

@@ -1,3 +1,4 @@
+import moduleProps from '@/lib/moduleProps'
 import TableOfContents from './TableOfContents'
 import Content from './Content'
 import { cn } from '@/lib/utils'
@@ -7,24 +8,30 @@ export default function RichtextModule({
 	content,
 	tableOfContents,
 	tocPosition = 'right',
+	stretch,
 	headings,
+	...props
 }: Partial<{
 	content: any
 	tableOfContents: boolean
 	tocPosition: 'left' | 'right'
+	stretch: boolean
 	headings: {
 		style: string
 		text: string
 	}[]
-}>) {
-	const tocRight = tableOfContents && stegaClean(tocPosition) === 'right'
+}> &
+	Sanity.Module) {
+	const tocRight = stegaClean(tocPosition) === 'right'
 
 	return (
 		<section
 			className={cn(
 				'section grid gap-8',
-				tocRight ? 'lg:grid-cols-[1fr,auto]' : 'lg:grid-cols-[auto,1fr]',
+				tableOfContents &&
+					(tocRight ? 'lg:grid-cols-[1fr,auto]' : 'lg:grid-cols-[auto,1fr]'),
 			)}
+			{...moduleProps(props)}
 		>
 			{tableOfContents && (
 				<aside
@@ -37,7 +44,12 @@ export default function RichtextModule({
 				</aside>
 			)}
 
-			<Content value={content} className="max-w-screen-lg" />
+			<Content
+				value={content}
+				className={cn(
+					!tableOfContents && (stretch ? 'max-w-screen-lg' : 'max-w-screen-md'),
+				)}
+			/>
 		</section>
 	)
 }