Skip to content

Commit 4cc1f9a

Browse files
committed
make docs homepage a page instead of a doc pretending to be a page
1 parent 2e38fdb commit 4cc1f9a

File tree

5 files changed

+102
-55
lines changed

5 files changed

+102
-55
lines changed

docusaurus.config.en.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,9 @@ const config = {
182182
blogPath
183183
);
184184
},
185+
},
186+
pages: {
187+
185188
},
186189
theme: {
187190
customCss: [require.resolve("./src/css/custom.scss")],

src/css/custom.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -582,13 +582,11 @@ prism-code {
582582
@media (min-width: 1440px) {
583583
.container {
584584
max-width: 95%;
585-
margin-left: 1rem;
586585
}
587586
}
588587

589588
@media (max-width: 1439px) {
590589
.container {
591-
margin-left: 1rem;
592590
}
593591
}
594592

src/css/home.scss

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,13 @@
5050

5151
@media (min-width: 768px) {
5252
flex-direction: row;
53-
padding-top: 4rem;
54-
padding-bottom: 4rem;
53+
padding-right: 2rem;
5554
}
5655
}
5756

5857
.home-page-hero-left {
59-
text-align: left;
60-
padding-bottom: 2rem;
58+
align-self: center;
59+
padding: 2rem 0rem;
6160

6261
@media (min-width: 768px) {
6362
padding-right: 2rem;
@@ -126,13 +125,11 @@
126125
width: 100%;
127126
flex-direction: row;
128127
align-items: center;
129-
padding: 8px;
130128
cursor: pointer;
131129

132130
@media (min-width: 768px) {
133131
marginBottom: 4rem;
134132
width: 210px;
135-
margin-right: 2rem;
136133
}
137134
}
138135

@@ -157,7 +154,6 @@
157154
// background-color: rgb(250, 250, 250);
158155
border-radius: 4px;
159156
margin-right: 16px;
160-
padding: 6px;
161157
}
162158

163159
[data-theme='dark'] .home-page-option-icon {
@@ -172,7 +168,6 @@
172168
.home-page-button-container {
173169
display: flex;
174170
flex-direction: column;
175-
justify-content: center;
176171
align-items: center;
177172

178173
@media (min-width: 768px) {
@@ -237,8 +232,7 @@ img.home-svg svg path {
237232
}
238233

239234
.home-container {
240-
@media (min-width: 768px) {
241-
padding-left: 4rem !important;
242-
}
235+
display: flex;
236+
flex-direction: column;
243237
}
244238

Lines changed: 93 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
sidebar_label: 'Home'
3-
displayed_sidebar: 'docs'
43
slug: /
54
sidebar_position: 1
65
title: 'ClickHouse Docs'
@@ -9,6 +8,8 @@ pagination_next: null
98
hide_title: true
109
id: 'home-page'
1110
description: 'Docs homepage'
11+
sidebar_custom_props:
12+
hidden: true
1213
---
1314

1415
import ClickHouseLogo from '@site/src/icons/ClickHouseLogo';
@@ -23,33 +24,59 @@ import IconSQLConsole from '@site/src/icons/IconSQLConsole';
2324
import IconLightning from '@site/src/icons/IconLightning';
2425
import IconDownload from '@site/src/icons/IconDownload';
2526

26-
export const Hero = ({ children, color}) => {
27+
export const Hero = ({children, color}) => {
2728
return (
2829
<div className='home-page-hero'>
2930
<div className='home-page-hero-left'>
3031
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '12px'}}>
31-
<ClickHouseLogo width='220px' color='black' />
32+
<ClickHouseLogo width='220px' color='black'/>
33+
</div>
34+
<div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference
35+
documentation, and videos
3236
</div>
33-
<div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference documentation, and videos</div>
3437
</div>
3538
<div className='home-page-hero-right'>
3639
<a href='/docs/cloud/overview' className='home-page-hero-button'>
37-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
38-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud iconWidth={'24px'}/></div>
40+
<div style={{
41+
fontWeight: '600',
42+
fontSize: '18px',
43+
marginBottom: '12px',
44+
display: 'flex',
45+
flexDirection: 'row',
46+
alignItems: 'center'
47+
}}>
48+
<div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud
49+
iconWidth={'24px'}/></div>
3950
<div>Cloud</div>
4051
</div>
4152
<div>The fastest way to get started with ClickHouse</div>
4253
</a>
4354
<a href='/docs/cloud/get-started/cloud-quick-start' className='home-page-hero-button'>
44-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
45-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning iconWidth={'24px'}/></div>
55+
<div style={{
56+
fontWeight: '600',
57+
fontSize: '18px',
58+
marginBottom: '12px',
59+
display: 'flex',
60+
flexDirection: 'row',
61+
alignItems: 'center'
62+
}}>
63+
<div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning
64+
iconWidth={'24px'}/></div>
4665
<div>Quick Start</div>
4766
</div>
4867
<div>Get started with ClickHouse in 5 minutes</div>
4968
</a>
5069
<a href='/docs/install' className='home-page-hero-button'>
51-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
52-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload iconWidth={'24px'}/></div>
70+
<div style={{
71+
fontWeight: '600',
72+
fontSize: '18px',
73+
marginBottom: '12px',
74+
display: 'flex',
75+
flexDirection: 'row',
76+
alignItems: 'center'
77+
}}>
78+
<div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload
79+
iconWidth={'24px'}/></div>
5380
<div>Install</div>
5481
</div>
5582
<div>Install guides for every platform</div>
@@ -59,24 +86,24 @@ export const Hero = ({ children, color}) => {
5986
)
6087
}
6188

62-
export const HomePageOptionButton = ({ children, icon, iconWidth, svgIcon, link }) => {
89+
export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link}) => {
6390
return (
6491
<a
6592
href={link || '#'}
6693
className='home-page-option-button'>
6794
<div className='home-page-option-icon'>
6895
{
6996
svgIcon ? svgIcon : (
70-
<img className='home-svg' src={icon} style={{width: iconWidth || '28px'}} />
97+
<img className='home-svg' src={icon} style={{width: iconWidth || '28px'}}/>
7198
)
7299
}
73100
</div>
74-
<div style={{ fontWeight: '500' }}>{children}</div>
101+
<div style={{fontWeight: '500'}}>{children}</div>
75102
</a>
76103
)
77104
}
78105

79-
export const ConnectToClickHouse = ({ children, color}) => {
106+
export const ConnectToClickHouse = ({children, color}) => {
80107
return (
81108
<div className='home-page-section'>
82109
<div className='home-page-section-left'>
@@ -86,71 +113,95 @@ export const ConnectToClickHouse = ({ children, color}) => {
86113
</div>
87114
<div>
88115
<div className='home-page-button-container'>
89-
<HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px' />} link='/docs/interfaces/cli'>ClickHouse CLI</HomePageOptionButton>
90-
<HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px' />} link='/docs/cloud/get-started/sql-console'>Cloud SQL Console</HomePageOptionButton>
91-
<HomePageOptionButton icon='/docs/images/logo-nodejs.svg' link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
116+
<HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px'/>} link='/docs/interfaces/cli'>ClickHouse
117+
CLI</HomePageOptionButton>
118+
<HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px'/>}
119+
link='/docs/cloud/get-started/sql-console'>Cloud SQL
120+
Console</HomePageOptionButton>
121+
<HomePageOptionButton icon='/docs/images/logo-nodejs.svg'
122+
link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
92123
</div>
93124
<div className='home-page-button-container'>
94-
<HomePageOptionButton icon='/docs/images/logo-java.svg' link='/docs/integrations/java'>Java</HomePageOptionButton>
95-
<HomePageOptionButton icon='/docs/images/logo-python.svg' link='/docs/integrations/python'>Python</HomePageOptionButton>
96-
<HomePageOptionButton icon='/docs/images/logo-go.svg' link='/docs/integrations/go'>Go</HomePageOptionButton>
125+
<HomePageOptionButton icon='/docs/images/logo-java.svg'
126+
link='/docs/integrations/java'>Java</HomePageOptionButton>
127+
<HomePageOptionButton icon='/docs/images/logo-python.svg'
128+
link='/docs/integrations/python'>Python</HomePageOptionButton>
129+
<HomePageOptionButton icon='/docs/images/logo-go.svg'
130+
link='/docs/integrations/go'>Go</HomePageOptionButton>
97131
</div>
98132
</div>
99133
</div>
100134
)
101135
}
102136

103-
export const MigrateToClickHouse = ({ children, color}) => {
137+
export const MigrateToClickHouse = ({children, color}) => {
104138
return (
105139
<div className='home-page-section'>
106140
<div className='home-page-section-left'>
107141
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Migrate to ClickHouse</div>
108-
<div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object storage</div>
142+
<div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object
143+
storage
144+
</div>
109145
<div><a href='/docs/integrations'>View all integrations &rarr;</a></div>
110146
</div>
111147
<div>
112148
<div className='home-page-button-container'>
113-
<HomePageOptionButton icon='/docs/images/logo-snowflake.svg' link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
114-
<HomePageOptionButton icon='/docs/images/logo-bigquery.svg' link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
115-
<HomePageOptionButton icon='/docs/images/logo-redshift.svg' link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
149+
<HomePageOptionButton icon='/docs/images/logo-snowflake.svg'
150+
link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
151+
<HomePageOptionButton icon='/docs/images/logo-bigquery.svg'
152+
link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
153+
<HomePageOptionButton icon='/docs/images/logo-redshift.svg'
154+
link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
116155
</div>
117156
<div className='home-page-button-container'>
118-
<HomePageOptionButton icon='/docs/images/logo-postgres.svg' link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
119-
<HomePageOptionButton icon='/docs/images/logo-mysql.svg' link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
120-
<HomePageOptionButton icon='/docs/images/logo-s3.svg' link='/docs/integrations/s3'>S3</HomePageOptionButton>
157+
<HomePageOptionButton icon='/docs/images/logo-postgres.svg'
158+
link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
159+
<HomePageOptionButton icon='/docs/images/logo-mysql.svg'
160+
link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
161+
<HomePageOptionButton icon='/docs/images/logo-s3.svg'
162+
link='/docs/integrations/s3'>S3</HomePageOptionButton>
121163
</div>
122164
</div>
123165
</div>
124166
)
125167
}
126168

127-
export const DeployClickHouse = ({ children, color}) => {
169+
export const DeployClickHouse = ({children, color}) => {
128170
return (
129171
<div className='home-page-section'>
130172
<div className='home-page-section-left'>
131173
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Deploy ClickHouse</div>
132174
<div style={{marginBottom: '12px'}}>Deploy ClickHouse to our cloud or on your own infrastructure</div>
133175
</div>
134176
<div className='home-page-button-container'>
135-
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px' />} link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
136-
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px' />} link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
137-
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px' />} link='/docs/architecture/cluster-deployment'>Cluster Deployment</HomePageOptionButton>
177+
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px'/>}
178+
link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
179+
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px'/>}
180+
link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
181+
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px'/>}
182+
link='/docs/architecture/cluster-deployment'>Cluster
183+
Deployment</HomePageOptionButton>
138184
</div>
139185
</div>
140186
)
141187
}
142188

143-
export const MoreResources = ({ children, color}) => {
189+
export const MoreResources = ({children, color}) => {
144190
return (
145191
<div className='home-page-section'>
146192
<div className='home-page-section-left'>
147193
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '10px'}}>Additional resources</div>
148194
</div>
149195
<div>
150196
<div className='home-page-button-container'>
151-
<HomePageOptionButton svgIcon={<IconSupport iconWidth='28px' />} link='https://clickhouse.com/support/program'>Contact Support</HomePageOptionButton>
152-
<HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px' />} link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
153-
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px' />} link='/docs/getting-started/example-datasets'>Sample Datasets</HomePageOptionButton>
197+
<HomePageOptionButton svgIcon={<IconSupport iconWidth='28px'/>}
198+
link='https://clickhouse.com/support/program'>Contact
199+
Support</HomePageOptionButton>
200+
<HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px'/>}
201+
link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
202+
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px'/>}
203+
link='/docs/getting-started/example-datasets'>Sample
204+
Datasets</HomePageOptionButton>
154205
</div>
155206
</div>
156207
</div>
@@ -160,13 +211,13 @@ export const MoreResources = ({ children, color}) => {
160211
export const HomeContainer = () => {
161212
return (
162213
<div className='home-container'>
163-
<Hero />
164-
<ConnectToClickHouse />
165-
<MigrateToClickHouse />
166-
<DeployClickHouse />
167-
<MoreResources />
214+
<Hero/>
215+
<ConnectToClickHouse/>
216+
<MigrateToClickHouse/>
217+
<DeployClickHouse/>
218+
<MoreResources/>
168219
</div>
169220
)
170221
}
171222

172-
<HomeContainer />
223+
<HomeContainer/>

src/theme/DocItem/Layout/styles.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
justify-content: space-between;
1212
height: 100%;
1313
padding-bottom: 3.5rem;
14+
padding: 0.2rem;
1415

1516
img {
1617
/* padding looks bad in dark mode as it adds white space around images that have dark backgrounds */

0 commit comments

Comments
 (0)