方案
- chawan，支持sixel与kitty graphics protocol的终端浏览器，积极开发中： https://chawan.net/#:~:text=Homebrew
- webtui，仅css的终端主题，严格遵循
ch字符单位长度，易于与chawan集成: https://webtui.ironclad.sh/installation/astro/- astro，轻量编译: https://docs.astro.build/zh-cn/tutorial/2-pages/2/ 。像react, vue(vite)也是模板编译型框架，不过astro更轻量，适合写文档等简单的轻交互界面。也可以后期引入vue等框架，渐进开发。
- mdx，可运行js的markdown: https://docs.astro.build/en/guides/integrations-guide/mdx/
为什么要同时兼容HTML与TUI？
见： https://github.com/webtui/webtui/issues/144
有许多CLI工具，如docker/podman，会同时有webUI与TUI支持，但是2套完全不同的代码。而且大部分情况下，TUI的维护人很少，且不活跃，大多都是昙花一现。这个方案旨在主要支持HTML，但也能完美兼容TUI，不过需要自行安装/编译chawan，毕竟TUI用的人真的挺少，但tty或ssh等fallback情况下就很好用。
教程
astro
markdown文件会直接被astro编译为HTML，URL路由会按照目录结构展开
index.astro
---
// 类似vue中的<script setup>，astro仅在build时运行一次
import '../styles/global.css';
import Navigation from '../components/Navigation.astro';
const jsVar1 = "#000";
const { platform, username } = Astro.props;
---
{jsVar1 && <p>我非常乐意学习 Astro！</p>}
{jsVar2 === true ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}
<style define:vars={{ jsVar1, jsVar2 }}>
<Navigation />
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
<Social platform="twitter" username="astrodotbuild" /><script>import "../scripts/menu.js";</script>
<slot />
@media screen and (min-width: 636px) {}
:has(.menu[aria-expanded="true"]) .nav-links {display: unset;
}
mdx
webtui兼容包
尝试:<noscript>标签
<style></style>
<noscript><style> /* chawan样式 */ </style></noscript>
缺点是chawan开启js后失效。
js判断UA==chawan，注入css