@ethlete/contentful 4.0.0-next.12 → 4.0.0-next.14

package/generators/migrate-contentful-asset-classes/migration.js

@@ -0,0 +1,163 @@
+import { formatFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-to-contentful-v5/migration-scope.js';
+export const CONTENTFUL_ASSET_CLASSES_REPORT_PATH = 'contentful-asset-classes-migration-tasks.md';
+const REMOVED_CLASS_INPUTS = {
+    'et-contentful-video': { videoClass: 'et-contentful-video-video' },
+    'et-contentful-audio': {
+        audioClass: 'et-contentful-audio-audio',
+        figureClass: 'et-contentful-audio-figure',
+        figcaptionClass: 'et-contentful-audio-figcaption',
+    },
+    'et-contentful-file': { fileClass: 'et-contentful-file-anchor' },
+    'et-contentful-link': { textClass: 'et-contentful-link-anchor', anchorClass: 'et-contentful-link-anchor' },
+};
+const TAG_REGEX = new RegExp(`<(${Object.keys(REMOVED_CLASS_INPUTS).join('|')})(?=[\\s/>])`, 'g');
+const INLINE_TEMPLATE_REGEX = /template\s*:\s*`([\s\S]*?)`/g;
+const LINK_INPUT_DECLARATION_REGEX = /\b(textClass|anchorClass)\s*=\s*input\b/g;
+const lineOf = (source, index) => source.slice(0, index).split('\n').length;
+const findTagEnd = (source, from) => {
+    let quote = null;
+    for (let index = from; index < source.length; index++) {
+        const character = source[index];
+        if (quote) {
+            if (character === quote)
+                quote = null;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === '>') {
+            return index;
+        }
+    }
+    return -1;
+};
+const isInsideQuotes = (tag, index) => {
+    let quote = null;
+    for (let position = 0; position < index; position++) {
+        const character = tag[position];
+        if (quote) {
+            if (character === quote)
+                quote = null;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+    }
+    return quote !== null;
+};
+const removeClassInputs = (template) => {
+    const removals = [];
+    let content = '';
+    let cursor = 0;
+    for (const tagMatch of template.matchAll(TAG_REGEX)) {
+        const start = tagMatch.index ?? 0;
+        if (start < cursor)
+            continue;
+        const end = findTagEnd(template, start);
+        if (end === -1)
+            break;
+        const tagName = tagMatch[1] ?? '';
+        const inputs = Object.keys(REMOVED_CLASS_INPUTS[tagName] ?? {});
+        const attributeRegex = new RegExp(`(\\s+)(\\[?(${inputs.join('|')})\\]?(?:\\s*=\\s*(?:"[^"]*"|'[^']*'))?)(?=[\\s/>])`, 'g');
+        const tag = template.slice(start, end + 1);
+        const attributeMatches = [...tag.matchAll(attributeRegex)].filter((attributeMatch) => !isInsideQuotes(tag, attributeMatch.index ?? 0));
+        let nextTag = tag;
+        for (const attributeMatch of [...attributeMatches].reverse()) {
+            const index = attributeMatch.index ?? 0;
+            nextTag = nextTag.slice(0, index) + nextTag.slice(index + attributeMatch[0].length);
+        }
+        for (const attributeMatch of attributeMatches) {
+            removals.push({
+                offset: start + (attributeMatch.index ?? 0) + (attributeMatch[1] ?? '').length,
+                tagName,
+                input: attributeMatch[3] ?? '',
+                attribute: attributeMatch[2] ?? '',
+            });
+        }
+        content += template.slice(cursor, start) + nextTag;
+        cursor = end + 1;
+    }
+    content += template.slice(cursor);
+    return { content, removals };
+};
+const createRemovalTask = (filePath, line, removal) => {
+    const replacement = REMOVED_CLASS_INPUTS[removal.tagName]?.[removal.input] ?? '';
+    return {
+        id: `asset-class-input:${filePath}:${line}:${removal.input}`,
+        file: filePath,
+        line,
+        message: `Removed \`${removal.attribute}\` from \`${removal.tagName}\`. Style the static \`.${replacement}\` class instead.`,
+    };
+};
+const migrateHtmlFile = (filePath, source) => {
+    const { content, removals } = removeClassInputs(source);
+    return {
+        content,
+        tasks: removals.map((removal) => createRemovalTask(filePath, lineOf(source, removal.offset), removal)),
+    };
+};
+const migrateTsFile = (filePath, source) => {
+    const tasks = [];
+    const content = source.replace(INLINE_TEMPLATE_REGEX, (match, template, offset) => {
+        const templateOffset = offset + match.indexOf('`') + 1;
+        const result = removeClassInputs(template);
+        for (const removal of result.removals) {
+            tasks.push(createRemovalTask(filePath, lineOf(source, templateOffset + removal.offset), removal));
+        }
+        return result.removals.length > 0 ? match.replace(template, () => result.content) : match;
+    });
+    for (const declaration of source.matchAll(LINK_INPUT_DECLARATION_REGEX)) {
+        const line = lineOf(source, declaration.index ?? 0);
+        tasks.push({
+            id: `link-class-input:${filePath}:${line}`,
+            file: filePath,
+            line,
+            message: `\`${declaration[1]}\` is declared as an input. If this is a custom \`components.link\`, the rich-text renderer no longer sets it - it passes \`marks\` (the shared mark types) and \`richText: true\` instead.`,
+        });
+    }
+    return { content, tasks };
+};
+const renderReport = (tasks) => [
+    '# Contentful asset class inputs migration tasks',
+    '',
+    'The class inputs of `et-contentful-video`, `et-contentful-audio`, `et-contentful-file` and',
+    '`et-contentful-link` are gone. Every inner element carries a static `et-contentful-*` class instead.',
+    'The migration removed the bindings below; move their styling onto the named class. Delete this file when done.',
+    '',
+    ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}:${task.line}`, `- ${task.message}`, ''].join('\n')),
+].join('\n');
+export default async function migrateContentfulAssetClasses(tree, schema) {
+    console.log('\n🔄 Removing the Contentful asset class inputs...');
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    const tasks = [];
+    let filesChanged = 0;
+    scope.visit(tree, (filePath) => {
+        const isHtml = filePath.endsWith('.html');
+        const isTs = filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+        if (!isHtml && !isTs)
+            return;
+        const before = tree.read(filePath, 'utf-8');
+        if (!before)
+            return;
+        const result = isHtml ? migrateHtmlFile(filePath, before) : migrateTsFile(filePath, before);
+        tasks.push(...result.tasks);
+        if (result.content !== before) {
+            tree.write(filePath, result.content);
+            filesChanged++;
+            console.log(`   ✓ ${filePath}`);
+        }
+    });
+    if (tasks.length > 0) {
+        tree.write(CONTENTFUL_ASSET_CLASSES_REPORT_PATH, renderReport(tasks));
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    console.log(`\n✅ Updated ${filesChanged} file(s).`);
+    if (tasks.length > 0) {
+        console.log(`⚠️  ${tasks.length} site(s) need their styling moved — see ${CONTENTFUL_ASSET_CLASSES_REPORT_PATH}.`);
+    }
+}
+//# sourceMappingURL=migration.js.map

package/generators/migrate-contentful-asset-classes/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-contentful-asset-classes",
+  "title": "Remove the Contentful asset and link class inputs",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to migrate. Defaults to every project in the workspace. Every site is rewritten independently, so any scope is safe — use this to keep the diff reviewable.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to migrate, relative to the workspace root (e.g. 'libs/ui'). Unioned with `projects`. Defaults to the whole workspace.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

package/generators/migrate-contentful-default-components/contentful-default-components.js

@@ -19,9 +19,23 @@ const namesOwnComponents = (content, braceIndex) => {
     }
     return /(^|[,\s])components\s*:/.test(topLevel);
 };
+const contentfulImportNaming = (content, name) => [...content.matchAll(CONTENTFUL_IMPORT)].find((match) => name.test(match[1] ?? ''));
+export const importsProvideContentfulConfig = (content) => contentfulImportNaming(content, /\bprovideContentfulConfig\b/) !== undefined;
+export const findUnprovidedRendererTask = (filePath, content) => {
+    const match = contentfulImportNaming(content, /\b(ContentfulRichTextRendererComponent|ContentfulImports)\b/);
+    if (!match)
+        return null;
+    const line = lineOf(content, match.index ?? 0);
+    return {
+        id: taskId(filePath, line),
+        file: filePath,
+        line,
+        message: `Renders Contentful rich text, but no file calls \`provideContentfulConfig\`. Without it embedded assets are skipped and links lose router navigation. Add \`provideContentfulConfig({ ${SPREAD} })\` to the application providers.`,
+    };
+};
 export const scanContentfulDefaultComponentsInFile = (filePath, content) => {
     const tasks = [];
-    const importStatement = [...content.matchAll(CONTENTFUL_IMPORT)].find((match) => /\bprovideContentfulConfig\b/.test(match[1] ?? ''));
+    const importStatement = contentfulImportNaming(content, /\bprovideContentfulConfig\b/);
     if (!importStatement || content.includes(CONSTANT))
         return { next: null, tasks };
     const report = (index, message) => {

package/generators/migrate-contentful-default-components/migration.js

@@ -1,13 +1,23 @@
-import { formatFiles } from '@nx/devkit';
+import { formatFiles, visitNotIgnoredFiles } from '@nx/devkit';
 import { createMigrationScope } from '../migrate-to-contentful-v5/migration-scope.js';
-import { scanContentfulDefaultComponentsInFile, } from './contentful-default-components.js';
+import { findUnprovidedRendererTask, importsProvideContentfulConfig, scanContentfulDefaultComponentsInFile, } from './contentful-default-components.js';
 export const CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH = 'contentful-default-components-migration-tasks.md';
+const isSourceFile = (filePath) => filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+const workspaceProvidesContentfulConfig = (tree) => {
+    let found = false;
+    visitNotIgnoredFiles(tree, '', (filePath) => {
+        if (found || !isSourceFile(filePath))
+            return;
+        found = importsProvideContentfulConfig(tree.read(filePath, 'utf-8') ?? '');
+    });
+    return found;
+};
 const renderReport = (tasks) => [
     '# Contentful default components migration tasks',
     '',
     'The shipped asset and link components are opt-in. Without them embedded assets are skipped and',
     'hyperlinks render as plain anchors. The migration spread `CONTENTFUL_DEFAULT_COMPONENTS` into every',
-    'literal `provideContentfulConfig` call; the calls below need it by hand:',
+    'literal `provideContentfulConfig` call; the places below need it by hand:',
     '',
     '```ts',
     "import { CONTENTFUL_DEFAULT_COMPONENTS, provideContentfulConfig } from '@ethlete/contentful';",
@@ -25,19 +35,26 @@ export default async function migrateContentfulDefaultComponents(tree, schema) {
     console.log(`   Scope: ${scope.describe()}`);
     const changed = [];
     const tasks = [];
+    const rendererTasks = [];
     scope.visit(tree, (filePath) => {
-        if (!filePath.endsWith('.ts') || filePath.endsWith('.d.ts'))
+        if (!isSourceFile(filePath))
             return;
         const content = tree.read(filePath, 'utf-8');
         if (!content)
             return;
         const result = scanContentfulDefaultComponentsInFile(filePath, content);
+        const rendererTask = findUnprovidedRendererTask(filePath, content);
         tasks.push(...result.tasks);
+        if (rendererTask)
+            rendererTasks.push(rendererTask);
         if (result.next !== null) {
             tree.write(filePath, result.next);
             changed.push(filePath);
         }
     });
+    if (rendererTasks.length > 0 && !workspaceProvidesContentfulConfig(tree)) {
+        tasks.push(...rendererTasks);
+    }
     if (tasks.length > 0) {
         tree.write(CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH, renderReport(tasks));
     }
@@ -48,7 +65,7 @@ export default async function migrateContentfulDefaultComponents(tree, schema) {
         console.log(`\n✅ Spread CONTENTFUL_DEFAULT_COMPONENTS in ${changed.length} file(s).`);
     }
     if (tasks.length > 0) {
-        console.log(`\n⚠️  ${tasks.length} call(s) need the default components by hand — see ${CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH}.`);
+        console.log(`\n⚠️  ${tasks.length} place(s) need the default components by hand — see ${CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH}.`);
     }
     else if (changed.length === 0) {
         console.log('\n✅ Nothing to do.');

package/generators/migrate-contentful-default-components/schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/schema",
   "$id": "migrate-contentful-default-components",
-  "title": "Add withContentfulDefaultComponents() to provideContentfulConfig",
+  "title": "Spread CONTENTFUL_DEFAULT_COMPONENTS into provideContentfulConfig",
   "type": "object",
   "properties": {
     "projects": {

package/generators/migrate-to-contentful-v5/migration.js

@@ -3,7 +3,7 @@ import { createMigrationScope } from './migration-scope.js';
 export const CONTENTFUL_V5_REPORT_PATH = 'contentful-v5-migration-tasks.md';
 const COMPONENTS_PACKAGE = '@ethlete/components';
 const COMPONENTS_VERSION = '^1.0.0-next.32';
-/** Inputs that v5 dropped — the picture element now only carries static `et-picture-*` classes. */
+/** Inputs that 4.0 dropped — the picture element now only carries static `et-picture-*` classes. */
 const REMOVED_CLASS_INPUTS = ['imgClass', 'figureClass', 'figcaptionClass', 'pictureClass'];
 /** Renderer internals that are no longer exported from `@ethlete/contentful`. */
 const REMOVED_EXPORTS = [
@@ -188,7 +188,7 @@ const migratePackageJson = (tree, filePath) => {
     return { changed, tasks };
 };
 const renderReport = (tasks) => [
-    '# @ethlete/contentful v5 migration tasks',
+    '# @ethlete/contentful 4 migration tasks',
     '',
     'The codemod renamed the `et-contentful-image` `hasPriority` input to `priority`, removed the dropped',
     '`useTailwindClasses` config option and made sure `@ethlete/components` is declared. The sites below',
@@ -205,7 +205,7 @@ const renderReport = (tasks) => [
     ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}${task.line ? `:${task.line}` : ''}`, `- ${task.message}`, ''].join('\n')),
 ].join('\n');
 export default async function migrateToContentfulV5(tree, schema) {
-    console.log('\n🔄 Migrating to @ethlete/contentful v5...');
+    console.log('\n🔄 Migrating to @ethlete/contentful 4...');
     const scope = createMigrationScope(tree, schema);
     console.log(`   Scope: ${scope.describe()}`);
     const tasks = [];

package/migrations.json

@@ -4,6 +4,7 @@
       "name": "to-contentful-v5",
       "version": "4.0.0-next.7",
       "kind": "auto",
+      "level": "required",
       "description": "Move to the components picture, the renamed image inputs and the removed renderer internals.",
       "generator": "@ethlete/contentful:migrate-to-contentful-v5",
       "docs": "/contentful/"
@@ -12,9 +13,19 @@
       "name": "contentful-default-components",
       "version": "4.0.0-next.12",
       "kind": "auto",
-      "description": "Add withContentfulDefaultComponents() to provideContentfulConfig, and report the calls that need it by hand.",
+      "level": "required",
+      "description": "Spread CONTENTFUL_DEFAULT_COMPONENTS into provideContentfulConfig, and report the calls that need it by hand.",
       "generator": "@ethlete/contentful:migrate-contentful-default-components",
       "docs": "/contentful/"
+    },
+    {
+      "name": "contentful-asset-classes",
+      "version": "4.0.0-next.13",
+      "kind": "auto",
+      "level": "required",
+      "description": "Remove the dropped video, audio, file and link class inputs, and report each removal with the static class that replaces it.",
+      "generator": "@ethlete/contentful:migrate-contentful-asset-classes",
+      "docs": "/contentful/"
     }
   ]
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@ethlete/contentful",
-  "version": "4.0.0-next.12",
+  "version": "4.0.0-next.14",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
-    "@angular/common": "22.1.6",
-    "@angular/core": "22.1.6",
-    "@angular/router": "22.1.6",
-    "@contentful/rich-text-types": "17.2.7",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/router": "^22.1.0",
+    "@contentful/rich-text-types": "^17.0.0",
     "@ethlete/components": "^1.0.0-next.32",
     "@ethlete/core": "^5.0.0-beta.11",
     "@ethlete/query": "^6.0.0-beta.8",
-    "@nx/devkit": "23.1.0"
+    "@nx/devkit": "^23.0.0"
   },
   "peerDependenciesMeta": {
     "@nx/devkit": {

package/types/ethlete-contentful.d.ts

@@ -1,9 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Type, InputSignal, InjectionToken, Provider } from '@angular/core';
-import * as _ethlete_core from '@ethlete/core';
-import { NgClassType } from '@ethlete/core';
 import { GQL } from '@ethlete/query';
 import { Mark, BLOCKS, INLINES, NodeData, Block } from '@contentful/rich-text-types';
+import * as _ethlete_core from '@ethlete/core';
 import * as _ethlete_contentful from '@ethlete/contentful';
 import * as _ethlete_components from '@ethlete/components';
 import { PictureSource } from '@ethlete/components';
@@ -88,6 +87,43 @@ type ContentfulGqlCollectionFilterVariables<TCustomWhere extends Record<string,
     locale?: string;
 };
 
+type ContentfulGqlRichTextEntry = {
+    __typename?: string | null;
+    sys: {
+        id: string;
+    };
+    [field: string]: unknown;
+};
+type ContentfulGqlLinkList<T> = (T | null | undefined)[] | null;
+/**
+ * A rich-text field as returned by the Contentful GraphQL API. Select `json` and the `links` the
+ * document references, and pass the field to `[gqlRichText]` as-is.
+ */
+type ContentfulGqlRichText = {
+    json: RichTextResponse;
+    links?: {
+        assets?: {
+            block?: ContentfulGqlLinkList<ContentfulGqlAsset>;
+            hyperlink?: ContentfulGqlLinkList<ContentfulGqlAsset>;
+        } | null;
+        entries?: {
+            block?: ContentfulGqlLinkList<ContentfulGqlRichTextEntry>;
+            inline?: ContentfulGqlLinkList<ContentfulGqlRichTextEntry>;
+            hyperlink?: ContentfulGqlLinkList<ContentfulGqlRichTextEntry>;
+        } | null;
+    } | null;
+};
+/**
+ * Maps the `links` of a GraphQL rich-text field to the entries and assets the renderer resolves
+ * embeds against. An entry's content type id is the id in `contentTypeIds` whose GraphQL type name
+ * (PascalCase, separators dropped: `product-teaser` → `ProductTeaser`) equals its `__typename`, else the
+ * `__typename` with the first letter lower-cased. Entries without a `__typename` are dropped.
+ */
+declare const mapContentfulGqlLinks: (links: ContentfulGqlRichText["links"], contentTypeIds?: readonly string[]) => {
+    assets: ContentfulRestAsset[];
+    entries: ContentfulEntry[];
+};
+
 type MarkTagName = 'strong' | 'em' | 'u' | 'code' | 's' | 'sub' | 'sup';
 /**
  * Translates contentful text marks into the semantic html elements the marked text is
@@ -149,6 +185,9 @@ declare class ContentfulRichTextRendererComponent {
     private elementRef;
     private config;
     private document;
+    private location;
+    private url;
+    private injector;
     /**
      * The contentful response gotten via their REST api.
      * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
@@ -158,9 +197,25 @@ declare class ContentfulRichTextRendererComponent {
      * The path to where the rich text field is inside the contentful response. Dot and array notation is allowed.
      * @example "items[0].fields.html"
      */
-    richTextPath: _angular_core.InputSignal<string>;
+    richTextPath: _angular_core.InputSignal<string | undefined>;
+    /**
+     * A rich-text field from the Contentful GraphQL API, passed as-is. An alternative to `content` and
+     * `richTextPath`; setting both is an error in dev mode.
+     * @example { json, links: { assets: { block, hyperlink }, entries: { block, inline, hyperlink } } }
+     */
+    gqlRichText: _angular_core.InputSignal<ContentfulGqlRichText | null | undefined>;
+    /**
+     * A bare rich-text document, e.g. a rich-text field of an embedded entry. Pair it with `includes` so its
+     * embeds resolve. An alternative to `content` / `richTextPath` and `gqlRichText`.
+     * @example <et-contentful-rich-text-renderer [richText]="fields().body" [includes]="includes()" />
+     */
+    richText: _angular_core.InputSignal<RichTextResponse | null | undefined>;
+    /** The linked entries and assets `richText` resolves its embeds against, e.g. a custom component's `includes`. */
+    includes: _angular_core.InputSignal<ContentfulIncludeMap | null | undefined>;
+    private ancestorEntryIds;
     private readonly executedCommandsCache;
     private contentIncludesMap;
+    private linkLookup;
     private richTextData;
     private renderCommands;
     private renderInstructions;
@@ -175,7 +230,7 @@ declare class ContentfulRichTextRendererComponent {
     private findParent;
     private renderInsertAfter;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulRichTextRendererComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulRichTextRendererComponent, "et-contentful-rich-text-renderer", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "richTextPath": { "alias": "richTextPath"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulRichTextRendererComponent, "et-contentful-rich-text-renderer", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "richTextPath": { "alias": "richTextPath"; "required": false; "isSignal": true; }; "gqlRichText": { "alias": "gqlRichText"; "required": false; "isSignal": true; }; "richText": { "alias": "richText"; "required": false; "isSignal": true; }; "includes": { "alias": "includes"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare const isRichTextRootNode: (node: unknown) => node is RichTextResponse;
@@ -194,8 +249,8 @@ type ComponentLikeWithAsset = Type<{
 type ComponentLikeWithLink = Type<{
     href: InputSignal<string>;
     text: InputSignal<string>;
-    textClass: InputSignal<string>;
-    anchorClass?: InputSignal<string>;
+    marks?: InputSignal<readonly string[]>;
+    richText?: InputSignal<boolean>;
 }>;
 type ComponentLikeWithContentfulRendererInputs = Type<{
     fields?: InputSignal<any>;
@@ -221,14 +276,21 @@ type ContentfulConfig = {
      */
     customComponents: Record<string, ComponentLikeWithContentfulRendererInputs>;
     /**
-     * Additional hostnames that should be treated as internal links (in addition to the current page's host).
+     * Additional hosts that should be treated as internal links (in addition to the current page's host).
      * Useful when the app runs on localhost during development but Contentful content references the production domain.
-     * A configured hostname also covers its subdomains, so adding "example.com" treats
-     * "foo.example.com" as internal without matching unrelated public-suffix siblings.
+     * A host matches exactly, so a subdomain needs its own entry; `'*.example.com'` matches every subdomain of
+     * `example.com` (but not `example.com` itself).
      *
-     * @example ['example.com']
+     * @example ['example.com', '*.example.com']
      */
     internalHosts: string[];
+    /**
+     * Turns the entry an `entry-hyperlink` points at into an href. Return `null` to render the link text without a link.
+     * Without it, entry hyperlinks render as text.
+     *
+     * @example (entry) => (entry.sys.contentType.sys.id === 'page' ? `/${entry.fields.slug}` : null)
+     */
+    entryHref: ((entry: ContentfulEntry) => string | null) | null;
     /**
      * Default options for the contentful image api
      */
@@ -250,12 +312,15 @@ type ContentfulConfig = {
          */
         sizes: string[];
         /**
-         * Background color for the image in hex. Eg. `"000000"`
+         * Background color for the image in hex. Eg. `"000000"` (a leading `#` is stripped)
          */
         backgroundColor: string | null;
     };
 };
-type ContentfulConfigOptions = Partial<ContentfulConfig>;
+type ContentfulConfigOptions = Partial<Omit<ContentfulConfig, 'imageOptions'>> & {
+    /** Merged one level deep into the defaults, so a single option can be overridden. */
+    imageOptions?: Partial<ContentfulConfig['imageOptions']>;
+};
 type ContentfulLinkType = 'Space' | 'ContentType' | 'Environment' | 'Entry' | 'Asset' | 'Tag';
 type ContentfulLink<T extends ContentfulLinkType> = {
     type: 'Link';
@@ -349,15 +414,12 @@ type RichTextResponse = {
 
 declare class ContentfulAudioComponent {
     asset: _angular_core.InputSignal<ContentfulGqlAsset | ContentfulRestAsset | null | undefined>;
-    audioClass: _angular_core.InputSignal<NgClassType>;
-    figureClass: _angular_core.InputSignal<NgClassType>;
-    figcaptionClass: _angular_core.InputSignal<NgClassType>;
     protected data: _angular_core.Signal<{
         url: string;
         title: string | null;
     } | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulAudioComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulAudioComponent, "et-contentful-audio", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; "audioClass": { "alias": "audioClass"; "required": false; "isSignal": true; }; "figureClass": { "alias": "figureClass"; "required": false; "isSignal": true; }; "figcaptionClass": { "alias": "figcaptionClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulAudioComponent, "et-contentful-audio", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Every string `et-contentful-file` renders itself. Override them app-wide with {@link provideContentfulFileLabels}. */
@@ -381,14 +443,13 @@ declare const CONTENTFUL_FILE_LABELS: _angular_core.InjectionToken<_ethlete_core
 declare class ContentfulFileComponent {
     protected labels: _angular_core.Signal<_ethlete_contentful.ContentfulFileLabels>;
     asset: _angular_core.InputSignal<ContentfulGqlAsset | ContentfulRestAsset | null | undefined>;
-    fileClass: _angular_core.InputSignal<NgClassType>;
     protected data: _angular_core.Signal<{
         url: string;
         size: number | null;
         title: string | null;
     } | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulFileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulFileComponent, "et-contentful-file", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; "fileClass": { "alias": "fileClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulFileComponent, "et-contentful-file", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ContentfulImageComponent {
@@ -443,31 +504,32 @@ declare const generateContentfulImageSources: (data: ContentfulRestAsset | Conte
 
 declare class ContentfulLinkComponent {
     private document;
+    private location;
     private router;
     private config;
     private url;
     href: _angular_core.InputSignal<string>;
     text: _angular_core.InputSignal<string>;
-    textClass: _angular_core.InputSignal<string>;
-    anchorClass: _angular_core.InputSignal<string>;
+    marks: _angular_core.InputSignal<readonly string[]>;
+    richText: _angular_core.InputSignal<boolean>;
     protected usesRouterLink: _angular_core.Signal<boolean>;
+    protected anchorHref: _angular_core.Signal<string>;
     protected openInNewTab: _angular_core.Signal<boolean>;
     protected internalPath: _angular_core.Signal<string>;
     protected internalUrlTree: _angular_core.Signal<_angular_router.UrlTree>;
-    protected linkClass: _angular_core.Signal<string | null>;
+    protected modifierClasses: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulLinkComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulLinkComponent, "et-contentful-link", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "textClass": { "alias": "textClass"; "required": false; "isSignal": true; }; "anchorClass": { "alias": "anchorClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulLinkComponent, "et-contentful-link", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "marks": { "alias": "marks"; "required": false; "isSignal": true; }; "richText": { "alias": "richText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ContentfulVideoComponent {
     asset: _angular_core.InputSignal<ContentfulGqlAsset | ContentfulRestAsset | null | undefined>;
-    videoClass: _angular_core.InputSignal<NgClassType>;
     protected data: _angular_core.Signal<{
         url: string;
         contentType: string | null;
     } | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulVideoComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulVideoComponent, "et-contentful-video", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; "videoClass": { "alias": "videoClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulVideoComponent, "et-contentful-video", never, { "asset": { "alias": "asset"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare const CONTENTFUL_CONFIG: InjectionToken<ContentfulConfig>;
@@ -502,5 +564,5 @@ declare const CONTENTFUL_DEFAULT_COMPONENTS: {
 declare const provideContentfulConfig: (contentfulConfig?: ContentfulConfigOptions | null) => Provider;
 declare const isContentfulEntryType: <T extends ContentfulEntry>(entry: ContentfulEntry, type: string) => entry is T;
 
-export { CONTENTFUL_CONFIG, CONTENTFUL_DEFAULT_COMPONENTS, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
-export type { ComponentLikeWithAsset, ComponentLikeWithContentfulRendererInputs, ComponentLikeWithLink, ContentfulAssetComponents, ContentfulAssetFileData, ContentfulAssetImageData, ContentfulAssetLink, ContentfulAssetLinkItem, ContentfulCollection, ContentfulConfig, ContentfulConfigOptions, ContentfulContentTypeLink, ContentfulEntry, ContentfulEntryLink, ContentfulEntryLinkItem, ContentfulEntrySys, ContentfulEnvironmentLink, ContentfulFileLabels, ContentfulGqlAsset, ContentfulGqlCollectionFilterVariables, ContentfulGqlOrder, ContentfulGqlWhereFilter, ContentfulImageFocusArea, ContentfulImageResizeBehavior, ContentfulImageSourcesOptions, ContentfulIncludeMap, ContentfulLink, ContentfulLinkType, ContentfulMetadata, ContentfulRestAsset, ContentfulSpaceLink, ContentfulSys, ContentfulTagLink, ContentfulTagLinkItem, CreateContentfulIncludeMapConfig, RichTextResponse };
+export { CONTENTFUL_CONFIG, CONTENTFUL_DEFAULT_COMPONENTS, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, mapContentfulGqlLinks, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
+export type { ComponentLikeWithAsset, ComponentLikeWithContentfulRendererInputs, ComponentLikeWithLink, ContentfulAssetComponents, ContentfulAssetFileData, ContentfulAssetImageData, ContentfulAssetLink, ContentfulAssetLinkItem, ContentfulCollection, ContentfulConfig, ContentfulConfigOptions, ContentfulContentTypeLink, ContentfulEntry, ContentfulEntryLink, ContentfulEntryLinkItem, ContentfulEntrySys, ContentfulEnvironmentLink, ContentfulFileLabels, ContentfulGqlAsset, ContentfulGqlCollectionFilterVariables, ContentfulGqlOrder, ContentfulGqlRichText, ContentfulGqlRichTextEntry, ContentfulGqlWhereFilter, ContentfulImageFocusArea, ContentfulImageResizeBehavior, ContentfulImageSourcesOptions, ContentfulIncludeMap, ContentfulLink, ContentfulLinkType, ContentfulMetadata, ContentfulRestAsset, ContentfulSpaceLink, ContentfulSys, ContentfulTagLink, ContentfulTagLinkItem, CreateContentfulIncludeMapConfig, RichTextResponse };