Webpage

Personal site: Angular app in src/Webpage.Frontend/. Blog and project copy live under src/Webpage.Frontend/content/; the static content index is built with npm run content:build in the frontend (see src/Webpage.Frontend/content/README.md for front matter).

Markdown image formats

Images in blog and project Markdown are compiled by src/Webpage.Frontend/scripts/build-content.mjs (Marked). Plain ![alt](url) works as usual. For size and layout without raw HTML, use a braced attribute block immediately after the closing ) of the image link.

Braced syntax (![alt](url){ … })

Only key=value pairs are read (spaces separate pairs). Values may be quoted with " or '.

Sizing (each value must match a safe length: number + unit, or auto):

Key	Example values
width	50%, 400px
height	300px, auto
max-width	90%, 32rem
max-height	480px, auto

Allowed units: %, px, rem, em, ch, vw, vh. Other CSS is not accepted (keeps output safe).

Block alignment (no text beside the image; use with width / max-width as needed):

Key	Values
align	left, center, or right

Float (text wraps beside the image): place the image line before the paragraphs that should run next to it. Section headings (h2 / h3) clear floats.

Key	Values
float	left or right

Floated images get a markdown-inline-img--float-* class so narrow viewports can drop the float (see src/Webpage.Frontend/src/styles.scss).

Examples

![Hero](/content/blog/my-post/hero.webp){width=50% align=center}
![Thumb](/content/blog/my-post/thumb.webp){width=320px height=200px}
![Shot](/content/blog/my-post/ui.webp){max-width=90% height=auto}
![Meme](/content/blog/my-post/meme.webp){width=50% float=right}
Following paragraph flows to the left of the image when there is room.

This syntax is not processed inside fenced code blocks.

Optional HTML figures

For captions or layouts that need <figure>, you can use raw HTML in Markdown. Styles live on app-content-detail .markdown-body in src/Webpage.Frontend/src/styles.scss.

• Base: class="markdown-figure" plus one modifier.
• Block (no wrap): markdown-figure--center, --left, or --right — figure width defaults to 50% of the column.
• Float (wrap): markdown-figure--float-left or markdown-figure--float-right — place the <figure> before the wrapping paragraphs.
• Custom width: style="--markdown-figure-width: 40%" on the <figure> element.

On viewports under 640px, figures and floated inline images stack to full width where applicable.