New docs home page

docusaurus.config.en.js

@@ -311,6 +311,7 @@ const config = {
 
   plugins: [
     "docusaurus-plugin-sass",
+    "./plugins/version-extractor",
     function (context, options) {
       return {
         name: "docusaurus-plugin",

package.json

@@ -43,7 +43,11 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@docusaurus/theme-mermaid": "3.7.0",
     "@docusaurus/theme-search-algolia": "^3.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mdx-js/react": "^3.1.0",
+    "@mui/material": "^7.3.0",
+    "@mui/styled-engine-sc": "^7.3.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-navigation-menu": "^1.2.13",
     "@redocly/cli": "^1.34.0",
@@ -74,6 +78,7 @@
     "sass": "^1.89.1",
     "search-insights": "^2.17.3",
     "short-uuid": "^5.2.0",
+    "styled-components": "^6.1.19",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

plugins/version-extractor/index.js

@@ -0,0 +1,138 @@
+const fs = require('fs');
+const path = require('path');
+
+function extractVersions(siteDir) {
+  // Extract latest OSS version from index.md (2025 changelog)
+  function getLatestOSSVersion() {
+    try {
+      // Check 2025 changelog first (index.md)
+      const changelog2025Path = path.join(siteDir, 'docs/whats-new/changelog/index.md');
+      if (fs.existsSync(changelog2025Path)) {
+        const content = fs.readFileSync(changelog2025Path, 'utf8');
+
+        // Look for the first version pattern like "25.7"
+        const versionMatch = content.match(/ClickHouse release v(\d+\.\d+)/);
+        if (versionMatch) {
+          const version = versionMatch[1];
+          // Create anchor link (e.g., "25.7" -> "#257")
+          const anchor = version.replace('.', '');
+          return {
+            version: `v${version}`,
+            link: `/docs/whats-new/changelog#${anchor}`
+          };
+        }
+      }
+
+      // Fallback to 2024 changelog
+      const changelog2024Path = path.join(siteDir, 'docs/whats-new/changelog/2024.md');
+      const content = fs.readFileSync(changelog2024Path, 'utf8');
+
+      // Look for the first version pattern like "24.12"
+      const versionMatch = content.match(/ClickHouse release (?:v)?(\d+\.\d+)/);
+      const version = versionMatch ? versionMatch[1] : '24.12.1';
+      return {
+        version: `v${version}`,
+        link: `/docs/whats-new/changelog/2024`
+      };
+    } catch (error) {
+      console.warn('Could not extract OSS version:', error.message);
+      return {
+        version: 'v25.7',
+        link: '/docs/whats-new/changelog#257'
+      };
+    }
+  }
+
+  // Extract latest Cloud version from changelog directory
+  function getLatestCloudVersion() {
+    try {
+      const changelogDir = path.join(siteDir, 'docs/cloud/changelogs');
+      const files = fs.readdirSync(changelogDir)
+        .filter(file => file.endsWith('.md'))
+        .map(file => {
+          const match = file.match(/(\d+)_(\d+)\.md$/);
+          if (match) {
+            // Convert "06" to "6", "04" to "4", etc.
+            const major = match[1];
+            const minor = parseInt(match[2], 10).toString();
+            return {
+              version: `${major}.${minor}`,
+              file: file,
+              link: `/docs/changelogs/${major}.${minor}`
+            };
+          }
+          return null;
+        })
+        .filter(Boolean)
+        .sort((a, b) => {
+          // Sort by version number (descending)
+          const [aMajor, aMinor] = a.version.split('.').map(Number);
+          const [bMajor, bMinor] = b.version.split('.').map(Number);
+
+          if (aMajor !== bMajor) return bMajor - aMajor;
+          return bMinor - aMinor;
+        });
+
+      if (files.length > 0) {
+        return {
+          version: `v${files[0].version}`,
+          link: files[0].link
+        };
+      }
+
+      return {
+        version: 'v25.6',
+        link: '/docs/changelogs/25.6'
+      };
+    } catch (error) {
+      console.warn('Could not extract Cloud version:', error.message);
+      return {
+        version: 'v25.6',
+        link: '/docs/changelogs/25.6'
+      };
+    }
+  }
+
+  const ossVersionInfo = getLatestOSSVersion();
+  const cloudVersionInfo = getLatestCloudVersion();
+
+  return {
+    oss: {
+      version: ossVersionInfo.version,
+      link: ossVersionInfo.link
+    },
+    cloud: {
+      version: cloudVersionInfo.version,
+      link: cloudVersionInfo.link
+    },
+    generatedAt: new Date().toISOString()
+  };
+}
+
+module.exports = function versionExtractorPlugin(context, options) {
+  return {
+    name: 'version-extractor-plugin',
+
+    async loadContent() {
+      const versions = extractVersions(context.siteDir);
+      return versions;
+    },
+
+    async contentLoaded({ content, actions }) {
+      const { createData } = actions;
+
+      // Create a JSON file that can be imported
+      await createData('versions.json', JSON.stringify(content, null, 2));
+
+      // Also create a JS module for easier importing
+      const jsContent = `export default ${JSON.stringify(content, null, 2)};`;
+      await createData('versions.js', jsContent);
+
+      console.log('🔍 Extracted versions:', content);
+    },
+
+    getClientModules() {
+      return [];
+    }
+  };
+};

src/css/custom.scss

@@ -141,6 +141,10 @@ body {
   color: white;
 }
 
+.footer {
+  z-index: 100;
+}
+
 [data-theme='dark'] .footer {
   background-color: var(--click-color-background);
 }

src/css/default.scss

@@ -114,6 +114,7 @@
   --icon: none;
 }
 
+
 /* Add dark theme */
 [data-theme='dark'] {
   --ifm-menu-color: #FFFFF;

src/hooks/useAnchorFix.js

@@ -12,7 +12,9 @@ export function useAnchorFix() {
             if (hash) {
                 // Wait for content to load, then scroll
                 setTimeout(() => {
-                    const element = document.querySelector(hash);
+                    // CSS selectors that start with a digit are invalid, so we need to escape them
+                    const escapedHash = hash.replace(/^#(\d)/, '#\\3$1 ');
+                    const element = document.querySelector(escapedHash);
                     if (element) {
                         element.scrollIntoView({ behavior: 'smooth' });
                     }

src/hooks/useVersions.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+// Hook to get version information
+export function useVersions() {
+  const [versions, setVersions] = useState({
+    oss: { version: 'v24.12.1', link: '/docs/whats-new/changelog' },
+    cloud: { version: 'v25.6', link: '/docs/changelogs/25.6' }
+  });
+
+  useEffect(() => {
+    // Try to load the generated versions data
+    const loadVersions = async () => {
+      try {
+        // This will work when the plugin generates the data
+        const versionData = await import('@generated/version-extractor-plugin/default/versions.js');
+        if (versionData.default) {
+          setVersions(versionData.default);
+        }
+      } catch (error) {
+        console.warn('Could not load generated versions, using defaults:', error);
+        // Fallback to defaults already set in useState
+      }
+    };
+
+    loadVersions();
+  }, []);
+
+  return versions;
+}