initial commit

src/components/TypstBlock.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * TypstBlock 组件
+ * 
+ * 用于在 MDX 文章中渲染 Typst 数学公式和复杂排版。
+ * 
+ * 使用方式：
+ * <TypstBlock>
+ * $ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $
+ * </TypstBlock>
+ * 
+ * 注意：此组件需要在构建时安装 Typst 编译器。
+ * 如果 Typst 未安装，会显示原始代码块作为降级方案。
+ */
+
+interface Props {
+  class?: string;
+}
+
+const { class: className = '' } = Astro.props;
+
+// 获取子内容（Typst 代码）
+const content = await Astro.slots.render('default');
+const typstCode = content?.trim() || '';
+---
+
+<div class:list={['typst-block', 'my-6', className]}>
+  {/* 
+    Typst 渲染区域
+    在实际实现中，这里会调用 Typst 编译器将代码渲染为 SVG
+    目前作为占位符显示
+  */}
+  <div class="p-4 bg-muted rounded-lg border border-border overflow-x-auto">
+    {typstCode ? (
+      <div class="flex flex-col items-center">
+        {/* SVG 输出区域 (构建时会被替换为实际的 Typst 渲染结果) */}
+        <div class="typst-output text-lg" data-typst-code={typstCode}>
+          <code class="font-mono text-primary-600 dark:text-primary-400">
+            {typstCode}
+          </code>
+        </div>
+        <span class="text-xs text-foreground/40 mt-2">Typst 公式</span>
+      </div>
+    ) : (
+      <p class="text-foreground/40 text-center">请提供 Typst 代码</p>
+    )}
+  </div>
+</div>
+
+<style>
+  .typst-block {
+    /* 确保 Typst 内容居中显示 */
+    text-align: center;
+  }
+
+  .typst-output {
+    /* 为数学公式提供合适的样式 */
+    font-family: 'Latin Modern Math', 'STIX Two Math', 'Noto Serif SC', serif;
+    line-height: 1.8;
+  }
+
+  .typst-output svg {
+    /* SVG 输出样式 */
+    max-width: 100%;
+    height: auto;
+  }
+</style>