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.
| 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.
There was a problem hiding this comment.
We plan to add decorative elements to the headings, so we will put this proposal on hold.
| ); | ||
| })} | ||
| </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?
There was a problem hiding this comment.
We plan to add decorative elements to the headings, so we will put this proposal on hold.
|
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. |
|
Syntax highlighting is now enabled for inline code as well, which makes things look a bit livelier. I personally prefer having inline code highlighted too, but what do you think?
|
|
Could you rebase/merge |
…ng-for-library-pages
) Co-authored-by: 3w36zj6 <[email protected]>
|
If #26 is merged, do we have any remaining issues? |
Co-authored-by: Copilot <[email protected]>
|
It feels odd to see an |
| <HtmlBlock html={block.content} /> | ||
| </div> | ||
| ); | ||
| case "example": |
There was a problem hiding this comment.
For consecutive examples (e.g., par.line.numbering), the spacing is still too large, because there's an empty <div> between them..
Deleting the empty <div> will fix the spacing:
This might be an upstream bug in typst-docs CLI.
The official docs does not have the empty <div> here, but in docs.json, there is:
"details": [
{
"kind": "html",
"content": "<p>How to number each line. Accepts a\n<a href=\"/reference/model/numbering/\">numbering pattern or function</a> taking a single number.</p>"
},
{
"kind": "example",
"content": {
"body": "<div class=\"previewed-code\">…</div>",
"title": null
}
},
{
"kind": "html",
"content": ""
},
{
"kind": "example",
"content": {
"body": "<div class=\"previewed-code\">…</div>",
"title": null
}
}
],(Ha, an immediate use case of #35)
Created typst/typst#7323
|
I think the only problem now is the style of parameters. Compared with border lines, 
|
close #23
This pull request standardizes the styles across the library pages and fixes any broken designs.