Shirone

1. Markdown 与 MDX 能力对照表#

2. 动态表达式与数据映射#

MDX 允许在文件顶部使用 export const 声明作用域内的常量，这些常量既可以内联求值，也可以在模板中映射渲染：

• 核心框架：Astro 7
• UI 引擎：Svelte 5
• 设计令牌：M3E 设计令牌
• 架构模式：岛屿架构

数组与集合可以动态渲染为网格布局：

3. M3E 展示与布局原语（仅 SSR）#

按照 Shirone 的组件架构（docs/atomic-structure.md），无状态的展示组件会输出干净、无障碍的语义化 HTML，且不携带任何客户端运行时负载。

4. 反馈与加载指示器#

Shirone 提供完整还原 Material 3 Expressive 的动效与反馈原子：

5. Svelte 5 交互岛屿#

带有 client:visible 的组件会在进入视口时通过 IntersectionObserver 进行惰性水合：

6. Markdown 扩展兼容性#

Shirone 的 SSOT 统一插件管线与所有 Markdown 扩展保持完全兼容：

6.1 GitHub 仓库卡片#

saicaca/fuwari

flowchart TD
    MDX[MDX Source Entry] --> Compiler["@astrojs/mdx Compiler"]
    Compiler --> Plugins["Remark / Rehype SSOT Pipeline"]
    Plugins --> Islands["Svelte 5 Interactive Islands"]
    Islands --> Swup["Swup Client Navigation Shell"]
    Swup --> Screen["M3E Expressive Article View"]

7. 总结#

MDX 的原生集成让技术作者既能构建内容丰富的交互式文档，又不牺牲 Shirone 极快的静态性能。所有组件均遵循 Material 3 Expressive 令牌设计系统，确保一致性、无障碍性与视觉和谐。