1#import "/src/contents/_lib/lib.typ": *
 2#show: tybios.post-template
 3
 4#metadata(
 5  (
 6    title: "Components in Tybios",
 7    desc: "Showing additional typst components provided by Tybios.",
 8    date: datetime(
 9      year: 2025,
10      month: 3,
11      day: 23,
12    ),
13  ),
14)<frontmatter>
15
16#tybios.marginnote(block: true)[#outline()]
17
18= Summary
19
20All Tybios's components can be found in the namespace `tybios` in Typst, and rendered correctly both in web and PDF output. You can use them to add some extra information or decoration to your posts.
21
22= Ruby
23
24Ruby, also known as #tybios.ruby("振り仮名", "furigana"), is a small annotation that appears above or next to a word. It's commonly used in Japanese to show the pronunciation of kanji characters.
25
26```typst
27#tybios.ruby("ruby top", "ruby base")
28#tybios.ruby("rt|and|rb|can|splited|by|bars", "but|must|has|same|number|of|bars")
29#tybios.ruby([contents], [auto convert to string])
30```
31
32= Margin Notes
33
34#tybios.marginnote[This is a margin note. It can be used to add some extra information without interrupting the reading flow.]
35
36Margin note is a special footnote (or sidenote) that appears in the margin of the page also, but without a marker in the main text. You can use it to add some extra information without interrupting the reading flow.
37
38```typst
39// Just like footnote, only one line of content,
40// and no marker in the main text.
41#tybios.marginnote[contents]
42// A block margin note, can contain multiple
43// paragraphs and other components.
44#tybios.marginnote(block: true)[contents]
45```
46
47= Full-width Container
48
49#tybios.fullwidth(tybios.frame(invert-color: false, {
50  import "@preview/pixel-family:0.1.0": *
51
52  text(size: 5em)[
53    #alice() #bob() #christina() #mary()
54    #eve() #bolt() #pixel-char() #nova()
55  ]
56}))
57
58Full-width container is a special container that spans the entire width of the page. It's comes from Tufted style, which inspired Tybios a lot.
59
60```typst
61#tybios.fullwidth[contents]
62```
63
64= Frame
65
66#figure({
67  import "@preview/lilaq:0.5.0" as lq
68  let x = lq.linspace(0, 10)
69
70  tybios.frame(lq.diagram(
71    lq.plot(x, x => calc.sin(x)),
72  ))
73})
74
75Frame is a container that can wrap any content that can't automatically convert to HTML, convert them to SVGs. It can be used to display diagrams or any other content that needs to be rendered as an image.
76
77In web output and dark mode, the content will be color-inverted to adapt to the background, but you can disable this feature by setting `invert-color` to `false`.
78
79```typst
80#tybios.frame[contents]
81#tybios.frame(invert-color: false)[contents]
82```