Skip to content

Commit dec02e5

Browse files
3w36zj63w36zj6
committed
feat: 本文のスタイルを追加
1 parent c5f9e68 commit dec02e5

File tree

5 files changed

+148
-62
lines changed

5 files changed

+148
-62
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const CaretRightCircleIcon = () => {
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-circle-caret-right"
12+
>
13+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
14+
<path d="M15 12l-4 -4v8z" />
15+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
16+
</svg>
17+
);
18+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const ChevronLeftIcon = () => {
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-chevron-left"
12+
>
13+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
14+
<path d="M15 6l-6 6l6 6" />
15+
</svg>
16+
);
17+
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const InfoCircleIcon = () => {
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-info-circle"
12+
>
13+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
14+
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
15+
<path d="M12 9h.01" />
16+
<path d="M11 12h1v4h1" />
17+
</svg>
18+
);
19+
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
// Tabler Icons
22
// https://tabler.io/icons
33
export { HomeIcon } from "./HomeIcon";
4+
export { CaretRightCircleIcon } from "./CaretRightCircleIcon";
5+
export { InfoCircleIcon } from "./InfoCircleIcon";
6+
export { ChevronLeftIcon } from "./ChevronLeftIcon";
47
export { ChevronRightIcon } from "./ChevronRightIcon";
58

69
// Simple Icons

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

Lines changed: 91 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ import {
88
SideNavigation,
99
Header,
1010
} from "../ui/common/";
11+
import {
12+
CaretRightCircleIcon,
13+
ChevronLeftIcon,
14+
ChevronRightIcon,
15+
InfoCircleIcon,
16+
} from "../icons";
1117

1218
export type BaseTemplateProps = PropsWithChildren<{
1319
page: Page;
@@ -78,15 +84,6 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
7884
color="#239dad"
7985
/>
8086
<link rel="manifest" href="/assets/site.webmanifest" />
81-
<link
82-
rel="stylesheet"
83-
href="/styles/default.css?bust=20230913?d=2023-09-16"
84-
/>
85-
<link
86-
rel="stylesheet"
87-
href="/styles/docs.css?bust=20230915?d=2023-09-16"
88-
/>
89-
<link rel="stylesheet" href="/styles/custom.css" />
9087
<link
9188
rel="preload"
9289
href="/assets/fonts/HKGrotesk-Regular.woff2"
@@ -140,74 +137,106 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
140137
></script>
141138
</head>
142139

143-
<body class="no-js docs has-outline">
140+
<body class="no-js docs has-outline min-h-screen flex flex-col">
144141
<SiteNoticeBanner />
145142
<Header />
146143

147-
<div class="main-grid flex-1 flex bg-gray-50">
148-
<SideNavigation docs={docs} currentRoute={route} currentPath={path} />
149-
150-
<main class="flex-1 px-3.5 py-4">
151-
<Breadcrumbs path={path} />
144+
<div class="main-grid flex-1 flex bg-white">
145+
<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 flex">
146+
<div class="flex flex-col w-full md:w-64 lg:w-72 mr-4">
147+
<SideNavigation
148+
docs={docs}
149+
currentRoute={route}
150+
currentPath={path}
151+
/>
152+
</div>
152153

153-
{children}
154+
<main class="flex-1 flex flex-col px-3.5 py-4 mb-8">
155+
<Breadcrumbs path={path} />
154156

155-
{route === "/docs/" ? (
156-
<div class="doc-categories">
157-
<a class="doc-category" href="/docs/tutorial">
158-
<img
159-
src="/assets/icons/32-tutorial-c.svg"
160-
width="32"
161-
height="32"
162-
alt="Circled play Icon"
163-
/>
164-
<strong>チュートリアル</strong>
165-
<p>一歩一歩、Typstの使い方を学びましょう。</p>
166-
</a>
167-
<a class="doc-category" href="/docs/reference">
168-
<img
169-
src="/assets/icons/32-reference-c.svg"
170-
width="32"
171-
height="32"
172-
alt="Circled information icon"
173-
/>
174-
<strong>リファレンス</strong>
175-
<p>
176-
Typstのあらゆる構文、概念、型、関数についての詳細なリファレンスです。
177-
</p>
178-
</a>
157+
<div class="prose max-w-none w-full mt-6 flex-grow">
158+
{children}
179159
</div>
180-
) : (
181-
previousPage &&
182-
nextPage && (
183-
<div class="page-end-buttons">
184-
<a href={previousPage.route} class="previous">
185-
<img src="/assets/icons/16-arrow-right.svg" alt="←" />
186-
<div>
187-
<span class="page-title">{previousPage.title}</span>
188-
<span class="hint">前に戻る</span>
160+
161+
{route === "/docs/" ? (
162+
<div class="doc-categories grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
163+
<a
164+
class="doc-category flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
165+
href="/docs/tutorial"
166+
>
167+
<div class="flex items-center mb-3">
168+
<div class="w-6 h-6 text-gray-800 mr-2">
169+
<CaretRightCircleIcon />
170+
</div>
171+
<strong class="text-base font-semibold text-gray-800">
172+
チュートリアル
173+
</strong>
189174
</div>
175+
<p class="text-sm text-gray-600">
176+
一歩一歩、Typstの使い方を学びましょう。
177+
</p>
190178
</a>
191-
<a href={nextPage.route} class="next">
192-
<img src="/assets/icons/16-arrow-right.svg" alt="→" />
193-
<div>
194-
<span class="page-title">{nextPage.title}</span>
195-
<span class="hint">次に進む</span>
179+
<a
180+
class="doc-category flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
181+
href="/docs/reference"
182+
>
183+
<div class="flex items-center mb-3">
184+
<div class="w-6 h-6 text-gray-800 mr-2">
185+
<InfoCircleIcon />
186+
</div>
187+
<strong class="text-base font-semibold text-gray-800">
188+
リファレンス
189+
</strong>
196190
</div>
191+
<p class="text-sm text-gray-600">
192+
Typstのあらゆる構文、概念、型、関数についての詳細なリファレンスです。
193+
</p>
197194
</a>
198195
</div>
199-
)
200-
)}
201-
</main>
196+
) : (
197+
previousPage &&
198+
nextPage && (
199+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
200+
<a
201+
href={previousPage.route}
202+
class="flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
203+
>
204+
<div class="flex items-center mb-3">
205+
<div class="w-6 h-6 text-gray-400 mr-2">
206+
<ChevronLeftIcon />
207+
</div>
208+
<strong class="text-base font-semibold text-gray-800">
209+
前のページ
210+
</strong>
211+
</div>
212+
<p class="text-sm text-gray-600">{previousPage.title}</p>
213+
</a>
214+
<a
215+
href={nextPage.route}
216+
class="flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
217+
>
218+
<div class="flex items-center mb-3 justify-between">
219+
<strong class="text-base font-semibold text-gray-800">
220+
次のページ
221+
</strong>
222+
<div class="w-6 h-6 text-gray-400">
223+
<ChevronRightIcon />
224+
</div>
225+
</div>
226+
<p class="text-sm text-gray-600">{nextPage.title}</p>
227+
</a>
228+
</div>
229+
)
230+
)}
231+
</main>
202232

203-
<TableOfContents outline={outline} />
233+
<div class="flex flex-col w-full md:w-60 lg:w-72 ml-4">
234+
<TableOfContents outline={outline} />
235+
</div>
236+
</div>
204237
</div>
205238

206239
<Footer />
207-
208-
<script src="/scripts/fuse.basic.min.js"></script>
209-
<script src="/scripts/docs.js?bust=20230913"></script>
210-
<script src="/scripts/analytics.js" defer></script>
211240
</body>
212241
</html>
213242
);

0 commit comments

Comments
 (0)