ngx-markdown-pages 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# ngx-markdown-pages
+
+An Angular library for rendering markdown files as routable pages. Built on top of [ngx-markdown](https://github.com/jfcere/ngx-markdown).
+
+## Install
+
+```bash
+npm install ngx-markdown-pages ngx-markdown marked
+```
+
+## Setup
+
+Call `provideMarkdownPages()` in your application providers:
+
+```typescript
+import { provideMarkdownPages } from 'ngx-markdown-pages';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideMarkdownPages(),
+  ],
+});
+```
+
+To enable the clipboard copy button on code blocks:
+
+```typescript
+provideMarkdownPages({ clipboard: true })
+```
+
+## Routing
+
+Define your markdown pages with `markdownPageRoutes()`:
+
+```typescript
+import { markdownPageRoutes } from 'ngx-markdown-pages';
+
+const routes: Routes = [
+  ...markdownPageRoutes([
+    { path: 'getting-started', markdownFile: 'assets/docs/getting-started.md' },
+    { path: 'api-reference', markdownFile: 'assets/docs/api-reference.md' },
+  ]),
+];
+```
+
+Each route renders a `MarkdownPageComponent` that loads and displays the specified markdown file. Heading anchor links with smooth scrolling are handled automatically.

package/fesm2022/ngx-markdown-pages.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, Component } from '@angular/core';
+import { provideMarkdown, MARKED_OPTIONS, MarkdownComponent } from 'ngx-markdown';
+import { Renderer } from 'marked';
+import { ActivatedRoute, Router } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+
+const MARKDOWN_PAGES_OPTIONS = new InjectionToken('MARKDOWN_PAGES_OPTIONS', { factory: () => ({}) });
+function provideMarkdownPages(options) {
+    return [
+        { provide: MARKDOWN_PAGES_OPTIONS, useValue: options ?? {} },
+        ...provideMarkdown({
+            markedOptions: {
+                provide: MARKED_OPTIONS,
+                useFactory: () => {
+                    const renderer = new Renderer();
+                    renderer.heading = ({ text, depth }) => {
+                        const slug = text
+                            .toLowerCase()
+                            .replace(/<[^>]*>/g, '')
+                            .replace(/[^\w\s-]/g, '')
+                            .replace(/\s+/g, '-');
+                        return `<h${depth} id="${slug}">${text}</h${depth}>`;
+                    };
+                    return { renderer };
+                },
+            },
+        }),
+    ];
+}
+
+class MarkdownPageComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    el = inject((ElementRef));
+    options = inject(MARKDOWN_PAGES_OPTIONS);
+    markdownSrc = toSignal(this.route.data.pipe(map((data) => data['markdownFile'])), { initialValue: '' });
+    onClick(event) {
+        const anchor = event.target.closest('a');
+        const href = anchor?.getAttribute('href');
+        if (!href?.startsWith('#'))
+            return;
+        event.preventDefault();
+        const fragment = href.substring(1);
+        this.router.navigate([], { relativeTo: this.route, fragment }).then(() => {
+            document.getElementById(fragment)?.scrollIntoView({ behavior: 'smooth' });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MarkdownPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: MarkdownPageComponent, isStandalone: true, selector: "mdp-markdown-page", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `<markdown [src]="markdownSrc()" [disableSanitizer]="true" [clipboard]="options.clipboard ?? false" />`, isInline: true, dependencies: [{ kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MarkdownPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mdp-markdown-page',
+                    standalone: true,
+                    imports: [MarkdownComponent],
+                    template: `<markdown [src]="markdownSrc()" [disableSanitizer]="true" [clipboard]="options.clipboard ?? false" />`,
+                    host: { '(click)': 'onClick($event)' },
+                }]
+        }] });
+
+function markdownPageRoutes(config) {
+    return config.map(({ path, markdownFile }) => ({
+        path,
+        component: MarkdownPageComponent,
+        data: { markdownFile },
+    }));
+}
+
+/*
+ * Public API Surface of ngx-markdown-pages
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MarkdownPageComponent, markdownPageRoutes, provideMarkdownPages };
+//# sourceMappingURL=ngx-markdown-pages.mjs.map

package/fesm2022/ngx-markdown-pages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-markdown-pages.mjs","sources":["../../src/lib/markdown-pages.config.ts","../../src/lib/markdown-page.component.ts","../../src/lib/markdown-pages.routes.ts","../../src/public-api.ts","../../src/ngx-markdown-pages.ts"],"sourcesContent":["import { InjectionToken, Provider } from '@angular/core';\nimport { provideMarkdown, MARKED_OPTIONS } from 'ngx-markdown';\nimport { Renderer } from 'marked';\n\nexport interface MarkdownPageConfig {\n  path: string;\n  markdownFile: string;\n}\n\nexport interface MarkdownPagesOptions {\n  clipboard?: boolean;\n}\n\nexport const MARKDOWN_PAGES_OPTIONS = new InjectionToken<MarkdownPagesOptions>(\n  'MARKDOWN_PAGES_OPTIONS',\n  { factory: () => ({}) }\n);\n\nexport function provideMarkdownPages(options?: MarkdownPagesOptions): Provider[] {\n  return [\n    { provide: MARKDOWN_PAGES_OPTIONS, useValue: options ?? {} },\n    ...provideMarkdown({\n      markedOptions: {\n        provide: MARKED_OPTIONS,\n        useFactory: () => {\n          const renderer = new Renderer();\n          renderer.heading = ({ text, depth }) => {\n            const slug = text\n              .toLowerCase()\n              .replace(/<[^>]*>/g, '')\n              .replace(/[^\\w\\s-]/g, '')\n              .replace(/\\s+/g, '-');\n            return `<h${depth} id=\"${slug}\">${text}</h${depth}>`;\n          };\n          return { renderer };\n        },\n      },\n    }),\n  ];\n}\n","import { Component, ElementRef, inject } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { map } from 'rxjs';\nimport { MarkdownComponent } from 'ngx-markdown';\nimport { MARKDOWN_PAGES_OPTIONS } from './markdown-pages.config';\n\n@Component({\n  selector: 'mdp-markdown-page',\n  standalone: true,\n  imports: [MarkdownComponent],\n  template: `<markdown [src]=\"markdownSrc()\" [disableSanitizer]=\"true\" [clipboard]=\"options.clipboard ?? false\" />`,\n  host: { '(click)': 'onClick($event)' },\n})\nexport class MarkdownPageComponent {\n  private route = inject(ActivatedRoute);\n  private router = inject(Router);\n  private el = inject(ElementRef<HTMLElement>);\n  protected options = inject(MARKDOWN_PAGES_OPTIONS);\n\n  markdownSrc = toSignal(\n    this.route.data.pipe(map((data) => data['markdownFile'] as string)),\n    { initialValue: '' }\n  );\n\n  onClick(event: MouseEvent) {\n    const anchor = (event.target as HTMLElement).closest('a');\n    const href = anchor?.getAttribute('href');\n    if (!href?.startsWith('#')) return;\n\n    event.preventDefault();\n    const fragment = href.substring(1);\n    this.router.navigate([], { relativeTo: this.route, fragment }).then(() => {\n      document.getElementById(fragment)?.scrollIntoView({ behavior: 'smooth' });\n    });\n  }\n}\n","import { Route } from '@angular/router';\nimport { MarkdownPageComponent } from './markdown-page.component';\nimport { MarkdownPageConfig } from './markdown-pages.config';\n\nexport function markdownPageRoutes(config: MarkdownPageConfig[]): Route[] {\n  return config.map(({ path, markdownFile }) => ({\n    path,\n    component: MarkdownPageComponent,\n    data: { markdownFile },\n  }));\n}\n","/*\n * Public API Surface of ngx-markdown-pages\n */\n\nexport type { MarkdownPageConfig, MarkdownPagesOptions } from './lib/markdown-pages.config';\nexport { provideMarkdownPages } from './lib/markdown-pages.config';\nexport { MarkdownPageComponent } from './lib/markdown-page.component';\nexport { markdownPageRoutes } from './lib/markdown-pages.routes';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-markdown-pages" />
+export * from './public-api';

package/lib/markdown-page.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class MarkdownPageComponent {
+    private route;
+    private router;
+    private el;
+    protected options: import("./markdown-pages.config").MarkdownPagesOptions;
+    markdownSrc: import("@angular/core").Signal<string>;
+    onClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MarkdownPageComponent, "mdp-markdown-page", never, {}, {}, never, never, true, never>;
+}

package/lib/markdown-pages.config.d.ts

@@ -0,0 +1,10 @@
+import { InjectionToken, Provider } from '@angular/core';
+export interface MarkdownPageConfig {
+    path: string;
+    markdownFile: string;
+}
+export interface MarkdownPagesOptions {
+    clipboard?: boolean;
+}
+export declare const MARKDOWN_PAGES_OPTIONS: InjectionToken<MarkdownPagesOptions>;
+export declare function provideMarkdownPages(options?: MarkdownPagesOptions): Provider[];

package/lib/markdown-pages.routes.d.ts

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+import { MarkdownPageConfig } from './markdown-pages.config';
+export declare function markdownPageRoutes(config: MarkdownPageConfig[]): Route[];

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ngx-markdown-pages",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "ngx-markdown": "^19.0.0",
+    "marked": "^15.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-markdown-pages.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-markdown-pages.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export type { MarkdownPageConfig, MarkdownPagesOptions } from './lib/markdown-pages.config';
+export { provideMarkdownPages } from './lib/markdown-pages.config';
+export { MarkdownPageComponent } from './lib/markdown-page.component';
+export { markdownPageRoutes } from './lib/markdown-pages.routes';