Skip to content

Commit 509c099

Browse files
3w36zj63w36zj6
committed
feat: フッターのコンポーネントを追加
1 parent e337807 commit 509c099

File tree

6 files changed

+75
-76
lines changed

6 files changed

+75
-76
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const DiscordIcon = () => {
2+
return (
3+
<svg
4+
fill="currentColor"
5+
role="img"
6+
viewBox="0 0 24 24"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<title>Discord</title>
10+
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
11+
</svg>
12+
);
13+
};

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const GitHubIcon = () => {
2+
return (
3+
<svg
4+
fill="currentColor"
5+
role="img"
6+
viewBox="0 0 24 24"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<title>GitHub</title>
10+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
11+
</svg>
12+
);
13+
};

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Simple Icons
2+
// https://simpleicons.org/
3+
export { GitHubIcon } from "./GitHubIcon";
4+
export { DiscordIcon } from "./DiscordIcon";

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

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

55
export type BaseTemplateProps = PropsWithChildren<{
66
page: Page;
@@ -440,81 +440,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
440440
)}
441441
</div>
442442

443-
<footer>
444-
<div>
445-
<ul>
446-
<li>
447-
<a href="https://typst.app/">（公式）ホームページ</a>
448-
</li>
449-
<li>
450-
<a href="https://typst.app/docs/">
451-
（公式）ドキュメント（英語）
452-
</a>
453-
</li>
454-
<li>
455-
<a href="https://typst.app/universe/">
456-
（公式）拡張パッケージ・テンプレートの宇宙
457-
</a>
458-
</li>
459-
<li>
460-
<a href="https://typst.app/about/">（公式）Typstについて</a>
461-
</li>
462-
<li>
463-
<a href="https://typst.app/contact/">（公式）連絡先</a>
464-
</li>
465-
<li>
466-
<a href="https://typst.app/privacy/">
467-
（公式）プライバシーポリシー
468-
</a>
469-
</li>
470-
<li>
471-
<a href="https://typst.app/terms/">（公式）サービス規約</a>
472-
</li>
473-
<li>
474-
<a href="https://typst.app/legal/">（公式）免責事項</a>
475-
</li>
476-
</ul>
477-
</div>
478-
<div>
479-
<ul>
480-
<li>
481-
<a href="https://typst.app/tools/">（公式）ツール</a>
482-
</li>
483-
<li>
484-
<a href="https://typst.app/blog/">（公式）ブログ</a>
485-
</li>
486-
<li>
487-
<a href="https://twitter.com/typstapp/">（公式）Twitter</a>
488-
</li>
489-
<li>
490-
<a href="https://discord.gg/2uDybryKPe">（公式）Discord</a>
491-
</li>
492-
<li>
493-
<a rel="me" href="https://mastodon.social/@typst">
494-
（公式）Mastodon
495-
</a>
496-
</li>
497-
<li>
498-
<a href="https://www.linkedin.com/company/typst/">
499-
（公式）LinkedIn
500-
</a>
501-
</li>
502-
<li>
503-
<a href="https://instagram.com/typstapp/">（公式）Instagram</a>
504-
</li>
505-
<li>
506-
<a href="https://github.com/typst/">（公式）GitHub</a>
507-
</li>
508-
</ul>
509-
</div>
510-
<div>
511-
<p>Made in Berlin</p>
512-
<p>
513-
Translated by{" "}
514-
<a href="https://github.com/typst-jp">Typst Japan Community</a>
515-
</p>
516-
</div>
517-
</footer>
443+
<Footer />
518444

519445
<script src="/scripts/fuse.basic.min.js"></script>
520446
<script src="/scripts/docs.js?bust=20230913"></script>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
discordServerUrl,
3+
githubOrganizationUrl,
4+
githubRepositoryUrl,
5+
} from "../../../metadata";
6+
import { DiscordIcon, GitHubIcon } from "../../icons";
7+
8+
export const Footer = () => {
9+
return (
10+
<footer>
11+
<section class="bg-white">
12+
<hr class="border-t border-gray-200" />
13+
<div class="prose max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
14+
<div class="flex justify-center mt-8 space-x-6">
15+
<a
16+
href={githubRepositoryUrl}
17+
class="text-gray-400 hover:text-gray-500"
18+
>
19+
<span class="sr-only">GitHub</span>
20+
<div class="w-6 h-6">
21+
<GitHubIcon />
22+
</div>
23+
</a>
24+
<a
25+
href={discordServerUrl}
26+
class="text-gray-400 hover:text-gray-500"
27+
>
28+
<span class="sr-only">Discord</span>
29+
<div class="w-6 h-6">
30+
<DiscordIcon />
31+
</div>
32+
</a>
33+
</div>
34+
<p class="mt-8 text-base leading-6 text-center text-gray-400">
35+
Translated by{" "}
36+
<a href={githubOrganizationUrl}>Typst Japan Community</a>
37+
</p>
38+
</div>
39+
</section>
40+
</footer>
41+
);
42+
};

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

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

0 commit comments

Comments
 (0)