Skip to content

Commit 931838d

Browse files
gingerwizardgingerwizard
authored
Merge pull request #3519 from Blargian/landing_page_change
Home page: change order of blocks, link to different places
2 parents f95c74c + 210a258 commit 931838d

File tree

5 files changed

+136
-104
lines changed

5 files changed

+136
-104
lines changed

‎docusaurus.config.en.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,9 @@ const config = {
185185
blogPath
186186
);
187187
},
188+
},
189+
pages: {
190+
188191
},
189192
theme: {
190193
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

‎docs/index.md‎ renamed to ‎src/pages/index.mdx‎

Lines changed: 85 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -24,43 +24,54 @@ import IconLightning from '@site/src/icons/IconLightning';
2424
import IconDownload from '@site/src/icons/IconDownload';
2525
import Image from '@theme/IdealImage';
2626

27-
export const Hero = ({ children, color}) => {
27+
export const Hero = ({children, color}) => {
2828
return (
2929
<div className='home-page-hero'>
3030
<div className='home-page-hero-left'>
3131
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '12px'}}>
32-
<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
3336
</div>
34-
<div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference documentation, and videos</div>
3537
</div>
3638
<div className='home-page-hero-right'>
37-
<a href='/docs/getting-started/quick-start' className='home-page-hero-button'>
38-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
39-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning iconWidth={'24px'}/></div>
39+
<a href='/docs/cloud/get-started/cloud-quick-start' className='home-page-hero-button'>
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'}}><IconLightning
49+
iconWidth={'24px'}/></div>
4050
<div>Quick Start</div>
4151
</div>
42-
<div>Get started with ClickHouse in 5 minutes</div>
43-
</a>
44-
<a href='/docs/install' className='home-page-hero-button'>
45-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
46-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload iconWidth={'24px'}/></div>
47-
<div>Install</div>
48-
</div>
49-
<div>Install guides for every platform</div>
52+
<div>Get started with Cloud</div>
5053
</a>
51-
<a href='https://clickhouse.com/cloud' className='home-page-hero-button'>
52-
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
53-
<div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud iconWidth={'24px'}/></div>
54-
<div>Cloud</div>
54+
<a href='/docs/getting-started/quick-start' className='home-page-hero-button'>
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'}}><IconDownload
64+
iconWidth={'24px'}/></div>
65+
<div>Install locally</div>
5566
</div>
56-
<div>The fastest way to get started with ClickHouse</div>
67+
<div>Get started with OSS</div>
5768
</a>
5869
</div>
5970
</div>
6071
)
6172
}
6273

63-
export const HomePageOptionButton = ({ children, icon, iconWidth, svgIcon, link }) => {
74+
export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link}) => {
6475
return (
6576
<a
6677
href={link || '#'}
@@ -72,12 +83,12 @@ export const HomePageOptionButton = ({ children, icon, iconWidth, svgIcon, link
7283
)
7384
}
7485
</div>
75-
<div style={{ fontWeight: '500' }}>{children}</div>
86+
<div style={{fontWeight: '500'}}>{children}</div>
7687
</a>
7788
)
7889
}
7990

80-
export const ConnectToClickHouse = ({ children, color}) => {
91+
export const ConnectToClickHouse = ({children, color}) => {
8192
return (
8293
<div className='home-page-section'>
8394
<div className='home-page-section-left'>
@@ -87,71 +98,95 @@ export const ConnectToClickHouse = ({ children, color}) => {
8798
</div>
8899
<div>
89100
<div className='home-page-button-container'>
90-
<HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px' />} link='/docs/interfaces/cli'>ClickHouse CLI</HomePageOptionButton>
91-
<HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px' />} link='/docs/cloud/get-started/sql-console'>Cloud SQL Console</HomePageOptionButton>
92-
<HomePageOptionButton icon='/docs/images/logo-nodejs.svg' link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
101+
<HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px'/>} link='/docs/interfaces/cli'>ClickHouse
102+
CLI</HomePageOptionButton>
103+
<HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px'/>}
104+
link='/docs/cloud/get-started/sql-console'>Cloud SQL
105+
Console</HomePageOptionButton>
106+
<HomePageOptionButton icon='/docs/images/logo-nodejs.svg'
107+
link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
93108
</div>
94109
<div className='home-page-button-container'>
95-
<HomePageOptionButton icon='/docs/images/logo-java.svg' link='/docs/integrations/java'>Java</HomePageOptionButton>
96-
<HomePageOptionButton icon='/docs/images/logo-python.svg' link='/docs/integrations/python'>Python</HomePageOptionButton>
97-
<HomePageOptionButton icon='/docs/images/logo-go.svg' link='/docs/integrations/go'>Go</HomePageOptionButton>
110+
<HomePageOptionButton icon='/docs/images/logo-java.svg'
111+
link='/docs/integrations/java'>Java</HomePageOptionButton>
112+
<HomePageOptionButton icon='/docs/images/logo-python.svg'
113+
link='/docs/integrations/python'>Python</HomePageOptionButton>
114+
<HomePageOptionButton icon='/docs/images/logo-go.svg'
115+
link='/docs/integrations/go'>Go</HomePageOptionButton>
98116
</div>
99117
</div>
100118
</div>
101119
)
102120
}
103121

104-
export const MigrateToClickHouse = ({ children, color}) => {
122+
export const MigrateToClickHouse = ({children, color}) => {
105123
return (
106124
<div className='home-page-section'>
107125
<div className='home-page-section-left'>
108126
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Migrate to ClickHouse</div>
109-
<div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object storage</div>
127+
<div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object
128+
storage
129+
</div>
110130
<div><a href='/docs/integrations'>View all integrations &rarr;</a></div>
111131
</div>
112132
<div>
113133
<div className='home-page-button-container'>
114-
<HomePageOptionButton icon='/docs/images/logo-snowflake.svg' link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
115-
<HomePageOptionButton icon='/docs/images/logo-bigquery.svg' link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
116-
<HomePageOptionButton icon='/docs/images/logo-redshift.svg' link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
134+
<HomePageOptionButton icon='/docs/images/logo-snowflake.svg'
135+
link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
136+
<HomePageOptionButton icon='/docs/images/logo-bigquery.svg'
137+
link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
138+
<HomePageOptionButton icon='/docs/images/logo-redshift.svg'
139+
link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
117140
</div>
118141
<div className='home-page-button-container'>
119-
<HomePageOptionButton icon='/docs/images/logo-postgres.svg' link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
120-
<HomePageOptionButton icon='/docs/images/logo-mysql.svg' link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
121-
<HomePageOptionButton icon='/docs/images/logo-s3.svg' link='/docs/integrations/s3'>S3</HomePageOptionButton>
142+
<HomePageOptionButton icon='/docs/images/logo-postgres.svg'
143+
link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
144+
<HomePageOptionButton icon='/docs/images/logo-mysql.svg'
145+
link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
146+
<HomePageOptionButton icon='/docs/images/logo-s3.svg'
147+
link='/docs/integrations/s3'>S3</HomePageOptionButton>
122148
</div>
123149
</div>
124150
</div>
125151
)
126152
}
127153

128-
export const DeployClickHouse = ({ children, color}) => {
154+
export const DeployClickHouse = ({children, color}) => {
129155
return (
130156
<div className='home-page-section'>
131157
<div className='home-page-section-left'>
132158
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Deploy ClickHouse</div>
133159
<div style={{marginBottom: '12px'}}>Deploy ClickHouse to our cloud or on your own infrastructure</div>
134160
</div>
135161
<div className='home-page-button-container'>
136-
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px' />} link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
137-
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px' />} link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
138-
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px' />} link='/docs/architecture/cluster-deployment'>Cluster Deployment</HomePageOptionButton>
162+
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px'/>}
163+
link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
164+
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px'/>}
165+
link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
166+
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px'/>}
167+
link='/docs/architecture/cluster-deployment'>Cluster
168+
Deployment</HomePageOptionButton>
139169
</div>
140170
</div>
141171
)
142172
}
143173

144-
export const MoreResources = ({ children, color}) => {
174+
export const MoreResources = ({children, color}) => {
145175
return (
146176
<div className='home-page-section'>
147177
<div className='home-page-section-left'>
148178
<div style={{fontWeight: '600', fontSize: '18px', marginBottom: '10px'}}>Additional resources</div>
149179
</div>
150180
<div>
151181
<div className='home-page-button-container'>
152-
<HomePageOptionButton svgIcon={<IconSupport iconWidth='28px' />} link='https://clickhouse.com/support/program'>Contact Support</HomePageOptionButton>
153-
<HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px' />} link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
154-
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px' />} link='/docs/getting-started/example-datasets'>Sample Datasets</HomePageOptionButton>
182+
<HomePageOptionButton svgIcon={<IconSupport iconWidth='28px'/>}
183+
link='https://clickhouse.com/support/program'>Contact
184+
Support</HomePageOptionButton>
185+
<HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px'/>}
186+
link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
187+
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px'/>}
188+
link='/docs/getting-started/example-datasets'>Sample
189+
Datasets</HomePageOptionButton>
155190
</div>
156191
</div>
157192
</div>
@@ -161,13 +196,13 @@ export const MoreResources = ({ children, color}) => {
161196
export const HomeContainer = () => {
162197
return (
163198
<div className='home-container'>
164-
<Hero />
165-
<ConnectToClickHouse />
166-
<MigrateToClickHouse />
167-
<DeployClickHouse />
168-
<MoreResources />
199+
<Hero/>
200+
<ConnectToClickHouse/>
201+
<MigrateToClickHouse/>
202+
<DeployClickHouse/>
203+
<MoreResources/>
169204
</div>
170205
)
171206
}
172207

173-
<HomeContainer />
208+
<HomeContainer/>

0 commit comments

Comments
 (0)