@majordigital/create-acorn 1.2.0 → 1.3.0

package/README.md

@@ -10,6 +10,8 @@ It eliminates the repetitive setup that comes with every new project — framewo
 npx @majordigital/create-acorn@latest
 ```
 
+> **Note:** Always use `npx` to run the CLI. Do not use `npm install` — this is a scaffolding tool, not a library dependency.
+
 The CLI prompts you for a project name, creates the directory, then walks you through selecting a headless CMS — scaffolding a complete, opinionated project in seconds.
 
 ```

package/bin/create-acorn.mjs

@@ -220,6 +220,216 @@ async function setupPrismic(projectName) {
   console.log('');
 }
 
+async function setupStoryblok(projectName) {
+  console.log('Setting up Storyblok...');
+  console.log('');
+
+  // Install Storyblok SDK
+  console.log('Installing @storyblok/react...');
+  await runCommand('npm', ['install', '--legacy-peer-deps', '@storyblok/react']);
+  console.log('');
+
+  // Update next.config.ts — replace Prismic image patterns with Storyblok
+  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: 'a.storyblok.com',
+				port: '',
+				pathname: '/**',
+			},
+		],`
+    );
+    writeFileSync(nextConfigPath, config);
+    console.log('Updated next.config.ts with Storyblok image domain.');
+  } catch {
+    console.log('Warning: Could not update next.config.ts image patterns.');
+  }
+
+  // Create src/lib/storyblok.ts
+  const libDir = join(process.cwd(), 'src', 'lib');
+  writeFileSync(join(libDir, 'storyblok.ts'), `import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';
+
+import Page from '@/components/storyblok/Page';
+import Feature from '@/components/storyblok/Feature';
+import Grid from '@/components/storyblok/Grid';
+import Teaser from '@/components/storyblok/Teaser';
+
+export const getStoryblokApi = storyblokInit({
+  accessToken: process.env.STORYBLOK_PREVIEW_TOKEN,
+  use: [apiPlugin],
+  components: {
+    page: Page,
+    feature: Feature,
+    grid: Grid,
+    teaser: Teaser,
+  },
+  apiOptions: {
+    region: 'eu',
+  },
+});
+`);
+  console.log('Created src/lib/storyblok.ts');
+
+  // Create StoryblokProvider
+  const componentsDir = join(process.cwd(), 'src', 'components');
+  mkdirSync(componentsDir, { recursive: true });
+  writeFileSync(join(componentsDir, 'StoryblokProvider.tsx'), `'use client';
+
+import { getStoryblokApi } from '@/lib/storyblok';
+import type { PropsWithChildren } from 'react';
+
+export default function StoryblokProvider({ children }: PropsWithChildren) {
+  getStoryblokApi();
+  return children;
+}
+`);
+  console.log('Created src/components/StoryblokProvider.tsx');
+
+  // Create Storyblok component directory and base components
+  const sbComponentsDir = join(componentsDir, 'storyblok');
+  mkdirSync(sbComponentsDir, { recursive: true });
+
+  writeFileSync(join(sbComponentsDir, 'Page.tsx'), `import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
+import type { SbBlokData } from '@storyblok/react/rsc';
+
+interface PageBlok extends SbBlokData {
+  body?: SbBlokData[];
+}
+
+export default function Page({ blok }: { blok: PageBlok }) {
+  return (
+    <main {...storyblokEditable(blok)}>
+      {blok.body?.map((nestedBlok) => (
+        <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
+      ))}
+    </main>
+  );
+}
+`);
+
+  writeFileSync(join(sbComponentsDir, 'Grid.tsx'), `import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
+import type { SbBlokData } from '@storyblok/react/rsc';
+
+interface GridBlok extends SbBlokData {
+  columns?: SbBlokData[];
+}
+
+export default function Grid({ blok }: { blok: GridBlok }) {
+  return (
+    <div {...storyblokEditable(blok)} className="grid grid-cols-3 gap-6">
+      {blok.columns?.map((nestedBlok) => (
+        <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
+      ))}
+    </div>
+  );
+}
+`);
+
+  writeFileSync(join(sbComponentsDir, 'Feature.tsx'), `import { storyblokEditable } from '@storyblok/react/rsc';
+import type { SbBlokData } from '@storyblok/react/rsc';
+
+interface FeatureBlok extends SbBlokData {
+  name?: string;
+}
+
+export default function Feature({ blok }: { blok: FeatureBlok }) {
+  return (
+    <div {...storyblokEditable(blok)} className="feature">
+      <span>{blok.name}</span>
+    </div>
+  );
+}
+`);
+
+  writeFileSync(join(sbComponentsDir, 'Teaser.tsx'), `import { storyblokEditable } from '@storyblok/react/rsc';
+import type { SbBlokData } from '@storyblok/react/rsc';
+
+interface TeaserBlok extends SbBlokData {
+  headline?: string;
+}
+
+export default function Teaser({ blok }: { blok: TeaserBlok }) {
+  return (
+    <div {...storyblokEditable(blok)} className="teaser">
+      <h2>{blok.headline}</h2>
+    </div>
+  );
+}
+`);
+  console.log('Created Storyblok component boilerplate (Page, Grid, Feature, Teaser).');
+
+  // Update layout.tsx to wrap with StoryblokProvider
+  const layoutPath = join(process.cwd(), 'src', 'app', 'layout.tsx');
+  try {
+    let layout = readFileSync(layoutPath, 'utf-8');
+    // Add import
+    layout = layout.replace(
+      "import '@/styles/globals.css';",
+      "import '@/styles/globals.css';\n\nimport StoryblokProvider from '@/components/StoryblokProvider';"
+    );
+    // Wrap <html> with StoryblokProvider
+    layout = layout.replace(
+      '<html lang="en"',
+      '<StoryblokProvider>\n\t\t<html lang="en"'
+    );
+    layout = layout.replace(
+      '</html>',
+      '</html>\n\t\t</StoryblokProvider>'
+    );
+    writeFileSync(layoutPath, layout);
+    console.log('Updated layout.tsx with StoryblokProvider.');
+  } catch {
+    console.log('Warning: Could not update layout.tsx with StoryblokProvider.');
+  }
+
+  // Create a sample home page that fetches from Storyblok
+  writeFileSync(join(process.cwd(), 'src', 'app', 'page.tsx'), `import { getStoryblokApi } from '@/lib/storyblok';
+import { StoryblokStory } from '@storyblok/react/rsc';
+
+async function fetchData() {
+  const storyblokApi = getStoryblokApi();
+  return storyblokApi.get('cdn/stories/home', {
+    version: 'draft',
+  });
+}
+
+export default async function Home() {
+  const { data } = await fetchData();
+
+  return (
+    <div>
+      <StoryblokStory story={data.story} />
+    </div>
+  );
+}
+`);
+  console.log('Created sample home page with Storyblok data fetching.');
+
+  console.log('');
+  console.log('=== Storyblok Setup Complete ===');
+  console.log('');
+  console.log('=== Next Steps ===');
+  console.log('');
+  console.log('  1. Create a Storyblok space at https://app.storyblok.com');
+  console.log('');
+  console.log('  2. Copy your Preview token and add it to .env.local:');
+  console.log('     STORYBLOK_PREVIEW_TOKEN=your_preview_token_here');
+  console.log('');
+  console.log('  3. Make sure you have a "home" story in your Storyblok space');
+  console.log('     with a content type of "page"');
+  console.log('');
+  console.log('  4. Set the Visual Editor URL to https://localhost:3000/');
+  console.log('');
+  console.log('  5. Start your dev server:');
+  console.log('     npm run dev');
+  console.log('');
+}
+
 function generateReadme(projectName, cms) {
   const title = projectName || 'Project Title';
 
@@ -431,6 +641,8 @@ SITE_URL=
 
   if (selection.key === 'prismic') {
     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.');

package/package.json

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