Enhance metro route diagram with line colors and styling fixes

[xinshoutw]

This pull request improves the rendering and theming of Taipei MRT line diagrams in the documentation, ensuring consistent use of line colors, better mobile handling, and clearer visual distinction of terminal stations. It introduces a system to automatically color metro lines in Mermaid diagrams based on their names, updates the relevant CSS and JavaScript, and clarifies usage instructions in the documentation.

Metro diagram theming and rendering improvements:

• Added MRT line color variables to tokens.css, ensuring each line's color matches the site's palette and meets accessibility standards. (src/styles/tokens.css)
• Implemented automatic MRT line coloring in Mermaid diagrams by mapping edge labels (line names) to CSS variables and applying these colors dynamically after Mermaid renders the SVG. (src/scripts/content.ts)
• Enhanced Mermaid diagram CSS for improved appearance, including better node styling, terminal station highlighting, and consistent edge label formatting. (src/scripts/content.ts)
• Improved mobile and overflow handling for Mermaid diagrams, ensuring diagrams remain readable and scrollable on small screens. Added pre-render placeholders and error fallback for failed renders. (src/styles/markdown.css)

Documentation and usage clarification:

• Updated the MRT diagram usage notes in SPEC.md to specify that line colors are always applied via tokens in content.ts, and established conventions for labeling lines and marking terminal stations. (docs/spec/SPEC.md)
• Clarified route directions and updated the Mermaid diagram in the transportation article to use new conventions and highlight the terminal station. (src/content/articles/transportation.md) [1] [2]

[greptile-apps]

Greptile Summary

This PR adds token-based Taipei MRT line colors and applies them to Mermaid edges after client-side rendering, while improving terminal-node styling and failure/mobile presentation.

• Adds shared MRT palette tokens and Mermaid theme rules.
• Maps labeled MRT edges to their corresponding line colors.
• Preserves readable source when Mermaid rendering fails.
• Updates the transportation diagram and documents its authoring conventions.

Confidence Score: 5/5

The PR appears safe to merge with no concrete blocking or independently actionable issues identified.

The rendering, styling, fallback, documentation, and article changes remain aligned, and the investigated Mermaid integration concerns did not establish a reachable observable failure.

Important Files Changed

Filename	Overview
src/scripts/content.ts	Adds Mermaid theme configuration, MRT label-to-token mapping, post-render edge coloring, and render-failure fallback behavior.
src/styles/markdown.css	Improves Mermaid overflow behavior, establishes a mobile minimum width, and hides source only while client rendering is pending.
src/styles/tokens.css	Adds centralized color tokens for the six documented Taipei MRT lines.
src/content/articles/transportation.md	Clarifies train directions and updates the route diagram to use shaped nodes and destination styling.
docs/spec/SPEC.md	Documents the MRT edge-label convention and destination-node class used by the rendering enhancement.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Markdown Mermaid diagram] --> B[Client-side Mermaid rendering]
  B --> C[Rendered inline SVG]
  C --> D[Match edge labels to MRT tokens]
  D --> E[Apply route colors and terminal styling]
  B -->|Rendering fails| F[Expose readable Mermaid source]

Loading

_{Reviews (1): Last reviewed commit: "Merge pull request #24 from NTUST-OpenSo..." | Re-trigger Greptile}