263 lines
6.4 KiB
TypeScript
263 lines
6.4 KiB
TypeScript
import type { Collection } from 'tinacms'
|
|
|
|
/**
|
|
* Landing Page Collection Template
|
|
*
|
|
* A complete landing page schema with multiple templates:
|
|
* - Basic page (simple content)
|
|
* - Marketing page (hero, features, CTA)
|
|
*
|
|
* Usage:
|
|
* import { landingPageCollection } from './collections/landing-page'
|
|
*
|
|
* export default defineConfig({
|
|
* schema: {
|
|
* collections: [landingPageCollection]
|
|
* }
|
|
* })
|
|
*
|
|
* When using templates, documents must include _template field:
|
|
* ---
|
|
* _template: marketing
|
|
* title: Homepage
|
|
* ---
|
|
*/
|
|
export const landingPageCollection: Collection = {
|
|
name: 'page',
|
|
label: 'Landing Pages',
|
|
path: 'content/pages',
|
|
format: 'mdx',
|
|
templates: [
|
|
{
|
|
name: 'basic',
|
|
label: 'Basic Page',
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'title',
|
|
label: 'Title',
|
|
isTitle: true,
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'description',
|
|
label: 'Description',
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
},
|
|
{
|
|
type: 'rich-text',
|
|
name: 'body',
|
|
label: 'Body',
|
|
isBody: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'marketing',
|
|
label: 'Marketing Page',
|
|
ui: {
|
|
defaultItem: {
|
|
hero: {
|
|
buttonText: 'Get Started',
|
|
},
|
|
features: [],
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'title',
|
|
label: 'Title',
|
|
isTitle: true,
|
|
required: true,
|
|
description: 'Page title (used in browser tab and SEO)',
|
|
},
|
|
{
|
|
type: 'object',
|
|
name: 'hero',
|
|
label: 'Hero Section',
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'headline',
|
|
label: 'Headline',
|
|
required: true,
|
|
description: 'Main headline (45-65 characters works best)',
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'subheadline',
|
|
label: 'Subheadline',
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
description: 'Supporting text below headline (150-200 characters)',
|
|
},
|
|
{
|
|
type: 'image',
|
|
name: 'image',
|
|
label: 'Hero Image',
|
|
description: 'Main hero image (1920x1080px recommended)',
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'buttonText',
|
|
label: 'Button Text',
|
|
description: 'Call-to-action button text',
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'buttonUrl',
|
|
label: 'Button URL',
|
|
description: 'Where the CTA button links to',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'object',
|
|
name: 'features',
|
|
label: 'Features Section',
|
|
list: true,
|
|
ui: {
|
|
itemProps: (item) => ({
|
|
label: item?.title || 'New Feature',
|
|
}),
|
|
},
|
|
fields: [
|
|
{
|
|
type: 'image',
|
|
name: 'icon',
|
|
label: 'Icon',
|
|
description: 'Feature icon (SVG or PNG, 64x64px)',
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'title',
|
|
label: 'Title',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'description',
|
|
label: 'Description',
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'object',
|
|
name: 'testimonials',
|
|
label: 'Testimonials',
|
|
list: true,
|
|
ui: {
|
|
itemProps: (item) => ({
|
|
label: item?.author || 'New Testimonial',
|
|
}),
|
|
},
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'quote',
|
|
label: 'Quote',
|
|
required: true,
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'author',
|
|
label: 'Author',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'role',
|
|
label: 'Role',
|
|
description: 'Job title and company',
|
|
},
|
|
{
|
|
type: 'image',
|
|
name: 'avatar',
|
|
label: 'Avatar',
|
|
description: 'Author photo (square, 200x200px)',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'object',
|
|
name: 'cta',
|
|
label: 'Call to Action',
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'headline',
|
|
label: 'Headline',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'text',
|
|
label: 'Supporting Text',
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'buttonText',
|
|
label: 'Button Text',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'buttonUrl',
|
|
label: 'Button URL',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'object',
|
|
name: 'seo',
|
|
label: 'SEO Metadata',
|
|
fields: [
|
|
{
|
|
type: 'string',
|
|
name: 'metaTitle',
|
|
label: 'Meta Title',
|
|
description: 'SEO title (leave blank to use page title)',
|
|
},
|
|
{
|
|
type: 'string',
|
|
name: 'metaDescription',
|
|
label: 'Meta Description',
|
|
ui: {
|
|
component: 'textarea',
|
|
},
|
|
description: 'SEO description (150-160 characters)',
|
|
},
|
|
{
|
|
type: 'image',
|
|
name: 'ogImage',
|
|
label: 'Open Graph Image',
|
|
description: 'Image for social media sharing (1200x630px)',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
ui: {
|
|
router: ({ document }) => {
|
|
// Root pages like /about, /pricing
|
|
return `/${document._sys.filename}`
|
|
},
|
|
},
|
|
}
|