40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
|
import { Component, createSignal, onMount } from 'solid-js';
|
||
|
|
import { useLocation } from '@solidjs/router';
|
||
|
|
import { parseMarkdown } from './markdown';
|
||
|
|
|
||
|
|
const App: Component = () => {
|
||
|
|
const location = useLocation();
|
||
|
|
const [content, setContent] = createSignal('');
|
||
|
|
|
||
|
|
onMount(async () => {
|
||
|
|
// 根据路由加载对应的 markdown 文件
|
||
|
|
const path = location.pathname.slice(1) || 'index';
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/content/${path}.md`);
|
||
|
|
if (response.ok) {
|
||
|
|
const text = await response.text();
|
||
|
|
setContent(text);
|
||
|
|
} else {
|
||
|
|
setContent('# 欢迎使用 TTRPG Tools\n\n没有找到对应的内容文件。');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:dice[2d6+d8]` 插入骰子组件\n- 使用 `:table[./data.csv]` 插入表格组件');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class="min-h-screen bg-gray-50">
|
||
|
|
<header class="bg-white shadow">
|
||
|
|
<div class="max-w-4xl mx-auto px-4 py-4">
|
||
|
|
<h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main class="max-w-4xl mx-auto px-4 py-8">
|
||
|
|
<article class="prose prose-lg" innerHTML={parseMarkdown(content())} />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default App;
|