docs: clean up

README.md

@@ -11,7 +11,7 @@
 ## CLI 命令
 
 ```bash
-# 克隆仓库后，npm link安装
+# 克隆仓库后，npm install & npm link安装
 
 # 在项目文件夹内运行
 ttrpg serve [dir] -p 3000
@@ -20,6 +20,10 @@ ttrpg serve [dir] -p 3000
 
 ## 组件语法
 
+### csv
+
+所有csv使用英文逗号分割。可使用空行。以#为注释。所有包含#或者英文逗号的字段，都应该使用双引号包裹。
+
 ### 骰子组件
 
 ```markdown
@@ -35,6 +39,22 @@ ttrpg serve [dir] -p 3000
 :table[./sparks.csv]{roll=true remix=true}
 ```
 
+### 卡牌组件
+
+假设准备有`./cards.csv`内容如下：
+
+```csv
+label,title,body
+1,卡牌1,这张卡牌的**效果**的markdown文本
+2,卡牌2,更多卡牌效果
+```
+
+```markdown
+:md-deck[./cards.csv]{grid="5x8" layers="title:1,1-5,1f8 body:1,5-5,8f3"}
+```
+
+上述卡牌将生成5x8的卡牌牌面排版，其中title层占第1行1-5列，8mm字体。
+
 ## 开发
 
 ```bash

content/deck-test.md

@@ -1,57 +1,15 @@
 # yaml/tag 代码块格式测试
 
-```yaml/tag
-tag: md-deck
-body: ./npcs.csv
-layers: body:1,6-5,8
-```
 :md-deck[./names.csv]{size="54x86" grid="5x8" bleed="1" padding="2" layers="name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s"}
 
-> [!NOTE]
-> Highlights information that users should take into account, even when skimming.
-
-> [!TIP]
-> Optional information to help a user be more successful.
-
-> [!IMPORTANT]
-> Crucial information necessary for users to succeed.
-
-> [!WARNING]
-> Critical content demanding immediate user attention due to potential risks.
-
-> [!CAUTION]
-> Negative potential consequences of an action.
-
 ## 使用 yaml/tag 语法创建 md-deck
 
 ```yaml/tag
 tag: md-deck
-body: ./sparks.csv
+body: ./names.csv
 size: 54x86
 grid: 5x8
 bleed: 1
 padding: 2
-font-size: 3
+layers: name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s
 ```
-
-## 使用 body 字段添加内容
-
-```yaml/tag
-tag: tag-box
-class: note
-body: |
-  这是一个提示框
-```
-
-## 带引号的值
-
-```yaml/tag
-tag: tag-alert
-type: warning
-class: my-alert
-body: 这是一个警告信息
-```
-
-## 旧的指令语法仍然可用
-
-:md-deck[./sparks.csv]{size="54x86" grid="5x8"}

content/index.md

@@ -36,3 +36,20 @@ bler
 ### 链接
 
 文本里面可以有:md-link[./stuff.md#啊什么]的啦
+
+### 信息框
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.

src/components/md-deck/CardLayer.tsx

@@ -24,7 +24,7 @@ export function CardLayer(props: CardLayerProps) {
         return (
           <>
             <article
-              class="absolute flex items-center justify-center text-center prose prose-sm"
+              class="absolute flex flex-col items-center justify-center text-center prose prose-sm"
               style={{
                 ...getLayerStyle(layer, dimensions()),
                 'font-size': `${layer.fontSize || 3}mm`