reorganize site document, add tagline

package.json

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

src/sanity/schemaTypes/documents/site.ts

@@ -4,36 +4,64 @@ export default defineType({
 	name: 'site',
 	title: 'Site settings',
 	type: 'document',
-	groups: [{ name: 'general', default: true }, { name: 'navigation' }],
+	groups: [
+		{ name: 'branding', default: true },
+		{ name: 'info' },
+		{ name: 'navigation' },
+	],
 	fields: [
 		defineField({
 			name: 'title',
 			type: 'string',
-			group: 'general',
 			validation: (Rule) => Rule.required(),
+			group: 'branding',
+		}),
+		defineField({
+			name: 'tagline',
+			type: 'array',
+			of: [{ type: 'block' }],
+			group: 'branding',
 		}),
 		defineField({
 			name: 'logo',
 			type: 'logo',
-			options: {
-				collapsable: true,
-				collapsed: true,
-			},
-			group: 'general',
+			group: 'branding',
 		}),
 		defineField({
 			name: 'announcements',
 			type: 'array',
 			of: [{ type: 'reference', to: [{ type: 'announcement' }] }],
-			group: 'general',
+			group: 'info',
+		}),
+		defineField({
+			name: 'copyright',
+			type: 'array',
+			of: [
+				{
+					type: 'block',
+					styles: [{ title: 'Normal', value: 'normal' }],
+				},
+			],
+			group: 'info',
+		}),
+		defineField({
+			name: 'ogimage',
+			title: 'Open Graph image (global)',
+			description:
+				'Used for social sharing previews. Set page-specific images in Page documents.',
+			type: 'image',
+			options: {
+				hotspot: true,
+			},
+			group: 'info',
 		}),
 		defineField({
 			name: 'ctas',
 			title: 'Call-to-action (global)',
 			description: 'Typically used in the header and/or footer.',
 			type: 'array',
 			of: [{ type: 'cta' }],
-			group: 'general',
+			group: 'navigation',
 		}),
 		defineField({
 			name: 'headerMenu',
@@ -53,28 +81,6 @@ export default defineType({
 			to: [{ type: 'navigation' }],
 			group: 'navigation',
 		}),
-		defineField({
-			name: 'copyright',
-			type: 'array',
-			of: [
-				{
-					type: 'block',
-					styles: [{ title: 'Normal', value: 'normal' }],
-				},
-			],
-			group: 'general',
-		}),
-		defineField({
-			name: 'ogimage',
-			title: 'Open Graph image (global)',
-			description:
-				'Used for social sharing previews. Set page-specific images in Page documents.',
-			type: 'image',
-			options: {
-				hotspot: true,
-			},
-			group: 'general',
-		}),
 	],
 	preview: {
 		prepare: () => ({

src/types/Sanity.d.ts

@@ -6,15 +6,19 @@ declare global {
 		// documents
 
 		interface Site extends SanityDocument {
+			// branding
 			title: string
+			tagline?: any
 			logo?: Logo
+			// info
 			announcements?: Announcement[]
+			copyright?: any
+			ogimage?: string
+			// navigation
 			ctas?: CTA[]
 			headerMenu?: Navigation
 			footerMenu?: Navigation
 			social?: Navigation
-			copyright?: any
-			ogimage?: string
 		}
 
 		interface Navigation extends SanityDocument {

src/ui/footer/Navigation.tsx

@@ -15,7 +15,7 @@ export default async function Menu() {
 					case 'link.list':
 						return (
 							<div className="space-y-2 text-left" key={key}>
-								<div className="technical text-xs text-canvas/60">
+								<div className="technical text-canvas/60 text-xs">
 									<CTA link={item.link}>
 										{stegaClean(item.link?.label) || item.link?.internal?.title}
 									</CTA>

src/ui/footer/index.tsx

@@ -6,14 +6,14 @@ import Link from 'next/link'
 import Img from '@/ui/Img'
 
 export default async function Footer() {
-	const { title, logo, copyright } = await getSite()
+	const { title, tagline, logo, copyright } = await getSite()
 
 	const logoImage = logo?.image?.light || logo?.image?.default
 
 	return (
-		<footer className="bg-accent text-center text-canvas" role="contentinfo">
+		<footer className="bg-accent text-canvas" role="contentinfo">
 			<div className="section flex flex-wrap justify-between gap-x-12 gap-y-8 max-sm:flex-col">
-				<div className="flex flex-col gap-3 self-start max-sm:mx-auto max-sm:items-center">
+				<div className="flex flex-col gap-3 self-start">
 					<Link className="h3 md:h2 max-w-max" href="/">
 						{logoImage ? (
 							<Img
@@ -26,14 +26,20 @@ export default async function Footer() {
 						)}
 					</Link>
 
+					{tagline && (
+						<div className="max-w-sm text-sm text-balance">
+							<PortableText value={tagline} />
+						</div>
+					)}
+
 					<Social />
 				</div>
 
 				<Navigation />
 			</div>
 
 			{copyright && (
-				<div className="mx-auto flex max-w-screen-xl flex-wrap justify-center gap-x-6 gap-y-2 border-t border-canvas/20 p-4 text-sm">
+				<div className="border-canvas/20 mx-auto flex max-w-screen-xl flex-wrap justify-center gap-x-6 gap-y-2 border-t p-4 text-sm">
 					<PortableText value={copyright} />
 				</div>
 			)}