make docs homepage a page instead of a doc pretending to be a page

Blargian · Blargian · commit 4cc1f9a8d437 · 2025-03-19T11:57:54.000+01:00
diff --git a/docusaurus.config.en.js b/docusaurus.config.en.js
@@ -182,6 +182,9 @@ const config = {
               blogPath
             );
           },
+        },
+        pages: {
+
         },
         theme: {
           customCss: [require.resolve("./src/css/custom.scss")],
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -582,13 +582,11 @@ prism-code {
 @media (min-width: 1440px) {
   .container {
     max-width: 95%;
-    margin-left: 1rem;
   }
 }
 
 @media (max-width: 1439px) {
   .container {
-    margin-left: 1rem;
   }
 }
 
diff --git a/src/css/home.scss b/src/css/home.scss
@@ -50,14 +50,13 @@
 
   @media (min-width: 768px) {
     flex-direction: row;
-    padding-top: 4rem;
-    padding-bottom: 4rem;
+    padding-right: 2rem;
   }
 }
 
 .home-page-hero-left {
-  text-align: left;
-  padding-bottom: 2rem;
+  align-self: center;
+  padding: 2rem 0rem;
 
   @media (min-width: 768px) {
     padding-right: 2rem;
@@ -126,13 +125,11 @@
   width: 100%;
   flex-direction: row;
   align-items: center;
-  padding: 8px;
   cursor: pointer;
 
   @media (min-width: 768px) {
     marginBottom: 4rem;
     width: 210px;
-    margin-right: 2rem;
   }
 }
 
@@ -157,7 +154,6 @@
   // background-color: rgb(250, 250, 250);
   border-radius: 4px;
   margin-right: 16px;
-  padding: 6px;
 }
 
 [data-theme='dark'] .home-page-option-icon {
@@ -172,7 +168,6 @@
 .home-page-button-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 
   @media (min-width: 768px) {
@@ -237,8 +232,7 @@ img.home-svg svg path {
 }
 
 .home-container {
-  @media (min-width: 768px) {
-    padding-left: 4rem !important;
-  }
+  display: flex;
+  flex-direction: column;
 }
 
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_label: 'Home'
-displayed_sidebar: 'docs'
 slug: /
 sidebar_position: 1
 title: 'ClickHouse Docs'
@@ -9,6 +8,8 @@ pagination_next: null
 hide_title: true
 id: 'home-page'
 description: 'Docs homepage'
+sidebar_custom_props:
+hidden: true
 ---
 
 import ClickHouseLogo from '@site/src/icons/ClickHouseLogo';
@@ -23,33 +24,59 @@ import IconSQLConsole from '@site/src/icons/IconSQLConsole';
 import IconLightning from '@site/src/icons/IconLightning';
 import IconDownload from '@site/src/icons/IconDownload';
 
-export const Hero = ({ children, color}) => {
+export const Hero = ({children, color}) => {
     return (
         <div className='home-page-hero'>
             <div className='home-page-hero-left'>
                 <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '12px'}}>
-                    <ClickHouseLogo width='220px' color='black' />
+                    <ClickHouseLogo width='220px' color='black'/>
+                </div>
+                <div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference
+                    documentation, and videos
                 </div>
-                <div style={{fontSize: '16px', lineHeight: '1.4'}}>Learn how to use ClickHouse through guides, reference documentation, and videos</div>
             </div>
             <div className='home-page-hero-right'>
                 <a href='/docs/cloud/overview' className='home-page-hero-button'>
-                    <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-                        <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud iconWidth={'24px'}/></div>
+                    <div style={{
+                        fontWeight: '600',
+                        fontSize: '18px',
+                        marginBottom: '12px',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
+                    }}>
+                        <div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconCloud
+                            iconWidth={'24px'}/></div>
                         <div>Cloud</div>
                     </div>
                     <div>The fastest way to get started with ClickHouse</div>
                 </a>
                 <a href='/docs/cloud/get-started/cloud-quick-start' className='home-page-hero-button'>
-                    <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-                        <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning iconWidth={'24px'}/></div>
+                    <div style={{
+                        fontWeight: '600',
+                        fontSize: '18px',
+                        marginBottom: '12px',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
+                    }}>
+                        <div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning
+                            iconWidth={'24px'}/></div>
                         <div>Quick Start</div>
                     </div>
                     <div>Get started with ClickHouse in 5 minutes</div>
                 </a>
                 <a href='/docs/install' className='home-page-hero-button'>
-                    <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '12px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-                        <div style={{ display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload iconWidth={'24px'}/></div>
+                    <div style={{
+                        fontWeight: '600',
+                        fontSize: '18px',
+                        marginBottom: '12px',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
+                    }}>
+                        <div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconDownload
+                            iconWidth={'24px'}/></div>
                         <div>Install</div>
                     </div>
                     <div>Install guides for every platform</div>
@@ -59,24 +86,24 @@ export const Hero = ({ children, color}) => {
     )
 }
 
-export const HomePageOptionButton = ({ children, icon, iconWidth, svgIcon, link }) => {
+export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link}) => {
     return (
         <a
             href={link || '#'}
             className='home-page-option-button'>
             <div className='home-page-option-icon'>
                 {
                     svgIcon ? svgIcon : (
-                        <img className='home-svg' src={icon} style={{width: iconWidth || '28px'}} />
+                        <img className='home-svg' src={icon} style={{width: iconWidth || '28px'}}/>
                     )
                 }
             </div>
-            <div style={{ fontWeight: '500' }}>{children}</div>
+            <div style={{fontWeight: '500'}}>{children}</div>
         </a>
     )
 }
 
-export const ConnectToClickHouse = ({ children, color}) => {
+export const ConnectToClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section'>
             <div className='home-page-section-left'>
@@ -86,71 +113,95 @@ export const ConnectToClickHouse = ({ children, color}) => {
             </div>
             <div>
                 <div className='home-page-button-container'>
-                    <HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px' />} link='/docs/interfaces/cli'>ClickHouse CLI</HomePageOptionButton>
-                    <HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px' />} link='/docs/cloud/get-started/sql-console'>Cloud SQL Console</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-nodejs.svg' link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
+                    <HomePageOptionButton svgIcon={<IconTerminal iconWidth='28px'/>} link='/docs/interfaces/cli'>ClickHouse
+                        CLI</HomePageOptionButton>
+                    <HomePageOptionButton svgIcon={<IconSQLConsole iconWidth='28px'/>}
+                                          link='/docs/cloud/get-started/sql-console'>Cloud SQL
+                        Console</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-nodejs.svg'
+                                          link='/docs/integrations/javascript'>Node.js</HomePageOptionButton>
                 </div>
                 <div className='home-page-button-container'>
-                    <HomePageOptionButton icon='/docs/images/logo-java.svg' link='/docs/integrations/java'>Java</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-python.svg' link='/docs/integrations/python'>Python</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-go.svg' link='/docs/integrations/go'>Go</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-java.svg'
+                                          link='/docs/integrations/java'>Java</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-python.svg'
+                                          link='/docs/integrations/python'>Python</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-go.svg'
+                                          link='/docs/integrations/go'>Go</HomePageOptionButton>
                 </div>
             </div>
         </div>
     )
 }
 
-export const MigrateToClickHouse = ({ children, color}) => {
+export const MigrateToClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section'>
             <div className='home-page-section-left'>
                 <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Migrate to ClickHouse</div>
-                <div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object storage</div>
+                <div style={{marginBottom: '12px'}}>Load your data from other databases, data warehouses, and object
+                    storage
+                </div>
                 <div><a href='/docs/integrations'>View all integrations &rarr;</a></div>
             </div>
             <div>
                 <div className='home-page-button-container'>
-                    <HomePageOptionButton icon='/docs/images/logo-snowflake.svg' link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-bigquery.svg' link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-redshift.svg' link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-snowflake.svg'
+                                          link='/docs/migrations/snowflake'>Snowflake</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-bigquery.svg'
+                                          link='/docs/migrations/bigquery'>BigQuery</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-redshift.svg'
+                                          link='/docs/integrations/redshift'>Redshift</HomePageOptionButton>
                 </div>
                 <div className='home-page-button-container'>
-                    <HomePageOptionButton icon='/docs/images/logo-postgres.svg' link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-mysql.svg' link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
-                    <HomePageOptionButton icon='/docs/images/logo-s3.svg' link='/docs/integrations/s3'>S3</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-postgres.svg'
+                                          link='/docs/integrations/postgresql'>Postgres</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-mysql.svg'
+                                          link='/docs/integrations/mysql'>MySQL</HomePageOptionButton>
+                    <HomePageOptionButton icon='/docs/images/logo-s3.svg'
+                                          link='/docs/integrations/s3'>S3</HomePageOptionButton>
                 </div>
             </div>
         </div>
     )
 }
 
-export const DeployClickHouse = ({ children, color}) => {
+export const DeployClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section'>
             <div className='home-page-section-left'>
                 <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Deploy ClickHouse</div>
                 <div style={{marginBottom: '12px'}}>Deploy ClickHouse to our cloud or on your own infrastructure</div>
             </div>
             <div className='home-page-button-container'>
-                <HomePageOptionButton svgIcon={<IconCloud iconWidth='28px' />} link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
-                <HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px' />} link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
-                <HomePageOptionButton svgIcon={<IconCluster iconWidth='28px' />} link='/docs/architecture/cluster-deployment'>Cluster Deployment</HomePageOptionButton>
+                <HomePageOptionButton svgIcon={<IconCloud iconWidth='28px'/>}
+                                      link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
+                <HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px'/>}
+                                      link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
+                <HomePageOptionButton svgIcon={<IconCluster iconWidth='28px'/>}
+                                      link='/docs/architecture/cluster-deployment'>Cluster
+                    Deployment</HomePageOptionButton>
             </div>
         </div>
     )
 }
 
-export const MoreResources = ({ children, color}) => {
+export const MoreResources = ({children, color}) => {
     return (
         <div className='home-page-section'>
             <div className='home-page-section-left'>
                 <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '10px'}}>Additional resources</div>
             </div>
             <div>
                 <div className='home-page-button-container'>
-                    <HomePageOptionButton svgIcon={<IconSupport iconWidth='28px' />} link='https://clickhouse.com/support/program'>Contact Support</HomePageOptionButton>
-                    <HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px' />} link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
-                    <HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px' />} link='/docs/getting-started/example-datasets'>Sample Datasets</HomePageOptionButton>
+                    <HomePageOptionButton svgIcon={<IconSupport iconWidth='28px'/>}
+                                          link='https://clickhouse.com/support/program'>Contact
+                        Support</HomePageOptionButton>
+                    <HomePageOptionButton svgIcon={<IconChangelog iconWidth='28px'/>}
+                                          link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
+                    <HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px'/>}
+                                          link='/docs/getting-started/example-datasets'>Sample
+                        Datasets</HomePageOptionButton>
                 </div>
             </div>
         </div>
@@ -160,13 +211,13 @@ export const MoreResources = ({ children, color}) => {
 export const HomeContainer = () => {
     return (
         <div className='home-container'>
-            <Hero />
-            <ConnectToClickHouse />
-            <MigrateToClickHouse />
-            <DeployClickHouse />
-            <MoreResources />
+            <Hero/>
+            <ConnectToClickHouse/>
+            <MigrateToClickHouse/>
+            <DeployClickHouse/>
+            <MoreResources/>
         </div>
     )
 }
 
-<HomeContainer />
+<HomeContainer/>
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
@@ -11,6 +11,7 @@
   justify-content: space-between;
   height: 100%;
   padding-bottom: 3.5rem;
+  padding: 0.2rem;
 
   img {
     /* padding looks bad in dark mode as it adds white space around images that have dark backgrounds */

Original file line number	Diff line number	Diff line change
`@@ -582,13 +582,11 @@ prism-code {`
`582`	`582`	`@media (min-width: 1440px) {`
`583`	`583`	`.container {`
`584`	`584`	`max-width: 95%;`
`585`		`- margin-left: 1rem;`
`586`	`585`	`}`
`587`	`586`	`}`
`588`	`587`
`589`	`588`	`@media (max-width: 1439px) {`
`590`	`589`	`.container {`
`591`		`- margin-left: 1rem;`
`592`	`590`	`}`
`593`	`591`	`}`
`594`	`592`