docs: make figure about ir features

README.md

@@ -13,7 +13,11 @@
   </a>
 </p>
 
-`typst.ts` is a project dedicated to bring the power of [Typst](https://github.com/typst/typst) to the world of JavaScript. In short, it provides an `typst::World` implementation and several exporters to help compile and render your Typst document. In the scope of server-side rendering collaborated by
+`typst.ts` is a project dedicated to bring the power of
+[Typst](https://github.com/typst/typst) to the world of JavaScript. In short, it
+provides an `typst::World` implementation and several exporters to help compile
+and render your Typst document inside _Browser Environment_. In the scope of server-side rendering
+collaborated by
 $\textcolor{#3c9123}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
 
 <p align="center">
@@ -31,13 +35,14 @@ Specifically, it first typically presents a typst document in three forms:
 
 - [Form3](https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/serverless.html): Manipulate a canvas element directly.
 
-The _Form2: Vector Format_ is developed specially for typst documents, and it has several fancy features: Todo: Visualized Feature:
+The _Form2: Vector Format_ is developed specially for typst documents, and it has several fancy features:
 
-- Data Sharing across multiple layouts.
-
-- Artifact Streaming.
-
-- Incremental Rendering.
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/Myriad-Dreamin/typst.ts/blob/main/github-pages/docs/ir-features.dark.artifact.svg">
+    <img width="100%" alt="Data Flow" src="https://github.com/Myriad-Dreamin/typst.ts/blob/main/github-pages/docs/ir-features.artifact.svg"/>
+  </picture>
+</p>
 
 So with _Form2_, you can continue rendeing the document in different ways:
 

docs/cookery/introduction.typ

@@ -1,36 +1,52 @@
 #import "/docs/cookery/book.typ": book-page
-#import "/github-pages/docs/data-flow.typ": data-flow-graph
+#import "/github-pages/docs/graphs.typ": data-flow-graph, ir-feature-graph
 
 #show: book-page.with(title: "Introduction")
 
+
+#let natural-image(img) = style(styles => {
+  let (width, height) = measure(img, styles)
+  layout(page => {
+    let width_scale = 0.8 * page.width / width
+    block(width: width_scale * width, height: width_scale * height)[
+      #scale(x: width_scale * 100%, y: width_scale * 100%, origin: center+top)[#img]
+    ]
+  })
+})
+
 = Introduction
 
-Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this basically:
+Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document inside *Browser Environment*. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this basically:
 
 #figure(
   {
     set text(size: 12pt)
-    data-flow-graph()
+    natural-image(data-flow-graph())
   },
   caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )
 
-Specifically, it first typically presents a typst document in three forms:
+Specifically, it first presents a typst document in three typical forms:
 
 - #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html")[Form1]: Render to SVG and then embed it as a high-quality vectored image directly.
 
 - #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html")[Form2]: Preprocessed to a Vector Format artifact.
 
 - #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/serverless.html")[Form3]: Manipulate a canvas element directly.
 
-The #emph("Form2: Vector Format") is developed specially for typst documents, and it has several fancy features: Todo: Visualized Feature:
-
-- Data Sharing across multiple layouts.
-
-- Artifact Streaming.
+The #emph("Form2: Vector Format") is developed specially for typst documents, and it has several fancy features: 
 
-- Incremental Rendering.
+#figure(
+  scale(120%, {
+    set text(size: 12pt)
+    v(0.5em)
+    natural-image(ir-feature-graph())
+    v(0.5em)
+  }),
+  caption: [Figure: Features of the #emph("Vector Format"). ],
+  numbering: none,
+)
 
 // - Incremental Font Transfer
 

github-pages/docs/.gitignore

@@ -1,2 +1,4 @@
 !data-flow-standalone.artifact.svg
-!data-flow-standalone.dark.artifact.svg
+!data-flow-standalone.dark.artifact.svg
+!ir-features.artifact.svg
+!ir-features.dark.artifact.svg

github-pages/docs/data-flow-standalone.dark.typ

@@ -1,12 +1,12 @@
 
-#import "data-flow.typ": data-flow-graph
+#import "graphs.typ": data-flow-graph
 
 #set page(height: auto, width: auto, margin: 0.5em)
 #set text(fill: white)
 #show link: underline
 
 #figure(
   data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23), light-theme: false),
-  caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
+  caption: [Figure: Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )

github-pages/docs/data-flow-standalone.typ

@@ -1,12 +1,12 @@
 
-#import "data-flow.typ": data-flow-graph
+#import "graphs.typ": data-flow-graph
 
 #set page(height: auto, width: auto, margin: 0.5em)
 #show link: underline
 
 #figure(
   data-flow-graph(stroke: black, bg-color: white, light-theme: true),
-  caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
+  caption: [Figure: Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )