feat: make available string values collapsible

[YDX-2147483647]

Resolves #3

Examples:

• page.paper: official, jp
• eval.mode: official, jp
• bibliography.style: official, jp

All parameters with nonempty strings

$ jq '.. | select(type == "object" and has("strings") and (.strings | type == "array" and length > 1)) | .name' public/docs.json --raw-output | sort | uniq
aria-autocomplete
aria-current
aria-haspopup
aria-invalid
aria-live
aria-orientation
aria-relevant
aria-sort
as
autocapitalize
autocomplete
bottom-edge
cap
class
colorspace
command
crossorigin
dash
decoding
enctype
endian
enterkeyhint
fetchpriority
fill-rule
fit
form
format
formenctype
formmethod
formtarget
http-equiv
inputmode
join
kind
linebreaks
loading
method
mode
name
number-type
number-width
numbering-scope
paper
popovertargetaction
referrerpolicy
rel
relationship
relative
role
sandbox
scaling
scope
shadowrootmode
shape
style
target
to
top-edge
type
weight
wrap

Number of possible values for each parameter

jq '[.. | select(type == "object" and has("strings") and (.strings | type == "array" and length > 1)) | { name: .name, n_strings: .strings | length }]' public/docs.json | from json | sort-by n_strings | uniq | to csv

name,n_strings
endian,2
scope,2
linebreaks,2
numbering-scope,2
form,2
number-type,2
number-width,2
to,2
fill-rule,2
mode,2
relative,2
scaling,2
aria-invalid,2
crossorigin,2
loading,2
decoding,2
fetchpriority,2
colorspace,2
shadowrootmode,2
wrap,2
mode,3
bottom-edge,3
style,3
fit,3
cap,3
join,3
aria-autocomplete,3
aria-live,3
aria-orientation,3
aria-sort,3
autocapitalize,3
formenctype,3
formmethod,3
popovertargetaction,3
type,3
enctype,3
method,3
form,4
relationship,4
target,4
shape,4
formtarget,4
name,4
scope,4
form,5
top-edge,5
aria-current,5
aria-haspopup,5
aria-relevant,5
http-equiv,5
type,5
kind,5
format,6
command,6
enterkeyhint,7
inputmode,7
referrerpolicy,8
weight,9
class,10
dash,10
sandbox,13
type,22
as,22
rel,27
autocomplete,61
role,80
style,86
paper,107

---

We need a PR preview bot. Netlify offers a free one, even for org accounts. See typst-doc-cn/clreq#49 for an example.

[3w36zj6]

LGTM

[3w36zj6]

@typst-community/jp

Could you do a quick review?

[gomazarashi]

I tested this locally and it behaves as expected. Thank you for implementing this change.

[kimushun1101]

@YDX-2147483647
Thank you for your contribution. I also checked it.

• eval.mode: official, jp

On this page, the accordion is expanded by default when it loads. Is this the expected behavior?

[YDX-2147483647]

On this page, the accordion is expanded by default when it loads. Is this the expected behavior?

Well, this PR displays all string values as unordered lists (<ul>) in collapsible blocks (<details>).
If there are five or fewer values, then the block is expanded by default; otherwise, it's collapsed by default. (The threshold is selected based on the statistics in the PR description.)
In this sense, that is the expected behaviour.

You may have noticed that the official https://typst.app/docs displays some string values as tables (e.g., eval.mode), and displays others as unordered lists (e.g., page.paper).
However, it's impossible to implement this behaviour in typst-docs-web, because docs.json does not distinguish between these two kinds of string values.
The official typst can do it because it uses the typst-docs crate (lib.rs), but does not use the typst-docs CLI (main.rs).

[kimushun1101]

Thank you for your kind response. I've now understood the difference in this behavior between typst-docs-web and the official page.

[ultimatile]

While I was struggling with checking out the submodule, it was already merged.
I'm sorry I couldn't complete my review on time, but I think it's been thoroughly reviewed now.
This fix should make it more readable. Thank you for addressing the issue.