@majordigital/create-acorn 1.0.4 → 1.0.6

package/README.md

@@ -1,92 +1,57 @@
-# Acorn
+# @majordigital/create-acorn
 
-## Introduction 📖
+Interactive CLI to scaffold a Next.js 15 project with a headless CMS and Acorn components.
 
-This is MAJOR's starter boilerplate for NextJs projects. You can either use it without a headless CMS, connect it to a headless CMS of your choice, or use the blueprints we have for our current evolving selection of headless CMS's which includes:
-
-- Primsic
-- Storyblok
-
-## Running This Project 🚀
-
-This website is built using the [NextJS](https://nextjs.org/) framework, utilising [TypeScript](https://www.typescriptlang.org/) to strongly check types/props and provide helpful intelisense, and the utility-first CSS framework [Tailwind](https://tailwindcss.com/) as the styling library.
-
-To run this project, following the following instructions:
-
-1.  **Install dependencies**
-    Navigate to the root directory.
-
-    ```bash
-    npm i
-    ```
-
-2.  **Run the website**
-    In the root directory.
-
-    ```bash
-    npm run dev
-    ```
-
-## Create Acorn CLI 🧰
-
-First iteration of an interactive CLI to scaffold a Headless CMS skeleton with Next.js 15 and Acorn components.
-
-- Default framework: Next.js 15
-- UI base: Acorn components (this repo)
-- CMS options: Prismic, Storyblok, Dato
-
-Recommended usage (once published to npm):
+## Quick Start
 
 ```bash
 npx @majordigital/create-acorn@latest
 ```
 
-Local (from this repo):
+The CLI will walk you through selecting a CMS (Prismic, Storyblok, or Dato) and scaffold a Next.js 15 project with TypeScript, Tailwind, and Biome.
 
-```bash
-npm run create
-# or
-npm run acorn
-```
-
-### Prismic setup
+## What You Get
 
-If you select Prismic, the CLI follows the official Next.js guide and runs Slice Machine init for you:
+The CLI scaffolds a complete project with:
 
-```bash
-npx @slicemachine/init@latest --repository <your-repository-name>
-```
+- **Next.js 15** with App Router, TypeScript, and Tailwind
+- **Acorn component library** — UI elements, layout components, sections, forms, typography, and navigation
+- **Biome** for linting and formatting
+- **Your chosen CMS** pre-configured
 
-You can also pass the repository name non-interactively:
+### Included Acorn Boilerplate
 
-```bash
-npm run acorn -- --cms prismic --repo my-repo
-# or
-npx @majordigital/create-acorn@latest --cms prismic --repo my-repo
+```
+src/
+├── app/          # Next.js app routes (layout, page, not-found, robots, sitemap)
+├── icons/        # SVG icons
+├── lib/          # Utilities, fonts, config, metadata helpers
+├── styles/       # Global CSS
+├── types/        # TypeScript type definitions
+└── ui/
+    ├── components/   # Nav, Card, Accordion, CTA, Quote, Form, etc.
+    ├── elements/     # Button, Chip, Tooltip, typography, form inputs
+    ├── layout/       # Container, PageSection
+    └── sections/     # Header, Footer
 ```
 
-Repository name rules: lowercase letters, numbers, and hyphens only.
-
-Or pass a non-interactive flag:
+## Non-Interactive Usage
 
 ```bash
-node bin/create-acorn.mjs --cms prismic
-node bin/create-acorn.mjs --cms storyblok
-node bin/create-acorn.mjs --cms dato
+npx @majordigital/create-acorn@latest --cms prismic --repo my-repo
+npx @majordigital/create-acorn@latest --cms storyblok
+npx @majordigital/create-acorn@latest --cms dato
 ```
 
-Notes:
-- This first iteration collects your CMS choice only and prints the selection. In the next iteration, the CLI will scaffold the appropriate folder structure and config for your chosen CMS.
-- To expose this CLI as global commands (`create-acorn` and `major-acorn`) via `npm create`/`npx`, remove `"private": true` and publish to npm.
-- While it’s technically possible to trigger prompts on `npm install major-acorn` via a `postinstall` script, it’s discouraged as it surprises installs and breaks CI. The recommended flow is `npm create acorn` or `npx major-acorn` to start a new project.
+## Prismic Setup
 
-## Contacts 🧑‍💻
+If you select Prismic, the CLI runs Slice Machine init and connects to your new or existing repository.
 
-The primary contact for this project is [Davs Howard](mailto:davs@majordigital.com).
+Repository name rules: lowercase letters, numbers, and hyphens only.
 
-### Roadmap
+After setup:
 
-- [Commitizen](https://github.com/commitizen/cz-cli)
-- Integration and E2E testing
-- Storybook
-- GitHub workflows
+1. Start Slice Machine: `npm run slicemachine`
+2. Create your custom types at http://localhost:9999
+3. Push your custom types to Prismic
+4. Start your dev server: `npm run dev`

package/bin/create-acorn.mjs

@@ -3,8 +3,9 @@
 import readline from 'node:readline';
 import { argv, exit } from 'node:process';
 import { spawn } from 'node:child_process';
-import { basename, join } from 'node:path';
-import { readFileSync, writeFileSync } from 'node:fs';
+import { basename, join, dirname } from 'node:path';
+import { readFileSync, writeFileSync, cpSync, rmSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 
 const CMS_CHOICES = [
   { key: 'prismic', label: 'Prismic' },
@@ -96,6 +97,31 @@ async function scaffoldNextApp() {
   console.log('Next.js project scaffolded successfully.');
   console.log('');
 
+  // Remove postcss config generated by create-next-app (not needed with Tailwind v4)
+  try { rmSync(join(process.cwd(), 'postcss.config.mjs')); } catch {}
+
+  // Copy Acorn template files (src/, public/, config files) over the Next.js scaffold
+  console.log('Copying Acorn boilerplate...');
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const templateDir = join(__dirname, '..', 'template');
+  cpSync(templateDir, process.cwd(), { recursive: true, force: true });
+  console.log('Acorn components and config copied successfully.');
+  console.log('');
+
+  // Install Acorn dependencies
+  console.log('Installing Acorn dependencies...');
+  await runCommand('npm', ['install', '--legacy-peer-deps',
+    '@headlessui/react', '@headlessui/tailwindcss', '@heroicons/react',
+    '@hookform/error-message', '@hookform/resolvers',
+    '@next/bundle-analyzer', 'clsx', 'next-seo',
+    'react-accessible-accordion', 'react-hook-form', 'zod'
+  ]);
+  await runCommand('npm', ['install', '--save-dev', '--legacy-peer-deps',
+    '@svgr/webpack', '@types/lodash.get'
+  ]);
+  console.log('Acorn dependencies installed.');
+  console.log('');
+
   console.log('Installing Biome for linting...');
   await runCommand('npm', ['install', '--save-dev', '--save-exact', '@biomejs/biome']);
   await runCommand('npx', ['@biomejs/biome', 'init']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majordigital/create-acorn",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Interactive scaffold for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.",
   "bin": {
     "create-acorn": "bin/create-acorn.mjs",
@@ -19,6 +19,7 @@
   },
   "files": [
     "bin",
+    "template",
     "README.md"
   ],
   "engines": {

package/template/next.config.js

@@ -0,0 +1,48 @@
+/** @type {import('next').NextConfig} */
+
+const baseConfig = {
+	poweredByHeader: false,
+	reactStrictMode: true,
+	trailingSlash: false,
+
+	turbopack: {
+		rules: {
+			'*.svg': {
+				loaders: ['@svgr/webpack'],
+				as: '*.js',
+			},
+		},
+	},
+
+	webpack(config) {
+		config.module.rules.push({
+			test: /\.svg$/,
+			use: ['@svgr/webpack'],
+		});
+
+		return config;
+	},
+	
+	images: {
+		remotePatterns: [
+			{
+				protocol: 'https',
+				hostname: 'images.prismic.io',
+				port: '',
+				pathname: '/**',
+			},
+			{
+				protocol: 'https',
+				hostname: 'io.prismic.preview',
+				port: '',
+				pathname: '/**',
+			},
+		],
+	},
+};
+
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+	enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer(baseConfig);

package/template/src/app/layout.tsx

@@ -0,0 +1,60 @@
+import '@/styles/globals.css';
+
+import clsx from 'clsx';
+import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+
+import { siteConfig } from '@/lib/config';
+import { fonts } from '@/lib/fonts';
+import Footer from '@/ui/sections/Footer';
+import Header from '@/ui/sections/Header';
+
+export const metadata: Metadata = {
+	metadataBase: new URL(siteConfig.url),
+	title: {
+		default: siteConfig.title,
+		template: `%s | ${siteConfig.title}`,
+	},
+	description: siteConfig.description,
+	robots: { index: true, follow: true },
+	icons: {
+		icon: '/favicon/favicon.ico',
+		shortcut: '/favicon/favicon-16x16.png',
+		apple: '/favicon/apple-touch-icon.png',
+	},
+	openGraph: {
+		url: siteConfig.url,
+		title: siteConfig.title,
+		description: siteConfig.description,
+		siteName: siteConfig.title,
+		images: '/opengraph-image.png',
+		type: 'website',
+		locale: 'en_GB',
+	},
+	twitter: {
+		card: 'summary_large_image',
+		title: siteConfig.title,
+		description: siteConfig.description,
+		images: '/opengraph-image.png',
+	},
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html lang="en" className="scroll-smooth break-words">
+			<body className={clsx(`min-h-screen antialiased`, fonts)}>
+				<div id="skiptocontent">
+					<a href="#main" className="sr-only focus:not-sr-only">
+						skip to main content
+					</a>
+				</div>
+
+				<div id="site-container">
+					<Header />
+					<main id="main">{children}</main>
+					<Footer />
+				</div>
+			</body>
+		</html>
+	);
+}

package/template/src/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+	return (
+		<>
+			<p>404 - Page not found</p>
+		</>
+	);
+}

package/template/src/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+	return (
+		<>
+			<p>Home page</p>
+		</>
+	);
+}

package/template/src/app/robots.ts

@@ -0,0 +1,32 @@
+import type { MetadataRoute } from 'next';
+
+import { siteConfig } from '@/lib/config';
+
+export default function robots(): MetadataRoute.Robots {
+	const isProduction = process.env.NODE_ENV === 'production';
+
+	if (!isProduction) {
+		// Block everything in development/staging
+		return {
+			rules: [
+				{
+					userAgent: '*',
+					disallow: '/',
+				},
+			],
+		};
+	}
+
+	// Production rules
+	return {
+		rules: [
+			{
+				userAgent: '*',
+				allow: '/',
+				disallow: ['/api/', '/search', '/*?*utm_*', '/*?*ref=*'],
+			},
+		],
+		sitemap: `${siteConfig.url}/sitemap.xml`,
+		host: siteConfig.url,
+	};
+}

package/template/src/app/sitemap.ts

@@ -0,0 +1,22 @@
+import type { MetadataRoute } from 'next';
+
+import { siteConfig } from '@/lib/config';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+	const isProduction = process.env.NODE_ENV === 'production';
+
+	if (!isProduction) {
+		// Prevent search engines from indexing anything
+		return [];
+	}
+
+	return [
+		{
+			url: `${siteConfig.url}`,
+			lastModified: new Date(),
+			changeFrequency: 'daily',
+			priority: 0.7,
+		},
+		// Add more URLs here
+	];
+}

package/template/src/icons/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 56.742">
+  <path d="M48.4.831h4.968v54.79H39.034V31.207L27.395 43.414h-1.561l-11.5-12.207v24.414H0V.831h5.11l21.433 23.7ZM94.393 48.663H72.817l-3.265 6.955H55.926v-1.984L80.482.263h6.1l24.7 53.371.994 1.987H97.515Zm-10.93-26.257-6.1 14.336H89.85ZM138.253 28.368c0-37.757 56.067-37.757 56.067 0 0 37.898-56.067 37.898-56.067 0Zm41.873 0c0-19.73-27.4-19.73-27.4 0-.137 19.732 27.4 19.732 27.4 0ZM244 53.492v1.987h-15.613l-9.368-16.04h-7.24v16.04h-13.91V.831h23.988c21.433.142 25.408 25.976 11.5 35.344Zm-22.285-40.028c-3.265-.142-6.671 0-9.936 0V27.09h9.936c7.665 0 7.954-13.626 0-13.626ZM120.651.973h14.194V33.62c0 8.517-2.555 14.762-7.523 18.595a22.3 22.3 0 0 1-10.5 3.974l-5.539-11.64a12.875 12.875 0 0 0 5.394-1.561c2.271-1.7 3.974-5.394 3.974-9.51Z"/>
+</svg>

package/template/src/lib/buildCache.ts

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+
+// File to store the build ID
+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) {
+		console.warn('Error reading build ID:', error);
+	}
+
+	// Fallback to current timestamp if file doesn't exist or has invalid content
+	return Date.now();
+}

package/template/src/lib/config.ts

@@ -0,0 +1,7 @@
+export const siteConfig = {
+	siteName: 'Acorn',
+	title: 'Acorn - Nextjs Stater',
+	description: '',
+	locale: 'en',
+	url: process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com',
+};

package/template/src/lib/fonts.ts

@@ -0,0 +1,15 @@
+import { Inter, JetBrains_Mono } from 'next/font/google';
+
+const fontHeading = JetBrains_Mono({
+	subsets: ['latin'],
+	variable: '--font-heading',
+	fallback: ['system-ui', 'arial'],
+});
+
+const fontSans = Inter({
+	subsets: ['latin'],
+	variable: '--font-sans',
+	fallback: ['system-ui', 'arial'],
+});
+
+export const fonts = [fontHeading.variable, fontSans.variable];

package/template/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/template/src/lib/utils.ts

@@ -0,0 +1,12 @@
+export const generateIDFromString = (string: string): string => {
+	return string
+		.toLowerCase()
+		.replace(/<[^>]+>/g, '')
+		.replace(/[^a-zA-Z ]/g, '')
+		.split(' ')
+		.join('-');
+};
+
+export const getCurrentTimestamp = (): number => {
+	return Date.now();
+};

package/template/src/styles/globals.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	.no-js {
+		@apply block;
+	}
+
+	.no-js .nojs-hidden {
+		@apply hidden;
+	}
+
+	.prose :where(a):not(:where([class~='not-prose'] *)) {
+		@apply underline;
+	}
+}
+
+@layer components {
+}
+
+@layer utilities {
+}

package/template/src/types/components.ts

@@ -0,0 +1,25 @@
+import type {
+	DeepMap,
+	FieldError,
+	FieldValues,
+	Path,
+	RegisterOptions,
+	UseFormRegister,
+} from 'react-hook-form';
+
+export type ComponentThemes = 'default';
+
+export type InputProps = {
+	id?: string;
+	label: string;
+	name: string;
+	className?: string;
+	type?: 'text' | 'email';
+};
+
+export type FormInputProps<TFormValues extends FieldValues = FieldValues> = {
+	name: Path<TFormValues>;
+	rules?: RegisterOptions;
+	register?: UseFormRegister<TFormValues>;
+	errors?: Partial<DeepMap<TFormValues, FieldError>>;
+} & Omit<InputProps, 'name'>;

package/template/src/types/custom.d.ts

@@ -0,0 +1,3 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.svg';

package/template/src/ui/ConditionalWrapper.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+const ConditionalWrapper = ({
+	condition,
+	wrapper,
+	children,
+}: {
+	condition: boolean;
+	wrapper: (children: ReactNode) => ReactNode;
+	children: ReactNode;
+}) => (condition ? wrapper(children) : children);
+
+export default ConditionalWrapper;