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

package/dist/templates/angular/src/app/app.config.ts

@@ -0,0 +1,31 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter, withNavigationErrorHandler } from '@angular/router';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import {
+  provideLoaderRegistry,
+  handleNavigationError,
+  provideSitecoreAngular,
+  PreLoaderDataService,
+} from '@sitecore-content-sdk/angular';
+import { routes } from './app.routes';
+import { LOADERS } from './loaders';
+
+/**
+ * Client hydration is disabled so that RouterLink and other directives attach correctly
+ * after bootstrap. With provideClientHydration(), server-rendered DOM is reused and
+ * directive event listeners (e.g. RouterLink click) can fail to attach. Without
+ * hydration, the client re-renders the app and routing works as expected.
+ */
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideHttpClient(withFetch()),
+    provideSitecoreAngular({
+      notFoundRoute: '/404',
+      errorRoute: '/500',
+    }),
+    provideLoaderRegistry(LOADERS),
+    PreLoaderDataService,
+    provideRouter(routes, withNavigationErrorHandler(handleNavigationError())),
+  ],
+};

package/dist/templates/angular/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

package/dist/templates/angular/src/app/app.routes.server.ts

@@ -0,0 +1,15 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+/**
+ * Server route config. Define 404 and 500 with status so that when the loader resolver
+ * redirects to the not-found or error route (e.g. after NotFoundNavigationError or LoaderHttpError),
+ * the server responds with the correct HTTP status code instead of 200.
+ */
+export const serverRoutes: ServerRoute[] = [
+  { path: '404', renderMode: RenderMode.Server, status: 404 },
+  { path: '500', renderMode: RenderMode.Server, status: 500 },
+  {
+    path: '**',
+    renderMode: RenderMode.Server,
+  },
+];

package/dist/templates/angular/src/app/app.routes.ts

@@ -0,0 +1,28 @@
+import { Routes } from '@angular/router';
+import { loaderResolver } from '@sitecore-content-sdk/angular';
+import { PageComponent } from './pages/page.component';
+import { NotFoundComponent } from './pages/not-found.component';
+import { ErrorComponent } from './pages/error.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: '500',
+        component: ErrorComponent,
+        resolve: { page: loaderResolver('500') },
+      },
+      {
+        path: '404',
+        component: NotFoundComponent,
+        resolve: { page: loaderResolver('404') },
+      },
+      {
+        path: '**',
+        component: PageComponent,
+        resolve: { page: loaderResolver('page') },
+      },
+    ],
+  },
+];

package/dist/templates/angular/src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App {
+  protected readonly title = signal('angular-sample');
+}

package/dist/templates/angular/src/app/loaders/error.loader.ts

@@ -0,0 +1,12 @@
+import type { LoaderFn, Page } from '@sitecore-content-sdk/angular';
+import { errorPageResult } from './stub-utils';
+
+const DEFAULT_MESSAGE = 'Internal Server Error';
+
+/**
+ * 500 loader. Returns a page with route.fields.error set to the message.
+ * The Error component should read layout.sitecore.route.fields?.error?.value for custom text.
+ */
+export const errorLoader: LoaderFn<Page> = async (context) => {
+  return errorPageResult(context.url, DEFAULT_MESSAGE);
+};

package/dist/templates/angular/src/app/loaders/index.ts

@@ -0,0 +1,14 @@
+export { pageLoader } from './page.loader';
+export { notFoundLoader } from './not-found.loader';
+export { errorLoader } from './error.loader';
+
+import { pageLoader } from './page.loader';
+import { notFoundLoader } from './not-found.loader';
+import { errorLoader } from './error.loader';
+
+/** Loaders object for use in provideLoaderRegistry() and createLoaderDataServiceMiddleware(). */
+export const LOADERS = {
+  page: pageLoader,
+  '404': notFoundLoader,
+  '500': errorLoader,
+};

package/dist/templates/angular/src/app/loaders/not-found.loader.ts

@@ -0,0 +1,12 @@
+import type { LoaderFn, Page } from '@sitecore-content-sdk/angular';
+import { errorPageResult } from './stub-utils';
+
+const DEFAULT_MESSAGE = 'Page Not Found';
+
+/**
+ * 404 loader. Returns a page with route.fields.error set to the message.
+ * The NotFound component should read layout.sitecore.route.fields?.error?.value for custom text.
+ */
+export const notFoundLoader: LoaderFn<Page> = async (context) => {
+  return errorPageResult(context.url, DEFAULT_MESSAGE);
+};

package/dist/templates/angular/src/app/loaders/page.loader.ts

@@ -0,0 +1,15 @@
+import type { LoaderFn, Page } from '@sitecore-content-sdk/angular';
+import { NotFoundNavigationError } from '@sitecore-content-sdk/angular';
+import { stubPageResult } from './stub-utils';
+
+/**
+ * Page loader: fetches layout data from Sitecore for the current URL.
+ * Used by the route resolver to enable dynamic route rendering.
+ */
+export const pageLoader: LoaderFn<Page> = async (context) => {
+  const page = stubPageResult(context.url);
+  if (!page) {
+    throw new NotFoundNavigationError();
+  }
+  return page;
+};

package/dist/templates/angular/src/app/loaders/stub-utils.ts

@@ -0,0 +1,83 @@
+import type { Page } from '@sitecore-content-sdk/angular';
+import { LayoutServicePageState } from '@sitecore-content-sdk/angular';
+
+/**
+ * Stub helpers until proper implementation (e.g. Sitecore layout service integration).
+ * Used by app loaders to return minimal valid Page shapes.
+ */
+
+/**
+ * Returns a stubbed Page for the page loader: route data, mode data, 'en' locale and basic text fields.
+ * Replace with real layout/route data from Sitecore when implemented.
+ */
+export function stubPageResult(url: string): Page {
+  return {
+    layout: {
+      sitecore: {
+        context: {
+          url,
+        },
+        route: {
+          name: url,
+          placeholders: {},
+          fields: {},
+          databaseName: 'web',
+          deviceId: 'web',
+          itemLanguage: 'en',
+          itemVersion: 1,
+          layoutId: '123',
+          templateId: '123',
+          templateName: '123',
+        },
+      },
+    },
+    locale: 'en',
+    mode: {
+      name: LayoutServicePageState.Normal,
+      isNormal: true,
+      isPreview: false,
+      isEditing: false,
+      isDesignLibrary: false,
+      designLibrary: {
+        isVariantGeneration: false,
+      },
+    },
+  };
+}
+
+/**
+ * Returns a stubbed Page for not-found (404) or error (500) loaders with an error message in route.fields.error.
+ * Replace with proper error page handling when implemented.
+ */
+export function errorPageResult(url: string, errorMessage: string): Page {
+  return {
+    layout: {
+      sitecore: {
+        context: { url },
+        route: {
+          name: url,
+          placeholders: {},
+          fields: {
+            error: { value: errorMessage },
+          },
+          databaseName: 'web',
+          deviceId: 'web',
+          itemLanguage: 'en',
+          itemVersion: 1,
+          layoutId: '123',
+          templateId: '123',
+          templateName: '123',
+        },
+      },
+    },
+    locale: 'en',
+    mode: {
+      name: LayoutServicePageState.Normal,
+      isNormal: true,
+      isPreview: false,
+      isEditing: false,
+      isDesignLibrary: false,
+      designLibrary: { isVariantGeneration: false },
+    },
+  };
+}

package/dist/templates/angular/src/app/pages/error.component.ts

@@ -0,0 +1,124 @@
+import { Component, computed, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+const DEFAULT_TITLE = 'Internal Server Error';
+const DEFAULT_MESSAGE = 'Something went wrong on our end. Please try again later.';
+
+/**
+ * 500 error page component.
+ * Reads page from the '500' loader; displays route.fields.error.value or default text.
+ */
+@Component({
+  selector: 'app-error',
+  template: `
+    <div class="error-container">
+      <div class="error-content">
+        <h1 class="error-code">{{ errorCode }}</h1>
+        <h2 class="error-title">{{ errorTitle() }}</h2>
+        <p class="error-message">{{ errorMessage() }}</p>
+        <div class="error-actions">
+          <button class="btn btn-primary" (click)="goHome()">Go Home</button>
+          <button class="btn btn-secondary" (click)="retry()">Retry</button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .error-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      }
+
+      .error-content {
+        text-align: center;
+        background: white;
+        padding: 3rem;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        max-width: 500px;
+      }
+
+      .error-code {
+        font-size: 4rem;
+        font-weight: bold;
+        color: #e74c3c;
+        margin: 0;
+      }
+
+      .error-title {
+        font-size: 1.5rem;
+        color: #2c3e50;
+        margin: 1rem 0;
+      }
+
+      .error-message {
+        color: #7f8c8d;
+        margin: 1.5rem 0 2rem;
+      }
+
+      .error-actions {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+      }
+
+      .btn {
+        padding: 0.75rem 1.5rem;
+        border: none;
+        border-radius: 4px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .btn-primary {
+        background-color: #3498db;
+        color: white;
+      }
+
+      .btn-primary:hover {
+        background-color: #2980b9;
+      }
+
+      .btn-secondary {
+        background-color: #95a5a6;
+        color: white;
+      }
+
+      .btn-secondary:hover {
+        background-color: #7f8c8d;
+      }
+    `,
+  ],
+})
+export class ErrorComponent {
+  readonly errorCode = 500;
+
+  private readonly route = inject(ActivatedRoute);
+  private readonly routeData = toSignal(this.route.data);
+
+  private readonly errorFromPage = computed(() => {
+    const page = this.routeData()?.['page'] as
+      | { layout?: { sitecore?: { route?: { fields?: { error?: { value?: string } } } } } }
+      | undefined;
+    return page?.layout?.sitecore?.route?.fields?.error?.value;
+  });
+
+  readonly errorTitle = computed(() => DEFAULT_TITLE);
+  readonly errorMessage = computed(() =>
+    typeof this.errorFromPage() === 'string' ? this.errorFromPage()! : DEFAULT_MESSAGE
+  );
+
+  goHome(): void {
+    window.location.href = '/';
+  }
+
+  retry(): void {
+    window.location.reload();
+  }
+}

package/dist/templates/angular/src/app/pages/not-found.component.ts

@@ -0,0 +1,85 @@
+import { Component, computed, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RouterLink } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+const DEFAULT_TITLE = 'Page Not Found';
+const DEFAULT_MESSAGE = 'Sorry, the page you\'re looking for doesn\'t exist or has been moved.';
+
+/**
+ * 404 Not Found error page component.
+ * Reads page from the '404' loader; displays route.fields.error.value or default text.
+ */
+@Component({
+  selector: 'app-404',
+  standalone: true,
+  imports: [RouterLink],
+  template: `
+    <div class="not-found-container">
+      <div class="not-found-content">
+        <h1>404</h1>
+        <h2>{{ title() }}</h2>
+        <p>{{ message() }}</p>
+        <a routerLink="/" class="back-link">Return to Home</a>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .not-found-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #f5f5f5;
+    }
+
+    .not-found-content {
+      text-align: center;
+      padding: 2rem;
+    }
+
+    h1 {
+      font-size: 6rem;
+      margin: 0;
+      color: #333;
+    }
+
+    h2 {
+      font-size: 2rem;
+      margin: 1rem 0;
+      color: #666;
+    }
+
+    p {
+      font-size: 1.1rem;
+      color: #999;
+      margin-bottom: 2rem;
+    }
+
+    .back-link {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      background-color: #0061cc;
+      color: white;
+      text-decoration: none;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+    }
+
+    .back-link:hover {
+      background-color: #0052a3;
+    }
+  `],
+})
+export class NotFoundComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly routeData = toSignal(this.route.data);
+
+  private readonly errorFromPage = computed(() => {
+    const page = this.routeData()?.['page'] as { layout?: { sitecore?: { route?: { fields?: { error?: { value?: string } } } } } } | undefined;
+    return page?.layout?.sitecore?.route?.fields?.error?.value;
+  });
+
+  readonly title = computed(() => DEFAULT_TITLE);
+  readonly message = computed(() => (typeof this.errorFromPage() === 'string' ? this.errorFromPage()! : DEFAULT_MESSAGE));
+}

package/dist/templates/angular/src/app/pages/page.component.ts

@@ -0,0 +1,58 @@
+import { Component, computed, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Page } from '@sitecore-content-sdk/angular';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { LayoutComponent } from '../shared/layout.component';
+
+/**
+ * Page component that sets the Sitecore context and dictionary phrases, then renders the layout.
+ * Gets page and dictionary data from route resolvers.
+ * Displays current route and fields returned by pageLoader.
+ */
+@Component({
+  selector: 'app-page',
+  standalone: true,
+  imports: [LayoutComponent],
+  template: `
+    @let pageValue = page();
+    <section class="page-loader-info" style="margin: 1rem; padding: 1rem; border: 1px solid #ccc; border-radius: 4px;">
+      <h2 style="margin-top: 0;">Current route</h2>
+      <p><strong>URL:</strong> {{ router.url }}</p>
+
+      @if (pageValue) {
+        <h2>Page loader data</h2>
+        <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem;">
+          <dt>Route name</dt>
+          <dd>{{ routeName(pageValue) }}</dd>
+          <dt>Locale</dt>
+          <dd>{{ pageValue.locale }}</dd>
+          <dt>Site name</dt>
+          <dd>{{ pageValue.siteName ?? '—' }}</dd>
+          <dt>Mode</dt>
+          <dd>{{ pageValue.mode?.name ?? '—' }}</dd>
+          <dt>Route fields</dt>
+          <dd><pre style="margin: 0; font-size: 0.875rem;">{{ routeFieldsJson(pageValue) }}</pre></dd>
+        </dl>
+      }
+    </section>
+    @if (pageValue) {
+      <app-layout [page]="pageValue"></app-layout>
+    }
+  `,
+})
+export class PageComponent {
+  private readonly activatedRoute = inject(ActivatedRoute);
+  readonly router = inject(Router);
+  private data = toSignal(this.activatedRoute.data);
+  page = computed(() => this.data()?.page as Page | null);
+
+  routeName(p: Page): string {
+    return p?.layout?.sitecore?.route?.name ?? '—';
+  }
+
+  routeFieldsJson(p: Page): string {
+    const fields = p?.layout?.sitecore?.route?.fields;
+    if (fields == null || Object.keys(fields).length === 0) return '{}';
+    return JSON.stringify(fields, null, 2);
+  }
+}

package/dist/templates/angular/src/app/shared/layout.component.ts

@@ -0,0 +1,106 @@
+import { Component, input, computed, effect, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// import { RouterLink } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { Page, Field } from '@sitecore-content-sdk/angular';
+import { RouterLink } from '@angular/router';
+
+/**
+ * Route fields interface for page title
+ */
+interface RouteFields {
+  [key: string]: unknown;
+  Title?: Field<string>;
+}
+
+/**
+ * Layout component that provides the main structure for Sitecore pages.
+ * Renders header, main content, and footer placeholders.
+ * @public
+ */
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <div [class]="mainClass()">
+      <!-- <sc-editing-scripts></sc-editing-scripts> -->
+      <header>
+        <div id="header">
+          <a [routerLink]="'/'">Home</a>
+          <a [routerLink]="'/about'">About</a>
+        </div>
+      </header>
+      <main>
+        <div id="content">Main content</div>
+      </main>
+      <footer>
+        <div id="footer">footer</div>
+      </footer>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: block;
+      min-height: 100vh;
+    }
+
+    .editing-mode {
+      /* Styles for editing mode */
+    }
+
+    .prod-mode {
+      /* Styles for production mode */
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+    }
+
+    header {
+      width: 100%;
+    }
+
+    main {
+      flex: 1;
+      width: 100%;
+    }
+
+    footer {
+      width: 100%;
+    }
+  `,
+})
+export class LayoutComponent {
+  /**
+   * Page data from Sitecore
+   */
+  readonly page = input.required<Page>();
+
+  /**
+   * Current route data derived from page
+   */
+  readonly route = computed(() => this.page().layout?.sitecore?.route ?? null);
+
+  /**
+   * Main container CSS class based on editing mode
+   */
+  readonly mainClass = computed(() => (this.page().mode?.isEditing ? 'editing-mode' : 'prod-mode'));
+
+  private readonly titleService = inject(Title);
+
+  constructor() {
+    // Effect to update the page title when the page changes
+    effect(() => {
+      const route = this.route();
+      if (route) {
+        const fields = route.fields as RouteFields | undefined;
+        const title = fields?.Title?.value ?? 'Page';
+        this.titleService.setTitle(title);
+      }
+    });
+  }
+}

package/dist/templates/angular/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular Content SDK Sample</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/dist/templates/angular/src/main.server.ts

@@ -0,0 +1,8 @@
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(App, config, context);
+
+export default bootstrap;

package/dist/templates/angular/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));