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
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.
| Channel | Meaning | Applied as |
|---|---|---|
variant="primary" | static attribute | an input, or a host attribute |
[variant]="tone" | property binding | the evaluated value |
(clicked)="buy()" | event binding | a 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:
{
"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.