import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};

import { Component } from '@angular/core';
import { Markdoc } from '@notiz/ngx-markdoc';

@Component({
  selector: 'app-docs',
  standalone: true,
  imports: [Markdoc],
  template: ` <markdoc src="assets/md/docs/getting-started.md"></markdoc> `,
})
export class DocsComponent {}

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

import { provideMarkdocOptions } from '@notiz/ngx-markdoc';
import { Config, Node, Tag } from '@markdoc/markdoc';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideMarkdocOptions({
      config: {
        tags: {
          figure: {
            selfClosing: true,
            attributes: {
              src: { type: String, required: true },
              alt: { type: String, required: true },
              caption: { type: String, required: true },
            },
            transform: (node: Node, config: Config) => {
              const { src, alt, caption } = node.transformAttributes(config);
              const imageTag = new Tag('img', { src, alt });
              const captionTag = new Tag('figcaption', {}, [caption]);
              return new Tag('figure', {}, [imageTag, captionTag]);
            },
          },
        },
      },
    }),
  ],
};