@majordigital/create-acorn 1.3.6 → 1.4.1

package/bin/create-acorn.mjs

@@ -335,6 +335,144 @@ async function setupStoryblok(projectName) {
   console.log('');
 }
 
+async function setupDato(projectName) {
+  console.log('Setting up DatoCMS...');
+  console.log('');
+
+  const datoProjectName = await ask('Enter your DatoCMS project name', projectName);
+  console.log('');
+
+  // Install DatoCMS dependencies
+  console.log('Installing DatoCMS dependencies...');
+  await runCommand('npm', ['install', '--legacy-peer-deps',
+    '@datocms/cda-client', 'react-datocms',
+    'datocms-structured-text-to-plain-text', 'datocms-structured-text-utils',
+    'graphql', 'graphql-request', 'dotenv'
+  ]);
+  await runCommand('npm', ['install', '--save-dev', '--legacy-peer-deps',
+    '@datocms/cli', '@graphql-codegen/cli', '@graphql-codegen/typescript',
+    '@graphql-codegen/typescript-operations', '@graphql-codegen/typed-document-node',
+    '@graphql-typed-document-node/core', 'tsconfig-paths', 'tsx', 'cross-env'
+  ]);
+  console.log('');
+
+  // Update next.config.ts — replace Prismic image patterns with DatoCMS
+  const nextConfigPath = join(process.cwd(), 'next.config.ts');
+  try {
+    let config = readFileSync(nextConfigPath, 'utf-8');
+    config = config.replace(
+      /remotePatterns:\s*\[[\s\S]*?\],/,
+      `remotePatterns: [
+			{
+				protocol: 'https',
+				hostname: 'www.datocms-assets.com',
+				port: '',
+				pathname: '/**',
+			},
+		],`
+    );
+    writeFileSync(nextConfigPath, config);
+    console.log('Updated next.config.ts with DatoCMS image domain.');
+  } catch {
+    console.log('Warning: Could not update next.config.ts image patterns.');
+  }
+
+  // Copy standardised DatoCMS API layer from dato/dato-api/
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const datoSrcDir = join(__dirname, '..', 'dato', 'dato-api');
+
+  // Copy src/lib/datocms/ (client, blocks, helpers, fetch, etc.)
+  const targetLibDatocms = join(process.cwd(), 'src', 'lib', 'datocms');
+  cpSync(join(datoSrcDir, 'src', 'lib', 'datocms'), targetLibDatocms, { recursive: true });
+  console.log('Copied DatoCMS API layer (lib/datocms/).');
+
+  // Copy src/lib/ utilities (config, buildCache, getMetadata, utils)
+  const libFiles = ['config.ts', 'buildCache.ts', 'getMetadata.ts', 'utils.ts'];
+  for (const file of libFiles) {
+    cpSync(join(datoSrcDir, 'src', 'lib', file), join(process.cwd(), 'src', 'lib', file));
+  }
+  console.log('Copied utility files (config, buildCache, getMetadata, utils).');
+
+  // Copy src/generated/ placeholder files
+  const targetGenerated = join(process.cwd(), 'src', 'generated');
+  mkdirSync(targetGenerated, { recursive: true });
+  cpSync(join(datoSrcDir, 'src', 'generated'), targetGenerated, { recursive: true });
+  console.log('Copied generated placeholder files.');
+
+  // Copy graphql/ queries directory
+  const targetGraphql = join(process.cwd(), 'graphql');
+  cpSync(join(datoSrcDir, 'graphql'), targetGraphql, { recursive: true });
+  console.log('Copied GraphQL queries and fragments.');
+
+  // Copy graphql.config.yml
+  cpSync(join(datoSrcDir, 'graphql.config.yml'), join(process.cwd(), 'graphql.config.yml'));
+  console.log('Copied graphql.config.yml.');
+
+  // Copy scripts/buildLinkIndex.ts
+  const targetScripts = join(process.cwd(), 'scripts');
+  mkdirSync(targetScripts, { recursive: true });
+  cpSync(join(datoSrcDir, 'scripts', 'buildLinkIndex.ts'), join(targetScripts, 'buildLinkIndex.ts'));
+  console.log('Copied build scripts.');
+
+  // Update package.json scripts for DatoCMS
+  const pkgPath = join(process.cwd(), 'package.json');
+  try {
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    if (!pkg.scripts) pkg.scripts = {};
+    pkg.scripts.dev = 'next dev --turbo';
+    pkg.scripts.prebuild = 'tsx -r tsconfig-paths/register scripts/buildLinkIndex.ts';
+    pkg.scripts.build = 'next build';
+    pkg.scripts['build-stats'] = 'cross-env ANALYZE=true npm run build';
+    pkg.scripts.start = 'next start';
+    pkg.scripts.preview = 'next build && next start';
+    pkg.scripts.prepare = 'lefthook install || true';
+    pkg.scripts.check = 'biome lint . --skip suspicious/noConsole && biome format .';
+    pkg.scripts.fix = 'biome lint . --write --skip suspicious/noConsole && biome format . --write';
+    pkg.scripts['check:prod'] = 'biome check .';
+    pkg.scripts['fix:prod'] = 'biome check . --write';
+    pkg.scripts['generate-types'] = 'graphql-codegen --config graphql.config.yml';
+    pkg.scripts['check-types'] = 'tsc --noEmit';
+    writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+    console.log('Updated package.json scripts for DatoCMS.');
+  } catch {
+    console.log('Warning: Could not update package.json scripts.');
+  }
+
+  // Update .env.example with DatoCMS variables
+  const envExamplePath = join(process.cwd(), '.env.example');
+  try {
+    writeFileSync(envExamplePath, `NEXT_DATOCMS_API_TOKEN=
+DATO_API_TOKEN=
+NEXT_DATOCMS_ENVIRONMENT=draft
+`);
+    console.log('Updated .env.example with DatoCMS variables.');
+  } catch {
+    console.log('Warning: Could not update .env.example.');
+  }
+
+  console.log('');
+  console.log('=== DatoCMS Setup Complete ===');
+  console.log('');
+  console.log('=== Next Steps ===');
+  console.log('');
+  console.log('  1. Go to https://www.datocms.com/dashboard and create a project (or use an existing one)');
+  console.log('');
+  console.log('  2. Get your API token from Settings > API Tokens');
+  console.log('');
+  console.log('  3. Add your token to .env.local:');
+  console.log('     NEXT_DATOCMS_API_TOKEN=your_api_token');
+  console.log('     NEXT_DATOCMS_ENVIRONMENT=draft');
+  console.log('');
+  console.log('  4. Create your models in the DatoCMS dashboard');
+  console.log('');
+  console.log('  5. Generate TypeScript types from your schema:');
+  console.log('     npm run generate-types');
+  console.log('');
+  console.log('  6. Start your dev server:');
+  console.log('     npm run dev');
+  console.log('');
+}
+
 function generateReadme(projectName, cms) {
   const title = projectName || 'Project Title';
 
@@ -459,9 +597,9 @@ This website is built using the [NextJS](https://nextjs.org/) framework, utilisi
     Create \`.env.local\` file in the root directory:
 
     \`\`\`env
-    DATOCMS_API_TOKEN=your_api_token
-    DATOCMS_PREVIEW_SECRET=your_preview_secret
-    SITE_URL=http://localhost:3000
+    NEXT_DATOCMS_API_TOKEN=your_graphql_token
+    DATO_API_TOKEN=your_readonly_token
+    NEXT_DATOCMS_ENVIRONMENT="draft"
     \`\`\`
 
 3. **Start the development server**
@@ -556,9 +694,10 @@ INTERNAL_PREVIEW_API_KEY=
 NEXT_PUBLIC_SITE_URL=
 NEXT_PUBLIC_HUBSPOT_PORTAL_ID=
 `,
-    dato: `DATOCMS_API_TOKEN=
-DATOCMS_PREVIEW_SECRET=
-SITE_URL=
+    dato: `NEXT_DATOCMS_API_TOKEN=
+DATO_API_TOKEN=
+NEXT_DATOCMS_ENVIRONMENT=draft
+NEXT_PUBLIC_SITE_URL=
 `,
   };
   writeFileSync(join(process.cwd(), '.env.example'), envExamples[selection.key]);
@@ -573,10 +712,8 @@ SITE_URL=
     await setupPrismic(projectDir);
   } else if (selection.key === 'storyblok') {
     await setupStoryblok(projectDir);
-  } else {
-    console.log(`CMS preset ${selection.label} scaffolding is coming next.`);
-    console.log('This run only confirms selection for non-Prismic options.');
-    console.log('');
+  } else if (selection.key === 'dato') {
+    await setupDato(projectDir);
   }
 }
 

package/dato/dato-api/graphql/queries/components/button.ts

@@ -0,0 +1,10 @@
+import { gql } from 'graphql-request';
+
+export const BUTTON_FRAGMENT = gql`
+	fragment ButtonRecordFragment on ButtonRecord {
+		id
+		text
+		variant
+		link
+	}
+`;

package/dato/dato-api/graphql/queries/components/hero.ts

@@ -0,0 +1,31 @@
+import { gql } from 'graphql-request';
+
+export const HERO_FRAGMENT = gql`
+	fragment HeroRecordFragment on HeroRecord {
+		id
+		heading
+		eyebrow
+		heroContent: content
+		layout
+		theme
+		heroImage: image {
+			id
+			url
+			alt
+			responsiveImage(imgixParams: { w: 800, ar: "7:6", fit: crop }) {
+				...responsiveImageFragment
+			}
+		}
+		heroImageFull: image {
+			id
+			url
+			alt
+			responsiveImage(imgixParams: { w: 1920, ar: "7:5" }) {
+				...responsiveImageFragment
+			}
+		}
+		actions {
+			...ButtonRecordFragment
+		}
+	}
+`;

package/dato/dato-api/graphql/queries/fields/metatags.ts

@@ -0,0 +1,9 @@
+import { gql } from 'graphql-request';
+
+export const META_TAGS_FRAGMENT = gql`
+	fragment metaTagsFragment on Tag {
+		attributes
+		content
+		tag
+	}
+`;

package/dato/dato-api/graphql/queries/fields/responsiveimage.ts

@@ -0,0 +1,16 @@
+import { gql } from 'graphql-request';
+
+export const RESPONSIVE_IMAGE_FRAGMENT = gql`
+	fragment responsiveImageFragment on ResponsiveImage {
+		srcSet
+		webpSrcSet
+		sizes
+		src
+		width
+		height
+		aspectRatio
+		alt
+		title
+		base64
+	}
+`;

package/dato/dato-api/graphql/queries/fields/target.ts

@@ -0,0 +1,22 @@
+import { gql } from 'graphql-request';
+
+export const TARGET_FRAGMENT = gql`
+	fragment targetFragment on PageRecord {
+		__typename
+		id
+		heading
+		slug
+		parentPage {
+			id
+			slug
+			parentPage {
+				id
+				slug
+				parentPage {
+					id
+					slug
+				}
+			}
+		}
+	}
+`;

package/dato/dato-api/graphql/queries/models/layout.ts

@@ -0,0 +1,43 @@
+import { gql } from 'graphql-request';
+
+import { RESPONSIVE_IMAGE_FRAGMENT } from '../fields/responsiveimage';
+import { TARGET_FRAGMENT } from '../fields/target';
+
+/**
+ * Layout Query
+ *
+ * Fetches global layout data (navigation, footer, etc).
+ * Update this query to match your DatoCMS layout model.
+ */
+export const LAYOUT_QUERY = gql`
+	${TARGET_FRAGMENT}
+	${RESPONSIVE_IMAGE_FRAGMENT}
+
+	query Layout {
+		layout {
+			id
+			navigation {
+				__typename
+				... on MenuItemRecord {
+					id
+					heading
+					target {
+						... on PageRecord {
+							...targetFragment
+						}
+					}
+				}
+			}
+			footerNavigation {
+				id
+				heading
+				target {
+					... on PageRecord {
+						...targetFragment
+					}
+				}
+			}
+			copyright
+		}
+	}
+`;

package/dato/dato-api/graphql/queries/models/page.ts

@@ -0,0 +1,47 @@
+import { gql } from 'graphql-request';
+
+import { BUTTON_FRAGMENT } from '../components/button';
+import { HERO_FRAGMENT } from '../components/hero';
+import { META_TAGS_FRAGMENT } from '../fields/metatags';
+import { RESPONSIVE_IMAGE_FRAGMENT } from '../fields/responsiveimage';
+import { TARGET_FRAGMENT } from '../fields/target';
+
+/**
+ * Page Query
+ *
+ * Fetches a single page by slug with all body blocks.
+ * Add more component fragments as you create them.
+ */
+export const PAGE_QUERY = gql`
+	${RESPONSIVE_IMAGE_FRAGMENT}
+	${META_TAGS_FRAGMENT}
+	${TARGET_FRAGMENT}
+	${BUTTON_FRAGMENT}
+	${HERO_FRAGMENT}
+
+	query Page($slug: String) {
+		site: _site {
+			favicon: faviconMetaTags {
+				...metaTagsFragment
+			}
+		}
+		page(filter: { slug: { eq: $slug } }) {
+			id
+			heading
+			description
+			parentPage {
+				...targetFragment
+			}
+			slug
+			body {
+				__typename
+				... on HeroRecord {
+					...HeroRecordFragment
+				}
+			}
+			seo: _seoMetaTags {
+				...metaTagsFragment
+			}
+		}
+	}
+`;

package/dato/dato-api/graphql/queries/models/slugs.ts

@@ -0,0 +1,37 @@
+import { gql } from 'graphql-request';
+
+import { TARGET_FRAGMENT } from '../fields/target';
+
+export const SLUGS_FRAGMENT = gql`
+	${TARGET_FRAGMENT}
+
+	query AllSlugs {
+		allPages(first: 100) {
+			...targetFragment
+		}
+		allCaseStudies(first: 100) {
+			id
+			slug
+		}
+		allLegalPages(first: 100) {
+			id
+			slug
+			download {
+				id
+				url
+			}
+		}
+		allPosts(first: 100) {
+			id
+			slug
+		}
+		caseStudiesListing {
+			id
+			slug
+		}
+		postListing {
+			id
+			slug
+		}
+	}
+`;

package/dato/dato-api/graphql.config.yml

@@ -0,0 +1,25 @@
+schema:
+  - https://graphql.datocms.com:
+      headers:
+        Authorization: "Bearer ${DATOCMS_API_TOKEN}"
+        X-Exclude-Invalid: true
+documents: ['graphql/queries/**/*.{ts,tsx}']
+generates:
+    graphql/generated.ts:
+        plugins:
+            - typescript
+            - typescript-operations
+            - typed-document-node
+        config:
+            strictScalars: true
+            scalars:
+                BooleanType: boolean
+                CustomData: Record<string, unknown>
+                Date: string
+                DateTime: string
+                FloatType: number
+                IntType: number
+                ItemId: string
+                JsonField: unknown
+                MetaTagAttributes: Record<string, string>
+                UploadId: string

package/dato/dato-api/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "dato-api",
+	"version": "1.0.0",
+	"private": true,
+	"scripts": {
+		"generate-types": "graphql-codegen --config graphql.config.yml",
+		"prebuild": "tsx -r tsconfig-paths/register scripts/buildLinkIndex.ts"
+	},
+	"dependencies": {
+		"@datocms/cda-client": "^0.2.7",
+		"datocms-structured-text-to-plain-text": "^5.1.7",
+		"datocms-structured-text-utils": "^5.1.7",
+		"graphql": "^16.12.0",
+		"graphql-request": "^7.4.0",
+		"react-datocms": "^7.2.14"
+	},
+	"devDependencies": {
+		"@datocms/cli": "^2.0.23",
+		"@graphql-codegen/cli": "^5.0.7",
+		"@graphql-codegen/typed-document-node": "^5.1.2",
+		"@graphql-codegen/typescript": "^4.1.6",
+		"@graphql-codegen/typescript-operations": "^4.6.1",
+		"@graphql-typed-document-node/core": "^3.2.0",
+		"tsconfig-paths": "^4.2.0",
+		"tsx": "^4.21.0"
+	}
+}

package/dato/dato-api/scripts/buildLinkIndex.ts

@@ -0,0 +1,149 @@
+import 'dotenv/config';
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+// Import your generated types:
+// import type { AllSlugsQuery } from 'graphql/generated';
+import { SLUGS_FRAGMENT } from 'graphql/queries/models/slugs';
+
+import { performRequest } from '@/lib/datocms';
+
+type PageNode = {
+	id: string;
+	slug: string;
+	parentPage?: PageNode | { id: string } | null;
+};
+
+// Replace with your generated AllSlugsQuery type:
+type AllSlugsQuery = {
+	allPages: PageNode[];
+	allCaseStudies: Array<{ id: string; slug: string }>;
+	allLegalPages: Array<{
+		id: string;
+		slug: string;
+		download?: { id: string; url: string } | null;
+	}>;
+	allPosts: Array<{ id: string; slug: string }>;
+};
+
+function buildPagePathMap(pages: PageNode[]) {
+	const byId = new Map<string, PageNode>(pages.map((p) => [p.id, p]));
+	const cache = new Map<string, string>();
+	const visiting = new Set<string>();
+
+	const resolve = (id: string): string => {
+		const hit = cache.get(id);
+		if (hit) return hit;
+
+		if (visiting.has(id)) {
+			const n = byId.get(id);
+			const fallback = `/${n?.slug ?? id}`;
+			cache.set(id, fallback);
+			return fallback;
+		}
+		visiting.add(id);
+
+		const node = byId.get(id);
+		if (!node) {
+			const unknown = `/${id}`;
+			cache.set(id, unknown);
+			visiting.delete(id);
+			return unknown;
+		}
+
+		const parts: string[] = [node.slug];
+
+		let cur: PageNode | { id: string } | null =
+			(node.parentPage as PageNode | { id: string } | null) ?? null;
+
+		while (cur) {
+			const curFull = byId.get(cur.id) ?? (cur as PageNode);
+			parts.unshift(curFull.slug);
+
+			const nextParent = (curFull.parentPage ??
+				('parentPage' in cur && typeof cur.parentPage === 'object'
+					? cur.parentPage
+					: null)) as PageNode | { id: string } | null;
+
+			if (!nextParent) break;
+			cur =
+				(nextParent && byId.get(nextParent.id)) ||
+				(nextParent as PageNode);
+		}
+
+		const full = `/${parts.join('/')}`;
+		cache.set(id, full);
+		visiting.delete(id);
+		return full;
+	};
+
+	for (const p of pages) {
+		resolve(p.id);
+	}
+
+	return cache as Map<string, string>;
+}
+
+(async () => {
+	const data = await performRequest<AllSlugsQuery>(SLUGS_FRAGMENT);
+
+	const pagePathMap = buildPagePathMap(data.allPages);
+
+	type IdKey = string;
+	const idIndex: Record<IdKey, string> = {};
+	const pathIndex: Record<string, { id: string; model: string }> = {};
+
+	// Pages (hierarchical)
+	Array.from(pagePathMap.entries()).forEach(([id, full]) => {
+		idIndex[`page:${id}`] = full;
+		pathIndex[full] = { id, model: 'page' };
+	});
+
+	// Case studies (flat)
+	data.allCaseStudies.forEach((cs) => {
+		const full = `/case-studies/${cs.slug}`;
+		idIndex[`caseStudy:${cs.id}`] = full;
+		pathIndex[full] = { id: cs.id, model: 'caseStudy' };
+	});
+
+	// Legal pages (flat)
+	data.allLegalPages.forEach((lp) => {
+		const full = `/legal/${lp.slug}`;
+		idIndex[`legal:${lp.id}`] = full;
+		pathIndex[full] = { id: lp.id, model: 'legal' };
+	});
+
+	// Blog posts (flat)
+	data.allPosts.forEach((post) => {
+		const full = `/news/${post.slug}`;
+		idIndex[`post:${post.id}`] = full;
+		pathIndex[full] = { id: post.id, model: 'post' };
+	});
+
+	const paths = Object.keys(pathIndex).sort();
+
+	const outDir = path.join(process.cwd(), 'src', 'generated');
+	fs.mkdirSync(outDir, { recursive: true });
+	fs.writeFileSync(
+		path.join(outDir, 'idIndex.json'),
+		JSON.stringify(idIndex, null, 2)
+	);
+	fs.writeFileSync(
+		path.join(outDir, 'pathIndex.json'),
+		JSON.stringify(pathIndex, null, 2)
+	);
+	fs.writeFileSync(
+		path.join(outDir, 'paths.json'),
+		JSON.stringify(paths, null, 2)
+	);
+
+	// biome-ignore lint/suspicious/noConsoleLog: Build script output
+	console.log(
+		`Wrote ${Object.keys(idIndex).length} ids and ${paths.length} paths to src/generated/*.json`
+	);
+})().catch((err) => {
+	// biome-ignore lint/suspicious/noConsoleLog: Build script output
+	console.error('buildLinkIndex failed:', err);
+	process.exit(1);
+});

package/dato/dato-api/src/generated/idIndex.json

@@ -0,0 +1 @@
+{}

package/dato/dato-api/src/generated/pathIndex.json

@@ -0,0 +1 @@
+{}

package/dato/dato-api/src/generated/paths.json

@@ -0,0 +1 @@
+[]

package/dato/dato-api/src/lib/buildCache.ts

@@ -0,0 +1,28 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const BUILD_ID_FILE = path.join(process.cwd(), '.build-id');
+
+/**
+ * Returns the build cache ID generated at the start of the build.
+ * Falls back to current timestamp if no build ID file exists.
+ */
+export function getBuildCacheId(): number {
+	try {
+		if (fs.existsSync(BUILD_ID_FILE)) {
+			const storedId = fs.readFileSync(BUILD_ID_FILE, 'utf8').trim();
+			const buildId = parseInt(storedId, 10);
+
+			if (Number.isNaN(buildId)) {
+				throw new Error('Stored build ID is not a valid number');
+			}
+
+			return buildId;
+		}
+	} catch (error) {
+		// biome-ignore lint/suspicious/noConsole: error logging
+		console.warn('Error reading build ID:', error);
+	}
+
+	return Date.now();
+}

package/dato/dato-api/src/lib/config.ts

@@ -0,0 +1,7 @@
+export const siteConfig = {
+	siteName: 'Project Name',
+	title: 'Project Title',
+	description: 'Project description',
+	locale: 'en',
+	url: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+};

package/dato/dato-api/src/lib/datocms/blocks.tsx

@@ -0,0 +1,62 @@
+/**
+ * DatoCMS Block Component Mapping
+ *
+ * Maps DatoCMS record types to React components using __typename.
+ * Add your block types and component imports as you create them.
+ *
+ * Example usage in a page:
+ *   import Blocks from '@/lib/datocms/blocks';
+ *   <Blocks blocks={page.body} />
+ */
+
+// Import your generated types:
+// import type { HeroRecord, TextGridRecord } from 'graphql/generated';
+
+// Import your components:
+// import Hero from '@/ui/sections/Hero';
+// import TextGrid from '@/ui/sections/TextGrid';
+
+// Define your block union type:
+// export type Block = HeroRecord | TextGridRecord;
+
+// biome-ignore lint/suspicious/noExplicitAny: Block type should be replaced with generated types
+type Block = { __typename: string; id: string; [key: string]: any };
+
+function MissingBlock({ __typename }: { __typename: string }) {
+	return (
+		<div
+			style={{
+				padding: '2rem',
+				background: '#fff3cd',
+				border: '1px solid #ffc107',
+				borderRadius: '0.5rem',
+				margin: '1rem 0',
+			}}
+		>
+			<strong>Missing block component:</strong> {__typename}
+		</div>
+	);
+}
+
+export default function Blocks({ blocks }: { blocks: Block[] }) {
+	return (
+		<>
+			{blocks.map((block) => {
+				switch (block.__typename) {
+					// Add your block mappings here:
+					// case 'HeroRecord':
+					// 	return <Hero key={block.id} {...block} />;
+					// case 'TextGridRecord':
+					// 	return <TextGrid key={block.id} {...block} />;
+					default:
+						return process.env.NODE_ENV === 'development' ? (
+							<MissingBlock
+								key={block.id}
+								__typename={block.__typename}
+							/>
+						) : null;
+				}
+			})}
+		</>
+	);
+}

package/dato/dato-api/src/lib/datocms/fetch/fetchPaths.ts

@@ -0,0 +1,78 @@
+/**
+ * DatoCMS Path Fetching
+ *
+ * Fetches all content slugs from DatoCMS for dynamic route generation.
+ * Update the query and types to match your DatoCMS schema.
+ */
+
+// Import your generated types:
+// import type { AllSlugsQuery } from 'graphql/generated';
+import { SLUGS_FRAGMENT } from 'graphql/queries/models/slugs';
+
+import { performRequest } from '..';
+
+export interface Paths {
+	slug: string[];
+}
+
+// Replace with your generated AllSlugsQuery type:
+type AllSlugsQuery = {
+	allPages: Array<{
+		slug: string;
+		parentPage?: { slug: string } | null;
+	}>;
+	allCaseStudies: Array<{ slug: string }>;
+	allLegalPages: Array<{ slug: string; download?: { id: string } | null }>;
+	allPosts: Array<{ slug: string }>;
+};
+
+export const fetchPaths = async (
+	filter: 'all' | 'page' | 'case-studies' | 'legal' | 'post'
+): Promise<Paths[]> => {
+	const data = await performRequest<AllSlugsQuery>(SLUGS_FRAGMENT);
+
+	let paths: Paths[] = [];
+
+	if (filter === 'all' || !filter) {
+		paths = [
+			...data.allPages.map((page) =>
+				page.parentPage?.slug
+					? {
+							slug: [page.parentPage.slug, page.slug],
+						}
+					: { slug: [page.slug] }
+			),
+			...data.allCaseStudies.map((caseStudy) => ({
+				slug: ['case-studies', caseStudy.slug],
+			})),
+			...data.allLegalPages
+				.filter((legalPage) => !legalPage?.download)
+				.map((legalPage) => ({
+					slug: ['legal', legalPage.slug],
+				})),
+			...data.allPosts.map((post) => ({ slug: ['news', post.slug] })),
+		];
+	} else if (filter === 'page') {
+		paths = data.allPages.map((page) =>
+			page.parentPage?.slug
+				? {
+						slug: [page.parentPage.slug, page.slug],
+					}
+				: { slug: [page.slug] }
+		);
+	} else if (filter === 'case-studies') {
+		paths = data.allCaseStudies.map((caseStudy) => ({
+			slug: ['case-studies', caseStudy.slug],
+		}));
+	} else if (filter === 'legal') {
+		paths = data.allLegalPages
+			.filter((legalPage) => !legalPage?.download)
+			.map((legalPage) => ({
+				slug: ['legal', legalPage.slug],
+			}));
+	} else if (filter === 'post') {
+		paths = data.allPosts.map((post) => ({ slug: ['news', post.slug] }));
+	}
+
+	return paths;
+};

package/dato/dato-api/src/lib/datocms/helpers.ts

@@ -0,0 +1,54 @@
+/**
+ * DatoCMS Page Helpers
+ *
+ * Utilities for resolving hierarchical page slugs.
+ * Update the types below to match your generated types from graphql-codegen.
+ */
+
+// Import your generated types:
+// import type { PageRecord, CaseStudiesListingRecord, PostListingRecord } from 'graphql/generated';
+
+// Replace with your actual generated types:
+type PageRecord = {
+	__typename: 'PageRecord';
+	slug: string;
+	parentPage?: PageRecord | null;
+};
+
+type CaseStudiesListingRecord = {
+	__typename: 'CaseStudiesListingRecord';
+	slug: string;
+};
+
+type PostListingRecord = {
+	__typename: 'PostListingRecord';
+	slug: string;
+};
+
+export type PageSlugTypes =
+	| PageRecord
+	| CaseStudiesListingRecord
+	| PostListingRecord;
+
+/**
+ * Recursively builds the full URL path for a page by walking up the parent chain.
+ */
+export const getPageSlug = (target: PageSlugTypes) => {
+	if (!target) return '/';
+
+	if (target.__typename !== 'PageRecord') {
+		return `/${target.slug}`;
+	}
+
+	const parentSlugs: string[] = [];
+	let current = target.parentPage;
+	while (current?.slug) {
+		parentSlugs.unshift(current.slug);
+		current = current.parentPage;
+	}
+	if (parentSlugs.length > 0) {
+		return `/${parentSlugs.join('/')}/${target.slug}`;
+	}
+
+	return `/${target.slug}`;
+};

package/dato/dato-api/src/lib/datocms/index.ts

@@ -0,0 +1,27 @@
+import { executeQuery } from '@datocms/cda-client';
+import { cache } from 'react';
+
+const dedupedExecuteQuery = cache(
+	async ([query, variables]: [string, Record<string, unknown>]) => {
+		const token = process.env.NEXT_DATOCMS_API_TOKEN;
+
+		if (!token) {
+			throw new Error(
+				'NEXT_DATOCMS_API_TOKEN environment variable is not set'
+			);
+		}
+
+		return executeQuery(query, {
+			token,
+			includeDrafts: process.env.NEXT_DATOCMS_ENVIRONMENT === 'draft',
+			variables,
+		});
+	}
+);
+
+export function performRequest<T, V = Record<string, unknown>>(
+	query: string,
+	variables?: V
+): Promise<T> {
+	return dedupedExecuteQuery([query, variables || {}]) as Promise<T>;
+}

package/dato/dato-api/src/lib/datocms/resolveBetterLink.ts

@@ -0,0 +1,145 @@
+/**
+ * DatoCMS BetterLink Resolution
+ *
+ * Resolves DatoCMS BetterLink plugin fields to actual URLs using
+ * build-time generated indexes (idIndex, pathIndex).
+ *
+ * Requires: npm run prebuild to generate src/generated/*.json
+ */
+
+import idIndex from '@/generated/idIndex.json';
+import pathIndex from '@/generated/pathIndex.json';
+
+type BetterLinkType = 'record' | 'asset' | 'url' | 'tel' | 'email';
+
+type BetterLinkRecord = {
+	id: string;
+	title: string;
+	cms_url: string;
+	slug: string;
+	status: string;
+	url: string;
+};
+
+type BetterLinkFormatted = {
+	isValid: boolean;
+	type: BetterLinkType;
+	text: string;
+	ariaLabel: string;
+	url: string;
+	target: '_self' | '_blank';
+	class: string | null;
+};
+
+export type BetterLinkField = {
+	linkType: { label: string; value: BetterLinkType };
+	record?: BetterLinkRecord;
+	asset?: Record<string, unknown>;
+	url?: Record<string, unknown>;
+	tel?: Record<string, unknown>;
+	email?: Record<string, unknown>;
+	formatted: BetterLinkFormatted;
+	open_in_new_window: boolean;
+	isValid: boolean;
+};
+
+type ResolvedLink = {
+	href: string;
+	label: string;
+	target?: '_self' | '_blank';
+	ariaLabel?: string;
+};
+
+/**
+ * Try to read a path from the idIndex regardless of how it was keyed.
+ * Supports:
+ *  - idIndex["model:id"]  (scoped)
+ *  - idIndex["id"]        (unscoped)
+ */
+function pathFromIdIndex(
+	recordId: string,
+	maybeModel?: string
+): string | undefined {
+	const idx = idIndex as Record<string, string>;
+
+	if (maybeModel) {
+		const scopedKey = `${maybeModel}:${recordId}`;
+		if (scopedKey in idx) return idx[scopedKey];
+	}
+
+	if (recordId in idx) return idx[recordId];
+
+	const suffix = `:${recordId}`;
+	const foundKey = Object.keys(idx).find((k) => k.endsWith(suffix));
+	if (foundKey) return idx[foundKey];
+
+	return undefined;
+}
+
+/**
+ * Find a path by slug if all else fails.
+ */
+function fallbackPathBySlug(slug: string): string | undefined {
+	const pidx = pathIndex as Record<string, { id: string; model: string }>;
+	const match = Object.keys(pidx).find((full) => {
+		const tail = full.split('/').filter(Boolean).pop();
+		return tail === slug;
+	});
+	return match;
+}
+
+export function resolveBetterLink(link: BetterLinkField): ResolvedLink {
+	const target = link.open_in_new_window
+		? '_blank'
+		: link.formatted?.target || '_self';
+	const label =
+		link.formatted?.text ||
+		link.record?.title ||
+		link.formatted?.ariaLabel ||
+		'Read more';
+	const ariaLabel = link.formatted?.ariaLabel || label;
+
+	switch (link.linkType.value) {
+		case 'url': {
+			const href = link.formatted?.url || '#';
+			return { href, label, target, ariaLabel };
+		}
+
+		case 'email': {
+			const raw = link.formatted?.url || '';
+			const href = raw.startsWith('mailto:') ? raw : `mailto:${raw}`;
+			return { href, label, target, ariaLabel };
+		}
+
+		case 'tel': {
+			const raw = link.formatted?.url || '';
+			const href = raw.startsWith('tel:') ? raw : `tel:${raw}`;
+			return { href, label, target, ariaLabel };
+		}
+
+		case 'asset': {
+			const href = link.formatted?.url || '#';
+			return { href, label, target, ariaLabel };
+		}
+
+		case 'record': {
+			const rec = link.record;
+			if (!rec?.id) return { href: '#', label, target, ariaLabel };
+
+			const viaId = pathFromIdIndex(rec.id);
+			if (viaId) return { href: viaId, label, target, ariaLabel };
+
+			if (rec.slug) {
+				const viaSlug = fallbackPathBySlug(rec.slug);
+				if (viaSlug)
+					return { href: viaSlug, label, target, ariaLabel };
+			}
+
+			const fallback = link.formatted?.url || '#';
+			return { href: fallback, label, target, ariaLabel };
+		}
+
+		default:
+			return { href: '#', label, target, ariaLabel };
+	}
+}

package/dato/dato-api/src/lib/getMetadata.ts

@@ -0,0 +1,124 @@
+import type { Metadata } from 'next';
+
+import { siteConfig } from '@/lib/config';
+
+interface SeoComponent {
+	title: string;
+	description: string;
+	og_title: string;
+	og_description: string;
+	og_image: string;
+	twitter_title: string;
+	twitter_description: string;
+	twitter_image: string;
+	no_index?: boolean;
+	no_follow?: boolean;
+}
+
+interface SeoFallback {
+	title?: string;
+	description?: string;
+}
+
+interface Config {
+	slug?: string;
+	twitterCreator?: string;
+	googleVerificationId?: string;
+	siteName?: string;
+	fallback?: SeoFallback;
+}
+
+export const getMetaData = (
+	data?: SeoComponent | null,
+	config?: Config
+): Metadata => {
+	if (!config && !data) {
+		return {};
+	}
+
+	const { googleVerificationId, slug, twitterCreator, siteName, fallback } =
+		config || {};
+
+	const fallbackTitle = fallback?.title || '';
+	const fallbackDescription = fallback?.description || '';
+
+	const fallbackMetadata = {
+		metadataBase: new URL(
+			process.env.NEXT_PUBLIC_APP_URL || siteConfig.url
+		),
+		title: fallbackTitle,
+		description: fallbackDescription,
+		alternates: {
+			canonical: slug,
+		},
+		openGraph: {
+			title: fallbackTitle,
+			description: fallbackDescription,
+			url: slug,
+			siteName,
+			type: 'website',
+		},
+		twitter: {
+			card: 'summary_large_image',
+			title: fallbackTitle,
+			description: fallbackDescription,
+			site: twitterCreator,
+			creator: twitterCreator,
+		},
+		...(googleVerificationId && {
+			verification: {
+				google: `google-site-verification=${googleVerificationId}`,
+			},
+		}),
+	};
+
+	if (!data) {
+		return fallbackMetadata;
+	}
+
+	const {
+		title,
+		description,
+		og_title,
+		og_description,
+		og_image,
+		twitter_title,
+		twitter_description,
+		twitter_image,
+	} = data;
+
+	const customMetaData = {
+		title: title || fallbackTitle,
+		description: description || fallbackDescription,
+		openGraph: {
+			title: og_title || title || fallbackTitle,
+			description: og_description || description || fallbackDescription,
+			url: slug,
+			siteName,
+			...(og_image && {
+				images: {
+					url: og_image,
+				},
+			}),
+			type: 'website',
+		},
+		twitter: {
+			card: 'summary_large_image',
+			title: twitter_title || og_title || title || fallbackTitle,
+			description:
+				twitter_description ||
+				og_description ||
+				description ||
+				fallbackDescription,
+			site: twitterCreator,
+			creator: twitterCreator,
+			...(twitter_image && {
+				images: {
+					url: twitter_image || og_image,
+				},
+			}),
+		},
+	};
+
+	return { ...fallbackMetadata, ...customMetaData };
+};

package/dato/dato-api/src/lib/utils.ts

@@ -0,0 +1,28 @@
+export function isDraftEnabled(draftMode?: boolean): boolean {
+	return (
+		draftMode ||
+		process.env.NODE_ENV !== 'production' ||
+		process.env.NEXT_DATOCMS_ENVIRONMENT === 'draft'
+	);
+}
+
+export const generateIDFromString = (string: string): string => {
+	return string
+		.toLowerCase()
+		.replace(/<[^>]+>/g, '')
+		.replace(/[^a-zA-Z ]/g, '')
+		.split(' ')
+		.join('-');
+};
+
+export const formatDate = (dateString: string): string => {
+	const date = new Date(dateString);
+	return date.toLocaleDateString('en-GB', {
+		month: 'short',
+		year: '2-digit',
+	});
+};
+
+export const getCurrentTimestamp = (): number => {
+	return Date.now();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majordigital/create-acorn",
-  "version": "1.3.6",
+  "version": "1.4.1",
   "description": "Interactive scaffold for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.",
   "bin": {
     "create-acorn": "bin/create-acorn.mjs",
@@ -21,6 +21,7 @@
     "bin",
     "template",
     "storyblok",
+    "dato",
     "README.md"
   ],
   "engines": {