Skip to content

Commit b36e7a8

Browse files
gingerwizardgingerwizard
committed
move to /docs
1 parent e94ff9b commit b36e7a8

File tree

2 files changed

+70
-41
lines changed

2 files changed

+70
-41
lines changed

‎docusaurus.config.jp.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const config = {
4646
"ドキュメント、クイックスタートガイド、ユーザーガイド、技術リファレンス、FAQ など、多様な情報をご提供します。",
4747
url: "https://clickhouse.com",
4848
// url: process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : 'https://bookish-disco-5997zvo.pages.github.io',
49-
baseUrl: "/jp/docs/",
49+
baseUrl: "/docs/",
5050
baseUrlIssueBanner: true,
5151
onBrokenLinks: "warn",
5252
onBrokenMarkdownLinks: "warn",

‎src/components/DocsCategoryDropdown/index.jsx

Lines changed: 69 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import React, { useState, useRef, useEffect } from 'react';
2-
import { useHistory } from 'react-router-dom';
3-
import Link from '@docusaurus/Link';
4-
import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
5-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
1+
import React, { useState, useRef, useEffect } from "react";
2+
import { useHistory } from "react-router-dom";
3+
import Link from "@docusaurus/Link";
4+
import { useDocsSidebar } from "@docusaurus/plugin-content-docs/client";
5+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
6+
import { translate } from "@docusaurus/Translate";
67

7-
import styles from './styles.module.css';
8+
import styles from "./styles.module.css";
89

910
function DocsCategoryDropdown({ dropdownCategory }) {
1011
const [isOpen, setIsOpen] = useState(false);
11-
const [dropdownStyles, setDropdownStyles] = useState({ top: '0px', left: '0px' });
12+
const [dropdownStyles, setDropdownStyles] = useState({
13+
top: "0px",
14+
left: "0px",
15+
});
1216
const dropdownMenuRef = useRef(null);
1317
const triggerRef = useRef(null); // Reference for the individual menu item trigger
1418

@@ -36,15 +40,19 @@ function DocsCategoryDropdown({ dropdownCategory }) {
3640
left = triggerRect.right - dropdownRect.width;
3741
} else {
3842
// Align to center
39-
left = triggerRect.left + (triggerRect.width / 2) - (dropdownRect.width / 2);
43+
left =
44+
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
4045
}
4146

4247
// Ensure the dropdown doesn't go off-screen
43-
left = Math.max(10, Math.min(left, viewportWidth - dropdownRect.width - 10));
48+
left = Math.max(
49+
10,
50+
Math.min(left, viewportWidth - dropdownRect.width - 10),
51+
);
4452

4553
setDropdownStyles({
4654
top: `${triggerRect.bottom}px`, // Align the dropdown below the menu item
47-
left: `${left}px` // Align the dropdown with the menu item
55+
left: `${left}px`, // Align the dropdown with the menu item
4856
});
4957
}
5058
}, [isOpen]); // This runs when the dropdown is opened
@@ -54,13 +62,13 @@ function DocsCategoryDropdown({ dropdownCategory }) {
5462
// Safely call useDocsSidebar
5563
try {
5664
sidebar = useDocsSidebar();
57-
} catch (e) {
58-
}
65+
} catch (e) {}
5966

6067
// Guard against undefined sidebar
61-
const isSelected = sidebar && sidebar.name && dropdownCategory
62-
? sidebar.name === dropdownCategory.customProps.sidebar
63-
: false;
68+
const isSelected =
69+
sidebar && sidebar.name && dropdownCategory
70+
? sidebar.name === dropdownCategory.customProps.sidebar
71+
: false;
6472

6573
return (
6674
<div
@@ -72,9 +80,18 @@ function DocsCategoryDropdown({ dropdownCategory }) {
7280
className={styles.docsNavDropdownToolbarLink}
7381
ref={triggerRef} // Attach the ref to the individual link that triggers the dropdown
7482
>
75-
<Link className={`${styles.docsNavDropdownToolbarTopLevelLink} ${
76-
isSelected ? styles.docsNavSelected : ''
77-
}`} href={dropdownCategory.customProps.href}>{dropdownCategory.label}</Link> <DropdownCaret />
83+
<Link
84+
className={`${styles.docsNavDropdownToolbarTopLevelLink} ${
85+
isSelected ? styles.docsNavSelected : ""
86+
}`}
87+
href={dropdownCategory.customProps.href}
88+
>
89+
{translate({
90+
id: `sidebar.dropdownCategories.category.${dropdownCategory.label}`,
91+
message: dropdownCategory.label,
92+
})}
93+
</Link>{" "}
94+
<DropdownCaret />
7895
</span>
7996
{isOpen && (
8097
<DropdownContent
@@ -91,51 +108,63 @@ function DocsCategoryDropdown({ dropdownCategory }) {
91108
export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
92109
return (
93110
<div className={styles.docsNavDropdownContainer}>
94-
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}><span>{title}</span></Link>
111+
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
112+
<span>{title}</span>
113+
</Link>
95114
</div>
96115
);
97-
}
116+
};
98117

99-
const DropdownContent = ({ dropdownCategory, handleMouseLeave, dropdownStyles, dropdownMenuRef }) => {
118+
const DropdownContent = ({
119+
dropdownCategory,
120+
handleMouseLeave,
121+
dropdownStyles,
122+
dropdownMenuRef,
123+
}) => {
100124
const [hovered, setHovered] = useState(null);
101125

102126
return (
103127
<div
104128
ref={dropdownMenuRef}
105129
className={styles.docsNavDropdownMenu}
106-
style={{ position: 'fixed', ...dropdownStyles }}
130+
style={{ position: "fixed", ...dropdownStyles }}
107131
>
108-
<div key={99}
109-
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ''}`}
110-
onMouseEnter={() => setHovered(99)}
111-
onMouseLeave={() => setHovered(null)}
132+
<div
133+
key={99}
134+
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
135+
onMouseEnter={() => setHovered(99)}
136+
onMouseLeave={() => setHovered(null)}
112137
>
113138
<Link
114-
to={dropdownCategory.customProps.href}
139+
to={dropdownCategory.customProps.href}
115140
className={styles.docsNavMenuHeader}
116-
onClick={handleMouseLeave}
141+
onClick={handleMouseLeave}
117142
>
118143
{dropdownCategory.label}
119144
</Link>
120-
<div className={styles.docsNavMenuDescription}>{dropdownCategory.description}</div>
145+
<div className={styles.docsNavMenuDescription}>
146+
{dropdownCategory.description}
147+
</div>
121148
</div>
122149
<hr className={styles.docsNavMenuDivider} />
123150
<div className={styles.docsNavMenuItems}>
124151
{dropdownCategory.items.map((item, index) => (
125152
<div
126153
key={index}
127-
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ''}`}
154+
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
128155
onMouseEnter={() => setHovered(index)}
129156
onMouseLeave={() => setHovered(null)}
130157
>
131158
<Link
132-
to={item.href}
159+
to={item.href}
133160
className={styles.docsNavItemTitle}
134-
onClick={handleMouseLeave}
161+
onClick={handleMouseLeave}
135162
>
136163
{item.label}
137164
</Link>
138-
<div className={styles.docsNavItemDescription}>{item.description}</div>
165+
<div className={styles.docsNavItemDescription}>
166+
{item.description}
167+
</div>
139168
</div>
140169
))}
141170
</div>
@@ -145,20 +174,20 @@ const DropdownContent = ({ dropdownCategory, handleMouseLeave, dropdownStyles, d
145174

146175
const DropdownCaret = () => {
147176
const commonStyle = {
148-
width: '6px',
149-
height: '10px',
150-
fill: 'none',
151-
transition: 'all 0.3s ease',
152-
color: '#6B7280',
177+
width: "6px",
178+
height: "10px",
179+
fill: "none",
180+
transition: "all 0.3s ease",
181+
color: "#6B7280",
153182
};
154183

155184
const rotatedIconStyle = {
156185
...commonStyle,
157-
transform: 'rotate(90deg)',
186+
transform: "rotate(90deg)",
158187
};
159188

160189
return (
161-
<span style={{ marginLeft: '8px' }}>
190+
<span style={{ marginLeft: "8px" }}>
162191
<svg
163192
xmlns="http://www.w3.org/2000/svg"
164193
width="6"

0 commit comments

Comments
 (0)