From c357d8edea10e0e8e0ca49bac0d3b8b0a7b3bd7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= Date: Mon, 26 Oct 2026 07:37:46 +0100 Subject: [PATCH 1/3] Redesign the homepage with a click-to-run live map hero Hero now explains what the library is, lists platforms, links to install and examples, and shows the web build of the example app inside a phone frame. The live map only loads on click; a static WebP poster is shown until tiles actually load, and stays if they fail (e.g. the URL-restricted token rejecting a non-production origin). Also replaces the 1.7 MB hero PNG with WebP assets, drops the unused Docusaurus template feature component, fixes the mobile horizontal overflow, and nudges one Prism token color and the homepage primary buttons to pass WCAG AA contrast. --- src/components/HomepageFeatures/index.js | 65 ------ .../HomepageFeatures/styles.module.css | 11 -- src/components/LiveMapDemo/index.js | 99 ++++++++++ src/components/LiveMapDemo/styles.module.css | 119 +++++++++++ src/core/PrismTheme.js | 6 +- src/pages/index.js | 186 ++++++++++++++++-- src/pages/index.module.css | 166 ++++++++++++++-- static/img/home/intro-examples.webp | Bin 0 -> 86346 bytes static/img/home/live-demo-globe.webp | Bin 0 -> 67966 bytes 9 files changed, 539 insertions(+), 113 deletions(-) delete mode 100644 src/components/HomepageFeatures/index.js delete mode 100644 src/components/HomepageFeatures/styles.module.css create mode 100644 src/components/LiveMapDemo/index.js create mode 100644 src/components/LiveMapDemo/styles.module.css create mode 100644 static/img/home/intro-examples.webp create mode 100644 static/img/home/live-demo-globe.webp diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js deleted file mode 100644 index f202ffee..00000000 --- a/src/components/HomepageFeatures/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; - -const FeatureList = [ - { - title: 'iOS install guide', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({Svg, title, description}) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures() { - return (<>) - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/src/components/LiveMapDemo/index.js b/src/components/LiveMapDemo/index.js new file mode 100644 index 00000000..9ea9ebe3 --- /dev/null +++ b/src/components/LiveMapDemo/index.js @@ -0,0 +1,99 @@ +import React, {useEffect, useRef, useState} from 'react'; +import clsx from 'clsx'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './styles.module.css'; + +const DEMO_ROUTE = '/example-app/V10/GlobeProjection'; +const TILE_REQUEST = /api\.mapbox\.com\/(v4|tiles)\//; +const REVEAL_TIMEOUT_MS = 8000; + +// The example app's token is URL-restricted, so tiles can fail (e.g. on localhost or previews). +// Tile response codes are only exposed via Resource Timing in Chromium; elsewhere we reveal after a timeout. +function tileStatus(frame) { + let entries; + try { + entries = frame.contentWindow.performance.getEntriesByType('resource'); + } catch { + return undefined; + } + const tile = entries.find((e) => TILE_REQUEST.test(e.name) && e.responseStatus); + return tile?.responseStatus; +} + +// The demo is the example app's web export (a ~5 MB bundle), so it only loads after an explicit click. +export default function LiveMapDemo() { + const [state, setState] = useState('poster'); + const frameRef = useRef(null); + const demoUrl = useBaseUrl(DEMO_ROUTE); + const posterUrl = useBaseUrl('/img/home/live-demo-globe.webp'); + + useEffect(() => { + if (state !== 'loading') { + return undefined; + } + const started = Date.now(); + const timer = setInterval(() => { + const status = tileStatus(frameRef.current); + if (status >= 200 && status < 300) { + setState('live'); + } else if (status >= 400) { + setState('failed'); + } else if (Date.now() - started > REVEAL_TIMEOUT_MS) { + setState('live'); + } + }, 250); + return () => clearInterval(timer); + }, [state]); + + const showFrame = state === 'loading' || state === 'live'; + + return ( +
+
+
+ {showFrame && ( +