README.md

@@ -11,7 +11,7 @@
 ## CLI 命令
 
 ```bash
-# 克隆仓库后，npm install & npm link安装
+# 克隆仓库后，npm link安装
 
 # 在项目文件夹内运行
 ttrpg serve [dir] -p 3000
@@ -20,10 +20,6 @@ ttrpg serve [dir] -p 3000
 
 ## 组件语法
 
-### csv
-
-所有csv使用英文逗号分割。可使用空行。以#为注释。所有包含#或者英文逗号的字段，都应该使用双引号包裹。
-
 ### 骰子组件
 
 ```markdown
@@ -39,22 +35,6 @@ 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,15 +1,57 @@
 # 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: ./names.csv
+body: ./sparks.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
+font-size: 3
 ```
+
+## 使用 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,20 +36,3 @@ 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 flex-col items-center justify-center text-center prose prose-sm"
+              class="absolute flex items-center justify-center text-center prose prose-sm"
               style={{
                 ...getLayerStyle(layer, dimensions()),
                 'font-size': `${layer.fontSize || 3}mm`