diff --git a/es/index.mdx b/es/index.mdx
deleted file mode 100644
index 7b0304490..000000000
--- a/es/index.mdx
+++ /dev/null
@@ -1,435 +0,0 @@
----
-mode: "custom"
-max-toc-depth: 3
-slug: home
-sidebarTitle: "Home"
-icon: "house"
----
-
-export const ButtonGroup = ({options = [], selected, onClick, fillWidth = false, type = 'default', ...props}) => {
- return (
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
- 
- 
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
-
-
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
-
-
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
-
-
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
-
-
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-
- {options.map(({ value, label, ...buttonProps }) => (
-
- ))}
-
- );
-}
-
-export const FullWidthDivider = ({ style }) => {
- const ref = useRef(null);
- useEffect(() => {
- if (!ref.current) return;
- const el = ref.current;
- const update = () => {
- requestAnimationFrame(() => {
- el.style.marginLeft = '';
- el.style.width = '';
- const elRect = el.getBoundingClientRect();
- const sidebar = document.getElementById('sidebar');
- const sidebarRect = sidebar?.getBoundingClientRect();
- const leftEdge = (sidebarRect && sidebarRect.width > 0) ? sidebarRect.right : 0;
- const rightEdge = document.documentElement.clientWidth;
- const ml = Math.max(0, elRect.left - leftEdge);
- const mr = Math.max(0, rightEdge - elRect.right);
- el.style.marginLeft = `-${ml}px`;
- el.style.width = `calc(100% + ${ml + mr}px)`;
- });
- };
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- return
;
-};
-
-export const HeroCard = ({ filename, darkFilename: darkFilenameProp, title, description, body, href, links, icon, showArrow, arrowBottom, extraStyle }) => {
- const [isDark, setIsDark] = useState(false);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const checkDark = () => {
- setIsDark(document.documentElement.classList.contains('dark'));
- };
- checkDark();
- const observer = new MutationObserver(checkDark);
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- return () => observer.disconnect();
- }
- }, []);
-
- const darkFilename = darkFilenameProp || (filename ? filename.replace('-light.', '-dark.') : null);
-
- const cardStyle = {
- padding: '16px 16px 16px 16px',
- borderRadius: '8px',
- backgroundColor: isDark ? '#1b1b18' : '#f9f9f9',
- border: isDark ? '1px solid #3c3c3c' : '1px solid #e5e7eb',
- display: 'block',
- textDecoration: 'none',
- color: 'inherit',
- position: 'relative',
- overflow: 'hidden',
- transition: 'background-color 0.12s ease, border-color 0.12s ease'
- };
-
- const content = (
- <>
- {icon ? (
-
- {icon}
-
- ) : (
- <>
-
-
-
- )}
-
- {title}
-
- {body ? body : (
- {description}
- )}
- {links && links.length > 0 && (
-
- )}
- {showArrow && (
-
- )}
-
- );
-
- if (links && links.length > 0) {
- return {content}
;
- }
-
- return { e.preventDefault(); window.location.href = href; }}>{content};
-};
-
-{/*
- To restore the tab switcher, change MODE to 'switcher'.
- Valid values: 'stacked' (all sections visible) or 'switcher' (tabbed).
-*/}
-export const CONTENT_MODE = 'stacked';
-
-export const ContentSwitcher = () => {
- const [selected, setSelected] = useState(() => {
- if (typeof window !== 'undefined') {
- return localStorage.getItem('contentSwitcherTab') || 'goal';
- }
- return 'goal';
- });
-
- const handleSelection = (value) => {
- setSelected(value);
- if (typeof window !== 'undefined') {
- localStorage.setItem('contentSwitcherTab', value);
- }
- };
-
- const showGoal = CONTENT_MODE === 'stacked' || selected === 'goal';
- const showUsecase = CONTENT_MODE === 'stacked' || selected === 'usecase';
- const showProduct = CONTENT_MODE === 'stacked' || selected === 'product';
-
- return (
- <>
- {CONTENT_MODE === 'switcher' && (
-
-
- {selected === 'goal' && 'Explore by goal'}
- {selected === 'product' && 'Explore by product area'}
-
-
-
- )}
-
- {showGoal && (
- <>
-
-
-
-
-
- }
- links={[
- { label: "What is ClickHouse?", href: "/get-started/about/intro" },
- { label: "Setup/Install", href: "/get-started/install/quick-start-cloud" },
- { label: "Explore quickstarts", href: "/get-started/quickstarts/home" },
- { label: "Migration guides", href: "/get-started/migration-guides/01_overview" },
- { label: "Core concepts & best practices", href: "/concepts/best-practices/index" },
- { label: "Sample datasets", href: "/get-started/sample-datasets/github" }
- ]}
- />
-
-
-
- }
- links={[
- { label: "Data modelling topics", href: "/guides/data_modelling/schema-design" },
- { label: "Performance & query optimization guides", href: "/guides/performance_and_monitoring/query-optimization" },
- { label: "ClickHouse Cloud topics", href: "/guides/cloud/cloud-compatibility" },
- { label: "Self-managed topics", href: "/guides/oss/deployment_and_scaling/terminology" },
- { label: "Use-case guides", href: "/guides/use_case_guides/time-series/time-series-filling-gaps" },
- ]}
- />
-
-
-
- }
- links={[
- { label: "SQL reference", href: "/reference/statements" },
- { label: "Session settings", href: "/reference/settings/session-settings" },
- { label: "Server settings", href: "/reference/settings/server-settings/settings" },
- { label: "Functions", href: "/reference/functions/regular-functions/overview" },
- { label: "Engines", href: "/reference/engines/engines" },
- { label: "System tables", href: "/reference/system-tables" },
- { label: "Formats", href: "/reference/formats/Arrow/Arrow" },
- { label: "Data types", href: "/reference/data-types/int-uint" }
- ]}
- />
- Explore by use case
- Discover how ClickHouse powers real-time analytics, observability, data warehousing, and agentic AI at any scale.
-
-
-
-
-
-
-
- )}
-
- {showProduct && (
- <>
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-
-
-
-
-
-
-
-
- Start building with ClickHouse
-
-
-
- Documentation for the fastest analytics database
-
-
-
-
-
-
-
-
-
-
-