Skip to content

Commit 7167c97

Browse files
3w36zj63w36zj6
committed
feat: 注意事項のバナーのコンポーネントを追加
1 parent 2f5aa1e commit 7167c97

File tree

3 files changed

+121
-51
lines changed

3 files changed

+121
-51
lines changed

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

Lines changed: 6 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { FC, PropsWithChildren } from "hono/jsx";
22
import type { Page } from "../../types/model";
3+
import { SiteNoticeBanner } from "../ui/common/";
34

45
export type BaseTemplateProps = PropsWithChildren<{
56
page: Page;
@@ -126,60 +127,14 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
126127
}}
127128
/>
128129
<link href="/src/styles.css" rel="stylesheet"></link>
129-
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
130+
<script
131+
defer
132+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
133+
></script>
130134
</head>
131135

132136
<body class="no-js docs has-outline">
133-
<div class="alert">
134-
<div class="alert-content">
135-
<span>
136-
⚠ <b>注意</b> 当サイトは、
137-
<a href="https://typst.app/docs/">
138-
Typst v0.13.1 公式ドキュメント
139-
</a>
140-
を、日本語コミュニティが非公式に翻訳したものです。誤訳・未訳・古い情報が含まれている可能性があるため、
141-
<a href="https://typst.app/docs/">公式ドキュメント</a>{" "}
142-
との併用を推奨します。このサイトの内容に誤りを発見された方は、
143-
<a href="https://github.com/typst-jp/typst-jp.github.io">
144-
GitHubリポジトリまでご報告を頂けましたら幸いです
145-
</a>
146-
。我々のコミュニティにご興味のある方は、ぜひ
147-
<a href="https://discord.gg/9xF7k4aAuH">
148-
非公式Discordサーバー「くみはんクラブ」
149-
</a>
150-
にご参加ください。
151-
</span>
152-
<br />
153-
<span>
154-
⚠ <b>Warning:</b> This site provides an unofficial translation of
155-
the{" "}
156-
<a href="https://typst.app/docs/">Typst v0.13.1 documentation</a>{" "}
157-
by the Japanese Community. Please note that there may be some
158-
inaccuracies, untranslated sections or outdated information. We
159-
highly recommend referring to{" "}
160-
<a href="https://typst.app/docs/">
161-
the latest official documentation
162-
</a>{" "}
163-
as well. If you find any errors in the content,{" "}
164-
<a href="https://github.com/typst-jp/typst-jp.github.io">
165-
please let us know through our GitHub repository.
166-
</a>{" "}
167-
If you are interested in our community, feel free to join{" "}
168-
<a href="https://discord.gg/9xF7k4aAuH">
169-
our unofficial Discord server, "Kumihan Club."
170-
</a>
171-
</span>
172-
</div>
173-
<button id="closeAlertButton" class="close">
174-
<img
175-
alt="Close"
176-
src="/assets/icons/16-close-dark.svg"
177-
width="16"
178-
height="16"
179-
/>
180-
</button>
181-
</div>
182-
137+
<SiteNoticeBanner />
183138
<header class="boring">
184139
<div>
185140
<a href="/docs" class="logo-box">

‎website/src/components/ui/common/SiteNoticeBanner.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
export const SiteNoticeBanner = () => {
2+
return (
3+
<div
4+
x-data="{
5+
bannerVisible: false,
6+
bannerVisibleAfter: 300,
7+
}"
8+
x-show="bannerVisible"
9+
x-transition:enter="transition ease-out duration-500"
10+
x-transition:enter-start="-translate-y-full"
11+
x-transition:enter-end="translate-y-0"
12+
x-transition:leave="transition ease-in duration-300"
13+
x-transition:leave-start="translate-y-0"
14+
x-transition:leave-end="-translate-y-full"
15+
x-init="
16+
setTimeout(()=>{ bannerVisible = true }, bannerVisibleAfter);
17+
"
18+
class="fixed top-0 left-0 w-full h-auto py-2 duration-300 ease-out bg-white shadow-sm sm:py-4"
19+
x-cloak
20+
>
21+
<div class="prose relative flex flex-col sm:flex-row items-start w-full px-3 sm:px-12 mx-auto max-w-7xl flex-wrap">
22+
<div class="flex flex-col sm:flex-row w-full text-xs leading-6 text-black duration-150 ease-out opacity-80 hover:opacity-100 gap-3">
23+
<span class="flex items-center flex-shrink-0">
24+
<svg
25+
class="w-4 h-4 mr-2"
26+
viewBox="0 0 24 24"
27+
fill="none"
28+
stroke="currentColor"
29+
>
30+
<path
31+
d="M12 3L2 21h20L12 3z"
32+
stroke="currentColor"
33+
strokeWidth="1.5"
34+
/>
35+
<rect
36+
x="11"
37+
y="9"
38+
width="2"
39+
height="5"
40+
rx="1"
41+
stroke="none"
42+
fill="currentColor"
43+
/>
44+
<rect
45+
x="11"
46+
y="16"
47+
width="2"
48+
height="2"
49+
rx="1"
50+
stroke="none"
51+
fill="currentColor"
52+
/>
53+
</svg>
54+
<strong>注意 / Warning</strong>
55+
</span>
56+
<span class="hidden sm:flex items-center">
57+
<span class="inline-block w-px h-12 bg-neutral-200 mx-3"></span>
58+
</span>
59+
<span class="block flex-1 pt-1 pb-2 leading-normal sm:inline sm:pt-0 sm:pb-0">
60+
当サイトは、
61+
<a href="https://typst.app/docs/">Typst v0.13.1 公式ドキュメント</a>
62+
を、日本語コミュニティが非公式に翻訳したものです。誤訳・未訳・古い情報が含まれている可能性があるため、
63+
<a href="https://typst.app/docs/">公式ドキュメント</a>
64+
との併用を推奨します。このサイトの内容に誤りを発見された方は、
65+
<a href="https://github.com/typst-jp/typst-jp.github.io">
66+
GitHubリポジトリまでご報告を頂けましたら幸いです
67+
</a>
68+
。我々のコミュニティにご興味のある方は、ぜひ
69+
<a href="https://discord.gg/9xF7k4aAuH">
70+
非公式Discordサーバー「くみはんクラブ」
71+
</a>
72+
にご参加ください。
73+
<br />
74+
This site provides an unofficial translation of the
75+
<a href="https://typst.app/docs/">Typst v0.13.1 documentation</a>
76+
by the Japanese Community. Please note that there may be some
77+
inaccuracies, untranslated sections or outdated information. We
78+
highly recommend referring to
79+
<a href="https://typst.app/docs/">
80+
the latest official documentation
81+
</a>
82+
as well. If you find any errors in the content,
83+
<a href="https://github.com/typst-jp/typst-jp.github.io">
84+
please let us know through our GitHub repository.
85+
</a>
86+
If you are interested in our community, feel free to join
87+
<a href="https://discord.gg/9xF7k4aAuH">
88+
our unofficial Discord server, "Kumihan Club."
89+
</a>
90+
</span>
91+
</div>
92+
</div>
93+
<button
94+
x-on:click="bannerVisible=false;"
95+
class="absolute top-2 right-4 flex items-center flex-shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-black rounded-full hover:bg-neutral-100"
96+
>
97+
<svg
98+
xmlns="http://www.w3.org/2000/svg"
99+
fill="none"
100+
viewBox="0 0 24 24"
101+
stroke-width="1.5"
102+
stroke="currentColor"
103+
class="w-full h-full"
104+
>
105+
<path
106+
stroke-linecap="round"
107+
stroke-linejoin="round"
108+
d="M6 18L18 6M6 6l12 12"
109+
/>
110+
</svg>
111+
</button>
112+
</div>
113+
);
114+
};

‎website/src/components/ui/common/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { SiteNoticeBanner } from "./SiteNoticeBanner";

0 commit comments

Comments
 (0)