@ngx-docs-markdown-kit/parser-md-card

Extension de @ngx-docs-markdown-kit/parser-md para un card de contenido general (imagen + titulo + subtitulo + contenido libre + botones), renderizado con <mat-card> REAL de Angular Material -- mismo mecanismo que parser-md-code-block: un fence de 4 backticks con un lang especial (content-card), reconocido via buildSegment(). Cero cambios al nucleo.

No confundir con la grilla cards (autogenerada por el manifiesto de contenido para la pagina propia de cada carpeta) -- este paquete es un card ÚNICO, escrito a mano, para contenido de una pagina.

Sintaxis

````content-card
@image
src: /images/logo.jpg
alt: Logo
align: center

@title
Mi **titulo**

@subtitle
Un subtitulo

@content
Contenido libre en Markdown, con *cualquier* formato.

@actions
[Ir](https://ejemplo.com)
[Info](https://ejemplo.com/info)
````

Los 5 campos (@image/@title/@subtitle/@content/@actions) son todos opcionales -- un card sin ninguno sigue siendo un <mat-card> vacio valido.

• @image: mismo formato clave:valor que parser-md-image (src obligatorio, alt/align/width/styles/title/placeholder/name opcionales) -- reusa <ndmk-image> de ese paquete, que es una dependencia real de este (siempre instalada junto con parser-md-card, independiente del flag --no-image del sitio).
• @title/@subtitle/@content: Markdown libre, renderizado con el mismo motor que el resto de la pagina.
• @actions: una lista de links de Markdown NORMAL ([etiqueta](url)) -- cada uno se convierte en un boton, en el MISMO ORDEN en que aparecen. No es una sintaxis propia, es Markdown que cualquiera ya sabe escribir.

Uso

import { createParser } from '@ngx-docs-markdown-kit/parser-md';
import { contentCardExtension } from '@ngx-docs-markdown-kit/parser-md-card';

const parser = createParser().use(contentCardExtension());

Y en el template, junto a los demas tipos de segmento:

@case ('content-card') {
  <ndmk-content-card
    [image]="segment.image"
    [titleHtml]="segment.titleHtml"
    [subtitleHtml]="segment.subtitleHtml"
    [contentHtml]="segment.contentHtml"
    [actions]="segment.actions"
  />
}

parser-md-card

Dependencias:

• @angular/animations: ^22.1.0
• @angular/cdk: ^22.1.0
• @angular/common: ^22.1.0
• @angular/compiler: ^22.1.0
• @angular/core: ^22.1.0
• @angular/forms: ^22.1.0
• @angular/material: ^22.1.0
• @angular/platform-browser: ^22.1.0
• @angular/platform-server: ^22.1.0
• @angular/router: ^22.1.0
• @angular/ssr: ^22.1.3
• @ngx-docs-markdown-kit/parser-md: file:./vendor/parser-md/ngx-docs-markdown-kit-parser-md-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-seo: file:./vendor/parser-md-seo/ngx-docs-markdown-kit-parser-md-seo-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-code-block: file:./vendor/parser-md-code-block/ngx-docs-markdown-kit-parser-md-code-block-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-code-block-themes: file:./vendor/parser-md-code-block-themes/ngx-docs-markdown-kit-parser-md-code-block-themes-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-image: file:./vendor/parser-md-image/ngx-docs-markdown-kit-parser-md-image-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-card: file:./vendor/parser-md-card/ngx-docs-markdown-kit-parser-md-card-0.1.0.tgz
• @ngx-docs-markdown-kit/parser-md-converter: file:./vendor/parser-md-converter/ngx-docs-markdown-kit-parser-md-converter-0.1.0.tgz
• @ngx-docs-markdown-kit/ui: file:./vendor/ui/ngx-docs-markdown-kit-ui-0.1.0.tgz
• rxjs: ~7.8.0
• tslib: ^2.3.0

Apartados de parser-md-card

• Docs -- Documentación de @ngx-docs-markdown-kit/parser-md-card -- card de contenido general con real de Angular Material.
• Parser MD Card -- Tarjetas de contenido reales (mat-card) desde un fence de Markdown, para sitios @ngx-docs-markdown-kit.

Docs de parser-md-card

REGRESAR A APARTADOS DE parser-md-card

Índice Docs de parser-md-card

• Primeros pasos -- Instalación y wiring de la extensión.
  • Instalación -- npm install + wiring de la extensión y el componente.
• Uso -- La sintaxis del fence ```content-card, sus 5 campos.
  • El fence ```content-card -- Card de contenido general -- imagen + título + subtítulo + contenido + botones, con real.
• Ecosistema -- Relación de @ngx-docs-markdown-kit/parser-md-card con el resto del kit -- de qué depende y qué la consume.
  • Relación con el ecosistema -- De qué depende @ngx-docs-markdown-kit/parser-md-card, quién la consume, y por qué no hay que confundirla con la grilla ```cards del núcleo.

Primeros pasos de parser-md-card

< Índice Docs de parser-md-card

Instalación de parser-md-card

< Primeros pasos de parser-md-card

npm install @ngx-docs-markdown-kit/parser-md-card

Trae @ngx-docs-markdown-kit/parser-md-image como dependencia real (siempre instalada junto con este paquete, independiente del flag --no-image del sitio) -- el campo @image del card la reusa directo.

Registrar la extensión

import { createParser } from '@ngx-docs-markdown-kit/parser-md';
import { contentCardExtension } from '@ngx-docs-markdown-kit/parser-md-card';

const parser = createParser().use(contentCardExtension());

Renderizar el segmento

En el template, junto a los demás tipos de segmento:

@case ('content-card') {
  <ndmk-content-card
    [image]="segment.image"
    [titleHtml]="segment.titleHtml"
    [subtitleHtml]="segment.subtitleHtml"
    [contentHtml]="segment.contentHtml"
    [actions]="segment.actions"
  />
}

Ver El fence ```content-card para la sintaxis completa.

Uso de parser-md-card

< Índice Docs de parser-md-card

El fence ```content-card de parser-md-card

< Uso de parser-md-card

Card de contenido general (imagen + título + subtítulo + contenido libre + botones), renderizado con <mat-card> REAL de Angular Material -- un fence de 4 backticks con un lang especial (content-card).

No confundir con la grilla cards (autogenerada por el manifiesto de contenido para la página propia de cada carpeta, ver parser-md) -- este paquete es un card ÚNICO, escrito a mano, para contenido de una página.

Ejemplo en vivo

FrugoCorp

El equipo detrás de ngx-docs-markdown-kit

Este mismo fence renderiza el card de arriba -- ejemplo real, no una captura.

Sitio Repositorio

Sintaxis

@image
src: /images/logo.jpg
alt: Logo
align: center

@title
Mi **título**

@subtitle
Un subtítulo

@content
Contenido libre en Markdown, con *cualquier* formato.

@actions
[Ir](https://ejemplo.com)
[Info](https://ejemplo.com/info)

Los 5 campos (@image/@title/@subtitle/@content/@actions) son todos opcionales -- un card sin ninguno sigue siendo un <mat-card> vacío válido.

• @image -- mismo formato clave:valor que parser-md-image (src obligatorio, alt/align/width/styles/title/placeholder/name opcionales) -- reusa <ndmk-image> de ese paquete.
• @title/@subtitle/@content -- Markdown libre, renderizado con el mismo motor que el resto de la página.
• @actions -- una lista de links de Markdown NORMAL ([etiqueta](url)) -- cada uno se convierte en un botón, en el MISMO ORDEN en que aparecen. No es una sintaxis propia, es Markdown que cualquiera ya sabe escribir.

Cómo funciona por dentro

La extensión (contentCardExtension(), en content-card-extension.ts) solo actúa sobre tokens code de marked cuyo lang sea exactamente content-card -- cualquier otro fence, incluido uno de 4 backticks con otro lang, sigue su camino normal. Son 3 archivos en total, arquitectura chica a propósito:

• splitFieldSections() parte el cuerpo del fence por línea, ANTES de re-lexear nada, cortando en cada marcador @campo. Esto permite que cada campo decida su propio tratamiento: @image se parsea como clave:valor con parseKeyValueLines (reusado de parser-md, el mismo parser que usa parser-md-image), mientras que @title/@subtitle/@content se re-lexean con ctx.lex/ ctx.render y se tratan como Markdown real -- mismo criterio de diseño que card-code-block de parser-md-code-block.
• extractActions() recorre el árbol de tokens de @actions de forma RECURSIVA (no solo el primer nivel) para juntar todos los links [etiqueta](url), incluso si quedaron anidados dentro de un párrafo o una lista -- así no importa cómo se agrupen visualmente los links en el Markdown fuente, todos se convierten en botones en el orden en que aparecen.
• ContentCardComponent (standalone, OnPush) recibe los 5 campos ya procesados (imagen + 3 HTML ya renderizados + lista de acciones) y arma el layout con <mat-card>/<mat-card-header>/ <mat-card-content>/<mat-card-actions> de Angular Material, más <ndmk-image> de parser-md-image para la imagen. Los 3 campos de texto se inyectan con DomSanitizer.bypassSecurityTrustHtml -- seguro en este caso puntual porque ese HTML sale de Markdown YA procesado por el propio parser-md (nunca de un usuario final sin pasar por el parser), el mismo criterio que usa CardCodeBlockComponent en parser-md-code-block.
• parser-md-image está declarada como dependencia REAL (no peer) en el ng-package.json de este paquete (allowedNonPeerDependencies) -- se instala siempre junto con parser-md-card, independiente de si el sitio la expone o no. Ver Relación con el ecosistema para el detalle completo.

Alcance conocido: hoy no hay spec dedicado para ContentCardComponent en sí -- la cobertura de tests (content-card-extension.spec.ts, 9 casos) cubre la extracción/parseo de los 5 campos, no el render del componente.

Ecosistema de parser-md-card

< Índice Docs de parser-md-card

Relación con el ecosistema de parser-md-card

< Ecosistema de parser-md-card

@ngx-docs-markdown-kit/parser-md-card es una extensión de parser-md -- no funciona sola, necesita registrarse con .use(contentCardExtension()) sobre un parser ya creado con createParser(). Ver Instalación para el wiring completo.

De qué depende

• @ngx-docs-markdown-kit/parser-md (peer) -- el motor que extiende. De ahí sale parseKeyValueLines (reusado tal cual para parsear @image) y el propio mecanismo de extensión (buildSegment, ctx.lex/ctx.render).
• @angular/material (peer) -- MatCardModule/MatButtonModule. El card se renderiza con <mat-card> REAL, no una imitación con <div> y estilos propios.
• @ngx-docs-markdown-kit/parser-md-image (dependencia REAL, no peer) -- declarada en ng-package.json bajo allowedNonPeerDependencies. El campo @image del card reusa <ndmk-image> y el mismo formato clave:valor de ese paquete (parseImageField en content-card-extension.ts llama a parseKeyValueLines con las mismas claves que parser-md-image acepta). Por ser dependencia real, parser-md-image se instala SIEMPRE junto con parser-md-card, incluso si un sitio generado con create-ngx-docs-site corrió con el flag --no-image -- parser-md-card la necesita internamente para poder resolver @image, sin importar si el sitio expone o no el fence \``image` propio de ese paquete.

Quién la usa hoy

create-ngx-docs-site (el CLI generador) la trae por default en la plantilla de cualquier sitio nuevo -- se puede omitir con el flag --no-card. Ninguna otra librería del ecosistema (parser-md-seo, parser-md-code-block, parser-md-code-block-themes, parser-md-converter, ui) depende de parser-md-card.

No confundir con la grilla cards del núcleo

parser-md tiene su propio mecanismo, con un nombre parecido pero una función completamente distinta: el fence ```cards que aparece AUTOGENERADO en ___content_dir.md, la página propia de cada carpeta/grupo de contenido (la grilla de tarjetas que lista sus hijos directos -- subcarpetas y páginas). Ese fence nunca se escribe a mano y no tiene nada que ver con este paquete.

content-card (este paquete) es un mecanismo distinto: un card ÚNICO, escrito a mano por el autor de una página, en cualquier lugar del cuerpo de un .md -- pensado para contenido libre (una bio de equipo, una llamada a la acción, una tarjeta de producto), no para navegación autogenerada. Ver El fence ```content-card para la sintaxis completa.

Parser MD Card de parser-md-card

REGRESAR A APARTADOS DE parser-md-card

GitHub | Sitio | FrugoCorp

parser-md-card extiende parser-md con un fence content-card (imagen/titulo/subtitulo/ contenido/acciones) que renderiza un <mat-card> REAL de Angular Material -- no una aproximacion en CSS plano. Depende de parser-md-image para su campo de imagen.

Por que un mat-card real y no un div con estilos

Un <mat-card> real trae accesibilidad, elevacion y comportamiento consistente con el resto de Angular Material de fabrica -- reproducirlo a mano en CSS es trabajo duplicado que se desincroniza en la primera actualizacion de tema. Distinto del fence ```cards autogenerado del nucleo (grilla automatica de tarjetas de un grupo): content-card es para una tarjeta puntual, escrita a mano.

Que trae de base

Seccion @actions con cualquier cantidad de links Markdown normales ([label](url)), renderizados como botones reales de mat-card-actions -- la misma fila de links de esta pagina, si se quisiera, podria vivir dentro de una tarjeta en vez de suelta.