[DOCS] Homepage redesign (#2296)

* Started working oon a new homepage

* Finished page

* Fixed typed animation, adjusted tabs jumping

* Hid the reviews

* Changed industries logos, reduced header size

* Changed code in code tabs sections, removed typed cursor

* Upadted CTA heading

* Updated links in footer

* Fixed typed animation jumbping

* Run precommit

* added gulpfile and missing files

* Updated gitignore

* Removed .min files from repo

* Updated code tabs to prevent escaped html console errors

* Removed .min.map from the repo

* Removed windows .idenfier files

* Renamed Images

* Updated gulpfile and extra rousrces files

* Added delay between typying animation

* Removed .main.min.js and converted mountains images to SVGs

* Fix pre-commit

* Removed extra files

* Remorked template without overwriting base.html

* Fetching vendors from node_modules

* Add gulp to CI

* Fixed header & footer, js subscribe fix

* Added partials

* Added missing svg images

---------

Co-authored-by: Jia Yu <[email protected]>

Author: andrii-marushchak

.github/workflows/docs.yml

@@ -49,6 +49,20 @@ jobs:
         run: mvn -q clean install -DskipTests && mkdir -p docs/api/javadoc/spark && cp -r spark/common/target/apidocs/* docs/api/javadoc/spark/
       - name: Compile ScalaDoc
         run: mvn generate-sources scala:doc -pl !common,!snowflake,!flink && mkdir -p docs/api/scaladoc/spark && cp -r spark/common/target/site/scaladocs/* docs/api/scaladoc/spark
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: 'docs-overrides/package-lock.json'
+      - name: Install docs-overrides dependencies
+        run: |
+          cd docs-overrides
+          npm ci
+      - name: Build docs-overrides assets
+        run: |
+          cd docs-overrides
+          npx gulp build
       - uses: actions/setup-python@v5
         with:
           python-version: '3.11'
@@ -121,3 +135,10 @@ jobs:
           path: ~/.m2
           key: ${{ runner.os }}-m2-${{ hashFiles('**/pom.xml') }}
           restore-keys: ${{ runner.os }}-m2
+      - name: Cache Node modules
+        uses: actions/cache@v4
+        with:
+          path: docs-overrides/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('docs-overrides/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-

.gitignore

@@ -37,3 +37,14 @@
 __pycache__
 dependency-reduced-pom.xml
 target
+
+# Windows WSL Images copy
+.Identifier
+*:Zone.Identifier
+*.Identifier
+
+# Ignore minified files and source maps
+*.min.css
+*.min.css.map
+*.min.js
+*.min.js.map

.pre-commit-config.yaml

@@ -217,7 +217,7 @@ repos:
         name: run codespell
         description: check spelling with codespell
         args: [--ignore-words=.github/linters/codespell.txt]
-        exclude: ^docs/image|^spark/common/src/test/resources|^docs/usecases|^tools/maven/scalafmt|osmpbf/build|^docker/zeppelin
+        exclude: ^docs/image|^spark/common/src/test/resources|^docs/usecases|^tools/maven/scalafmt|osmpbf/build|^docker/zeppelin|^docs-overrides
   - repo: https://github.com/gitleaks/gitleaks
     rev: v8.27.2
     hooks:

docs-overrides/assets/javascripts/components/code-tabs.js

@@ -0,0 +1,99 @@
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import python from 'highlight.js/lib/languages/python';
+import java from 'highlight.js/lib/languages/java';
+import powershell from 'highlight.js/lib/languages/powershell';
+import sql from 'highlight.js/lib/languages/sql';
+
+// Register the languages
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('powershell', powershell);
+hljs.registerLanguage('sql', sql);
+
+hljs.configure({
+  ignoreUnescapedHTML: true,
+});
+
+export const codeTabs = () => {
+  const initHljsSnippet = (root) => {
+    const tabs = root.querySelectorAll('.hljs-snippet__tab');
+    const panels = root.querySelectorAll('.hljs-snippet__panel');
+    const copyBtn = root.querySelector('.hljs-snippet__copy');
+
+    // Helper to highlight code safely
+    const highlight = (codeEl) => {
+      codeEl.removeAttribute('data-highlighted'); // remove previous flag
+      hljs.highlightElement(codeEl);
+    };
+
+    // Highlight all panels on load
+    panels.forEach((p) => highlight(p.querySelector('code')));
+
+    // Activate a specific language
+    const activate = (lang) => {
+      tabs.forEach((btn) => {
+        const active = btn.dataset.lang === lang;
+        btn.classList.toggle('is-active', active);
+        btn.setAttribute('aria-selected', String(active));
+      });
+
+      panels.forEach((panel) => {
+        const show = panel.dataset.lang === lang;
+        panel.hidden = !show;
+        if (show) highlight(panel.querySelector('code')); // safe re-highlight
+      });
+    };
+
+    // Initial tab
+    const initial = root.dataset.initial || tabs[0]?.dataset.lang;
+    if (initial) activate(initial);
+
+    // Tab click handling
+    tabs.forEach((btn) => {
+      btn.addEventListener('click', () => activate(btn.dataset.lang));
+    });
+
+    // Copy to clipboard
+    const copyCurrent = async () => {
+      const current = [...panels].find((p) => !p.hidden);
+      if (!current) return;
+
+      const code = current.querySelector('code').textContent;
+
+      const showCopied = () => {
+        copyBtn.classList.add('copied');
+        setTimeout(() => copyBtn.classList.remove('copied'), 1200);
+      };
+
+      try {
+        await navigator.clipboard.writeText(code);
+        showCopied();
+      } catch {
+        const area = document.createElement('textarea');
+        area.value = code;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try {
+          document.execCommand('copy');
+        } catch {}
+        document.body.removeChild(area);
+        showCopied();
+      }
+    };
+
+    if (copyBtn) {
+      copyBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        copyCurrent();
+      });
+    }
+  };
+
+  // Initialize all snippet instances
+  document.querySelectorAll('.hljs-snippet').forEach(initHljsSnippet);
+};

docs-overrides/assets/javascripts/components/industries-tabs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+export const industriesTabs = () => {
+  // Loop through all tab components on the page
+  document.querySelectorAll('.industries-tabs').forEach((tabs) => {
+    const tabHeads = tabs.querySelectorAll('.industries-tabs__head-item');
+    const tabBodies = tabs.querySelectorAll('.industries-tabs__body-item');
+
+    tabHeads.forEach((head, index) => {
+      head.addEventListener('click', () => {
+        // Remove active class from all
+        tabHeads.forEach((h) => h.classList.remove('active'));
+        tabBodies.forEach((b) => b.classList.remove('active'));
+
+        // Add active class to clicked head & corresponding body
+        head.classList.add('active');
+        tabBodies[index].classList.add('active');
+      });
+    });
+  });
+};

docs-overrides/assets/javascripts/components/typed-animation.js

@@ -0,0 +1,27 @@
+import Typewriter from 'typewriter-effect/dist/core';
+
+export const typedAnimation = () => {
+  const container = document.querySelector('.typed');
+  const stringsContainer = document.querySelectorAll('.typed-strings p');
+
+  if (container && stringsContainer.length) {
+    const stringsArray = Array.from(stringsContainer).map((el) =>
+      el.textContent.trim(),
+    );
+
+    const typewriter = new Typewriter(container, {
+      loop: true,
+      delay: 95, // typing speed
+      deleteSpeed: 65, // deleting speed
+    });
+
+    stringsArray.forEach((text) => {
+      typewriter
+        .typeString(text)
+        .pauseFor(500) // no pause after typing
+        .deleteAll();
+    });
+
+    typewriter.start();
+  }
+};

docs-overrides/assets/javascripts/main.js

@@ -0,0 +1,15 @@
+import {industriesTabs} from './components/industries-tabs';
+import {codeTabs} from './components/code-tabs';
+import {typedAnimation} from './components/typed-animation';
+
+document.addEventListener('DOMContentLoaded', () => {
+  industriesTabs();
+  codeTabs();
+  typedAnimation();
+});
+
+document$.subscribe(function () {
+  industriesTabs();
+  codeTabs();
+  typedAnimation();
+});

docs-overrides/assets/stylesheets/_vars.scss

@@ -0,0 +1,10 @@
+:root {
+  --color-red: #CA463A;
+  --color-red-hover: #EA5547;
+  --color-white: #fff;
+  --color-dark: #1C1C1C;
+  --color-light-blue: #E2ECF3;
+  --color-violet: #7142FF;
+
+  --font-inter: 'Inter', sans-serif;
+}

docs-overrides/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,125 @@
+.btn {
+  font-family: var(--font-inter);
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  padding-left: 24px;
+  padding-right: 24px;
+  height: 44px;
+  min-width: 130px;
+  border-radius: 12px;
+  transition: 0.3s all ease;
+  gap: 4px;
+
+  .icon {
+    transition: 0.3s all ease;
+    color: var(--color-red);
+    --size: 19px;
+    width: var(--size);
+    min-width: var(--size);
+    height: var(--size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg,img {
+      width: 100%;
+      height: 100%;
+      max-height: 11.5px;
+      display: block;
+      object-fit: contain;
+      path {
+        transition: 0.3s all ease;
+        stroke: currentColor;
+      }
+    }
+
+    &.icon-lg{
+      svg,img{
+        max-height: 20px;
+      }
+    }
+  }
+}
+
+.btn-black {
+  color: #FFFFFF;
+  background-color: #000000;
+
+  &:hover {
+    background-color: var(--color-red);
+  }
+}
+
+.btn-rd, .btn-red {
+  color: #FFFFFF;
+  background-color: var(--color-red);
+
+  &:hover {
+    background-color: var(--color-red-hover);
+  }
+}
+
+.btn-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  min-height: 35px;
+
+  .caption {
+    font-family: var(--font-inter);
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--color-red);
+    transition: 0.3s all ease;
+  }
+
+  .icon {
+    transition: 0.3s all ease;
+    color: var(--color-red);
+    --size: 19px;
+    width: var(--size);
+    min-width: var(--size);
+    height: var(--size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: contain;
+
+      path {
+        transition: 0.3s all ease;
+        stroke: currentColor;
+      }
+    }
+  }
+
+  &:hover {
+    .caption {
+      color: var(--color-red-hover);
+    }
+
+    .icon {
+      color: var(--color-red-hover);
+      transform: translateX(5px);
+    }
+  }
+}
+
+.btn-light-red {
+  background: rgba(202, 70, 58, 0.1);
+  border: 1px solid rgba(202, 70, 58, 0.32);
+  color: var(--color-red);
+
+  &:hover {
+    background: rgba(202, 70, 58, 0.15);
+  }
+}