news.shamcode.ru | Создание статичного блога на Angular и Contentful

В предыдущей части - Как я переносил блог из CakePHP в Angular, я делился своей историей миграции блога из CakePHP в Angular. В этой статье, я хочу продемонстрировать связку Angular и Contentful. Я по шагам создам новое приложение, добавлю необходимые вендоры, а также реализую требуемые скрипты для загрузки и генерации контента.

Исходный код на github

Демо можно посмотреть на angular-blog.fafn.ru.

Демонстрация готового проекта Angular & Contentful

Создание проекта

Создать проект можно с помощью стандартных angular cli:

ng new angular-blog

Другой подход - использовать Nx. В настоящий момент Nx это не только monorepo, а также набор удобных утилит для разработки на javascript/typescript. Приятным бонусом при использовании Nx является jest и cypress из коробки.

Для генерация нового workspace, достаточно запустить команду:

yarn create nx-workspace --packageManager=yarn

Далее необходимо выполнить пройти шаги:

workspace и задать имя (angular-blog);
angular и ввести название приложения(blog);
выбрать препроцессор (scss);
пропустить e2e
добавить роутинг
отказаться от cloud;
подождать установку вендоров.

Проект создан и перехожу к настройке.

cd angular-blog

Конфигурация проекта

Задам несколько правил для workspace в nx.json:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "angular-blog",
  "cli": {
    "packageManager": "yarn",
    "defaultCollection": "@nx/angular"
  },
  "affected": {
    "defaultBase": "develop"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "test": {
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
    },
    "e2e": {
      "inputs": ["default", "^production"]
    },
    "lint": {
      "inputs": ["default", "{workspaceRoot}/.eslintrc.json", "{workspaceRoot}/.eslintignore"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/test-setup.[jt]s",
      "!{projectRoot}/.eslintrc.json"
    ],
    "sharedGlobals": []
  },
  "generators": {
    "@nx/angular:application": {
      "style": "scss",
      "linter": "eslint",
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress"
    },
    "@nx/angular:library": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nx/angular:component": {
      "style": "scss",
      "changeDetection": "OnPush",
      "standalone": true
    },
    "@schematics/angular:component": {
      "style": "scss",
      "changeDetection": "OnPush",
      "standalone": true
    }
  },
  "defaultProject": "blog"
}

В основном это правила для генерации компонентов и библиотек.

Чтобы в репозиторий не попадал мусор, в .gitignore исключу файлы и директории:

...

# Custom
/mocks/tmp
/apps/**/src/assets/locale
package-lock.json
.env
/apps/**/.env
/apps/**/source.xlf
.husky/*
junit.xml
/junit
/apps/**/dynamic-routes.txt
/apps/**/sitemap.xml
.yarnrc
yarn.lock
/apps/**/routes/blog.routes.ts
/apps/**/routes/*.routes.ts
libs/ui/categories/src/lib/categories.ts

Проект должен выглядеть стройно и опрятно. Поэтому добавлю пару расширений в eslint:

yarn add -D eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-prettier eslint-plugin-simple-import-sort

После установки в .eslintrc.json вставляю следующие правила:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@typescript-eslint", "prettier", "simple-import-sort", "import", "@angular-eslint/eslint-plugin-template", "@nx", "jsdoc"],
  "env": {
    "browser": true,
    "node": true
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": "./tsconfig.*?.json",
        "createDefaultProgram": true
      },
      "extends": ["plugin:@nx/typescript", "plugin:@nx/angular", "plugin:import/recommended"],
      "rules": {
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "default",
            "format": ["camelCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow",
            "filter": {
              "regex": "^(ts-jest|\\^.*)$",
              "match": false
            }
          },
          {
            "selector": "default",
            "format": ["camelCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },
          {
            "selector": "variable",
            "format": ["camelCase", "UPPER_CASE"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },
          {
            "selector": "typeLike",
            "format": ["PascalCase"]
          },
          {
            "selector": "enumMember",
            "format": ["PascalCase"]
          }
        ],
        "complexity": "error",
        "max-len": [
          "error",
          {
            "code": 140
          }
        ],
        "no-new-wrappers": "error",
        "no-throw-literal": "error",
        "import/no-unresolved": "off",
        "simple-import-sort/exports": "error",
        "simple-import-sort/imports": [
          "error",
          {
            "groups": [
              ["^\\u0000"],
              ["^@?(?!ekapusta)\\w"],
              ["^@ekapusta?\\w"],
              ["^@?(?!loaney)\\w"],
              ["^@loaney?\\w"],
              ["^\\w"],
              ["^[^.]"],
              ["^\\."]
            ]
          }
        ],
        "sort-imports": "off",
        "import/named": "off",
        "import/first": "error",
        "import/newline-after-import": "error",
        "import/no-duplicates": "error",
        "@typescript-eslint/consistent-type-definitions": "error",
        "no-shadow": "off",
        "@typescript-eslint/no-shadow": "error",
        "no-invalid-this": "off",
        "@typescript-eslint/no-invalid-this": ["warn"]
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nx/javascript"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nx/angular-template"],
      "rules": {
        "max-len": [
          "error",
          {
            "code": 140
          }
        ]
      }
    },
    {
      "files": ["*.component.ts"],
      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
    }
  ]
}

В .prettierrc задаю предпочитаемые настройки форматирования:

{
  "bracketSpacing": true,
  "printWidth": 140,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Чтобы не следить за чистотой кода, устанавливаю еще пару пакетов:

yarn add -D husky lint-staged

Для husky создаю два хука: pre-push, pre-commit.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn nx affected:lint
yarn nx affected:test

Также добавляю в корень проекта .lintstagedrc.json с содержимым:

{
  "*": ["nx affected:lint --fix --files", "nx format:write --files"]
}

Установлю пакет universal, который реализует SSR в Angular, чтобы поисковые системы могли индексировать сайт:

yarn ng add @nguniversal/express-engine

Отмечу, что при запуске ng, Nx будет трансформировать и предлагать альтернативный вариант. Если команда падает, то нужно в конце добавить параметр --project=name.

Еще меня немного подбешивает русский язык в шаблонах, поэтому установлю пакет локализации:

ng add @angular/localize

Начиная с 15 версии, в Angular изменился процесс сборки приложения для старых устройств. Необходимо создать файл .browserslistrc и указать требуемые правила. Я обычно использую следующую политику:

>0.3%
last 2 Chrome version
last 2 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
Chrome > 60
Firefox > 60
not ios_saf 12.2-12.6
not op_mini all
not dead

Немного изменю конфигурацию appConfig и создам отдельные файлы для браузерной версии приложения.

appConfig:

import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';

import { MetaService, MetricService } from '@angular-blog/core';

import { appRoutes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      appRoutes,
      withEnabledBlockingInitialNavigation(),
      withInMemoryScrolling({
        anchorScrolling: 'enabled',
        scrollPositionRestoration: 'enabled',
      })
    ),
    {
      provide: APP_INITIALIZER,
      useFactory: (metaService: MetaService, metricService: MetricService) => {
        return () => {
          metaService.init();
          metricService.init();
        };
      },
      multi: true,
      deps: [MetaService, MetricService],
    },
  ],
};

browserConfig:

import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideNoopAnimations } from '@angular/platform-browser/animations';

import { appConfig } from './app.config';

const browserConfig: ApplicationConfig = {
  providers: [provideNoopAnimations()],
};

export const config = mergeApplicationConfig(appConfig, browserConfig);

Установлю hammerjs, который позволяет отлавливать события на смартфонах:

yarn add -D hammerjs

В app.config.browser.ts добавлю импорт hammerjs.

Возможно я не умею настраивать CLI, но чтобы минифицировать HTML я запускаю следующий скрипт:

import { minify } from 'html-minifier';
import { existsSync, readdirSync, lstatSync, readFileSync, writeFileSync } from 'node:fs';
import { join } from 'node:path';

function fromDir(startPath: string, filter: string): string[] {
  if (!existsSync(startPath)) {
    console.warn('no dir ', startPath);
    return [];
  }
  const founded = [];
  const files = readdirSync(startPath);
  for (const file of files) {
    const filename = join(startPath, file);
    const stat = lstatSync(filename);
    if (stat.isDirectory()) {
      const foundedIn = fromDir(filename, filter);
      founded.push(...foundedIn);
    } else if (filename.indexOf(filter) >= 0) {
      founded.push(filename);
    }
  }

  return founded;
}

const files = fromDir(`dist/apps/${process.env.PROJECT ?? ''}`, '.html');

for (const filePath of files) {
  const fileContent = readFileSync(filePath, 'utf8');
  const minifiedValue = minify(fileContent.toString(), {
    removeComments: true,
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true,
  });

  writeFileSync(filePath, minifiedValue);
}

console.log(files);

Для его работы необходимо установить html-minifier:

yarn add -D html-minifier @types/html-minifier

Есть несколько крутых библиотек, упрощающих тестирование в Angular. Добавлю их:

yarn add -D ts-mockito jasmine-marbles ng-mocks

Так как раннер jest испытывает некоторые трудности с DOM, то установлю пакет:

yarn add -D  jest-environment-jsdom

Создам файл jest.jsdom.js:

const JSDOMEnvironment = require('jest-environment-jsdom').default;
const { TextEncoder, TextDecoder } = require('util');

class JSDOMEnvironmentExtended extends JSDOMEnvironment {
  async setup() {
    await super.setup();

    if (typeof this.global.TextEncoder === 'undefined') {
      this.global.TextEncoder = TextEncoder;
      this.global.TextDecoder = TextDecoder;
    }
  }
}

module.exports = JSDOMEnvironmentExtended;

Также необходимо обновить jest.preset.js:

const nxPreset = require('@nx/jest/preset').default;

module.exports = {
  ...nxPreset,
  testEnvironment: `${__dirname}/jest.jsdom.js`,
  collectCoverage: true,
  coverageDirectory: `${process.env.NX_WORKSPACE_ROOT}/coverage/${process.env['NX_TASK_TARGET_PROJECT']}`,
};

Для использования .env в проекте, добавлю dotenv:

yarn add -D dotenv

Создание шаблона приложения

Теперь перейду к разработке шаблона приложения.

Создам библиотеку ui/layout:

nx g lib ui/layout

Сгенерирую компонент layout:

yarn nx g c layout --project=ui-layout

Разметка страницы примет следующий вид в layout.component.ts:

<router-outlet name="top"></router-outlet>
<header>
  <router-outlet name="header"></router-outlet>
</header>
<main>
  <router-outlet name="breadcrumbs"></router-outlet>
  <router-outlet></router-outlet>
</main>
<footer>
  <router-outlet name="footer"></router-outlet>
</footer>
<router-outlet name="bottom"></router-outlet>

Добавлю каплю стилей в layout.component.scss:

:host {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  width: 100%;
}

header,
footer {
  flex-shrink: 0;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;

  & > * {
    width: 100%;
  }
}

В LayoutComponent импортирую RouterOutlet, чтобы блоки выводились в нужных местах.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'angular-blog-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [RouterOutlet],
})
export class LayoutComponent {}

Использую Angular Material, который идеально подходит для моего проекта.

Установлю библиотеки:

yarn add @angular/cdk @angular/material

В apps/blog/src/stylesheets буду хранить все файлы scss. Скачаю и закину в папку normalize.scss.

Сделаю пару алиасов на переменные variables.scss:

@use '@angular/material' as mat;

$color-default: mat.get-color-from-palette(mat.$gray-palette, 900);
$color-primary: mat.get-color-from-palette(mat.$indigo-palette, 500);
$color-accent: mat.get-color-from-palette(mat.$pink-palette, A200);
$color-warning: mat.get-color-from-palette(mat.$amber-palette, 500);
$color-danger: mat.get-color-from-palette(mat.$red-palette, 900);

Задам немного глобальных стилей global.scss:

@use 'variables' as variables;

*,
::after,
::before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-size: 16px;
  color: variables.$color-default;
  font-family:
    Roboto,
    'Helvetica Neue',
    Helvetica,
    Arial,
    Lucida Grande,
    sans-serif;
}

body {
  background-color: var(--mat-toolbar-container-background-color);
  color: var(--mat-toolbar-container-text-color);
}

Создам файл material-theme.scss, который будет содержать настройки оформления:

@use '@angular/material' as mat;

@include mat.core();

$blog-primary: mat.define-palette(mat.$indigo-palette, 500);
$blog-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $blog-primary,
      accent: $blog-accent,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $blog-primary,
      accent: $blog-accent,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

@include mat.all-component-themes($dark-theme);

html[data-theme='light'] {
  @include mat.all-component-colors($light-theme);
}

Подключу все в apps/blog/src/styles.scss:

/* You can add global styles to this file, and also import other style files */
@import './stylesheets/normalize';
@import './stylesheets/material-theme';
@import './stylesheets/global';

Можно занятья шапкой и подвалом. Добавлю header:

yarn nx g lib ui/header
yarn nx g c header --project=ui-header

В header выведу toolbar с логотипом, ссылками на гитхаб и о проекте, а также переключателем темы.

<angular-blog-container>
  <mat-toolbar>
    <angular-blog-menu></angular-blog-menu>
    <angular-blog-logo></angular-blog-logo>
    <span></span>
    <angular-blog-theme-switcher></angular-blog-theme-switcher>
    <angular-blog-about></angular-blog-about>
    <angular-blog-github></angular-blog-github>
  </mat-toolbar>
</angular-blog-container>

header.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';

import { ContainerComponent } from '@angular-blog/ui/container';

import { AboutComponent } from './about/about.component';
import { GithubComponent } from './github/github.component';
import { LogoComponent } from './logo/logo.component';
import { MenuComponent } from './menu/menu.component';
import { ThemeSwitcherComponent } from './theme-switcher/theme-switcher.component';

@Component({
  selector: 'angular-blog-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [MatToolbarModule, ThemeSwitcherComponent, ContainerComponent, LogoComponent, MenuComponent, AboutComponent, GithubComponent],
})
export class HeaderComponent {}

Из важного тут только ThemeSwitcherComponent и MenuComponent.

MenuComponent - это мобильное меню, в котором выведен список категорий блога.

ThemeSwitcherComponent - свитчер для dark/light темы. Механизм достаточно простой: при клике меняется свойство у <html>. Так как в проекте используется пререндер, значение храниться в куке.

Верстка:

<button mat-icon-button i18n-aria-label="Header|Theme Switcher" aria-label="Toggle dark and light modes" (click)="onToggle()">
  <mat-icon>dark_mode</mat-icon>
</button>

Реализация свитчера:

import { Platform } from '@angular/cdk/platform';
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, DestroyRef, Inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { tap } from 'rxjs';

import { CookieService, WindowService } from '@angular-blog/core';

@Component({
  selector: 'angular-blog-theme-switcher',
  standalone: true,
  templateUrl: './theme-switcher.component.html',
  styleUrls: ['./theme-switcher.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MatIconModule, MatButtonModule],
})
export class ThemeSwitcherComponent implements OnInit {
  control!: FormControl<boolean>;
  isDark = true;

  constructor(
    private readonly platform: Platform,
    private readonly windowService: WindowService,
    private readonly cookieService: CookieService,
    private readonly destroyRef: DestroyRef,
    @Inject(DOCUMENT) private readonly document: Document
  ) {}

  get mode(): string {
    return this.isDark ? 'dark' : 'light';
  }

  ngOnInit(): void {
    if (this.platform.isBrowser) {
      const prefers = this.windowService.window.matchMedia('(prefers-color-scheme: dark)').matches;
      const themePreference = this.cookieService.get('themePreference');

      this.isDark = themePreference ? themePreference === 'dark' : prefers ?? true;
      this.control = new FormControl<boolean>(this.isDark, { nonNullable: true });
      this.document.documentElement.setAttribute('data-theme', this.mode);

      this.control.valueChanges
        .pipe(
          tap((dark) => {
            this.isDark = dark;
            this.cookieService.set('themePreference', this.mode);
            this.document.documentElement.setAttribute('data-theme', this.mode);
          }),
          takeUntilDestroyed(this.destroyRef)
        )
        .subscribe();
    }
  }

  onToggle(): void {
    this.control.patchValue(!this.isDark);
  }
}

Добавлю footer:

yarn nx g lib ui/footer
yarn nx g c footer --project=ui-footer

В футоре выведу просто ссылки на приложения в маркетах и копирайт.

Стоит упомянуть про ContainerComponent и RowComponent&ColumnComponent.

Контейнер - блок, который выравнивает содержимое по центру.

Строка и колонка - авторская реализация сетки из bootstrap. Я подробно рассказывал про эти решения на медиуме.

Создание структуры данных блога в Contentful

Завожу новую учетку в Contentful.

Главная страница личного кабинета в Contentful

Cjp

В разделе Content Model создаю новый Content Type - Author.

Автор будет обладать следующими свойствами:

полным именем (fullName);
электронными адресом (email);
биографией (bio);
изображением (avatar).

Для объединения статей по группам, добавлю еще один тип - Category.

В категории будет всего два поля: имя (name) и путь (slug).

Заведу главную сущность в блоге - Post. Публикация получит следующие свойства:

дата создания (published);
заголовок (title);
описание (description);
категория (category);
изображение (image);
исходный медиа файл (imageOriginal);
автор (author);
название (headline);
интро (intro);
путь (slug);
содержимое (body);
количество просмотров (views);
время прочтения (readingTime);

Теперь можно заполнить блог контентом. Перехожу в раздел Content.

Для проекта я буду использовать новости с лучшего информационного ресурса - Панорама.

Добавлю несколько авторов:

Создам шесть категорий: политика, общество, наука, экономика, статьи и книги.

Перенесу чуть больше двадцати публикаций, для демонстрации пагинации.

Интерфейсы для работы с Contentful

Создам несколько интерфейсов для загрузки данных из Contentful и размещу их в contentful/common:

yarn nx g lib contentful/common

Каждый элемент в Contentful выражается в sys:

export interface ContentfulSys {
  /**
   * System type ("link")
   */
  readonly type: string;

  /**
   * Link type ("ContentType")
   */
  readonly linkType: string;

  /**
   * Name ("post" | "category" | ...)
   */
  readonly id: string;
}

type - тип;
linkType - ссылаемый объект;
id - имя.

Content Type представляется следующим образом:

export interface ContentfulEntity<T extends object = object> {
  /**
   * Metadata
   */
  readonly metadata: {
    /**
     * Tags
     */
    readonly tags: [];
  };

  /**
   * System
   */
  readonly sys: {
    /**
     * Space (master|stage|testing|...)
     */
    readonly space: {
      readonly sys: ContentfulSys;
    };

    /**
     * UUID
     */
    readonly id: string;

    /**
     * System type
     */
    readonly type: string;

    /**
     * Created date
     */
    readonly createdAt: string;

    /**
     * Updated date
     */
    readonly updatedAt: string;

    /**
     * Environment for space
     */
    readonly environment: {
      readonly sys: ContentfulSys;
    };

    /**
     * Revision
     */
    readonly revision: number;

    /**
     * ContentType
     */
    readonly contentType: {
      readonly sys: ContentfulSys;
    };

    /**
     * Locale
     */
    readonly locale: string;
  };

  /**
   * Entity fields
   */
  readonly fields: T;
}

Contentful имеет один предопределенный тип - Asset, сущность для хранения медиа файлов.

Я не планирую использовать ничего кроме изображений, то тип можно определить так:

export type ContentfulAsset = ContentfulEntity<{
  /**
   * Title
   */
  readonly title: string;

  /**
   * File
   */
  readonly file: {
    /**
     * Original url
     */
    readonly url: string;

    /**
     * Details
     */
    readonly details: {
      /**
       * File size
       */
      readonly size: number;

      /**
       * Image props
       */
      readonly image?: {
        readonly width: number;
        readonly height: number;
      };
    };

    /**
     * File name
     */
    readonly fileName: string;

    /**
     * Content type
     */
    readonly contentType: string;
  };
}>;

Коллекция в API будет отдана в следующем виде:

export interface ContentfulCollection<T extends ContentfulEntity = ContentfulEntity> {
  /**
   * System
   */
  readonly sys: ContentfulSys;

  /**
   * Total
   */
  readonly total: number;

  /**
   * Skip
   */
  readonly skip: number;

  /**
   * Limit
   */
  readonly limit: number;

  /**
   * Items
   */
  readonly items: T[];

  /**
   * Includes entities
   */
  readonly includes?: {
    /**
     * Entities
     */
    readonly Entry: ContentfulEntity[];

    /**
     * Assets
     */
    readonly Asset: ContentfulAsset[];
  };
}

Создам библиотеку и размещу там все необходимое для публикаций:

yarn nx g lib posts/common

Применяя интерфейсы Contentful, получу interface и dto для категорий:

port { ContentfulAsset, ContentfulEntity, ContentfulSys } from '@angular-blog/contentful/common';

/**
 * Category entity
 */
export interface Category {
  /**
   * Name
   */
  readonly name: string;

  /**
   * Slug
   */
  readonly slug: string;
}

/**
 * Category DTO
 */
export type ContentfulCategory = ContentfulEntity<Category>;

Аналогичная ситуация и с авторами:

/**
 * Author entity
 */
export interface Author {
  /**
   * Full name
   */
  readonly fullName: string;

  /**
   * Email
   */
  readonly email: string;

  /**
   * Bio
   */
  readonly bio?: string;

  /**
   * Avatar
   */
  readonly avatar: string;
}

/**
 * Author DTO
 */
export type ContentfulAuthor = ContentfulEntity<
  Omit<Author, 'avatar'> & {
    /**
     * Avatar asset
     */
    readonly avatar: {
      readonly sys: ContentfulSys;
    };
  }
>;

Самым сложной сущностей является публикация со следующей реализацией:

/**
 * Post entity
 */
export interface Post {
  /**
   * Tags
   */
  readonly tags: string[];

  /**
   * Published date
   */
  readonly published: string;

  /**
   * Meta title
   */
  readonly title: string;

  /**
   * Meta description
   */
  readonly description: string;

  /**
   * Category
   */
  readonly category: Category;

  /**
   * Path to image
   */
  readonly image: string;

  /**
   * Original asset for generate OG
   */
  readonly imageOriginal: ContentfulAsset;

  /**
   * Author
   */
  readonly author: Author;

  /**
   * Title
   */
  readonly headline: string;

  /**
   * Intro
   */
  readonly intro: string;

  /**
   * Slug
   */
  readonly slug: string;

  /**
   * Body
   */
  readonly body: string;

  /**
   * Count views
   */
  readonly views?: number;

  /**
   * Reading time in minutes
   */
  readonly readingTime?: number;
}

/**
 * Post DTO
 */
export type ContentfulPost = ContentfulEntity<
  Omit<Post, 'category' | 'image' | 'author' | 'tags'> & {
    /**
     * Category sys link
     */
    readonly category: {
      readonly sys: ContentfulSys;
    };

    /**
     * Image sys link
     */
    readonly image: {
      readonly sys: ContentfulSys;
    };

    /**
     * Author sys link
     */
    readonly author: {
      readonly sys: ContentfulSys;
    };
  }
>;

Создание страницы записи

Создам библиотеку и компонент для вывода полной публикации:

yarn nx g lib posts/view/page
yarn nx g c post-page --project=posts-view-page

В шаблоне покажу заголовок, автора, дату создания и содержимое статьи:

<h1>{{ post.headline }}</h1>
<p>{{ post.published | date : 'shortDate' }}, {{ post.author.fullName }}</p>
<div>
  <img [src]="post.image" alt="" />
</div>
<div [innerHTML]="post.body | safeHtml"></div>

Так как текст статьи это внешний HTML, добавлю pipe для вывода контента:

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml',
  standalone: true,
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private readonly sanitizer: DomSanitizer) {}

  transform(body: string | null | undefined): string {
    if (!body) {
      return '';
    }

    return this.sanitizer.sanitize(SecurityContext.NONE, this.sanitizer.bypassSecurityTrustHtml(body)) ?? '';
  }
}

Для работоспособности ссылок в теле публикации, необходимо как-то навешать события навигации. Самым простым решением будет просто отслеживание всех a.

import { DatePipe, NgIf } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { Post } from '@angular-blog/posts/common';

import { SafeHtmlPipe } from './safe-html.pipe';

@Component({
  selector: 'angular-blog-post-view-page',
  templateUrl: './post-view-page.component.html',
  styleUrls: ['./post-view-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgIf, DatePipe, SafeHtmlPipe],
})
export class PostViewPageComponent implements OnInit, OnDestroy, AfterViewInit {
  post!: Post;

  listenClickFunc!: () => void;

  constructor(
    private readonly activatedRoute: ActivatedRoute,
    private readonly router: Router,
    private readonly elementRef: ElementRef,
    private readonly renderer: Renderer2
  ) {}

  ngOnInit(): void {
    let route = this.activatedRoute.snapshot;

    while (route.firstChild) {
      route = route.firstChild;
    }

    if (route.data['post']) {
      this.post = route.data['post'];
    }
  }

  ngOnDestroy() {
    if (this.listenClickFunc) {
      this.listenClickFunc();
    }
  }

  ngAfterViewInit() {
    const navigationElements = Array.prototype.slice.call(this.elementRef.nativeElement.querySelectorAll('a[routerLink]'));

    navigationElements.forEach((elem) => {
      this.listenClickFunc = this.renderer.listen(elem, 'click', (event) => {
        event.preventDefault();
        void this.router.navigate([elem.getAttribute('routerLink')]);
      });
    });
  }
}

Это не лучшее решение, но для тестового проекта подходит.

Напишите в комментариях, как вы решаете эту проблему.

Создания списка публикаций

Добавлю список превью публикаций:

yarn nx g lib posts/ui/list
yarn nx g c post-list --project=posts-ui-list

Создам карточку для статьи:

yarn nx g lib posts/ui/card
yarn nx g c post-card --project=posts-ui-card

В превью выведу изображение, заголовок и интро.

<mat-card>
  <a [routerLink]="['/', post.slug]" [ngStyle]="post.image | backgroundImage" i18n-aria-label="Post Card|Image" aria-label="Open full post">
  </a>
  <mat-card-header>
    <mat-card-title>{{ post.headline }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div>{{ post.intro }}</div>
  </mat-card-content>
  <mat-card-actions>
    <a mat-button i18n="Post Card|Read more" [routerLink]="['/', post.slug]">Read more</a>
  </mat-card-actions>
</mat-card>

Для того чтобы не дергалась верстка, выведу изображение с помощью backgroundImage.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'backgroundImage',
  standalone: true,
})
export class BackgroundImagePipe implements PipeTransform {
  transform(image: string | null | undefined): object | null {
    return typeof image === 'string' && image.length ? { backgroundImage: `url(${image})` } : null;
  }
}

Теперь в списке с публикациями использую карточку:

<angular-blog-row>
  <angular-blog-column web="6" *ngFor="let post of posts">
    <angular-blog-post-card [post]="post"></angular-blog-post-card>
  </angular-blog-column>
</angular-blog-row>

Статьи вывожу в виде простого списка в мобильной версии, и в виде колонок на планшете и пк.

import { NgForOf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

import { Post } from '@angular-blog/posts/common';
import { PostCardComponent } from '@angular-blog/posts/ui/card';
import { ColumnComponent, RowComponent, TabletDirective, WebDirective } from '@angular-blog/ui/grid';

@Component({
  selector: 'angular-blog-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgForOf, PostCardComponent, ColumnComponent, TabletDirective, WebDirective, RowComponent],
})
export class PostListComponent {
  @Input({ required: true }) posts!: Post[];
}

Главная страница и разделы с категориями

Главная страница и раздел категории имеют общий дизайн, поэтому добавлю лейаут:

yarn nx g lib posts/ui/layout
yarn nx g c post-layout --project=posts-ui-layout

В макете создам сетку из двух колонок. В первой будет содержимое, во второй список разделов.

<angular-blog-container>
  <angular-blog-breadcrumbs></angular-blog-breadcrumbs>
  <angular-blog-row>
    <angular-blog-column tablet="8" web="9">
      <router-outlet></router-outlet>
    </angular-blog-column>
    <angular-blog-column tablet="4" web="3" class="no-mobile">
      <angular-blog-title i18n="Post Layout|Categories">Categories</angular-blog-title>
      <angular-blog-post-categories></angular-blog-post-categories>
    </angular-blog-column>
  </angular-blog-row>
</angular-blog-container>

В мобильной версии скрою категории и выведу их в шапке.

Как я и говорил ранее, в блоге может быть много статей. Добавлю компонент пагинации:

yarn nx g lib posts/ui/pagination
yarn nx g c post-pagination --project=posts-ui-pagination

Для отображения других страниц достаточно знать сколько всего их.

<ng-container *ngIf="links">
  <a mat-raised-button [routerLink]="link.route" *ngFor="let link of links">{{ link.label }}</a>
</ng-container>

Поэтому я генерирую объект с двумя свойствами: current и total. Затем просто циклом создаю требуемые ссылки.

import { NgForOf, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { ActivatedRoute, RouterLink } from '@angular/router';

import { NavigationLink } from '@angular-blog/core';

@Component({
  selector: 'angular-blog-post-pagination',
  templateUrl: './post-pagination.component.html',
  styleUrls: ['./post-pagination.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgIf, NgForOf, RouterLink, MatButtonModule],
})
export class PostPaginationComponent implements OnInit {
  links!: NavigationLink[];

  constructor(private readonly activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    let route = this.activatedRoute.snapshot;

    while (route.firstChild) {
      route = route.firstChild;
    }
    const pagination:
      | {
          readonly page: number;
          readonly total: number;
          readonly route: string;
        }
      | undefined = route.data['pagination'];

    if (pagination && pagination.total !== 1) {
      this.links = Array.from({ length: pagination.total }, (v: unknown, k: number) => {
        return {
          label: `${k + 1}`,
          route: pagination.route === '/feed' && k === 0 ? '/' : k === 0 ? pagination.route : `${pagination.route}/${k + 1}`,
        };
      });
    }
  }
}

Добавлю компонент со списком всех разделов:

yarn nx g lib posts/ui/categories
yarn nx g c post-categories --project=posts-ui-categories

В шаблоне покажу категории:

<mat-card>
  <mat-card-content>
    <angular-blog-categories></angular-blog-categories>
  </mat-card-content>
</mat-card>

Выведу хлебные крошки, чтобы упростить навигацию:

yarn nx g lib ui/breadcrumbs
yarn nx g c breadcrumbs --project=ui-breadcrumbs

Реализация тривиальна:

<ul *ngIf="breadcrumbs.length > 0">
  <li *ngFor="let breadcrumb of breadcrumbs">
    <a [routerLink]="breadcrumb.route">{{ breadcrumb.label }}</a>
  </li>
</ul>

Так как breadcrumbs используются в макете, то необходимо подписаться на событие изменения пути и обновлять их:

import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
import { filter, tap } from 'rxjs/operators';

import { NavigationLink } from '@angular-blog/core';

@Component({
  selector: 'angular-blog-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [RouterLink, RouterLinkActive, NgIf, NgFor],
})
export class BreadcrumbsComponent implements OnInit {
  breadcrumbs: NavigationLink[] = [];

  constructor(
    private readonly router: Router,
    private readonly activatedRoute: ActivatedRoute,
    private readonly changeDetectorRef: ChangeDetectorRef
  ) {
    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        tap(() => this.update()),
        takeUntilDestroyed()
      )
      .subscribe();
  }

  ngOnInit(): void {
    this.update();
  }

  private update(): void {
    let route = this.activatedRoute.snapshot;

    while (route.firstChild) {
      route = route.firstChild;
    }

    this.breadcrumbs = route.data['breadcrumbs'] ?? [];
    this.changeDetectorRef.markForCheck();
  }
}

Создам страницу, которая будет использоваться для главной и раздела:

yarn nx g lib posts/page
yarn nx g c post-page --project=posts-page

В шаблон добавлю заголовок, список публикаций и пагинацию.

<angular-blog-title i18n="Post Page|Last posts">Last posts</angular-blog-title>
<angular-blog-post-list [posts]="posts"></angular-blog-post-list>
<angular-blog-post-pagination></angular-blog-post-pagination>

Скрипт заполнения блога

Когда с версткой закончено, перейду к написанию скрипта заполнения блога данными.

Алгоритм будет следующим:

Скачивание списка разделов;
Получение всех публикаций и групп статей;
Генерация ленты новостей;
Создание страницы с полным описанием.

Добавлю библиотеку для утилит:

yarn nx g lib contentful/utils

Функция load:

import { get } from 'node:http';
import { catchError, combineLatest, EMPTY, map, Observable, of, switchMap, take, tap } from 'rxjs';

import { ContentfulCollection, ContentfulEntity } from '@angular-blog/contentful/common';

export interface RequestParams {
  readonly contentType: string;
  readonly limit?: number;
  readonly category?: string;
  readonly skip?: number;
}

export const REQUEST_LIMIT = 100;

export function getUrl(payload: RequestParams): string {
  let path = `http://cdn.contentful.com/spaces/${process.env['NX_CONTENTFUL_SPACE']}/environments/master/entries?access_token=${
    process.env['NX_CONTENTFUL_KEY']
  }&content_type=${payload.contentType}&limit=${payload.limit ?? REQUEST_LIMIT}`;

  if (payload.skip) {
    path += `&skip=${payload.skip}`;
  }
  if (payload.category) {
    path += `&fields.category.sys.id=${payload.category}`;
  }

  return path;
}

export function request<T extends ContentfulEntity = ContentfulEntity>(url: string): Observable<ContentfulCollection<T>> {
  return new Observable((observer) => {
    get(url, (response) => {
      const data: Uint8Array[] = [];

      response.on('data', (fragments) => data.push(fragments));

      response.on('end', () => {
        observer.next(JSON.parse(Buffer.concat(data).toString()) as ContentfulCollection<T>);
        observer.complete();
      });
      response.on('error', (error) => {
        observer.error(error);
        observer.complete();
      });
    });
  });
}

export function load<T extends ContentfulEntity = ContentfulEntity>(payload: RequestParams): Observable<ContentfulCollection<T>> {
  const limit = payload.limit ?? REQUEST_LIMIT;

  return new Observable((observer) => {
    request<T>(getUrl(payload))
      .pipe(
        switchMap((result) => {
          if (limit < result.total) {
            let index = 1;
            const requests = [];

            while (index * limit < result.total) {
              requests.push(
                request<T>(
                  getUrl({
                    limit: payload.limit,
                    contentType: payload.contentType,
                    skip: index * limit,
                  })
                )
              );
              index++;
            }
            /* eslint-disable @typescript-eslint/naming-convention */
            return combineLatest(requests).pipe(
              take(1),
              map((response) => {
                return {
                  ...result,
                  items: [...result.items, ...response.map((item) => item.items).reduce((a, c) => a.concat(c), [])],
                  includes: result.includes
                    ? {
                        Asset: [
                          ...result.includes.Asset,
                          ...response.map((item) => item.includes?.Asset ?? []).reduce((a, c) => a.concat(c), []),
                        ],
                        Entry: [
                          ...result.includes.Entry,
                          ...response.map((item) => item.includes?.Entry ?? []).reduce((a, c) => a.concat(c), []),
                        ],
                      }
                    : { Asset: [], Entry: [] },
                };
              })
            );
            /* eslint-enable @typescript-eslint/naming-convention */
          }

          return of(result);
        }),
        tap((result) => {
          observer.next(result);
          observer.complete();
        }),
        catchError((error) => {
          observer.error(error);
          observer.complete();

          return EMPTY;
        })
      )
      .subscribe();
  });
}

Суть в следующем:

Делаем первый запрос.
Если сущностей больше, то создаем несколько параллельных реквестов на загрузку данных и ждем их выполнения. Иначе обрабатываем результат.
Все ответы объединяем в один, в частности это коллекция items и includes.

Добавлю каст DTO в обычные объекты:

import * as markdown from 'markdown-it';

import { ContentfulAsset, ContentfulCollection } from '@angular-blog/contentful/common';
import { ContentfulAuthor, ContentfulCategory, ContentfulPost, Post } from '@angular-blog/posts/common';

const md = markdown();

export function castPost(
  postDto: ContentfulPost,
  categories: Record<string, ContentfulCategory>,
  authors: Record<string, ContentfulAuthor>,
  images: Record<string, ContentfulAsset>
): Post {
  return {
    tags: postDto.metadata.tags,
    published: postDto.fields.published ?? postDto.sys.createdAt,
    title: postDto.fields.title,
    description: postDto.fields.description,
    category: {
      slug: categories[postDto.fields.category.sys.id].fields.slug,
      name: categories[postDto.fields.category.sys.id].fields.name,
    },
    image: images[postDto.fields.image.sys.id].fields.file.url,
    imageOriginal: images[postDto.fields.image.sys.id],
    author: {
      fullName: authors[postDto.fields.author.sys.id].fields.fullName,
      email: authors[postDto.fields.author.sys.id].fields.email,
      avatar: images[authors[postDto.fields.author.sys.id].fields.avatar.sys.id].fields.file.url,
      bio: authors[postDto.fields.author.sys.id].fields.bio,
    },
    headline: postDto.fields.headline,
    intro: postDto.fields.intro,
    slug: postDto.fields.slug,
    body: postDto.fields.body?.length > 0 ? md.render(postDto.fields.body).replace(/(\r\n|\n|\r)/gm, '') : '',
    views: postDto.fields.views,
    readingTime: postDto.fields.readingTime,
  };
}

export function castPosts(data: ContentfulCollection<ContentfulPost>): Post[] {
  const categories: Record<string, ContentfulCategory> = {};
  const authors: Record<string, ContentfulAuthor> = {};
  const images: Record<string, ContentfulAsset> = {};

  if (data.includes) {
    data.includes.Entry.forEach((entry) => {
      if (entry.sys.contentType.sys.id === 'category') {
        categories[entry.sys.id] = entry as ContentfulCategory;
      } else if (entry.sys.contentType.sys.id === 'author') {
        authors[entry.sys.id] = entry as ContentfulAuthor;
      }
    });

    data.includes.Asset.forEach((asset) => {
      images[asset.sys.id] = asset as ContentfulAsset;
    });
  }

  return data.items.map((item) => castPost(item, categories, authors, images));
}

Создам утилиту генерации страницы с полным описанием:

import { ContentfulCollection } from '@angular-blog/contentful/common';
import { ContentfulPost, Post } from '@angular-blog/posts/common';

import { castPosts } from './cast.util';

export interface RoutePayload {
  readonly data: ContentfulCollection<ContentfulPost>;
  readonly template: (posts: Post[], index: number, total: number) => string;
  readonly templateView?: (post: Post) => string;
  readonly limit?: number;
}

export function createRoutes(payload: RoutePayload): string[] {
  const routes: string[] = [];
  const posts: Post[] = castPosts(payload.data);

  const total = posts.length;
  const limit = payload.limit ?? 4;

  for (let index = 0; index * limit < posts.length; index++) {
    routes.push(payload.template(posts.slice(index * limit, (index + 1) * limit), index, Math.ceil(total / limit)));
  }

  const templateView = payload.templateView;
  if (typeof templateView === 'function') {
    posts.forEach((post) => {
      routes.push(templateView(post));
    });
  }

  return routes;
}

Шаблоны поста и категории вынесу в отдельные методы:

import { Post } from '@angular-blog/posts/common';

export function getPostViewRoure(post: Post): string {
  return `  {
    path: '',
    loadComponent: () => import('@angular-blog/posts/view/page').then((modules) => modules.PostViewPageComponent),
    data: {
      post: ${JSON.stringify(post)},
      sitemap: {
        loc: '/${post.slug}',
      },
      meta: {
        title: '${post.title}',
        description: '${post.description}',
        image: '${post.image}',
        imageType: '${post.imageOriginal.fields.file.contentType}',
        imageWidth: '${post.imageOriginal.fields.file.details.image?.width ?? 800}',
        imageHeight: '${post.imageOriginal.fields.file.details.image?.height ?? 450}',
      },
      breadcrumbs: [
        {
          label: 'Блог',
          route: '/',
        },
        {
          label: '${post.category.name}',
          route: '/category/${post.category.slug}',
        },
      ],
    },
  }`;
}

export function getPostCategoryRoute(posts: Post[], index: number, total: number): string {
  const category = posts[0].category;

  return `  {
    path: '',
    loadComponent: () => import('@angular-blog/posts/page').then((modules) => modules.PostPageComponent),
    data: {
      posts: ${JSON.stringify(posts)},
      sitemap: {
        loc: '/category/${category.slug}${index > 0 ? '/' + (index + 1) : ''}',
      },
      meta: {
        title: '${category.name} от ${new Date().toLocaleDateString()} - Angular blog',
        description: 'Последние новости в категории: ${category.name}',
      },
      breadcrumbs: [
        {
          label: 'Блог',
          route: '/',
        },
        {
          label: '${category.name}',
          route: '/category/${category.slug}',
        },
      ],
      pagination: {
        page: ${index + 1},
        total: ${total},
        route: '/category/${category.slug}',
      },
    },
  }`;
}

export function getHomeRoute(posts: Post[], index: number, total: number): string {
  return `  {
    path: '',
    loadComponent: () => import('@angular-blog/posts/page').then((modules) => modules.PostPageComponent),
    data: {
      posts: ${JSON.stringify(posts)},
      sitemap: {
        loc: '${index > 0 ? '/feed/' + (index + 1) : '/'}',
      },
      meta: {
        title: 'Новости от ${new Date().toLocaleDateString()} - Angular blog',
        description: 'Последние новости на сайте',
      },
      breadcrumbs: [
        {
          label: 'Блог',
          route: '/',
        },
      ],
      pagination: {
        page: ${index + 1},
        total: ${total},
        route: '/feed',
      },
    },
  }`;
}

export function getRouteSeparate(path: string, hash: string | number): string {
  return `  {
    path: '${path}',
  loadChildren: () => import('./blog-${hash}.routes').then((modules) => modules.blogRoutes),
  }`;
}

Для записи результатов воспользуюсь этим:

import { writeFileSync } from 'node:fs';

import { getRouteSeparate } from './route.util';

export function writeRoutes(fileName: string, routes: string[]): void {
  writeFileSync(
    fileName,
    `import { Route } from '@angular/router';\n\n/* eslint-disable max-len */\nexport const blogRoutes: Route[] = [\n${routes.join(
      ',\n',
    )}\n];`,
  );
}

export function writeCategories(fileName: string, categories: object[]): void {
  writeFileSync(
    fileName,
    // eslint-disable-next-line max-len
    `import { Category } from '@angular-blog/posts/common';\n\n/* eslint-disable max-len */\nexport const categories: Category[] = ${JSON.stringify(
      categories,
    )};`,
  );
}

export function writeRoutesSeparate(fileName: string, routes: string[]): void {
  const separateRoutes: string[] = [];

  routes.forEach((route, index) => {
    writeRoutes(`apps/blog/src/app/routes/blog-${index}.routes.ts`, [route]);
    const match = route.match(/loc: '.+?'/);
    const path = match ? match[0].slice(7, -1) : '';

    separateRoutes.push(getRouteSeparate(path, index));
  });

  writeRoutes(fileName, separateRoutes);
}

В конце реализую функцию, которая будет загружать данные и генерировать страницы:

import { combineLatest, switchMap, take, tap } from 'rxjs';

import { ContentfulCollection } from '@angular-blog/contentful/common';
import { ContentfulCategory, ContentfulPost } from '@angular-blog/posts/common';

import { createRoutes } from './create.util';
import { load } from './load.util';
import { getHomeRoute, getPostCategoryRoute, getPostViewRoure } from './route.util';
import { generateSitemap } from './sitemap.util';
import { writeCategories, writeRoutesSeparate } from './write.util';

export function generate(payload: { readonly categoryPath: string; readonly postsPath: string; readonly pageLimit?: number }): void {
  const categories: Record<string, object> = {};

  load<ContentfulCategory>({ contentType: 'category' })
    .pipe(
      tap((response) =>
        response.items.forEach((item) => {
          categories[item.sys.id] = {
            name: item.fields.name,
            slug: item.fields.slug,
          };
        }),
      ),
      switchMap((response) => {
        const requests = [load<ContentfulPost>({ contentType: 'post' })];

        if (response.items.length > 0) {
          requests.push(
            ...response.items.map((item) =>
              load<ContentfulPost>({
                contentType: 'post',
                category: item.sys.id,
              }),
            ),
          );
        }

        // First, we will load all posts, second we will load posts by category
        return combineLatest(requests);
      }),
      take(1),
      tap((result: ContentfulCollection<ContentfulPost>[]) => {
        const categoriesWithPosts: object[] = [];

        const routes = result
          .map((data, index) => {
            if (index === 0) {
              return createRoutes({
                data,
                template: getHomeRoute,
                templateView: getPostViewRoure,
                limit: payload.pageLimit,
              });
            }

            if (data.items.length > 0) {
              const category = categories[data.items[0].fields.category.sys.id];

              if (category) {
                categoriesWithPosts.push(category);
              }
            }

            return createRoutes({
              data,
              template: getPostCategoryRoute,
              limit: payload.pageLimit,
            });
          })
          .reduce((acc: string[], current: string[]) => acc.concat(current), [] as string[]);

        // Write posts
        writeRoutesSeparate(payload.postsPath, routes);

        // Write categories for menu
        writeCategories(payload.categoryPath, categoriesWithPosts);

        // Generate sitemap and routes for prerender
        generateSitemap('blog');
      }),
    )
    .subscribe();
}

Создам load-content.ts, который будет вызывать generate:

import { config } from 'dotenv';

import { generate } from '@angular-blog/contentful/utils';

config({
  path: 'apps/blog/.env',
});

generate({
  categoryPath: 'libs/ui/categories/src/lib/categories.ts',
  postsPath: 'apps/blog/src/app/routes/blog.routes.ts',
});

Сборка приложения

Генерация блога выполняется запуском команды:

yarn ts-node --project=apps/blog/tsconfig.contentfull.json apps/blog/src/load-content.ts

Сборка проекта:

yarn nx run blog:prerender:production

Модифицируем HTML:

PROJECT=blog yarn ts-node minifier.ts

Для SSR добавлю раздачу шаблонов dark/light темы:

PROJECT=blog yarn ts-node ./scripts/light-mode.ts

Запуск сервера:

node dist/apps/blog/server/ru/main.js

Откроем в браузере:

В мобильной версии:

Резюме

Трудно написать веселый туториал. Кратко изложу проделанную работу.

Сначала создается приложение со всякой вкусовщиной.
Потом добавляются две страницы. Одна для вывода списка материалов, вторая для отображения полной публикации.
После в Contentful заводится структура блога, где определяются сущности и соответствующие материалы.
В конце идет написание скрипта, который выгребает из Contentful все статьи и генерирует страницы для Angular.

Фичи, которые есть в приложении, но опущены в рамках статьи:

Настройка SSR и пререндера;
Создание карты сайта;
Добавления мета тегов для SEO;
Использование локализации;
Переключение тем (светлая/темная);
Оптимизация генерации роутов для ускорения работы Angular router.

Исходный код на github поможет более подробно ознакомиться с проектом — https://github.com/Fafnur/angular‑blog.