Skip to content

Commit 4a43a18

Browse files
3w36zj63w36zj6
committed
feat: UIとテンプレートのコンポーネントを追加
1 parent 0f767cc commit 4a43a18

20 files changed

+1625
-25
lines changed

‎website/src/components/templates/BaseTemplate.tsx‎

Lines changed: 570 additions & 0 deletions
Large diffs are not rendered by default.

‎website/src/components/templates/CategoryTemplate.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { FC } from "hono/jsx";
2+
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
3+
import type { CategoryBody, Page } from "../../types/model";
4+
5+
export type CategoryTemplateProps = Omit<BaseTemplateProps, "page"> & {
6+
page: Omit<Page, "body"> & {
7+
body: CategoryBody;
8+
};
9+
};
10+
11+
export const CategoryTemplate: FC<CategoryTemplateProps> = ({
12+
page,
13+
docs,
14+
path,
15+
previousPage,
16+
nextPage,
17+
}) => {
18+
return (
19+
<BaseTemplate
20+
page={page}
21+
docs={docs}
22+
path={path}
23+
previousPage={previousPage}
24+
nextPage={nextPage}
25+
>
26+
<h1 id="summary">{page.body.content.name}</h1>
27+
<div dangerouslySetInnerHTML={{ __html: page.body.content.details }} />
28+
<h2 id="definitions">定義</h2>
29+
<ul class="subgridded">
30+
{page.body.content.items.map((item) => (
31+
<li>
32+
<a href={item.route}>
33+
{item.code ? <code>{item.name}</code> : item.name}
34+
</a>
35+
<span>{item.oneliner}</span>
36+
</li>
37+
))}
38+
</ul>
39+
</BaseTemplate>
40+
);
41+
};

‎website/src/components/templates/FuncTemplate.tsx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import type { FC } from "hono/jsx";
2+
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
3+
import type { FuncBody, Page } from "../../types/model";
4+
import {
5+
Tooltip,
6+
FunctionDisplay,
7+
FunctionDefinition,
8+
FunctionParameters,
9+
} from "../ui";
10+
11+
export type FuncTemplateProps = Omit<BaseTemplateProps, "page"> & {
12+
page: Omit<Page, "body"> & {
13+
body: FuncBody;
14+
};
15+
};
16+
17+
export const FuncTemplate: FC<FuncTemplateProps> = ({
18+
page,
19+
docs,
20+
path,
21+
previousPage,
22+
nextPage,
23+
}) => {
24+
const content = page.body.content;
25+
26+
return (
27+
<BaseTemplate
28+
page={page}
29+
docs={docs}
30+
path={path}
31+
previousPage={previousPage}
32+
nextPage={nextPage}
33+
>
34+
<h1 id="summary">
35+
<code>{content.name}</code>
36+
<small>
37+
{content.element && (
38+
<Tooltip
39+
name="Element"
40+
desc="Element functions can be customized with <code>set</code> and <code>show</code> rules."
41+
/>
42+
)}
43+
{content.contextual && (
44+
<Tooltip
45+
name="Contextual"
46+
desc="Contextual functions can only be used when the context is known"
47+
/>
48+
)}
49+
</small>
50+
{content.deprecation && (
51+
<small class="deprecation">
52+
<div class="tooltip-context">
53+
<svg
54+
width="16"
55+
height="16"
56+
viewBox="0 0 16 16"
57+
tabIndex={0}
58+
role="img"
59+
aria-labelledby={`${content.name}-deprecation-tooltip`}
60+
>
61+
<title id={`${content.name}-deprecation-tooltip`}>
62+
Warning
63+
</title>
64+
<use href="/assets/icons/16-warn.svg#icon"></use>
65+
</svg>
66+
</div>
67+
<span>
68+
<span>{content.deprecation}</span>
69+
</span>
70+
</small>
71+
)}
72+
</h1>
73+
74+
<div dangerouslySetInnerHTML={{ __html: content.details }} />
75+
76+
<h2 id="parameters">
77+
<Tooltip
78+
name="引数"
79+
desc="Parameters are the inputs to a function. They are specified in parentheses after the function name."
80+
prefix="parameters"
81+
/>
82+
</h2>
83+
84+
<FunctionDefinition func={content} prefix={content.name} />
85+
86+
{content.example && (
87+
<div dangerouslySetInnerHTML={{ __html: content.example }} />
88+
)}
89+
90+
<FunctionParameters func={content} prefix={content.name} />
91+
92+
{content.scope.length > 0 && (
93+
<>
94+
<h2 id="definitions">
95+
<Tooltip
96+
name="定義"
97+
desc="Functions and types and can have associated definitions. These are accessed by specifying the function or type, followed by a period, and then the definition's name."
98+
prefix="definitions"
99+
/>
100+
</h2>
101+
102+
{content.scope.map((method, index) => (
103+
<div>
104+
<h3 id={`definitions-${method.name}`} class="method-head">
105+
<code
106+
style={
107+
method.deprecation
108+
? { textDecoration: "line-through" }
109+
: undefined
110+
}
111+
>
112+
{method.name}
113+
</code>
114+
115+
<small>
116+
{method.element && (
117+
<Tooltip
118+
name="Element"
119+
desc="Element functions can be customized with <code>set</code> and <code>show</code> rules."
120+
/>
121+
)}
122+
{method.contextual && (
123+
<Tooltip
124+
name="Contextual"
125+
desc="Contextual functions can only be used when the context is known"
126+
/>
127+
)}
128+
</small>
129+
130+
{/* 非推奨表示 */}
131+
{method.deprecation && (
132+
<small class="deprecation">
133+
<div class="tooltip-context">
134+
<svg
135+
width="16"
136+
height="16"
137+
viewBox="0 0 16 16"
138+
tabIndex={0}
139+
role="img"
140+
aria-labelledby={`definitions-${method.name}-deprecation-tooltip`}
141+
>
142+
<title
143+
id={`definitions-${method.name}-deprecation-tooltip`}
144+
>
145+
Warning
146+
</title>
147+
<use href="/assets/icons/16-warn.svg#icon"></use>
148+
</svg>
149+
</div>
150+
<span>
151+
<span>{method.deprecation}</span>
152+
</span>
153+
</small>
154+
)}
155+
</h3>
156+
157+
<FunctionDisplay
158+
func={method}
159+
prefix={`definitions-${method.name}`}
160+
/>
161+
</div>
162+
))}
163+
</>
164+
)}
165+
</BaseTemplate>
166+
);
167+
};
168+
169+
export default FuncTemplate;

‎website/src/components/templates/GroupTemplate.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import type { FC } from "hono/jsx";
2+
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
3+
import type { GroupBody, Page } from "../../types/model";
4+
import {
5+
Tooltip,
6+
FunctionDisplay,
7+
FunctionDefinition,
8+
FunctionParameters,
9+
} from "../ui";
10+
11+
export type GroupTemplateProps = Omit<BaseTemplateProps, "page"> & {
12+
page: Omit<Page, "body"> & {
13+
body: GroupBody;
14+
};
15+
};
16+
17+
export const GroupTemplate: FC<GroupTemplateProps> = ({
18+
page,
19+
docs,
20+
path,
21+
previousPage,
22+
nextPage,
23+
}) => {
24+
const content = page.body.content;
25+
26+
return (
27+
<BaseTemplate
28+
page={page}
29+
docs={docs}
30+
path={path}
31+
previousPage={previousPage}
32+
nextPage={nextPage}
33+
>
34+
<h1 id="summary">{content.title}</h1>
35+
<div dangerouslySetInnerHTML={{ __html: content.details }} />
36+
37+
{content.functions.length > 0 && (
38+
<>
39+
<h2 id="functions">Function</h2>
40+
41+
{content.functions.map((method, index) => (
42+
<div>
43+
<h3 id={`definitions-${method.name}`} class="method-head">
44+
<span>
45+
<code>{method.name}</code>
46+
</span>
47+
<small>
48+
<Tooltip
49+
name="Element"
50+
desc="Element functions can be customized with <code>set</code> and <code>show</code> rules."
51+
/>
52+
</small>
53+
</h3>
54+
<FunctionDisplay
55+
func={method}
56+
prefix={`definitions-${method.name}`}
57+
isExampleFolding={false}
58+
/>
59+
</div>
60+
))}
61+
</>
62+
)}
63+
</BaseTemplate>
64+
);
65+
};
66+
67+
export default GroupTemplate;

‎website/src/components/templates/HtmlTemplate.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { FC } from "hono/jsx";
2+
import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
3+
import type { HtmlBody, Page } from "../../types/model";
4+
5+
export type HtmlTemplateProps = Omit<BaseTemplateProps, "page"> & {
6+
page: Omit<Page, "body"> & {
7+
body: HtmlBody;
8+
};
9+
};
10+
11+
export const HtmlTemplate: FC<HtmlTemplateProps> = ({
12+
page,
13+
docs,
14+
path,
15+
previousPage,
16+
nextPage,
17+
}) => {
18+
return (
19+
<BaseTemplate
20+
page={page}
21+
docs={docs}
22+
path={path}
23+
previousPage={previousPage}
24+
nextPage={nextPage}
25+
>
26+
<div dangerouslySetInnerHTML={{ __html: page.body.content as string }} />
27+
</BaseTemplate>
28+
);
29+
};

‎website/src/components/templates/SymbolsTemplate.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { FC } from "hono/jsx";
2+
import type { Page, SymbolsBody } from "../../types/model";
3+
import type { BaseTemplateProps } from "./BaseTemplate";
4+
5+
export type SymbolsTemplateProps = Omit<BaseTemplateProps, "page"> & {
6+
page: Omit<Page, "body"> & {
7+
body: SymbolsBody;
8+
};
9+
};
10+
11+
export const SymbolsTemplate: FC<SymbolsTemplateProps> = ({ page }) => {
12+
const redirectUrl = `https://typst.app${page.route}`;
13+
14+
return (
15+
<html>
16+
<head>
17+
<meta httpEquiv="refresh" content={`0;url=${redirectUrl}`} />
18+
</head>
19+
</html>
20+
);
21+
};
22+
23+
export default SymbolsTemplate;

0 commit comments

Comments
 (0)