@majordigital/create-acorn 1.0.7 → 1.0.9

package/bin/create-acorn.mjs

@@ -97,8 +97,13 @@ 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)
+  // Add .npmrc with legacy-peer-deps so all npm installs (including Slice Machine) work with React 19
+  writeFileSync(join(process.cwd(), '.npmrc'), 'legacy-peer-deps=true\n');
+
+  // Remove configs generated by create-next-app that we replace
   try { rmSync(join(process.cwd(), 'postcss.config.mjs')); } catch {}
+  try { rmSync(join(process.cwd(), 'next.config.ts')); } catch {}
+  try { rmSync(join(process.cwd(), 'next.config.js')); } catch {}
 
   // Copy Acorn template files (src/, public/, config files) over the Next.js scaffold
   console.log('Copying Acorn boilerplate...');
@@ -123,7 +128,7 @@ async function scaffoldNextApp() {
   console.log('');
 
   console.log('Installing Biome for linting...');
-  await runCommand('npm', ['install', '--save-dev', '--save-exact', '--legacy-peer-deps', '@biomejs/biome']);
+  await runCommand('npm', ['install', '--save-dev', '--save-exact', '@biomejs/biome']);
   await runCommand('npx', ['@biomejs/biome', 'init']);
   console.log('');
   console.log('Biome configured successfully.');
@@ -204,6 +209,131 @@ async function setupPrismic() {
   console.log('');
 }
 
+function generateReadme(projectName, cms) {
+  const title = projectName || 'Project Title';
+
+  const shared = `# ${title}
+
+## Introduction 📖
+
+## 📋 Prerequisites
+
+- **Node.js**: v20.19.0 or higher
+- **npm**: v10.8.2 or higher
+
+## Running This Project 🚀
+`;
+
+  const prismic = `
+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 and the headless CMS [Prismic](https://prismic.io/).
+
+To run this project, follow the instructions below:
+
+1. Open the terminal, and navigate the root directory for this project.
+2. Add in the environment variables in a \`.env\` file. More information found in the next section.
+3. Run \`npm install\`, and wait for dependencies to install.
+4. Run \`npm run dev\`, where a local instance of this website will be initiated e.g localhost:3000
+5. Run \`npm run slicemachine\`, where a local instance of slicemachine will be initiated e.g localhost:9999
+
+## Environment Variables 🔒
+
+There are a few environmental variables required to run this project. As mentioned previously, each website setup requires it's own \`.env\` file within it's root directory.
+
+To manage environment variables, follow these guidelines:
+
+-   Use \`.env\` for both local and production environments.
+-   The \`.env.development\` file will only be used for development builds.
+-   You can either:
+    -   Include a \`.env.production\` file for production-specific configurations, **or**
+    -   Use a single \`.env\` file that serves both local and production needs.
+
+Make sure to configure your environment files appropriately based on your project's requirements.
+
+The required variables are:
+
+-   **PRISMIC_ACCESS_TOKEN**: Found within the relevant project on our Prismic account
+-   **SITE_URL**: A full url path for the domain of this project, e.g. https://search-seven.netlify.app
+`;
+
+  const storyblok = `
+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 and the headless CMS [Storyblok](https://www.storyblok.com/).
+
+## 🛠️ Installation
+
+1. **Install dependencies**
+
+    \`\`\`bash
+    npm install
+    \`\`\`
+
+2. **Set up environment variables**
+
+    Create \`.env.local\` file in the root directory:
+
+    \`\`\`env
+    NEXT_PUBLIC_STORYBLOK_ACCESS_TOKEN=your_preview_token
+    STORYBLOK_SPACE_ID=your_space_id
+    NEXT_PUBLIC_STORYBLOK_TOKEN_VERSION=draft  # or 'published' for production
+    \`\`\`
+
+3. **Start the development server**
+
+    \`\`\`bash
+    npm run dev
+    \`\`\`
+
+    The site will be available at \`http://localhost:3000\`
+
+4. **Run Storybook** (optional)
+
+    \`\`\`bash
+    npm run storybook
+    \`\`\`
+
+    Storybook will be available at \`http://localhost:6006\`
+`;
+
+  const dato = `
+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 and the headless CMS [DatoCMS](https://www.datocms.com/).
+
+## 🛠️ Installation
+
+1. **Install dependencies**
+
+    \`\`\`bash
+    npm install
+    \`\`\`
+
+2. **Set up environment variables**
+
+    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
+    \`\`\`
+
+3. **Start the development server**
+
+    \`\`\`bash
+    npm run dev
+    \`\`\`
+
+    The site will be available at \`http://localhost:3000\`
+`;
+
+  const cmsSection = cms === 'prismic' ? prismic : cms === 'storyblok' ? storyblok : dato;
+
+  const footer = `
+## Contacts 🧑‍💻
+
+The primary contact for this project is [Davs Howard](mailto:davs@majordigital.com).
+`;
+
+  return shared + cmsSection + footer;
+}
+
 async function main() {
   printHeader();
   let selection = parseNonInteractiveArg();
@@ -234,6 +364,38 @@ async function main() {
     console.log('This run only confirms selection for non-Prismic options.');
     console.log('');
   }
+
+  // Generate .env.example
+  const envExamples = {
+    prismic: `PRISMIC_ACCESS_TOKEN=
+SITE_URL=
+`,
+    storyblok: `STORYBLOK_SPACE_ID=
+STORYBLOK_PREVIEW_TOKEN=
+STORYBLOK_PERSONAL_ACCESS_TOKEN=
+NEXT_PUBLIC_STORYBLOK_PUBLIC_TOKEN=
+NEXT_PUBLIC_STORYBLOK_TOKEN_VERSION="draft"
+STORYBLOK_WEBHOOK_TOKEN=
+INTERNAL_PREVIEW_SECRET=
+INTERNAL_PREVIEW_API_KEY=
+NEXT_PUBLIC_SITE_URL=
+NEXT_PUBLIC_HUBSPOT_PORTAL_ID=
+`,
+    dato: `DATOCMS_API_TOKEN=
+DATOCMS_PREVIEW_SECRET=
+SITE_URL=
+`,
+  };
+  writeFileSync(join(process.cwd(), '.env.example'), envExamples[selection.key]);
+  console.log('.env.example generated.');
+  console.log('');
+
+  // Generate project README
+  const projectName = basename(process.cwd());
+  const readme = generateReadme(projectName, selection.key);
+  writeFileSync(join(process.cwd(), 'README.md'), readme);
+  console.log('README.md generated.');
+  console.log('');
 }
 
 main().catch((err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majordigital/create-acorn",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Interactive scaffold for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.",
   "bin": {
     "create-acorn": "bin/create-acorn.mjs",

package/template/{next.config.js → next.config.ts}

@@ -1,6 +1,11 @@
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
+import bundleAnalyzer from '@next/bundle-analyzer';
 
-const baseConfig = {
+const withBundleAnalyzer = bundleAnalyzer({
+	enabled: process.env.ANALYZE === 'true',
+});
+
+const baseConfig: NextConfig = {
 	poweredByHeader: false,
 	reactStrictMode: true,
 	trailingSlash: false,
@@ -22,7 +27,7 @@ const baseConfig = {
 
 		return config;
 	},
-	
+
 	images: {
 		remotePatterns: [
 			{
@@ -41,8 +46,4 @@ const baseConfig = {
 	},
 };
 
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-	enabled: process.env.ANALYZE === 'true',
-});
-
-module.exports = withBundleAnalyzer(baseConfig);
+export default withBundleAnalyzer(baseConfig);

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

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

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+	import type { FC, SVGProps } from 'react';
+	const content: FC<SVGProps<SVGSVGElement>>;
+	export default content;
+}