Skip to content

Commit 5151cdb

Browse files
gingerwizardgingerwizard
authored
Merge pull request #3443 from ClickHouse/translate_improvements
try jp-docs for jp docs in vercel
2 parents 37ce8c1 + 11a069f commit 5151cdb

File tree

3 files changed

+98
-42
lines changed

3 files changed

+98
-42
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: "/jp-docs/",
5050
baseUrlIssueBanner: true,
5151
onBrokenLinks: "warn",
5252
onBrokenMarkdownLinks: "warn",

‎i18n/jp/code.json‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,5 +458,29 @@
458458
"theme.tags.tagsPageTitle": {
459459
"message": "タグ",
460460
"description": "The title of the tag list page"
461+
},
462+
"sidebar.dropdownCategories.category.Cloud": {
463+
"message": "クラウド"
464+
},
465+
"sidebar.dropdownCategories.category.Getting Started": {
466+
"message": "始める"
467+
},
468+
"sidebar.dropdownCategories.category.Manage Data": {
469+
"message": "データ管理"
470+
},
471+
"sidebar.dropdownCategories.category.Server Admin": {
472+
"message": "サーバー管理"
473+
},
474+
"sidebar.dropdownCategories.category.Reference": {
475+
"message": "リファレンス"
476+
},
477+
"sidebar.dropdownCategories.category.Integrations": {
478+
"message": "統合"
479+
},
480+
"sidebar.dropdownCategories.category.chDB": {
481+
"message": "chDB"
482+
},
483+
"sidebar.dropdownCategories.category.About": {
484+
"message": "について"
461485
}
462-
}
486+
}

‎src/components/DocsCategoryDropdown/index.jsx‎

Lines changed: 72 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
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";
7+
import Translate from "@docusaurus/Translate";
68

7-
import styles from './styles.module.css';
9+
import styles from "./styles.module.css";
810

911
function DocsCategoryDropdown({ dropdownCategory }) {
1012
const [isOpen, setIsOpen] = useState(false);
11-
const [dropdownStyles, setDropdownStyles] = useState({ top: '0px', left: '0px' });
13+
const [dropdownStyles, setDropdownStyles] = useState({
14+
top: "0px",
15+
left: "0px",
16+
});
1217
const dropdownMenuRef = useRef(null);
1318
const triggerRef = useRef(null); // Reference for the individual menu item trigger
1419

@@ -36,15 +41,19 @@ function DocsCategoryDropdown({ dropdownCategory }) {
3641
left = triggerRect.right - dropdownRect.width;
3742
} else {
3843
// Align to center
39-
left = triggerRect.left + (triggerRect.width / 2) - (dropdownRect.width / 2);
44+
left =
45+
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
4046
}
4147

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

4554
setDropdownStyles({
4655
top: `${triggerRect.bottom}px`, // Align the dropdown below the menu item
47-
left: `${left}px` // Align the dropdown with the menu item
56+
left: `${left}px`, // Align the dropdown with the menu item
4857
});
4958
}
5059
}, [isOpen]); // This runs when the dropdown is opened
@@ -54,13 +63,13 @@ function DocsCategoryDropdown({ dropdownCategory }) {
5463
// Safely call useDocsSidebar
5564
try {
5665
sidebar = useDocsSidebar();
57-
} catch (e) {
58-
}
66+
} catch (e) {}
5967

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

6574
return (
6675
<div
@@ -72,9 +81,20 @@ function DocsCategoryDropdown({ dropdownCategory }) {
7281
className={styles.docsNavDropdownToolbarLink}
7382
ref={triggerRef} // Attach the ref to the individual link that triggers the dropdown
7483
>
75-
<Link className={`${styles.docsNavDropdownToolbarTopLevelLink} ${
76-
isSelected ? styles.docsNavSelected : ''
77-
}`} href={dropdownCategory.customProps.href}>{dropdownCategory.label}</Link> <DropdownCaret />
84+
<Link
85+
className={`${styles.docsNavDropdownToolbarTopLevelLink} ${
86+
isSelected ? styles.docsNavSelected : ""
87+
}`}
88+
href={dropdownCategory.customProps.href}
89+
>
90+
<Translate
91+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
92+
description={`Translation for ${dropdownCategory.label}`}
93+
>
94+
{dropdownCategory.label}
95+
</Translate>
96+
</Link>{" "}
97+
<DropdownCaret />
7898
</span>
7999
{isOpen && (
80100
<DropdownContent
@@ -91,51 +111,63 @@ function DocsCategoryDropdown({ dropdownCategory }) {
91111
export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
92112
return (
93113
<div className={styles.docsNavDropdownContainer}>
94-
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}><span>{title}</span></Link>
114+
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
115+
<span>{title}</span>
116+
</Link>
95117
</div>
96118
);
97-
}
119+
};
98120

99-
const DropdownContent = ({ dropdownCategory, handleMouseLeave, dropdownStyles, dropdownMenuRef }) => {
121+
const DropdownContent = ({
122+
dropdownCategory,
123+
handleMouseLeave,
124+
dropdownStyles,
125+
dropdownMenuRef,
126+
}) => {
100127
const [hovered, setHovered] = useState(null);
101128

102129
return (
103130
<div
104131
ref={dropdownMenuRef}
105132
className={styles.docsNavDropdownMenu}
106-
style={{ position: 'fixed', ...dropdownStyles }}
133+
style={{ position: "fixed", ...dropdownStyles }}
107134
>
108-
<div key={99}
109-
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ''}`}
110-
onMouseEnter={() => setHovered(99)}
111-
onMouseLeave={() => setHovered(null)}
135+
<div
136+
key={99}
137+
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
138+
onMouseEnter={() => setHovered(99)}
139+
onMouseLeave={() => setHovered(null)}
112140
>
113141
<Link
114-
to={dropdownCategory.customProps.href}
142+
to={dropdownCategory.customProps.href}
115143
className={styles.docsNavMenuHeader}
116-
onClick={handleMouseLeave}
144+
onClick={handleMouseLeave}
117145
>
118146
{dropdownCategory.label}
119147
</Link>
120-
<div className={styles.docsNavMenuDescription}>{dropdownCategory.description}</div>
148+
<div className={styles.docsNavMenuDescription}>
149+
{dropdownCategory.description}
150+
</div>
121151
</div>
122152
<hr className={styles.docsNavMenuDivider} />
123153
<div className={styles.docsNavMenuItems}>
124154
{dropdownCategory.items.map((item, index) => (
125155
<div
126156
key={index}
127-
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ''}`}
157+
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
128158
onMouseEnter={() => setHovered(index)}
129159
onMouseLeave={() => setHovered(null)}
130160
>
131161
<Link
132-
to={item.href}
162+
to={item.href}
133163
className={styles.docsNavItemTitle}
134-
onClick={handleMouseLeave}
164+
onClick={handleMouseLeave}
135165
>
136166
{item.label}
137167
</Link>
138-
<div className={styles.docsNavItemDescription}>{item.description}</div>
168+
<div className={styles.docsNavItemDescription}>
169+
{item.description}
170+
</div>
139171
</div>
140172
))}
141173
</div>
@@ -145,20 +177,20 @@ const DropdownContent = ({ dropdownCategory, handleMouseLeave, dropdownStyles, d
145177

146178
const DropdownCaret = () => {
147179
const commonStyle = {
148-
width: '6px',
149-
height: '10px',
150-
fill: 'none',
151-
transition: 'all 0.3s ease',
152-
color: '#6B7280',
180+
width: "6px",
181+
height: "10px",
182+
fill: "none",
183+
transition: "all 0.3s ease",
184+
color: "#6B7280",
153185
};
154186

155187
const rotatedIconStyle = {
156188
...commonStyle,
157-
transform: 'rotate(90deg)',
189+
transform: "rotate(90deg)",
158190
};
159191

160192
return (
161-
<span style={{ marginLeft: '8px' }}>
193+
<span style={{ marginLeft: "8px" }}>
162194
<svg
163195
xmlns="http://www.w3.org/2000/svg"
164196
width="6"

0 commit comments

Comments
 (0)