Skip to content

Commit 1fa7be7

Browse files
na-trium-144na-trium-144
committed
コメント表示機能追加のためのページレイアウト変更 & ついでにnavbarとsidebarを編集
1 parent 94f7b3d commit 1fa7be7

File tree

6 files changed

+83
-61
lines changed

6 files changed

+83
-61
lines changed

‎app/[docs_id]/markdown.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import Markdown, { Components } from "react-markdown";
22
import remarkGfm from "remark-gfm";
33
import SyntaxHighlighter from "react-syntax-highlighter";
44
import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
5-
import { Heading } from "./section";
65
import { type AceLang, EditorComponent } from "../terminal/editor";
76
import { ExecFile, ExecLang } from "../terminal/exec";
87
import { useChangeTheme } from "./themeToggle";
98
import {
109
tomorrow,
1110
atomOneDark,
1211
} from "react-syntax-highlighter/dist/esm/styles/hljs";
12+
import { ReactNode } from "react";
1313

1414
export function StyledMarkdown({ content }: { content: string }) {
1515
return (
@@ -50,6 +50,32 @@ const components: Components = {
5050
<CodeComponent {...{ node, className, ref, style, ...props }} />
5151
),
5252
};
53+
54+
55+
export function Heading({
56+
level,
57+
children,
58+
}: {
59+
level: number;
60+
children: ReactNode;
61+
}) {
62+
switch (level) {
63+
case 1:
64+
return <h1 className="text-2xl font-bold my-4">{children}</h1>;
65+
case 2:
66+
return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
67+
case 3:
68+
return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
69+
case 4:
70+
return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
71+
case 5:
72+
// TODO: これ以下は4との差がない (全体的に大きくする必要がある？)
73+
return <h5 className="text-base font-bold mt-3 mb-2">{children}</h5>;
74+
case 6:
75+
return <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>;
76+
}
77+
}
78+
5379
function CodeComponent({
5480
node,
5581
className,

‎app/[docs_id]/pageContent.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
"use client";
22

3-
import { useEffect, useRef, useState } from "react";
4-
import { Section } from "./section";
3+
import { ReactNode, useEffect, useRef, useState } from "react";
54
import { MarkdownSection } from "./splitMarkdown";
65
import { ChatForm } from "./chatForm";
6+
import { Heading, StyledMarkdown } from "./markdown";
77

88
// MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
99
export type DynamicMarkdownSection = MarkdownSection & {
@@ -68,18 +68,29 @@ export function PageContent(props: PageContentProps) {
6868
const [isFormVisible, setIsFormVisible] = useState(false);
6969

7070
return (
71-
<div className="p-4">
72-
{dynamicMdContent.map((section, index) =>
71+
<div
72+
className="p-4 mx-auto grid"
73+
style={{
74+
gridTemplateColumns: `1fr auto`,
75+
}}
76+
>
77+
{dynamicMdContent.map((section, index) => (
78+
<>
7379
<div
80+
className="max-w-200"
7481
key={index}
7582
id={`${index}`} // 目次からaタグで飛ぶために必要
7683
ref={(el) => {
7784
sectionRefs.current[index] = el;
7885
}}
7986
>
80-
<Section section={section} sectionId={section.sectionId} />
87+
{/* ドキュメントのコンテンツ */}
88+
<Heading level={section.level}>{section.title}</Heading>
89+
<StyledMarkdown content={section.content} />
8190
</div>
82-
)}
91+
<div>{/* 右側に表示するチャット履歴欄 */}</div>
92+
</>
93+
))}
8394
{isFormVisible ? (
8495
// sidebarの幅が80であることからleft-84 (sidebar.tsx参照)
8596
// replがz-10を使用することからそれの上にするためz-20

‎app/[docs_id]/section.tsx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎app/[docs_id]/themeToggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function ThemeToggle() {
3030
}, []);
3131

3232
return (
33-
<label className="flex cursor-pointer gap-2" style={{ marginLeft: "1em" }}>
33+
<label className="flex items-center cursor-pointer gap-2">
3434
<svg
3535
xmlns="http://www.w3.org/2000/svg"
3636
width="20"

‎app/navbar.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import Link from "next/link";
12
import { ThemeToggle } from "./[docs_id]/themeToggle";
23
export function Navbar() {
34
return (
4-
<div className="navbar bg-base-200 w-full">
5-
<div className="flex-none lg:hidden">
5+
<>
6+
{/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
7+
<div className="h-16 lg:hidden" />
8+
9+
<div className="h-16 navbar bg-base-200 w-full fixed lg:hidden flex gap-4 z-40 shadow-md">
10+
<div className="flex-none">
611
{/* サイドバーを開閉するボタン */}
712
<label
813
htmlFor="drawer-toggle"
@@ -24,11 +29,10 @@ export function Navbar() {
2429
</svg>
2530
</label>
2631
</div>
27-
<div className="mx-2 flex flex-row items-center px-2 font-bold text-xl lg:hidden">
28-
{/* サイドバーが常時表示されている場合のみ */}
29-
<span className="flex-1">Navbar Title</span>
30-
<ThemeToggle />
31-
</div>
32+
{/* サイドバーが常時表示されている場合のみ */}
33+
<Link href="/" className="flex-1 font-bold text-xl">my.code();</Link>
34+
<ThemeToggle />
3235
</div>
36+
</>
3337
);
3438
}

‎app/sidebar.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,36 @@ export function Sidebar() {
2020
return (
2121
<div className="bg-base-200 h-full w-80 overflow-y-auto">
2222
{/* todo: 背景色ほんとにこれでいい？ */}
23-
<h2 className="hidden lg:flex flex-row items-center text-xl font-bold p-4">
23+
<h2 className="hidden lg:flex flex-row items-center p-4">
2424
{/* サイドバーが常時表示されている場合のみ */}
25-
<span className="flex-1">Navbar Title</span>
25+
<Link href="/" className="flex-1 text-xl font-bold">
26+
my.code();
27+
</Link>
2628
<ThemeToggle />
2729
</h2>
30+
<span className="block lg:hidden p-4 pb-0">
31+
<label
32+
htmlFor="drawer-toggle"
33+
aria-label="open sidebar"
34+
className="btn btn-ghost"
35+
>
36+
<svg
37+
className="w-8 h-8"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
xmlns="http://www.w3.org/2000/svg"
41+
>
42+
<path
43+
d="M18 17L13 12L18 7M11 17L6 12L11 7"
44+
stroke="currentColor"
45+
stroke-width="1.5"
46+
stroke-linecap="round"
47+
stroke-linejoin="round"
48+
/>
49+
</svg>
50+
<span className="text-lg">Close</span>
51+
</label>
52+
</span>
2853

2954
<ul className="menu w-full">
3055
{pagesList.map((group) => (

0 commit comments

Comments
 (0)