use jsx make image better

Author: ZnPdCo

manual/README.md

@@ -13,6 +13,12 @@
 - [LXGW WenKai](https://github.com/lxgw/LxgwWenKai/releases)
 - [Courier Prime Code](https://quoteunquoteapps.com/courierprime/downloads/courier-prime-code.zip)
 
-然后使用 Typst CLI 或者 Tinymist Typst 编译 `manual/src/content/manual.typ`，将生成出来的 pdf 重命名并放在 `manual/llmanual.pdf`。
+然后使用 Typst CLI 或者 Tinymist Typst 编译 `manual/src/content/manual.typ`，将生成出来的 pdf 重命名并放在 `manual/llmanual.pdf`。注意，需要开启 `--features html`。
 
 线上分发使用使用 astro+[astro-typst](https://github.com/OverflowCat/astro-typst)+[starlight theme](https://starlight.astro.build/) 部署于线上。
+
+`docs` 文件夹下的文件：
+
+- `manual.typ`：手册文件，include 了所有文章，供 pdf 导出使用；
+- `lib.typ`：手册文件的样式，供 pdf 导出使用；
+- `html.typ`：网页文件的一些 hook，劫持了数学公式、图片、标题（网页中不显示标题，因为已经有一个了），其中图片通过调用 JSX 组件 `<Image>` 实现，未来 astro-typst 的 API 可能会更换，需要及时更改。由于 `<Image>` 必须提供 `alt`，在文件中插入图片时必须包含 `alt`。

manual/llmanual.pdf

@@ -8,7 +8,7 @@
 
 新建比赛的对话框如下图所示：
 
-#image("pics/newcontest.png")
+#image("./pics/newcontest.png", alt:"New Contest")
 
 / 比赛标题: 用来显示在软件标题栏上的比赛标题。
 
@@ -31,7 +31,7 @@
 
 建立好比赛后，在左边按鼠标右键就可以添加新的试题。然后在右边设置试题相关的信息。
 
-#image("pics/editproblem.png")
+#image("./pics/editproblem.png", alt: "Edit Problem")
 
 / 概要下的一对箭头: 点击它们可以改变当前题目在列表的位置。
 
@@ -220,7 +220,7 @@ int main(int argc, char **argv)
 
 在输入文件名和输出文件名中输入内容后，点击"添加"按钮即可添加一组测试数据。这里的输入输出文件必须在 `data` 目录下，并且只要输入 `data` 目录内的相对路径即可，如下图所示：
 
-#image("pics/edittestcase.png")
+#image("./pics/edittestcase.png", alt: "Edit Testcase")
 
 一个测试点可以包含多组输入输出，最终一个测试点的得分为该测试点包含的所有测试数据中最低的得分。
 
@@ -249,7 +249,7 @@ int main(int argc, char **argv)
 
 以一道捆绑测试的试题为例，在 `data` 下的 `sword` 文件夹里，有 `sword(x)-(y).in/out` 文件代表第 x 个子任务的第 y 个测试点的输入输出文件（x 和 y 都是数字），那么匹配参数可以按照下图：
 
-#image("pics/addtestcases.png")
+#image("./pics/addtestcases.png", alt: "Add Testcases")
 
 注意：Windows 下文件夹分隔符为 `\`，Linux 下文件夹分隔符为 `/`。
 
@@ -261,11 +261,11 @@ int main(int argc, char **argv)
 
 在试题栏的概要框中，右键题目即可出现进入通道。
 
-#image("pics/intoexttestcasemodifier.png")
+#image("./pics/intoexttestcasemodifier.png", alt: "Into Extra Testcase Modifier")
 
 进入之后如下图所示：
 
-#image("pics/exttestcasemodifier.png")
+#image("./pics/exttestcasemodifier.png", alt: "Extra Testcase Modifier")
 
 / 新测试点: 新增一个测试点。
 

manual/src/content/docs/contest.typ

@@ -24,7 +24,7 @@
 
 == 测试情况对话框
 
-#image("pics/judgingdialog.png")
+#image("./pics/judgingdialog.png", alt: "Judging Dialog")
 
 这个对话框会实时显示当前评测的情况。
 

manual/src/content/docs/judge.typ

@@ -16,7 +16,7 @@ LemonLime 是为了 OI 比赛而生的基于 Lemon + LemonPlus 的轻量评测
 
 我们提供了一份 #link("https://Project-LemonLime.github.io/Project_LemonLime/example.zip")[样例]，在 LemonLime 中将其打开后，点击左上角的 控制\>自动添加试题，即可看到一道默认的 `plus` 试题。
 
-#image("pics/autoaddproblem.png")
+#image("./pics/autoaddproblem.png", alt:"Auto Add Problem")
 
 添加试题后，点击试题，框选右侧详情中的 定向到标准输入 与 定向到标准输出。切到 选手 页，点击右下角的 刷新，即可自动加载选手。点击 测试全部，即可自动运行全部选手的代码。代码的运行会在沙箱下进行。
 

manual/src/content/docs/quickstart.typ

@@ -10,7 +10,7 @@ LemonLime 没有设置编译器时（比如第一次运行）会自动弹出添
 
 在工具菜单中选择"设置"，就能看到下图所示的对话框：
 
-#image("pics/generalsettings.png")
+#image("./pics/generalsettings.png", alt: "General Settings")
 
 各个设置意义如下：
 
@@ -36,11 +36,11 @@ LemonLime 没有设置编译器时（比如第一次运行）会自动弹出添
 
 点击上方的 "编译器" 选项卡就能进入编译器的配置。
 
-#image("pics/compilersettings.png")
+#image("./pics/compilersettings.png", alt: "Compiler Settings")
 
 按右边的加号就会出现添加编译器的向导，第一步是选择使用预置的编译器配置还是手动配置新的编译器。一般来说，用预置的配置就能够满足大多数需求，第一步只要在需要配置的编译器前打钩，进入下一步后就能看到选择路径的界面。
 
-#image("pics/addcompiler.png")
+#image("./pics/addcompiler.png", alt: "Add Compiler")
 
 `gcc`、`g++` 和 `fpc` 的建议配置中包含了不同标准和不同优化等级的组合。
 
@@ -50,7 +50,7 @@ LemonLime 没有设置编译器时（比如第一次运行）会自动弹出添
 
 除了使用内置的六种编译器配置，你也可以选择手动配置新的编译器。
 
-#image("pics/addcompiler2.png")
+#image("./pics/addcompiler2.png", alt: "Add Compiler")
 
 / 编译器名称: 编译器在列表中显示的名称。
 
@@ -76,7 +76,7 @@ LemonLime 没有设置编译器时（比如第一次运行）会自动弹出添
 
 点击"高级选项"后可以进入下图的对话框来修改已有编译器的配置。
 
-#image("pics/compilersettings2.png")
+#image("./pics/compilersettings2.png", alt: "Compiler Settings")
 
 / 时间、内存限制: 由于不同语言执行效率有差异，因此可以放宽特定语言的时间限制或空间限制，也就是将时间限制或空间限制乘上一个实数。你也可以选择直接取消空间限制。
 
@@ -92,7 +92,7 @@ LemonLime 没有设置编译器时（比如第一次运行）会自动弹出添
 
 这个配置用于改善 LemonLime 的美观度以及提升定制性。
 
-#image("pics/visualmainsettings.png")
+#image("./pics/visualmainsettings.png", alt: "Visual Main Settings")
 
 / 配色方案: 上面的下拉框是当前所应用的主题名字。下面的"编辑"按钮可以编辑当前主题，"+"按钮可以新增一个空配置在最后，"垃圾桶"按钮可以删除当前主题。#underline[注意: 如果不点击最下方的"确定"的话，针对配色方案的更改会全部丢失！]
 
@@ -103,11 +103,11 @@ LemonLime 提供了两种默认的配色方案：`ranking.ioi2021.sg` 和
 
 点击配色方案的下拉框可以选择配色方案。
 
-#image("pics/visualmainsettings_whenchoosingtheme.png")
+#image("./pics/visualmainsettings_whenchoosingtheme.png", alt: "Visual Main Settings When Choosing Theme")
 
 点击"编辑"按钮编辑当前主题时会弹出一个这样的对话框：
 
-#image("pics/visualsettings.png")
+#image("./pics/visualsettings.png", alt: "Visual Settings")
 
 / 配色方案名: 配色方案的名字。
 

manual/src/content/docs/settings.typ

@@ -10,7 +10,7 @@
 
 这个部分显示了这场比赛的总体情况。
 
-#image("pics/statistics.png")
+#image("./pics/statistics.png", alt: "Statistics")
 
 你可以获得的信息有：
 
@@ -24,7 +24,7 @@
 
 每一个题目都有属于自己的一部分。这个部分显示了某个题目的情况。
 
-#image("pics/statistics2.png")
+#image("./pics/statistics2.png", alt: "Statistics")
 
 你可以获得的信息有：
 

manual/src/content/docs/statistics.typ

@@ -1,5 +1,7 @@
-#let target = dictionary(std).at("target", default: () => "paged")
 #let html-style(content) = {
+  let jsx = s => html.elem("script", attrs: ("data-jsx": s))
+  let num = state("imageNum", 1)
+  jsx("import { Image } from 'astro:assets'")
   show math.equation: it => context {
     if target() == "html" {
       show: if it.block { it => it } else { box }
@@ -10,7 +12,9 @@
   }
   show image: it => context {
     if target() == "html" {
-      html.frame(it)
+      num.update(num => num + 1)
+      jsx("import Img" + str(num.get()) + " from '" + it.source + "'")
+      jsx("<Image src={Img" + str(num.get()) + "} alt='" + it.alt + "' />")
     } else {
       it
     }

manual/src/content/html.typ

@@ -6,7 +6,7 @@
   date: auto,
 )
 
-#image("docs/pics/icon.png", width: 30%)
+#image("./docs/pics/icon.png", width: 30%)
 
 #align(center)[
 为了 OI 比赛而生的基于 Lemon + LemonPlus 的轻量评测系统