Skip to content

Commit 2a8d848

Browse files
YDX-2147483647YDX-2147483647
committed
refactor: split <HtmlContent> to <HtmlBlock> and <HtmlInline>
Relates-to: typst-community#28
1 parent 9d3ff65 commit 2a8d848

File tree

10 files changed

+48
-28
lines changed

10 files changed

+48
-28
lines changed

‎src/components/templates/CategoryTemplate.tsx‎

Lines changed: 2 additions & 2 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,7 +26,7 @@ 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">

‎src/components/templates/FuncTemplate.tsx‎

Lines changed: 3 additions & 3 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"> & {
@@ -53,15 +53,15 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
5353
case "html":
5454
return (
5555
<div class="text-gray-700">
56-
<HtmlContent html={block.content} />
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 (
6262
<div>
6363
{block.content.title}
64-
<HtmlContent html={block.content.body} />
64+
<HtmlBlock html={block.content.body} />
6565
</div>
6666
);
6767
default:

‎src/components/templates/GroupTemplate.tsx‎

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

88
export type GroupTemplateProps = Omit<BaseTemplateProps, "page"> & {
@@ -29,7 +29,7 @@ export const GroupTemplate: FC<GroupTemplateProps> = ({
2929
nextPage={nextPage}
3030
>
3131
<h1 id="summary">{content.title}</h1>
32-
<HtmlContent html={content.details} />
32+
<HtmlBlock html={content.details} />
3333

3434
{content.functions.length > 0 && (
3535
<>

‎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: 2 additions & 2 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,7 +33,7 @@ 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
<>

‎src/components/ui/FunctionDisplay.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { normalizeDetailBlocks } from "../../utils/normalizeModel.js";
55
import { ChevronRightIcon } from "../icons";
66
import { FunctionDefinition } from "./FunctionDefinition";
77
import { FunctionParameters } from "./FunctionParameters";
8-
import { HtmlContent } from "./HtmlContent";
8+
import { HtmlBlock } from "./HtmlBlock";
99

1010
type FunctionDisplayProps = {
1111
func: Func;
@@ -28,7 +28,7 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
2828
{normalizeDetailBlocks(func).map((block) => {
2929
switch (block.kind) {
3030
case "html":
31-
return <HtmlContent html={block.content} />;
31+
return <HtmlBlock html={block.content} />;
3232
case "example":
3333
return isExampleFolding ? (
3434
<details class="folding-example group">
@@ -42,11 +42,11 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
4242
/>
4343
</summary>
4444
<div>
45-
<HtmlContent html={block.content.body} />
45+
<HtmlBlock html={block.content.body} />
4646
</div>
4747
</details>
4848
) : (
49-
<HtmlContent html={block.content.body} />
49+
<HtmlBlock html={block.content.body} />
5050
);
5151
default:
5252
return null;

‎src/components/ui/FunctionParameters.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import type { Param } from "../../types/model";
55
import { normalizeDetailBlocks } from "../../utils/normalizeModel";
66
import { joinPath } from "../../utils/path";
77
import { ChevronRightIcon } from "../icons";
8-
import { HtmlContent } from "./HtmlContent";
8+
import { HtmlBlock } from "./HtmlBlock";
9+
import { HtmlInline } from "./HtmlInline";
910
import { Tooltip } from "./Tooltip";
1011
import { TypeIcon } from "./TypeIcon";
1112
import { buildParamId, type2href } from "./type2href";
@@ -66,13 +67,13 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
6667
case "html":
6768
return (
6869
<div class="text-gray-700">
69-
<HtmlContent html={block.content} />
70+
<HtmlBlock html={block.content} />
7071
</div>
7172
);
7273
case "example":
7374
return (
74-
<details class="folding-example group">
75-
<summary class="flex my-4 items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
75+
<details class="my-4 folding-example group">
76+
<summary class="flex items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
7677
<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
7778
<ChevronRightIcon />
7879
</div>
@@ -82,7 +83,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
8283
/>
8384
</summary>
8485
<div>
85-
<HtmlContent html={block.content.body} />
86+
<HtmlBlock html={block.content.body} />
8687
</div>
8788
</details>
8889
);
@@ -93,11 +94,11 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
9394

9495
{param.strings.length > 0 && (
9596
<details
96-
class="folding-example group"
97+
class="my-4 folding-example group"
9798
// The list of strings can be very long. For example, `page.paper` has 100+ possibilities.
9899
open={param.strings.length <= 5}
99100
>
100-
<summary class="flex my-4 items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
101+
<summary class="flex items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
101102
<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
102103
<ChevronRightIcon />
103104
</div>
@@ -111,7 +112,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
111112
<code>{string.string}</code>
112113
</div>
113114
<div>
114-
<HtmlContent html={string.details} />
115+
<HtmlBlock html={string.details} />
115116
</div>
116117
</div>
117118
</li>
@@ -121,10 +122,10 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
121122
)}
122123

123124
{param.default && (
124-
<div class="flex flex-wrap items-center gap-2">
125+
<p>
125126
<Translation translationKey="defaultValue" />
126-
<HtmlContent html={param.default} />
127-
</div>
127+
<HtmlInline html={param.default} />
128+
</p>
128129
)}
129130
</div>
130131
))}

‎src/components/ui/HtmlContent.tsx‎ renamed to ‎src/components/ui/HtmlBlock.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@ export type HtmlContentProps = {
55
html: string;
66
};
77

8-
export const HtmlContent: FC<HtmlContentProps> = ({ html }) => {
8+
export const HtmlBlock: FC<HtmlContentProps> = ({ html }) => {
99
return (
1010
<div
1111
class={twMerge([
1212
"overflow-hidden",
13+
// Move the margin for inner `<p>`s to the outer `<div>`, making it collapsible with sibling `<div>`s.
14+
"mt-5",
15+
"[&_p]:first:mt-0",
16+
"mb-5",
17+
"[&_p]:last:mb-0",
1318
"[&_img]:mx-auto",
1419
"[&_img]:block",
1520
"[&_img]:max-w-full",

‎src/components/ui/HtmlInline.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { FC } from "hono/jsx";
2+
3+
export type HtmlContentProps = {
4+
html: string;
5+
};
6+
7+
export const HtmlInline: FC<HtmlContentProps> = ({ html }) => {
8+
return (
9+
<span
10+
// biome-ignore lint/security/noDangerouslySetInnerHtml: Displaying HTML generated by typst-docs.
11+
dangerouslySetInnerHTML={{ __html: html }}
12+
/>
13+
);
14+
};

‎src/translation/en-US.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Translation: TranslationComponent = (props) => {
3434
case "search":
3535
return <Fragment>Search</Fragment>;
3636
case "defaultValue":
37-
return <Fragment>Default value:</Fragment>;
37+
return <Fragment>Default value: </Fragment>;
3838
case "stringValues":
3939
return <Fragment>Available string values</Fragment>;
4040
case "deprecationWarning":

0 commit comments

Comments
 (0)