create-content-sdk-app 2.0.2-canary.8 → 2.0.2

package/dist/templates/nextjs/.cursor/rules/sitecore.mdc

@@ -1,150 +1,150 @@
----
-description: Sitecore development patterns for your project
-alwaysApply: false
-globs:
-  - 'src/components/**'
-  - 'src/lib/**'
-  - 'sitecore.config.ts'
-  - '**/*sitecore*'
-  - '**/*content*'
----
-
-# Sitecore Development Patterns
-
-## Component Development
-
-Sitecore Component Naming:
-
-- Use descriptive, feature-based names: `HeroWithContent`, `ProductListing`, `ContentBlockGrid`
-- Follow PascalCase convention
-- Include component type in name when helpful: `LayoutContainer`, `ContentRenderer`
-
-Component Registration:
-
-- Export component from component file
-- Use descriptive, PascalCase names
-- Include TypeScript interfaces for props
-- Handle missing fields gracefully
-
-```typescript
-// Component props interface
-interface HeroProps {
-  fields: {
-    title: Field;
-    subtitle: Field;
-    backgroundImage: Field;
-  };
-}
-
-export default function Hero({ fields }: HeroProps) {
-  return (
-    <div>
-      <Text field={fields?.title} tag="h1" />
-      <Text field={fields?.subtitle} tag="p" />
-      <Image field={fields?.backgroundImage} />
-    </div>
-  );
-}
-```
-
-## Content Management
-
-Field Handling:
-
-- Always validate field existence before rendering
-- Use helper functions for common field operations
-- Handle empty/null fields gracefully
-- Prefer Sitecore field components over manual rendering
-
-```typescript
-// Good: Using Sitecore field components
-<Text field={fields?.title} tag="h1" />
-<RichText field={fields?.content} />
-
-// Avoid: Manual field value extraction unless necessary
-```
-
-Layout Service:
-
-- Use the Layout Service for page data fetching
-- Implement proper error boundaries for layout rendering
-- Handle missing placeholder content gracefully
-- Cache layout data when appropriate
-
-## Configuration
-
-Environment Setup:
-
-- Use `.env.local` for local development
-- Never commit API keys to version control
-- Use `.env.example` to document required variables
-- Configure Sitecore endpoints in `sitecore.config.ts`
-
-```typescript
-// sitecore.config.ts
-import { defineConfig } from '@sitecore-content-sdk/nextjs/config';
-
-export default defineConfig({
-  api: {
-    edge: {
-      contextId: process.env.SITECORE_EDGE_CONTEXT_ID || '',
-      clientContextId: process.env.NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID,
-      edgeUrl:
-        process.env.NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME ||
-        process.env.SITECORE_EDGE_PLATFORM_HOSTNAME ||
-        'https://edge-platform.sitecorecloud.io',
-    },
-    local: {
-      apiKey: process.env.SITECORE_API_KEY || '',
-      apiHost: process.env.SITECORE_API_HOST || '',
-    },
-  },
-  defaultSite: process.env.NEXT_PUBLIC_DEFAULT_SITE_NAME || 'default',
-  defaultLanguage: process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE || 'en',
-  editingSecret: process.env.SITECORE_EDITING_SECRET,
-});
-```
-
-## Security and Performance
-
-Security Best Practices:
-
-- Sanitize user inputs before processing
-- Validate content from Sitecore before rendering
-- Use HTTPS for all Sitecore connections
-- Never expose sensitive configuration in client-side code
-
-Content Fetching:
-
-- Implement caching strategy for content (React Query recommended)
-- Use GraphQL queries efficiently (avoid over-fetching)
-- Implement proper loading states and error handling
-- Consider content preview vs. published content scenarios
-
-## Development Patterns
-
-Error Handling:
-
-- Create custom error classes: `SitecoreFetchError`, `ComponentRenderError`
-- Log errors appropriately for debugging
-- Provide fallback content when components fail to render
-- Use error boundaries in React applications
-
-Placeholder Management:
-
-- Use strongly-typed placeholder names
-- Handle dynamic placeholders appropriately
-- Implement fallback rendering for missing placeholders
-- Follow Sitecore's placeholder naming conventions
-
-Testing:
-
-- Mock Sitecore services in unit tests
-- Test component rendering with various field configurations
-- Include tests for error scenarios (missing fields, API failures)
-- Use Sitecore's test data helpers when available
-
-Referenced:
-@src/components/
-@sitecore.config.ts
-@.env.example
+---
+description: Sitecore development patterns for your project
+alwaysApply: false
+globs:
+  - 'src/components/**'
+  - 'src/lib/**'
+  - 'sitecore.config.ts'
+  - '**/*sitecore*'
+  - '**/*content*'
+---
+
+# Sitecore Development Patterns
+
+## Component Development
+
+Sitecore Component Naming:
+
+- Use descriptive, feature-based names: `HeroWithContent`, `ProductListing`, `ContentBlockGrid`
+- Follow PascalCase convention
+- Include component type in name when helpful: `LayoutContainer`, `ContentRenderer`
+
+Component Registration:
+
+- Export component from component file
+- Use descriptive, PascalCase names
+- Include TypeScript interfaces for props
+- Handle missing fields gracefully
+
+```typescript
+// Component props interface
+interface HeroProps {
+  fields: {
+    title: Field;
+    subtitle: Field;
+    backgroundImage: Field;
+  };
+}
+
+export default function Hero({ fields }: HeroProps) {
+  return (
+    <div>
+      <Text field={fields?.title} tag="h1" />
+      <Text field={fields?.subtitle} tag="p" />
+      <Image field={fields?.backgroundImage} />
+    </div>
+  );
+}
+```
+
+## Content Management
+
+Field Handling:
+
+- Always validate field existence before rendering
+- Use helper functions for common field operations
+- Handle empty/null fields gracefully
+- Prefer Sitecore field components over manual rendering
+
+```typescript
+// Good: Using Sitecore field components
+<Text field={fields?.title} tag="h1" />
+<RichText field={fields?.content} />
+
+// Avoid: Manual field value extraction unless necessary
+```
+
+Layout Service:
+
+- Use the Layout Service for page data fetching
+- Implement proper error boundaries for layout rendering
+- Handle missing placeholder content gracefully
+- Cache layout data when appropriate
+
+## Configuration
+
+Environment Setup:
+
+- Use `.env.local` for local development
+- Never commit API keys to version control
+- Use `.env.example` to document required variables
+- Configure Sitecore endpoints in `sitecore.config.ts`
+
+```typescript
+// sitecore.config.ts
+import { defineConfig } from '@sitecore-content-sdk/nextjs/config';
+
+export default defineConfig({
+  api: {
+    edge: {
+      contextId: process.env.SITECORE_EDGE_CONTEXT_ID || '',
+      clientContextId: process.env.NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID,
+      edgeUrl:
+        process.env.NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME ||
+        process.env.SITECORE_EDGE_PLATFORM_HOSTNAME ||
+        'https://edge-platform.sitecorecloud.io',
+    },
+    local: {
+      apiKey: process.env.SITECORE_API_KEY || '',
+      apiHost: process.env.SITECORE_API_HOST || '',
+    },
+  },
+  defaultSite: process.env.NEXT_PUBLIC_DEFAULT_SITE_NAME || 'default',
+  defaultLanguage: process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE || 'en',
+  editingSecret: process.env.SITECORE_EDITING_SECRET,
+});
+```
+
+## Security and Performance
+
+Security Best Practices:
+
+- Sanitize user inputs before processing
+- Validate content from Sitecore before rendering
+- Use HTTPS for all Sitecore connections
+- Never expose sensitive configuration in client-side code
+
+Content Fetching:
+
+- Implement caching strategy for content (React Query recommended)
+- Use GraphQL queries efficiently (avoid over-fetching)
+- Implement proper loading states and error handling
+- Consider content preview vs. published content scenarios
+
+## Development Patterns
+
+Error Handling:
+
+- Create custom error classes: `SitecoreFetchError`, `ComponentRenderError`
+- Log errors appropriately for debugging
+- Provide fallback content when components fail to render
+- Use error boundaries in React applications
+
+Placeholder Management:
+
+- Use strongly-typed placeholder names
+- Handle dynamic placeholders appropriately
+- Implement fallback rendering for missing placeholders
+- Follow Sitecore's placeholder naming conventions
+
+Testing:
+
+- Mock Sitecore services in unit tests
+- Test component rendering with various field configurations
+- Include tests for error scenarios (missing fields, API failures)
+- Use Sitecore's test data helpers when available
+
+Referenced:
+@src/components/
+@sitecore.config.ts
+@.env.example

package/dist/templates/nextjs/.env.container.example

@@ -1,27 +1,27 @@
-# This file should be copied to .env.local and modified with your environment variables to connect to your Sitecore container instance.
-
-# To secure the Sitecore editor endpoint exposed by your Next.js app
-# (`/api/editing/render` by default), a secret token is used. This (client-side)
-SITECORE_EDITING_SECRET=
-
-# Your Sitecore site name.
-# The value of the variable represents the default/configured site.
-NEXT_PUBLIC_DEFAULT_SITE_NAME=
-
-# Your default app language.
-NEXT_PUBLIC_DEFAULT_LANGUAGE=
-
-# Your Sitecore API key is needed to build the app.
-NEXT_PUBLIC_SITECORE_API_KEY=
-
-# Your Sitecore API hostname is needed to build the app.
-NEXT_PUBLIC_SITECORE_API_HOST=
-
-# Sitecore Content SDK npm packages utilize the debug module for debug logging.
-# https://www.npmjs.com/package/debug
-# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
-#DEBUG=content-sdk:*
-# Or be selective and show for example only layout service logs:
-#DEBUG=content-sdk:layout
-# Or everything BUT layout service logs:
-#DEBUG=content-sdk:*,-content-sdk:layout
+# This file should be copied to .env.local and modified with your environment variables to connect to your Sitecore container instance.
+
+# To secure the Sitecore editor endpoint exposed by your Next.js app
+# (`/api/editing/render` by default), a secret token is used. This (client-side)
+SITECORE_EDITING_SECRET=
+
+# Your Sitecore site name.
+# The value of the variable represents the default/configured site.
+NEXT_PUBLIC_DEFAULT_SITE_NAME=
+
+# Your default app language.
+NEXT_PUBLIC_DEFAULT_LANGUAGE=
+
+# Your Sitecore API key is needed to build the app.
+NEXT_PUBLIC_SITECORE_API_KEY=
+
+# Your Sitecore API hostname is needed to build the app.
+NEXT_PUBLIC_SITECORE_API_HOST=
+
+# Sitecore Content SDK npm packages utilize the debug module for debug logging.
+# https://www.npmjs.com/package/debug
+# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
+#DEBUG=content-sdk:*
+# Or be selective and show for example only layout service logs:
+#DEBUG=content-sdk:layout
+# Or everything BUT layout service logs:
+#DEBUG=content-sdk:*,-content-sdk:layout

package/dist/templates/nextjs/.env.remote.example

@@ -1,51 +1,51 @@
-# This file should be copied to .env.local and modified with your environment variables to connect to your remote Sitecore instance.
-
-# To secure the Sitecore editor endpoint exposed by your Next.js app
-# (`/api/editing/render` by default), a secret token is used. This (client-side)
-SITECORE_EDITING_SECRET=
-
-# Your Sitecore site name.
-# The value of the variable represents the default/configured site.
-NEXT_PUBLIC_DEFAULT_SITE_NAME=
-
-# Your default app language.
-NEXT_PUBLIC_DEFAULT_LANGUAGE=
-
-# Your unified Sitecore Edge Context Id for server-side use.
-# This will be used over any Sitecore Preview / Delivery Edge variables (above).
-SITECORE_EDGE_CONTEXT_ID=
-
-# Your Sitecore Edge Context Id for client-side use.
-# Will be used as a fallback if separate SITECORE_EDGE_CONTEXT_ID value is not provided
-NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=
-
-# Optional: custom Sitecore Edge Platform hostname (hostname or full URL).
-NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME=
-
-# Optional: custom Experience Edge hostname for media URL rewriting (e.g. staging).
-SITECORE_EXPERIENCE_EDGE_HOSTNAME=
-
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-NEXT_PUBLIC_PERSONALIZE_SCOPE=
-
-# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
-
-# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
-
-# Sitecore Content SDK npm packages utilize the debug module for debug logging.
-# https://www.npmjs.com/package/debug
-# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
-#DEBUG=content-sdk:*
-# Or be selective and show for example only layout service logs:
-#DEBUG=content-sdk:layout
-# Or everything BUT layout service logs:
-#DEBUG=content-sdk:*,-content-sdk:layout
-
-# Client ID, Secret and Rendering Host Name used for Design Library functionality
-SITECORE_AUTH_CLIENT_ID=
-SITECORE_AUTH_CLIENT_SECRET=
-SITECORE_RENDERINGHOST_NAME=
+# This file should be copied to .env.local and modified with your environment variables to connect to your remote Sitecore instance.
+
+# To secure the Sitecore editor endpoint exposed by your Next.js app
+# (`/api/editing/render` by default), a secret token is used. This (client-side)
+SITECORE_EDITING_SECRET=
+
+# Your Sitecore site name.
+# The value of the variable represents the default/configured site.
+NEXT_PUBLIC_DEFAULT_SITE_NAME=
+
+# Your default app language.
+NEXT_PUBLIC_DEFAULT_LANGUAGE=
+
+# Your unified Sitecore Edge Context Id for server-side use.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+SITECORE_EDGE_CONTEXT_ID=
+
+# Your Sitecore Edge Context Id for client-side use.
+# Will be used as a fallback if separate SITECORE_EDGE_CONTEXT_ID value is not provided
+NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=
+
+# Optional: custom Sitecore Edge Platform hostname (hostname or full URL).
+NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME=
+
+# Optional: custom Experience Edge hostname for media URL rewriting (e.g. staging).
+SITECORE_EXPERIENCE_EDGE_HOSTNAME=
+
+# An optional Sitecore Personalize scope identifier.
+# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
+# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
+NEXT_PUBLIC_PERSONALIZE_SCOPE=
+
+# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
+
+# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
+
+# Sitecore Content SDK npm packages utilize the debug module for debug logging.
+# https://www.npmjs.com/package/debug
+# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
+#DEBUG=content-sdk:*
+# Or be selective and show for example only layout service logs:
+#DEBUG=content-sdk:layout
+# Or everything BUT layout service logs:
+#DEBUG=content-sdk:*,-content-sdk:layout
+
+# Client ID, Secret and Rendering Host Name used for Design Library functionality
+SITECORE_AUTH_CLIENT_ID=
+SITECORE_AUTH_CLIENT_SECRET=
+SITECORE_RENDERINGHOST_NAME=

package/dist/templates/nextjs/.gitattributes

@@ -1,11 +1,11 @@
-# Line endings for this repository
-# See: https://help.github.com/en/articles/configuring-git-to-handle-line-endings
-# This should line up with the expectations from .eslintrc
-
-# Set the default behavior, in case people don't have core.autocrlf set.
-* text=crlf
-
-# Declare files that will always have CRLF line endings on checkout.
-*.ts text eol=crlf
-*.tsx text eol=crlf
-*.js text eol=crlf
+# Line endings for this repository
+# See: https://help.github.com/en/articles/configuring-git-to-handle-line-endings
+# This should line up with the expectations from .eslintrc
+
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=crlf
+
+# Declare files that will always have CRLF line endings on checkout.
+*.ts text eol=crlf
+*.tsx text eol=crlf
+*.js text eol=crlf

package/dist/templates/nextjs/.prettierrc

@@ -1,8 +1,8 @@
-{
-  "endOfLine": "crlf",
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 100
-}
+{
+  "endOfLine": "crlf",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

package/dist/templates/nextjs/.vscode/extensions.json

@@ -1,8 +1,8 @@
-{
-  "recommendations": [
-    "GraphQL.vscode-graphql",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "mikestead.dotenv",
-  ]
-}
+{
+  "recommendations": [
+    "GraphQL.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "mikestead.dotenv",
+  ]
+}

package/dist/templates/nextjs/.vscode/launch.json

@@ -1,15 +1,15 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Attach to Process",
-      "type": "node",
-      "request": "attach",
-      "skipFiles": ["<node_internals>/**"],
-      "port": 9229
-    }
-  ]
-}
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Process",
+      "type": "node",
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
+    }
+  ]
+}