Skip to content

Commit 70d2723

Browse files
3w36zj63w36zj6
committed
feat: Funcテンプレートのスタイルを設定
1 parent 5eb6197 commit 70d2723

File tree

10 files changed

+429
-256
lines changed

10 files changed

+429
-256
lines changed

‎website/src/components/icons/AlertTriangleIcon.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const AlertTriangleIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
stroke-width="2"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"
12+
>
13+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
14+
<path d="M12 9v4" />
15+
<path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
16+
<path d="M12 16h.01" />
17+
</svg>
18+
);
19+
};

‎website/src/components/icons/HelpCircleIcon.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const HelpCircleIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
stroke-width="2"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
class="icon icon-tabler icons-tabler-outline icon-tabler-help"
12+
>
13+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
14+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
15+
<path d="M12 17l0 .01" />
16+
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" />
17+
</svg>
18+
);
19+
};

‎website/src/components/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
export { HomeIcon } from "./HomeIcon";
44
export { CaretRightCircleIcon } from "./CaretRightCircleIcon";
55
export { InfoCircleIcon } from "./InfoCircleIcon";
6+
export { HelpCircleIcon } from "./HelpCircleIcon";
67
export { ChevronLeftIcon } from "./ChevronLeftIcon";
78
export { ChevronRightIcon } from "./ChevronRightIcon";
9+
export { AlertTriangleIcon } from "./AlertTriangleIcon";
810

911
// Simple Icons
1012
// https://simpleicons.org/

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

Lines changed: 54 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
FunctionDefinition,
88
FunctionParameters,
99
} from "../ui";
10+
import { DeprecationWarning } from "../ui/DeprecationWarning";
1011

1112
export type FuncTemplateProps = Omit<BaseTemplateProps, "page"> & {
1213
page: Omit<Page, "body"> & {
@@ -31,78 +32,60 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
3132
previousPage={previousPage}
3233
nextPage={nextPage}
3334
>
34-
<h1 id="summary">
35+
<h1 id="summary" class="flex items-center gap-2 mb-6">
3536
<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-
)}
37+
<small class="flex items-center gap-1">
38+
{content.element && <Tooltip kind="element" />}
39+
{content.contextual && <Tooltip kind="contextual" />}
4940
</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-
)}
7241
</h1>
7342

74-
<div dangerouslySetInnerHTML={{ __html: content.details }} />
43+
{content.deprecation && (
44+
<div className="mt-2">
45+
<DeprecationWarning message={content.deprecation} />
46+
</div>
47+
)}
7548

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-
/>
49+
<div
50+
class="my-4 text-gray-700 [&_img]:mx-auto [&_img]:block [&_img]:max-w-full"
51+
dangerouslySetInnerHTML={{ __html: content.details }}
52+
/>
53+
54+
<h2 id="parameters" class="flex items-baseline gap-1">
55+
引数
56+
<Tooltip kind="parameters" />
8257
</h2>
8358

84-
<FunctionDefinition func={content} prefix={content.name} />
59+
<div class="mb-6">
60+
<FunctionDefinition func={content} prefix={content.name} />
61+
</div>
8562

8663
{content.example && (
87-
<div dangerouslySetInnerHTML={{ __html: content.example }} />
64+
<div
65+
class="my-6 bg-gray-50 p-4 rounded-md border border-gray-200"
66+
dangerouslySetInnerHTML={{ __html: content.example }}
67+
/>
8868
)}
8969

90-
<FunctionParameters func={content} prefix={content.name} />
70+
<div class="my-6">
71+
<FunctionParameters func={content} prefix={content.name} />
72+
</div>
9173

9274
{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-
/>
75+
<div class="mt-8">
76+
<h2 id="definitions" class="flex items-baseline gap-1">
77+
定義
78+
<Tooltip kind="definitions" />
10079
</h2>
10180

10281
{content.scope.map((method, index) => (
103-
<div>
104-
<h3 id={`definitions-${method.name}`} class="method-head">
82+
<div class="mb-8 pb-6 border-b border-gray-100 last:border-0">
83+
<h3
84+
id={`definitions-${method.name}`}
85+
class="method-head mb-3 flex items-center gap-2"
86+
>
10587
<code
88+
class="text-base font-medium"
10689
style={
10790
method.deprecation
10891
? { textDecoration: "line-through" }
@@ -112,55 +95,27 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
11295
{method.name}
11396
</code>
11497

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-
)}
98+
<small class="flex items-center">
99+
{method.element && <Tooltip kind="element" />}
100+
{method.contextual && <Tooltip kind="contextual" />}
128101
</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-
)}
155102
</h3>
156103

157-
<FunctionDisplay
158-
func={method}
159-
prefix={`definitions-${method.name}`}
160-
/>
104+
{method.deprecation && (
105+
<div className="mt-1">
106+
<DeprecationWarning message={method.deprecation} />
107+
</div>
108+
)}
109+
110+
<div class="pl-2">
111+
<FunctionDisplay
112+
func={method}
113+
prefix={`definitions-${method.name}`}
114+
/>
115+
</div>
161116
</div>
162117
))}
163-
</>
118+
</div>
164119
)}
165120
</BaseTemplate>
166121
);

‎website/src/components/ui/DeprecationWarning.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { FC } from "hono/jsx";
2+
import { AlertTriangleIcon } from "../icons";
3+
4+
type DeprecationWarningProps = {
5+
message: string;
6+
};
7+
8+
export const DeprecationWarning: FC<DeprecationWarningProps> = ({
9+
message,
10+
}) => {
11+
return (
12+
<small className="deprecation ml-2 flex items-center bg-yellow-50 px-2 py-1 rounded-md border border-yellow-200">
13+
<div className="w-4 h-4 text-yellow-500 mr-1.5 flex-shrink-0">
14+
<AlertTriangleIcon />
15+
</div>
16+
<span className="text-xs text-yellow-800">{message}</span>
17+
</small>
18+
);
19+
};

‎website/src/components/ui/FunctionDefinition.tsx‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from "hono/jsx";
22
import type { Func } from "../../types/model";
33
import { genPath } from "./genPath";
44
import { type2href } from "./type2href";
5-
import { type2class } from "./type2class";
5+
import { TypeIcon } from "./TypeIcon";
66

77
type FunctionDefinitionProps = {
88
func: Func;
@@ -13,62 +13,67 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
1313
func,
1414
prefix = "",
1515
}) => {
16-
const isSingleArg = func.params.length <= 1;
17-
1816
return (
19-
<div class={`code code-definition ${isSingleArg ? "single-arg" : ""}`}>
20-
{func.self ? "self." : genPath(func)}
21-
<span class="typ-func">{func.name}</span>(
22-
<div class="arguments">
23-
{func.params.map((param, index) => (
24-
<span class="overview-param">
25-
{!param.positional && (
26-
<a href={`#parameters-${param.name}`}>
27-
{param.name}
28-
{/* --> */}:
29-
</a>
30-
)}
31-
{param.types.map((t, i) => {
32-
const href = type2href(t);
33-
return href ? (
34-
<a
35-
href={`/docs/reference/${href}`}
36-
class={`pill ${type2class(t)}`}
37-
>
38-
{t}
39-
</a>
40-
) : (
41-
<span class={`pill ${type2class(t)}`}>{t}</span>
42-
);
43-
})}
44-
{func.params.length > 1 ? "," : ""}
45-
</span>
46-
))}
47-
</div>
48-
)
49-
{func.returns.length > 0 && (
50-
<>
51-
{/* --> */}-&gt;
52-
{func.returns.map((ret, i) => {
53-
const href = type2href(ret);
54-
return (
55-
<>
56-
{href ? (
17+
<div class="bg-gray-50 p-4 rounded-md border border-gray-100 overflow-x-auto">
18+
<div class="code code-definition font-mono text-base">
19+
<span class="text-gray-500">{func.self ? "self." : genPath(func)}</span>
20+
<span class="typ-func font-semibold text-blue-500">{func.name}</span>
21+
<span class="text-gray-700">(</span>
22+
<div class="arguments pl-4 md:pl-6 flex flex-col">
23+
{func.params.map((param, index) => (
24+
<div class="overview-param flex flex-row items-center py-0.5">
25+
{!param.positional && (
26+
<div class="flex-shrink-0">
5727
<a
58-
href={`/docs/reference/${href}`}
59-
class={`pill ${type2class(ret)}`}
28+
href={`#${prefix}-${func.name}-parameters-${param.name}`}
29+
class="text-gray-800 hover:text-blue-500 transition-colors mr-1"
6030
>
61-
{ret}
31+
<span class="font-medium">{param.name}</span>
32+
<span class="text-gray-500">:</span>
6233
</a>
63-
) : (
64-
<span class={`pill ${type2class(ret)}`}>{ret}</span>
65-
)}
66-
{i < func.returns.length - 1 && ", "}
67-
</>
68-
);
69-
})}
70-
</>
71-
)}
34+
</div>
35+
)}
36+
<div class="flex flex-row flex-wrap gap-1">
37+
{param.types.map((t) => {
38+
const href = type2href(t);
39+
return (
40+
<TypeIcon
41+
type={t}
42+
href={href ? `/docs/reference/${href}` : undefined}
43+
/>
44+
);
45+
})}
46+
</div>
47+
{index < func.params.length - 1 && (
48+
<span class="text-gray-500 ml-1">,</span>
49+
)}
50+
</div>
51+
))}
52+
</div>
53+
<span class="text-gray-700">)</span>
54+
55+
{func.returns.length > 0 && (
56+
<>
57+
<span class="text-gray-500 mx-1">-&gt;</span>
58+
<div class="inline-flex flex-wrap gap-1">
59+
{func.returns.map((ret, i) => {
60+
const href = type2href(ret);
61+
return (
62+
<>
63+
<TypeIcon
64+
type={ret}
65+
href={href ? `/docs/reference/${href}` : undefined}
66+
/>
67+
{i < func.returns.length - 1 && (
68+
<span class="text-gray-500 mx-1">,</span>
69+
)}
70+
</>
71+
);
72+
})}
73+
</div>
74+
</>
75+
)}
76+
</div>
7277
</div>
7378
);
7479
};

0 commit comments

Comments
 (0)