fix(content): render markdown content in resolver for markdown route (#…

…415)

packages/content/src/index.ts

@@ -3,6 +3,7 @@ export { injectContentFiles } from './lib/inject-content-files';
 export { ContentFile } from './lib/content-file';
 export { ContentRenderer } from './lib/content-renderer';
 export { default as MarkdownComponent } from './lib/markdown.component';
+export { default as MarkdownRouteComponent } from './lib/markdown-route.component';
 export { MarkdownContentRendererService } from './lib/markdown-content-renderer.service';
 export {
   provideContent,

packages/content/src/lib/markdown-route.component.ts

@@ -0,0 +1,38 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterViewChecked,
+  Component,
+  inject,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+
+import { ContentRenderer } from './content-renderer';
+import { AnchorNavigationDirective } from './anchor-navigation.directive';
+
+@Component({
+  selector: 'analog-markdown-route',
+  standalone: true,
+  imports: [AsyncPipe],
+  hostDirectives: [AnchorNavigationDirective],
+  preserveWhitespaces: true,
+  encapsulation: ViewEncapsulation.None,
+  template: `<div [innerHTML]="content" [class]="classes"></div>`,
+})
+export default class AnalogMarkdownRouteComponent implements AfterViewChecked {
+  private sanitizer = inject(DomSanitizer);
+  private route = inject(ActivatedRoute);
+  contentRenderer = inject(ContentRenderer);
+
+  protected content: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(
+    this.route.snapshot.data['renderedAnalogContent']
+  );
+
+  @Input() classes = 'analog-markdown-route';
+
+  ngAfterViewChecked() {
+    this.contentRenderer.enhance();
+  }
+}

packages/router/src/lib/markdown-helpers.ts

@@ -1,17 +1,31 @@
+import { inject } from '@angular/core';
 import { RouteExport } from './models';
 
 export function toMarkdownModule(
   markdownFileFactory: () => Promise<string>
 ): () => Promise<RouteExport> {
   return () =>
     Promise.all([import('@analogjs/content'), markdownFileFactory()]).then(
-      ([{ parseRawContentFile, MarkdownComponent }, markdownFile]) => {
+      ([
+        { parseRawContentFile, MarkdownRouteComponent, ContentRenderer },
+        markdownFile,
+      ]) => {
         const { content, attributes } = parseRawContentFile(markdownFile);
         const { title, meta } = attributes;
 
         return {
-          default: MarkdownComponent,
-          routeMeta: { data: { _analogContent: content }, title, meta },
+          default: MarkdownRouteComponent,
+          routeMeta: {
+            data: { _analogContent: content },
+            title,
+            meta,
+            resolve: {
+              renderedAnalogContent: async () => {
+                const contentRenderer = inject(ContentRenderer);
+                return contentRenderer.render(content);
+              },
+            },
+          },
         };
       }
     );