feat: improve styling for library pages #28
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors UI components to simplify styling and improve markup structure. The changes focus on removing unnecessary styling, restructuring heading layouts to properly wrap flex containers, and cleaning up the function path generation logic.
- Simplified
genPathfunction to use nativejoin()instead of manual concatenation - Restructured heading elements to wrap flex containers in a div for proper layout
- Removed excessive styling from various UI components (borders, backgrounds, padding)
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/genPath.ts | Simplified path generation logic to use join(".") directly |
| src/components/ui/FunctionParameters.tsx | Removed styling from parameter containers and examples, restructured heading flex layout |
| src/components/ui/FunctionDisplay.tsx | Simplified example display styling and color scheme |
| src/components/ui/FunctionDefinition.tsx | Refactored to use semantic HTML (<pre><code>), added conditional dot rendering, restructured to use span elements |
| src/components/templates/TypeTemplate.tsx | Wrapped heading flex content in divs for proper layout |
| src/components/templates/GroupTemplate.tsx | Wrapped heading flex content in divs for proper layout |
| src/components/templates/FuncTemplate.tsx | Wrapped heading flex content in divs, removed indentation and borders from scoped definitions |
| src/components/templates/CategoryTemplate.tsx | Changed oneliner rendering from plain div to paragraph element |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
It's a great work to systematically refactor the styling!
However, contents on pages are quite diverse, and there are a few edge cases that seem confusing now… Please see the comments below for details.
Maybe we should a keep a memo of edge cases and add links to the official and typst-jp website, like the one on editing docs?
Besides, I notice that you've organized lots of hard-coded colors into typ-* classes. It's helpful and even paves the way for future support of dark mode.
| <div class="pl-4">{item.oneliner}</div> | ||
| <div> | ||
| <p>{item.oneliner}</p> | ||
| </div> |
There was a problem hiding this comment.
I think the original style looks better. It weakens item.oneliner by adding an indent and decreasing the distance to item.name, making it easier to scan quickly and locate an item.
Example: https://typst-docs-web.netlify.app/en-us-v0.14.0/reference/foundations/
Besides, it might be possible to unify the style here in <CategoryTemplate> and the style for param.strings in <FunctionParameters>.
| <pre> | ||
| <code> | ||
| <span>{funcName}</span> | ||
| {funcName !== "" && <span class="typ-punct">.</span>} |
There was a problem hiding this comment.
This style assumes that there is no additional . in funcName. According to the following, it's true at present.
$ jq '.. | select(type == "object" and has("path")) | .path | length' docs.json | sort | uniq --count
101 0
421 1I suggest adding a comment to genPath.ts:
For Typst v0.14.0, the path is either empty or has only one item.
| return ( | ||
| <div | ||
| key={method.name} | ||
| class="mb-8 pb-6 border-b border-gray-100 last:border-0" |
There was a problem hiding this comment.
Here you've removed the border.
See outline.entry.{inner,body,page}. These border lines lines help distinguish the functions.
↓ After the removal, body seems to be a parameter of inner?
I suggest adding the border back.
If you just don't like the border, please increase the spacing here.
| /> | ||
| </summary> | ||
| <div class="mt-2 bg-white p-3 rounded-md border border-gray-200 text-sm"> | ||
| <div class="my-4"> |
There was a problem hiding this comment.
The vertical margin has been increased here, but I think my-4 is too large.
See place.{float,dx}:
This also applies to example blocks in <FunctionParameters>.
Note
Typst v0.14.0 has changed the format here. In v0.13.1, there's at most one example block for each <FunctionDisplay>; but now, there might be multiple example blocks, and they are embeded in the description.
| <HtmlContent html={param.default} /> | ||
| </span> | ||
| </p> | ||
| <div class="flex flex-wrap items-start gap-2"> |
There was a problem hiding this comment.
param.default is misaligned and not highlighted.
For example, place.clearance:
Using an inline version of <HtmlContent>, adding a trailing space after the colon in en-US translation, and changing pre code span.typ-* to code span.typ-* would probably fix it.
However, that's too much. I suggest fixing it in a separate PR.
<p class="prose">
<Translation translationKey="defaultValue" />
<span dangerouslySetInnerHTML={{ __html: param.default }} />
</p>
| ); | ||
| })} | ||
| </div> | ||
| <div> |
There was a problem hiding this comment.
I think the new style is less readable than the old style or the official style.
I can hardly distinguish headings from descriptions…
Maybe adjusting spacings or font weights?
|
Thank you for reviewing this PR despite the large number of changes. I will make the necessary corrections to each part later. By the way, regarding the headings, I am planning to introduce explicit styles in #26. What do you think about this approach? |
…ng-for-library-pages
✅ Deploy Preview for typst-docs-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
close #23
This pull request standardizes the styles across the library pages and fixes any broken designs.