@majordigital/create-acorn 1.4.0 → 1.5.0

package/bin/create-acorn.mjs

@@ -345,7 +345,7 @@ async function setupDato(projectName) {
   // Install DatoCMS dependencies
   console.log('Installing DatoCMS dependencies...');
   await runCommand('npm', ['install', '--legacy-peer-deps',
-    '@datocms/cda-client', 'react-datocms',
+    '@datocms/cda-client', '@datocms/cma-client-node', 'react-datocms',
     'datocms-structured-text-to-plain-text', 'datocms-structured-text-utils',
     'graphql', 'graphql-request', 'dotenv'
   ]);
@@ -356,6 +356,79 @@ async function setupDato(projectName) {
   ]);
   console.log('');
 
+  // --- DatoCMS Project Connection & Model Scaffolding ---
+  const hasExisting = await ask('Do you already have a DatoCMS project? (y/n)', 'n');
+  const isExisting = hasExisting.toLowerCase() === 'y' || hasExisting.toLowerCase() === 'yes';
+
+  if (!isExisting) {
+    console.log('');
+    console.log('Please create a new project in the DatoCMS dashboard:');
+    console.log('  https://www.datocms.com/dashboard');
+    console.log('');
+    console.log('Once created, grab your Full-access API token from:');
+    console.log('  Settings > API Tokens > Full-access API token');
+    console.log('');
+  } else {
+    console.log('');
+    console.log('Great! Grab your Full-access API token from your DatoCMS project:');
+    console.log('  Settings > API Tokens > Full-access API token');
+    console.log('');
+  }
+
+  const apiToken = await ask('Paste your Full-access API token (or press Enter to skip)');
+
+  if (apiToken) {
+    console.log('');
+    console.log('Scaffolding DatoCMS models...');
+    console.log('');
+
+    try {
+      await scaffoldDatoModels(apiToken);
+      console.log('');
+      console.log('DatoCMS models created successfully!');
+      console.log('');
+
+      // Fetch the read-only CDA token for .env.local
+      let cdaToken = '';
+      try {
+        const { buildClient } = await import('@datocms/cma-client-node');
+        const client = buildClient({ apiToken });
+        const tokens = await client.accessTokens.list();
+        const readOnly = tokens.find(t => t.name === 'Read-only API token');
+        if (readOnly && readOnly.token) {
+          cdaToken = readOnly.token;
+        }
+      } catch {
+        // Could not fetch CDA token — user will add manually
+      }
+
+      // Write .env.local with tokens
+      const envLocalPath = join(process.cwd(), '.env.local');
+      writeFileSync(envLocalPath, `NEXT_DATOCMS_API_TOKEN=${cdaToken}
+DATO_API_TOKEN=${apiToken}
+NEXT_DATOCMS_ENVIRONMENT=draft
+`);
+      if (cdaToken) {
+        console.log('Created .env.local with your API tokens.');
+      } else {
+        console.log('Created .env.local — add your Read-only API token to NEXT_DATOCMS_API_TOKEN.');
+        console.log('You can find it in Settings > API Tokens > Read-only API token.');
+      }
+    } catch (err) {
+      console.log('');
+      console.log('Warning: Could not scaffold DatoCMS models automatically.');
+      console.log(`  Error: ${err.message}`);
+      console.log('');
+      console.log('You can create models manually in the DatoCMS dashboard.');
+      console.log('The GraphQL queries expect: Page, Hero (block), Button (block),');
+      console.log('Layout (singleton), MenuItem (block), CaseStudy, LegalPage, Post,');
+      console.log('CaseStudiesListing (singleton), PostListing (singleton).');
+    }
+  } else {
+    console.log('');
+    console.log('Skipping model scaffolding — you can set up models manually later.');
+  }
+
   // Update next.config.ts — replace Prismic image patterns with DatoCMS
   const nextConfigPath = join(process.cwd(), 'next.config.ts');
   try {
@@ -444,7 +517,6 @@ async function setupDato(projectName) {
     writeFileSync(envExamplePath, `NEXT_DATOCMS_API_TOKEN=
 DATO_API_TOKEN=
 NEXT_DATOCMS_ENVIRONMENT=draft
-NEXT_PUBLIC_SITE_URL=
 `);
     console.log('Updated .env.example with DatoCMS variables.');
   } catch {
@@ -456,24 +528,357 @@ NEXT_PUBLIC_SITE_URL=
   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:');
+  if (!apiToken) {
+    console.log('  1. Create a DatoCMS project at https://www.datocms.com/dashboard');
+    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_read_only_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('');
+  } else {
+    console.log('  1. Generate TypeScript types from your schema:');
+    console.log('     npm run generate-types');
+    console.log('');
+    console.log('  2. Start your dev server:');
+    console.log('     npm run dev');
+    console.log('');
+    console.log('  3. Open your DatoCMS dashboard to add content to your models.');
+    console.log('');
+  }
+  console.log('  Start your dev server:');
   console.log('     npm run dev');
   console.log('');
 }
 
+/**
+ * Scaffold default DatoCMS models using the Management API.
+ * Creates models that match the GraphQL queries in the dato-api layer.
+ */
+async function scaffoldDatoModels(apiToken) {
+  const { buildClient } = await import('@datocms/cma-client-node');
+  const client = buildClient({ apiToken });
+
+  // --- Block models (must be created first so we can reference them) ---
+
+  // Button block
+  console.log('  Creating Button block...');
+  const buttonBlock = await client.itemTypes.create({
+    name: 'Button',
+    api_key: 'button',
+    modular_block: true,
+  });
+  await client.fields.create(buttonBlock.id, {
+    label: 'Text',
+    field_type: 'string',
+    api_key: 'text',
+    validators: { required: {} },
+  });
+  await client.fields.create(buttonBlock.id, {
+    label: 'Variant',
+    field_type: 'string',
+    api_key: 'variant',
+    validators: { enum: { values: ['primary', 'secondary', 'outline'] } },
+    appearance: {
+      addons: [],
+      editor: 'string_select',
+      parameters: { options: [
+        { hint: '', label: 'Primary', value: 'primary' },
+        { hint: '', label: 'Secondary', value: 'secondary' },
+        { hint: '', label: 'Outline', value: 'outline' },
+      ]},
+    },
+  });
+  await client.fields.create(buttonBlock.id, {
+    label: 'Link',
+    field_type: 'json',
+    api_key: 'link',
+  });
+
+  // Hero block
+  console.log('  Creating Hero block...');
+  const heroBlock = await client.itemTypes.create({
+    name: 'Hero',
+    api_key: 'hero',
+    modular_block: true,
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Heading',
+    field_type: 'string',
+    api_key: 'heading',
+    validators: { required: {} },
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Eyebrow',
+    field_type: 'string',
+    api_key: 'eyebrow',
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Content',
+    field_type: 'text',
+    api_key: 'content',
+    appearance: {
+      addons: [],
+      editor: 'textarea',
+      parameters: {},
+    },
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Layout',
+    field_type: 'string',
+    api_key: 'layout',
+    validators: { enum: { values: ['default', 'centered', 'split'] } },
+    appearance: {
+      addons: [],
+      editor: 'string_select',
+      parameters: { options: [
+        { hint: '', label: 'Default', value: 'default' },
+        { hint: '', label: 'Centered', value: 'centered' },
+        { hint: '', label: 'Split', value: 'split' },
+      ]},
+    },
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Theme',
+    field_type: 'string',
+    api_key: 'theme',
+    validators: { enum: { values: ['light', 'dark'] } },
+    appearance: {
+      addons: [],
+      editor: 'string_select',
+      parameters: { options: [
+        { hint: '', label: 'Light', value: 'light' },
+        { hint: '', label: 'Dark', value: 'dark' },
+      ]},
+    },
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Image',
+    field_type: 'file',
+    api_key: 'image',
+  });
+  await client.fields.create(heroBlock.id, {
+    label: 'Actions',
+    field_type: 'rich_text',
+    api_key: 'actions',
+    validators: {
+      rich_text_blocks: { item_types: [buttonBlock.id] },
+    },
+  });
+
+  // MenuItem block
+  console.log('  Creating MenuItem block...');
+  const menuItemBlock = await client.itemTypes.create({
+    name: 'Menu Item',
+    api_key: 'menu_item',
+    modular_block: true,
+  });
+  await client.fields.create(menuItemBlock.id, {
+    label: 'Heading',
+    field_type: 'string',
+    api_key: 'heading',
+    validators: { required: {} },
+  });
+
+  // --- Regular models ---
+
+  // Page model
+  console.log('  Creating Page model...');
+  const pageModel = await client.itemTypes.create({
+    name: 'Page',
+    api_key: 'page',
+    draft_mode_active: true,
+  });
+  await client.fields.create(pageModel.id, {
+    label: 'Heading',
+    field_type: 'string',
+    api_key: 'heading',
+    validators: { required: {} },
+  });
+  await client.fields.create(pageModel.id, {
+    label: 'Description',
+    field_type: 'text',
+    api_key: 'description',
+  });
+  await client.fields.create(pageModel.id, {
+    label: 'Slug',
+    field_type: 'slug',
+    api_key: 'slug',
+    validators: {
+      required: {},
+      slug_title_field: { title_field_id: (await client.fields.list(pageModel.id)).find(f => f.api_key === 'heading').id },
+    },
+  });
+  await client.fields.create(pageModel.id, {
+    label: 'Parent Page',
+    field_type: 'link',
+    api_key: 'parent_page',
+    validators: {
+      item_item_type: { on_publish_with_unpublished_references_strategy: 'fail', on_reference_unpublish_strategy: 'fail', on_reference_delete_strategy: 'set_null', item_types: [pageModel.id] },
+    },
+  });
+  await client.fields.create(pageModel.id, {
+    label: 'Body',
+    field_type: 'rich_text',
+    api_key: 'body',
+    validators: {
+      rich_text_blocks: { item_types: [heroBlock.id] },
+    },
+  });
+
+  // Add target link to MenuItem (now that Page exists)
+  await client.fields.create(menuItemBlock.id, {
+    label: 'Target',
+    field_type: 'link',
+    api_key: 'target',
+    validators: {
+      item_item_type: { on_publish_with_unpublished_references_strategy: 'fail', on_reference_unpublish_strategy: 'fail', on_reference_delete_strategy: 'set_null', item_types: [pageModel.id] },
+    },
+  });
+
+  // Case Study model
+  console.log('  Creating Case Study model...');
+  const caseStudyModel = await client.itemTypes.create({
+    name: 'Case Study',
+    api_key: 'case_study',
+    draft_mode_active: true,
+  });
+  await client.fields.create(caseStudyModel.id, {
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+  });
+  await client.fields.create(caseStudyModel.id, {
+    label: 'Slug',
+    field_type: 'slug',
+    api_key: 'slug',
+    validators: {
+      required: {},
+      slug_title_field: { title_field_id: (await client.fields.list(caseStudyModel.id)).find(f => f.api_key === 'title').id },
+    },
+  });
+
+  // Legal Page model
+  console.log('  Creating Legal Page model...');
+  const legalPageModel = await client.itemTypes.create({
+    name: 'Legal Page',
+    api_key: 'legal_page',
+    draft_mode_active: true,
+  });
+  await client.fields.create(legalPageModel.id, {
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+  });
+  await client.fields.create(legalPageModel.id, {
+    label: 'Slug',
+    field_type: 'slug',
+    api_key: 'slug',
+    validators: {
+      required: {},
+      slug_title_field: { title_field_id: (await client.fields.list(legalPageModel.id)).find(f => f.api_key === 'title').id },
+    },
+  });
+  await client.fields.create(legalPageModel.id, {
+    label: 'Download',
+    field_type: 'file',
+    api_key: 'download',
+  });
+
+  // Post model
+  console.log('  Creating Post model...');
+  const postModel = await client.itemTypes.create({
+    name: 'Post',
+    api_key: 'post',
+    draft_mode_active: true,
+  });
+  await client.fields.create(postModel.id, {
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+  });
+  await client.fields.create(postModel.id, {
+    label: 'Slug',
+    field_type: 'slug',
+    api_key: 'slug',
+    validators: {
+      required: {},
+      slug_title_field: { title_field_id: (await client.fields.list(postModel.id)).find(f => f.api_key === 'title').id },
+    },
+  });
+
+  // Case Studies Listing (singleton)
+  console.log('  Creating Case Studies Listing singleton...');
+  const caseStudiesListing = await client.itemTypes.create({
+    name: 'Case Studies Listing',
+    api_key: 'case_studies_listing',
+    singleton: true,
+  });
+  await client.fields.create(caseStudiesListing.id, {
+    label: 'Slug',
+    field_type: 'string',
+    api_key: 'slug',
+    validators: { required: {} },
+  });
+
+  // Post Listing (singleton)
+  console.log('  Creating Post Listing singleton...');
+  const postListing = await client.itemTypes.create({
+    name: 'Post Listing',
+    api_key: 'post_listing',
+    singleton: true,
+  });
+  await client.fields.create(postListing.id, {
+    label: 'Slug',
+    field_type: 'string',
+    api_key: 'slug',
+    validators: { required: {} },
+  });
+
+  // Layout (singleton)
+  console.log('  Creating Layout singleton...');
+  const layoutModel = await client.itemTypes.create({
+    name: 'Layout',
+    api_key: 'layout',
+    singleton: true,
+  });
+  await client.fields.create(layoutModel.id, {
+    label: 'Navigation',
+    field_type: 'rich_text',
+    api_key: 'navigation',
+    validators: {
+      rich_text_blocks: { item_types: [menuItemBlock.id] },
+    },
+  });
+  await client.fields.create(layoutModel.id, {
+    label: 'Footer Navigation',
+    field_type: 'rich_text',
+    api_key: 'footer_navigation',
+    validators: {
+      rich_text_blocks: { item_types: [menuItemBlock.id] },
+    },
+  });
+  await client.fields.create(layoutModel.id, {
+    label: 'Copyright',
+    field_type: 'string',
+    api_key: 'copyright',
+  });
+
+  console.log('');
+  console.log('  Models created: Page, Case Study, Legal Page, Post');
+  console.log('  Singletons created: Layout, Case Studies Listing, Post Listing');
+  console.log('  Blocks created: Hero, Button, Menu Item');
+}
+
 function generateReadme(projectName, cms) {
   const title = projectName || 'Project Title';
 
@@ -598,9 +1003,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**

package/package.json

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