Skip to content

Commit dc5ef5c

Browse files
3w36zj6YDX-2147483647Copilot
authored
feat: improve styling for library pages (#28)
Co-authored-by: Y.D.X. <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent 1a06bd8 commit dc5ef5c

File tree

13 files changed

+258
-217
lines changed

13 files changed

+258
-217
lines changed

‎src/components/templates/CategoryTemplate.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FC } from "hono/jsx";
22
import { Translation } from "../../translation/";
33
import type { CategoryBody, Page } from "../../types/model";
4-
import { HtmlContent } from "../ui/HtmlContent";
4+
import { HtmlBlock } from "../ui/HtmlBlock";
55
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
66

77
export type CategoryTemplateProps = Omit<BaseTemplateProps, "page"> & {
@@ -26,21 +26,23 @@ export const CategoryTemplate: FC<CategoryTemplateProps> = ({
2626
nextPage={nextPage}
2727
>
2828
<h1 id="summary">{page.body.content.title}</h1>
29-
<HtmlContent html={page.body.content.details} />
29+
<HtmlBlock html={page.body.content.details} />
3030
{page.body.content.items.length > 0 && (
3131
<>
3232
<h2 id="definitions">
3333
<Translation translationKey="definitions" />
3434
</h2>
35-
<ul class="subgridded">
35+
<ul>
3636
{page.body.content.items.map((item) => (
3737
<li key={item.route}>
38-
<div>
39-
<a href={item.route}>
40-
{item.code ? <code>{item.name}</code> : item.name}
41-
</a>
38+
<div class="flex">
39+
<div class="min-w-[8rem]">
40+
<a href={item.route}>
41+
{item.code ? <code>{item.name}</code> : item.name}
42+
</a>
43+
</div>
44+
<div>{item.oneliner}</div>
4245
</div>
43-
<div class="pl-4">{item.oneliner}</div>
4446
</li>
4547
))}
4648
</ul>

‎src/components/templates/FuncTemplate.tsx‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
Tooltip,
1313
} from "../ui";
1414
import { DeprecationWarning } from "../ui/DeprecationWarning";
15-
import { HtmlContent } from "../ui/HtmlContent";
15+
import { HtmlBlock } from "../ui/HtmlBlock";
1616
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
1717

1818
export type FuncTemplateProps = Omit<BaseTemplateProps, "page"> & {
@@ -52,36 +52,31 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
5252
switch (block.kind) {
5353
case "html":
5454
return (
55-
<div class="my-4 text-gray-700">
56-
<HtmlContent html={block.content} />
55+
<div class="text-gray-700">
56+
<HtmlBlock html={block.content} />
5757
</div>
5858
);
5959
case "example":
6060
// This will never reach for Typst v0.13.1 and v0.14.0-rc.1 documentations.
6161
return (
62-
<div class="my-6 bg-gray-50 p-4 rounded-md border border-gray-200">
62+
<div>
6363
{block.content.title}
64-
<HtmlContent html={block.content.body} />
64+
<HtmlBlock html={block.content.body} />
6565
</div>
6666
);
6767
default:
6868
return null;
6969
}
7070
})}
7171

72-
<h2 id="parameters" class="flex items-baseline gap-1">
73-
<Translation translationKey="parameters" />
74-
<Tooltip kind="parameters" />
72+
<h2 id="parameters" class="flex">
73+
<div class="flex items-baseline gap-1">
74+
<Translation translationKey="parameters" />
75+
<Tooltip kind="parameters" />
76+
</div>
7577
</h2>
76-
77-
<div class="mb-6">
78-
<FunctionDefinition func={content} />
79-
</div>
80-
81-
<div class="my-6">
82-
<FunctionParameters params={content.params} />
83-
</div>
84-
78+
<FunctionDefinition func={content} />
79+
<FunctionParameters params={content.params} />
8580
<ScopedDefinitions scope={content.scope} />
8681
</BaseTemplate>
8782
);
@@ -109,48 +104,49 @@ function ScopedDefinitions({
109104
// the following heading levels will _not_ increase with the scope level.
110105
return (
111106
<div class="mt-8">
112-
<h2 id={`${parentId}definitions`} class="flex items-baseline gap-1">
113-
{parent ? (
114-
// Currently, the scope has at most two levels.
115-
// Therefore, it is sufficient to only annotate the direct `parent`.
116-
<Translation translationKey="definitionsOf" name={parent.name} />
117-
) : (
118-
<Translation translationKey="definitions" />
119-
)}
120-
<Tooltip kind="definitions" />
107+
<h2 id={`${parentId}definitions`} class="flex">
108+
<div class="flex items-baseline gap-1">
109+
{parent ? (
110+
// Currently, the scope has at most two levels.
111+
// Therefore, it is sufficient to only annotate the direct `parent`.
112+
<Translation translationKey="definitionsOf" name={parent.name} />
113+
) : (
114+
<Translation translationKey="definitions" />
115+
)}
116+
<Tooltip kind="definitions" />
117+
</div>
121118
</h2>
122119

123120
{scope.map((method, _index) => {
124121
const methodId = `${parentId}definitions-${method.name}`;
125-
126122
return (
127123
<div
128124
key={method.name}
129-
class="mb-8 pb-6 border-b border-gray-100 last:border-0"
125+
class="border-b border-neutral-200 last:border-0"
130126
>
131-
<h3 id={methodId} class="method-head mb-3 flex items-center gap-2">
132-
<code
133-
class="text-base font-medium"
134-
style={
135-
normalizeDeprecation(method) !== null
136-
? { textDecoration: "line-through" }
137-
: undefined
138-
}
139-
>
140-
{method.name}
141-
</code>
142-
143-
<small class="flex items-center">
144-
{method.element && <Tooltip kind="element" />}
145-
{method.contextual && <Tooltip kind="contextual" />}
146-
</small>
127+
<h3 id={methodId} class="flex">
128+
<div class="flex items-center gap-2">
129+
<code
130+
class="text-base font-medium"
131+
style={
132+
normalizeDeprecation(method) !== null
133+
? { textDecoration: "line-through" }
134+
: undefined
135+
}
136+
>
137+
{method.name}
138+
</code>
139+
140+
<small class="flex items-center">
141+
{method.element && <Tooltip kind="element" />}
142+
{method.contextual && <Tooltip kind="contextual" />}
143+
</small>
144+
</div>
147145
</h3>
148146

149147
{<DeprecationWarning item={method} level="scoped" />}
150148

151-
<div class="pl-2">
152-
<FunctionDisplay func={method} prefix={methodId} />
153-
</div>
149+
<FunctionDisplay func={method} prefix={methodId} />
154150

155151
<ScopedDefinitions
156152
scope={method.scope}

‎src/components/templates/GroupTemplate.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Translation } from "../../translation/index.js";
33
import type { GroupBody, Page } from "../../types/model";
44
import { normalizeGlobalAttributes } from "../../utils/normalizeModel";
55
import { FunctionDisplay, FunctionParameters, Tooltip } from "../ui";
6-
import { HtmlContent } from "../ui/HtmlContent";
6+
import { HtmlBlock } from "../ui/HtmlBlock";
77
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
88

99
export type GroupTemplateProps = Omit<BaseTemplateProps, "page"> & {
@@ -31,19 +31,24 @@ export const GroupTemplate: FC<GroupTemplateProps> = ({
3131
nextPage={nextPage}
3232
>
3333
<h1 id="summary">{content.title}</h1>
34-
<HtmlContent html={content.details} />
34+
<HtmlBlock html={content.details} />
3535

3636
{content.functions.length > 0 && (
3737
<>
3838
<h2 id="functions">Function</h2>
3939

4040
{content.functions.map((method, _index) => (
41-
<div key={method.name}>
42-
<h3 id={`functions-${method.name}`} class="method-head">
43-
<code class="text-base font-medium">{method.name}</code>
44-
<div class="flex flex-wrap items-center gap-2 text-sm">
45-
{method.element && <Tooltip kind="element" />}
46-
{method.contextual && <Tooltip kind="contextual" />}
41+
<div
42+
key={method.name}
43+
class="border-b border-neutral-200 last:border-0"
44+
>
45+
<h3 id={`functions-${method.name}`} class="flex">
46+
<div class="flex items-center gap-2">
47+
<code class="text-base font-medium">{method.name}</code>
48+
<div class="flex flex-wrap items-center gap-2 text-sm">
49+
{method.element && <Tooltip kind="element" />}
50+
{method.contextual && <Tooltip kind="contextual" />}
51+
</div>
4752
</div>
4853
</h3>
4954
<FunctionDisplay

‎src/components/templates/HtmlTemplate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { FC } from "hono/jsx";
22
import type { HtmlBody, Page } from "../../types/model";
3-
import { HtmlContent } from "../ui/HtmlContent";
3+
import { HtmlBlock } from "../ui/HtmlBlock";
44
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
55

66
export type HtmlTemplateProps = Omit<BaseTemplateProps, "page"> & {
@@ -24,7 +24,7 @@ export const HtmlTemplate: FC<HtmlTemplateProps> = ({
2424
previousPage={previousPage}
2525
nextPage={nextPage}
2626
>
27-
<HtmlContent html={page.body.content} />
27+
<HtmlBlock html={page.body.content} />
2828
</BaseTemplate>
2929
);
3030
};

‎src/components/templates/TypeTemplate.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { FC } from "hono/jsx";
22
import { Translation } from "../../translation/";
33
import type { Page, TypeBody } from "../../types/model";
44
import { FunctionDisplay, Tooltip } from "../ui";
5-
import { HtmlContent } from "../ui/HtmlContent";
5+
import { HtmlBlock } from "../ui/HtmlBlock";
66
import { TypeIcon } from "../ui/TypeIcon";
77
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
88

@@ -33,13 +33,15 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
3333
<TypeIcon type={content.name} isHeading={true} />
3434
</h1>
3535

36-
<HtmlContent html={content.details} />
36+
<HtmlBlock html={content.details} />
3737

3838
{content.constructor && (
3939
<>
40-
<h2 id="constructor" class="flex items-center gap-1">
41-
<Translation translationKey="constructor" />
42-
<Tooltip kind="parameters" />
40+
<h2 id="constructor" class="flex">
41+
<div class="flex items-center gap-1">
42+
<Translation translationKey="constructor" />
43+
<Tooltip kind="parameters" />
44+
</div>
4345
</h2>
4446

4547
<FunctionDisplay
@@ -52,21 +54,25 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
5254

5355
{content.scope.length > 0 && (
5456
<>
55-
<h2 id="definitions" class="flex items-center gap-1">
56-
<Translation translationKey="definitions" />
57-
<Tooltip kind="definitions" />
57+
<h2 id="definitions" class="flex">
58+
<div class="flex items-center gap-1">
59+
<Translation translationKey="definitions" />
60+
<Tooltip kind="definitions" />
61+
</div>
5862
</h2>
5963

6064
{content.scope.map((method, _index) => (
61-
<div key={method.name}>
62-
<h3
63-
id={`definitions-${method.name}`}
64-
class="method-head flex items-center gap-2 mb-3"
65-
>
66-
<code class="text-base font-medium">{method.name}</code>
67-
<div class="flex flex-wrap items-center gap-2">
68-
{method.element && <Tooltip kind="element" />}
69-
{method.contextual && <Tooltip kind="contextual" />}
65+
<div
66+
key={method.name}
67+
class="border-b border-neutral-200 last:border-0"
68+
>
69+
<h3 id={`definitions-${method.name}`} class="flex">
70+
<div class="flex items-center gap-2">
71+
<code class="text-base font-medium">{method.name}</code>
72+
<div class="flex flex-wrap items-center gap-2">
73+
{method.element && <Tooltip kind="element" />}
74+
{method.contextual && <Tooltip kind="contextual" />}
75+
</div>
7076
</div>
7177
</h3>
7278

0 commit comments

Comments
 (0)