create-content-sdk-app 2.0.0 → 2.0.1

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

@@ -1,28 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<!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

@@ -1,8 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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));

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

@@ -1,65 +0,0 @@
-import {
-  AngularNodeAppEngine,
-  createNodeRequestHandler,
-  isMainModule,
-  writeResponseToNodeResponse,
-} from '@angular/ssr/node';
-import express from 'express';
-import { join } from 'node:path';
-import { createLoaderDataServiceMiddleware } from '@sitecore-content-sdk/angular';
-import { LOADERS } from './app/loaders';
-
-const browserDistFolder = join(import.meta.dirname, '../browser');
-
-const app = express();
-const angularApp = new AngularNodeAppEngine();
-
-/**
- * Loader data endpoint (/_data). Must use the same loaders as the client registry
- * so client-side navigation can fetch route data via POST /_data.
- */
-app.use(express.json());
-app.use(createLoaderDataServiceMiddleware({ loaders: LOADERS }));
-/**
- * Serve static files from /browser
- */
-app.use(
-  express.static(browserDistFolder, {
-    maxAge: '1y',
-    index: false,
-    redirect: false,
-  })
-);
-
-/**
- * Handle all other requests by rendering the Angular application.
- * Catches ExternalRedirectError from loaders so server-side external redirects send HTTP 302.
- */
-app.use((req, res, next) => {
-  angularApp
-    .handle(req)
-    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
-    .catch((err) => {
-      next(err);
-    });
-});
-
-/**
- * Start the server if this module is the main entry point
- * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
- */
-if (isMainModule(import.meta.url)) {
-  const port = process.env.PORT || 4000;
-  app.listen(port, (error) => {
-    if (error) {
-      throw error;
-    }
-
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-/**
- * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
- */
-export const reqHandler = createNodeRequestHandler(app);

package/dist/templates/angular/src/styles.css

@@ -1,3 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@import "tailwindcss";