Skip to content
All updates

Pages, written as Markdown

A .md file is now an Angular component's template. Declare templateMD in @Component, keep styleUrl, and route the page like any other — the class itself is the binding context.

What it looks like

ts
import { Component } from '@angular/core';
import templateMD from './button.page.md';

@Component({
  selector: 'app-button-page',
  templateMD,
  styleUrl: './button.page.css',
  components: [AppButton],
})
export class ButtonPage {
  count = 0;
  bump(): void { this.count++; }
}

Three things follow from a page being an ordinary component. The class is the binding context, so there is no context object to keep in sync. styleUrl reaches the rendered Markdown and stays scoped to that page. And it routes, injects and tests like a component, because it is one.

Also in this release

Styled tables

Tables have a design now: a header band, rounded border, banded rows and a hover state, all driven by --blasdoc-table-* tokens.

ChannelMeaningApplied as
variant="primary"static attributean input, or a host attribute
[variant]="tone"property bindingthe evaluated value
(clicked)="buy()"event bindinga subscription to the output

No more flicker

A code block renders its code on the first frame — unhighlighted and identically shaped — so there is no empty box while Shiki loads, and nothing reflows when the colours arrive. A lazy component now adopts the children already on screen instead of rebuilding them.

Headings have anchors

Every heading carries an anchor derived from its text, and blasdocPageHeadings() reads the outline from the same IR the renderer used. The table of contents on a docs page is built from it.

Re-skinning works in the dark

The theme's dark values sit behind :where() and its stylesheet is inserted first in the document head, so a --blasdoc-* token you set in :root wins in both colour schemes. It did not before — that was a real defect.

Upgrading

Nothing is breaking. <blasdoc-content> and the existing providers are unchanged; pages are an addition.

To use templateMD, point the build at Blasdoc's Angular builder:

json
{
  "build": { "builder": "@blasdoc/build:application" },
  "serve": { "builder": "@blasdoc/build:dev-server" }
}

Or skip the build integration entirely and extend blasdocPage({ templateMD }), which is plain TypeScript. Both are documented in Pages and Build integration.