@majordigital/create-acorn 1.0.8 → 1.1.0

package/bin/create-acorn.mjs

@@ -100,8 +100,10 @@ async function scaffoldNextApp() {
   // 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 postcss config generated by create-next-app (not needed with Tailwind v4)
+  // 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...');
@@ -125,11 +127,15 @@ async function scaffoldNextApp() {
   console.log('Acorn dependencies installed.');
   console.log('');
 
-  console.log('Installing Biome for linting...');
+  console.log('Installing Biome, commitlint, and lefthook...');
   await runCommand('npm', ['install', '--save-dev', '--save-exact', '@biomejs/biome']);
-  await runCommand('npx', ['@biomejs/biome', 'init']);
+  await runCommand('npm', ['install', '--save-dev',
+    '@commitlint/cli', '@commitlint/config-conventional', '@commitlint/types', 'lefthook'
+  ]);
+  // Remove default biome.json if created — we use biome.jsonc from the template
+  try { rmSync(join(process.cwd(), 'biome.json')); } catch {}
   console.log('');
-  console.log('Biome configured successfully.');
+  console.log('Biome, commitlint, and lefthook configured.');
   console.log('');
 }
 
@@ -207,6 +213,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();
@@ -237,6 +368,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.8",
+  "version": "1.1.0",
   "description": "Interactive scaffold for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.",
   "bin": {
     "create-acorn": "bin/create-acorn.mjs",

package/template/biome.jsonc

@@ -0,0 +1,105 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+    "vcs": {
+        "enabled": true,
+        "clientKind": "git",
+        "useIgnoreFile": true
+    },
+    "files": {
+        "ignoreUnknown": false
+    },
+    "formatter": {
+        "enabled": true,
+        "indentWidth": 4,
+        "indentStyle": "tab",
+        "lineWidth": 80,
+        "lineEnding": "lf"
+    },
+    "linter": {
+        "enabled": true,
+        "domains": {
+            "react": "recommended",
+            "next": "recommended"
+        },
+        "rules": {
+            "style": {
+                "noNonNullAssertion": "off"
+            },
+            "correctness": {
+                "noUnusedImports": {
+                    "level": "error",
+                    "fix": "safe",
+                    "options": {}
+                },
+                "noUnusedVariables": "error",
+                "useUniqueElementIds": "error"
+            },
+            "complexity": {
+                "noUselessFragments": {
+                    "level": "warn",
+                    "fix": "safe",
+                    "options": {}
+                }
+            },
+            "suspicious": {
+                "noExplicitAny": "off",
+                "noImplicitAnyLet": "off",
+                "noConsole": {
+                    "fix": "unsafe",
+                    "level": "error",
+                    "options": {}
+                },
+                "noUnknownAtRules": "off"
+            },
+            "nursery": {
+                "useSortedClasses": {
+                    "level": "error",
+                    "fix": "safe",
+                    "options": {
+                        "functions": ["clsx"]
+                    }
+                }
+            }
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "single",
+            "trailingCommas": "es5",
+            "semicolons": "always",
+            "arrowParentheses": "asNeeded"
+        }
+    },
+    "css": {
+        "formatter": {
+            "quoteStyle": "single"
+        },
+        "parser": {
+            "tailwindDirectives": true
+        }
+    },
+    "assist": {
+        "enabled": true,
+        "actions": {
+            "source": {
+                "organizeImports": {
+                    "level": "on",
+                    "options": {
+                        "groups": [
+                            ":NODE:",
+                            ":BLANK_LINE:",
+                            [":PACKAGE:", ":PACKAGE_WITH_PROTOCOL:"],
+                            ":BLANK_LINE:",
+                            ":ALIAS:",
+                            ":BLANK_LINE:",
+                            ":PATH:",
+                            ":BLANK_LINE:",
+                            ":URL:"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "overrides": []
+}

package/template/commitlint.config.ts

@@ -0,0 +1,7 @@
+import type { UserConfig } from '@commitlint/types';
+
+const commitlintConfig: UserConfig = {
+    extends: ['@commitlint/config-conventional'],
+};
+
+export default commitlintConfig;

package/template/lefthook.yml

@@ -0,0 +1,15 @@
+pre-commit:
+  parallel: true
+  commands:
+    check-js:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      run: npx biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
+      stage_fixed: true
+    check-toml:
+      glob: "*.toml"
+      run: test -z "{staged_files}" || (npx taplo format {staged_files} && git update-index --again)
+
+commit-msg:
+  scripts:
+    "commitlint.sh":
+      runner: bash

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;
+}