Kitchen-Sink Markdown Showcase: Mermaid, Alerts, Tooltips & YouTube Facades

This post serves as a live visual reference and kitchen-sink test suite for the custom Markdown pipeline configured in astro.config.mjs. Every component below compiles at build time with near-zero client-side JavaScript overhead.

---

1. Automatic Technical Acronym Tooltips

Any acronym defined in src/data/techTerms.ts (such as MRAPMRAPMulti-Region Access PointCloudAn Amazon S3 global endpoint that dynamically routes client requests across multiple AWS regions using AWS Global Accelerator for lowest latency., OACOACOrigin Access ControlSecurityAWS CloudFront security mechanism that signs viewer requests with SigV4 to restrict Amazon S3 bucket access strictly to authorized CloudFront distributions., SigV4ASigV4AAWS Signature Version 4 AsymmetricSecurityAWS asymmetric request signing protocol using ECC public-private key pairs to authenticate multi-Region requests across S3 Multi-Region Access Points., BGPBGPBorder Gateway ProtocolNetworkingThe exterior gateway routing protocol that manages how packets are routed across autonomous systems (AS) forming the backbone of the Internet., NVMeNVMeNon-Volatile Memory ExpressStorageAn open logical-device interface specification engineered specifically for solid-state storage over PCIe buses, maximizing parallel I/O queues., ZFSZFSZettabyte File SystemStorageAn enterprise combined file system and logical volume manager featuring copy-on-write, data integrity checksumming, snapshots, and software RAID., or ASTASTAbstract Syntax TreeArchitectureA tree data structure representing the syntactic hierarchy of source code, generated by compilers and parsers to analyze, optimize, or transpile code.) is automatically upgraded at build time by src/plugins/rehype-tech-tooltips.mjs into an accessible, viewport-clamped glassmorphic popover card with domain category badges and keyboard Escape support.

By default (tooltips.autoLink: 'first' in src/theme.config.ts), only the first occurrence of each term per article receives a tooltip so paragraphs stay clean and readable.

---

2. Build-Time Inline SVG Mermaid Diagrams

Fenced ```mermaid code blocks are compiled at build time via rehype-mermaid and enriched with accessible role="img" titles by src/plugins/rehype-mermaid-a11y.mjs—shipping crisp inline <svg> nodes with zero client-side Mermaid runtime bundle:

---

3. GitHub-Style Callout Alerts

Standard GitHub Flavored Markdown alert blockquotes are transformed by src/plugins/remark-alerts.mjs into semantic callout boxes:

---

4. Syntax-Highlighted Code Blocks & Copy Toolbar

Shiki syntax highlighting runs at build time and pairs with a floating copy-to-clipboard button that gives instant visual checkmark feedback:

resource "aws_cloudfront_origin_access_control" "mrap_oac" {
  name                              = "mrap-sigv4a-oac-${var.environment_domain_slug}"
  description                       = "SigV4a Origin Access Control for S3 Multi-Region Access Point"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4a"
}

---

5. Privacy-Enhanced Click-to-Load YouTube Facade

Fenced ```youtube blocks download and optimize the video poster frame into .cache/youtube-thumbs/ at build time via src/plugins/remark-youtube.mjs. No youtube-nocookie.com iframe or third-party tracker is loaded until the reader clicks play: