algolia docsearch

2025-08-30 23:30:04 +00:00 · 2024-09-13 13:58:48 +02:00
parent c83b32e6ae
commit 1d443f0626
7 changed files with 803 additions and 317 deletions
--- a/README.md
+++ b/README.md
@@ -72,6 +72,8 @@ This project has been made possible thanks to the following open source projects
  - [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
  - [brouter](https://github.com/abrensch/brouter) — routing engine
  - [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+- Search:
+  - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation

 ## License

--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -8,6 +8,7 @@
            "name": "website",
            "version": "0.0.1",
            "dependencies": {
+                "@docsearch/js": "^3.6.1",
                "@internationalized/date": "^3.5.4",
                "@mapbox/mapbox-gl-geocoder": "^5.0.2",
                "@mapbox/sphericalmercator": "^1.2.0",
@@ -92,6 +93,287 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/@algolia/autocomplete-core": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+            "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+            "dependencies": {
+                "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+                "@algolia/autocomplete-shared": "1.9.3"
+            }
+        },
+        "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+            "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+            "dependencies": {
+                "@algolia/autocomplete-shared": "1.9.3"
+            },
+            "peerDependencies": {
+                "search-insights": ">= 1 < 3"
+            }
+        },
+        "node_modules/@algolia/autocomplete-preset-algolia": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+            "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+            "dependencies": {
+                "@algolia/autocomplete-shared": "1.9.3"
+            },
+            "peerDependencies": {
+                "@algolia/client-search": ">= 4.9.1 < 6",
+                "algoliasearch": ">= 4.9.1 < 6"
+            }
+        },
+        "node_modules/@algolia/autocomplete-shared": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+            "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+            "peerDependencies": {
+                "@algolia/client-search": ">= 4.9.1 < 6",
+                "algoliasearch": ">= 4.9.1 < 6"
+            }
+        },
+        "node_modules/@algolia/cache-browser-local-storage": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz",
+            "integrity": "sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==",
+            "dependencies": {
+                "@algolia/cache-common": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/cache-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.24.0.tgz",
+            "integrity": "sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g=="
+        },
+        "node_modules/@algolia/cache-in-memory": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.24.0.tgz",
+            "integrity": "sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==",
+            "dependencies": {
+                "@algolia/cache-common": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-account": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.24.0.tgz",
+            "integrity": "sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/client-search": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-account/node_modules/@algolia/client-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+            "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-account/node_modules/@algolia/client-search": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+            "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-analytics": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.24.0.tgz",
+            "integrity": "sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/client-search": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-analytics/node_modules/@algolia/client-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+            "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-analytics/node_modules/@algolia/client-search": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+            "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-common": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.4.1.tgz",
+            "integrity": "sha512-IffPD+CETiR8YJMVC1lcjnhETLpJ2L0ORZCbbRvwo/S11D1j/keR7AqKVMn4TseRJCfjmBFOcFrC+m4sXjyQWA==",
+            "peer": true,
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-personalization": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.24.0.tgz",
+            "integrity": "sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-personalization/node_modules/@algolia/client-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+            "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/client-search": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.4.1.tgz",
+            "integrity": "sha512-nCgWY2p0tZgBqJKmA5E6B3VW+7uqxi1Orf88zNWOihJBRFeOV932pzG4vGrX9l0+p0o/vJabYxuomO35rEt5dw==",
+            "peer": true,
+            "dependencies": {
+                "@algolia/client-common": "5.4.1",
+                "@algolia/requester-browser-xhr": "5.4.1",
+                "@algolia/requester-fetch": "5.4.1",
+                "@algolia/requester-node-http": "5.4.1"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/logger-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.24.0.tgz",
+            "integrity": "sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA=="
+        },
+        "node_modules/@algolia/logger-console": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.24.0.tgz",
+            "integrity": "sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==",
+            "dependencies": {
+                "@algolia/logger-common": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/recommend": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.24.0.tgz",
+            "integrity": "sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==",
+            "dependencies": {
+                "@algolia/cache-browser-local-storage": "4.24.0",
+                "@algolia/cache-common": "4.24.0",
+                "@algolia/cache-in-memory": "4.24.0",
+                "@algolia/client-common": "4.24.0",
+                "@algolia/client-search": "4.24.0",
+                "@algolia/logger-common": "4.24.0",
+                "@algolia/logger-console": "4.24.0",
+                "@algolia/requester-browser-xhr": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/requester-node-http": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/recommend/node_modules/@algolia/client-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+            "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/recommend/node_modules/@algolia/client-search": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+            "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/recommend/node_modules/@algolia/requester-browser-xhr": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz",
+            "integrity": "sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/recommend/node_modules/@algolia/requester-node-http": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz",
+            "integrity": "sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0"
+            }
+        },
+        "node_modules/@algolia/requester-browser-xhr": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.4.1.tgz",
+            "integrity": "sha512-J6+YfU+maR0nIbsYRHoq0UpneilX97hrZzPuuvSoBojQmPo8PeCXKGeT/F0D8uFI6G4CMTKEPGmQYrC9IpCbcQ==",
+            "peer": true,
+            "dependencies": {
+                "@algolia/client-common": "5.4.1"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/requester-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.24.0.tgz",
+            "integrity": "sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA=="
+        },
+        "node_modules/@algolia/requester-fetch": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.4.1.tgz",
+            "integrity": "sha512-AO/C1pqqpIS8p2IsfM5x92S+UBKkcIen5dHfMEh1rnV0ArWDreeqrtxMD2A+6AjQVwYeZNy56w7o7PVIm6mc8g==",
+            "peer": true,
+            "dependencies": {
+                "@algolia/client-common": "5.4.1"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/requester-node-http": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.4.1.tgz",
+            "integrity": "sha512-2Y3vffc91egwFxz0SjXFEH4q8nvlNJHcz+0//NaWItRU68AvD+3aI/j66STPjkLQOC0Ku6ckA9ChhbOVfrv+Uw==",
+            "peer": true,
+            "dependencies": {
+                "@algolia/client-common": "5.4.1"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/transporter": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.24.0.tgz",
+            "integrity": "sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==",
+            "dependencies": {
+                "@algolia/cache-common": "4.24.0",
+                "@algolia/logger-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0"
+            }
+        },
        "node_modules/@alloc/quick-lru": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -224,6 +506,51 @@
                "node": ">=6.9.0"
            }
        },
+        "node_modules/@docsearch/css": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.1.tgz",
+            "integrity": "sha512-VtVb5DS+0hRIprU2CO6ZQjK2Zg4QU5HrDM1+ix6rT0umsYvFvatMAnf97NHZlVWDaaLlx7GRfR/7FikANiM2Fg=="
+        },
+        "node_modules/@docsearch/js": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.6.1.tgz",
+            "integrity": "sha512-erI3RRZurDr1xES5hvYJ3Imp7jtrXj6f1xYIzDzxiS7nNBufYWPbJwrmMqWC5g9y165PmxEmN9pklGCdLi0Iqg==",
+            "dependencies": {
+                "@docsearch/react": "3.6.1",
+                "preact": "^10.0.0"
+            }
+        },
+        "node_modules/@docsearch/react": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.1.tgz",
+            "integrity": "sha512-qXZkEPvybVhSXj0K7U3bXc233tk5e8PfhoZ6MhPOiik/qUQxYC+Dn9DnoS7CxHQQhHfCvTiN0eY9M12oRghEXw==",
+            "dependencies": {
+                "@algolia/autocomplete-core": "1.9.3",
+                "@algolia/autocomplete-preset-algolia": "1.9.3",
+                "@docsearch/css": "3.6.1",
+                "algoliasearch": "^4.19.1"
+            },
+            "peerDependencies": {
+                "@types/react": ">= 16.8.0 < 19.0.0",
+                "react": ">= 16.8.0 < 19.0.0",
+                "react-dom": ">= 16.8.0 < 19.0.0",
+                "search-insights": ">= 1 < 3"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                },
+                "search-insights": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@emnapi/runtime": {
            "version": "1.2.0",
            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
@@ -2353,6 +2680,63 @@
                "url": "https://github.com/sponsors/epoberezkin"
            }
        },
+        "node_modules/algoliasearch": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.24.0.tgz",
+            "integrity": "sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==",
+            "dependencies": {
+                "@algolia/cache-browser-local-storage": "4.24.0",
+                "@algolia/cache-common": "4.24.0",
+                "@algolia/cache-in-memory": "4.24.0",
+                "@algolia/client-account": "4.24.0",
+                "@algolia/client-analytics": "4.24.0",
+                "@algolia/client-common": "4.24.0",
+                "@algolia/client-personalization": "4.24.0",
+                "@algolia/client-search": "4.24.0",
+                "@algolia/logger-common": "4.24.0",
+                "@algolia/logger-console": "4.24.0",
+                "@algolia/recommend": "4.24.0",
+                "@algolia/requester-browser-xhr": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/requester-node-http": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/algoliasearch/node_modules/@algolia/client-common": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+            "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/algoliasearch/node_modules/@algolia/client-search": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+            "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+            "dependencies": {
+                "@algolia/client-common": "4.24.0",
+                "@algolia/requester-common": "4.24.0",
+                "@algolia/transporter": "4.24.0"
+            }
+        },
+        "node_modules/algoliasearch/node_modules/@algolia/requester-browser-xhr": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz",
+            "integrity": "sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0"
+            }
+        },
+        "node_modules/algoliasearch/node_modules/@algolia/requester-node-http": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz",
+            "integrity": "sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==",
+            "dependencies": {
+                "@algolia/requester-common": "4.24.0"
+            }
+        },
        "node_modules/ansi-regex": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -6306,6 +6690,15 @@
            "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
            "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
        },
+        "node_modules/preact": {
+            "version": "10.23.2",
+            "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
+            "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/preact"
+            }
+        },
        "node_modules/prelude-ls": {
            "version": "1.2.1",
            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6995,6 +7388,12 @@
                "postcss": "^8.3.11"
            }
        },
+        "node_modules/search-insights": {
+            "version": "2.17.2",
+            "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz",
+            "integrity": "sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==",
+            "peer": true
+        },
        "node_modules/semver": {
            "version": "7.6.2",
            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
--- a/website/package.json
+++ b/website/package.json
@@ -50,6 +50,7 @@
    },
    "type": "module",
    "dependencies": {
+        "@docsearch/js": "^3.6.1",
        "@internationalized/date": "^3.5.4",
        "@mapbox/mapbox-gl-geocoder": "^5.0.2",
        "@mapbox/sphericalmercator": "^1.2.0",
--- a/website/src/lib/components/AlgoliaDocSearch.svelte
+++ b/website/src/lib/components/AlgoliaDocSearch.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import docsearch from '@docsearch/js';
+	import '@docsearch/css';
+	import { onMount } from 'svelte';
+	import { _, locale } from 'svelte-i18n';
+
+	let mounted = false;
+
+	function initDocsearch() {
+		docsearch({
+			appId: '21XLD94PE3',
+			apiKey: 'd2c1ed6cb0ed12adb2bd84eb2a38494d',
+			indexName: 'gpx',
+			container: '#docsearch',
+			searchParameters: {
+				facetFilters: ['lang:' + ($locale ?? 'en')]
+			},
+			placeholder: $_('docs.search.search'),
+			translations: {
+				button: {
+					buttonText: $_('docs.search.search'),
+					buttonAriaLabel: $_('docs.search.search')
+				},
+				modal: {
+					searchBox: {
+						resetButtonTitle: $_('docs.search.clear'),
+						resetButtonAriaLabel: $_('docs.search.clear'),
+						cancelButtonText: $_('docs.search.cancel'),
+						cancelButtonAriaLabel: $_('docs.search.cancel'),
+						searchInputLabel: $_('docs.search.search')
+					},
+					startScreen: {
+						recentSearchesTitle: $_('docs.search.recent'),
+						noRecentSearchesText: $_('docs.search.no_recent'),
+						saveRecentSearchButtonTitle: $_('docs.search.save'),
+						removeRecentSearchButtonTitle: $_('docs.search.remove'),
+						favoriteSearchesTitle: $_('docs.search.favorites'),
+						removeFavoriteSearchButtonTitle: $_('docs.search.remove_favorite')
+					},
+					footer: {
+						selectText: $_('docs.search.to_select'),
+						navigateText: $_('docs.search.to_navigate'),
+						closeText: $_('docs.search.to_close')
+					},
+					noResultsScreen: {
+						noResultsText: $_('docs.search.no_results'),
+						suggestedQueryText: $_('docs.search.no_results_suggestion')
+					}
+				}
+			}
+		});
+	}
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	$: if (mounted && $locale) {
+		initDocsearch();
+	}
+</script>
+
+<svelte:head>
+	<link rel="preconnect" href="https://21XLD94PE3-dsn.algolia.net" crossorigin />
+</svelte:head>
+
+<div id="docsearch" {...$$restProps}></div>
--- a/website/src/lib/components/Nav.svelte
+++ b/website/src/lib/components/Nav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Logo from '$lib/components/Logo.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
 	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
 	import { BookOpenText, Home, Map } from 'lucide-svelte';
 	import { _, locale } from 'svelte-i18n';
@@ -25,6 +26,7 @@
 			<BookOpenText size="18" class="mr-1.5" />
 			{$_('menu.help')}
 		</Button>
-		<ModeSwitch class="ml-auto" />
+		<AlgoliaDocSearch class="ml-auto" />
+		<ModeSwitch class="hidden xs:block" />
 	</div>
 </nav>
--- a/website/src/lib/components/embedding/EmbeddingPlayground.svelte
+++ b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
@@ -1,334 +1,327 @@
 <script lang="ts">
-    import * as Card from '$lib/components/ui/card';
-    import { Label } from '$lib/components/ui/label';
-    import { Input } from '$lib/components/ui/input';
-    import * as Select from '$lib/components/ui/select';
-    import { Checkbox } from '$lib/components/ui/checkbox';
-    import * as RadioGroup from '$lib/components/ui/radio-group';
-    import {
-        Zap,
-        HeartPulse,
-        Orbit,
-        Thermometer,
-        SquareActivity,
-        Coins,
-        Milestone,
-        Video
-    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
-    import {
-        allowedEmbeddingBasemaps,
-        getCleanedEmbeddingOptions,
-        getDefaultEmbeddingOptions,
-        getURLForGoogleDriveFile
-    } from './Embedding';
-    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-    import Embedding from './Embedding.svelte';
-    import { map } from '$lib/stores';
-    import { tick } from 'svelte';
-    import { base } from '$app/paths';
+	import * as Card from '$lib/components/ui/card';
+	import { Label } from '$lib/components/ui/label';
+	import { Input } from '$lib/components/ui/input';
+	import * as Select from '$lib/components/ui/select';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import {
+		Zap,
+		HeartPulse,
+		Orbit,
+		Thermometer,
+		SquareActivity,
+		Coins,
+		Milestone,
+		Video
+	} from 'lucide-svelte';
+	import { _ } from 'svelte-i18n';
+	import {
+		allowedEmbeddingBasemaps,
+		getCleanedEmbeddingOptions,
+		getDefaultEmbeddingOptions
+	} from './Embedding';
+	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+	import Embedding from './Embedding.svelte';
+	import { map } from '$lib/stores';
+	import { tick } from 'svelte';
+	import { base } from '$app/paths';

-    let options = getDefaultEmbeddingOptions();
-    options.token = 'YOUR_MAPBOX_TOKEN';
-    options.files = [
-        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
-    ];
+	let options = getDefaultEmbeddingOptions();
+	options.token = 'YOUR_MAPBOX_TOKEN';
+	options.files = [
+		'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+	];

-    let files = options.files[0];
-    $: {
-        let urls = files.split(',');
-        urls = urls.filter((url) => url.length > 0);
-        if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
-            options.files = urls;
-        }
-    }
-    let driveIds = '';
-    $: {
-        let ids = driveIds.split(',');
-        ids = ids.filter((id) => id.length > 0);
-        if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
-            options.ids = ids;
-        }
-    }
+	let files = options.files[0];
+	$: {
+		let urls = files.split(',');
+		urls = urls.filter((url) => url.length > 0);
+		if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
+			options.files = urls;
+		}
+	}
+	let driveIds = '';
+	$: {
+		let ids = driveIds.split(',');
+		ids = ids.filter((id) => id.length > 0);
+		if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
+			options.ids = ids;
+		}
+	}

-    let manualCamera = false;
+	let manualCamera = false;

-    let zoom = '0';
-    let lat = '0';
-    let lon = '0';
-    let bearing = '0';
-    let pitch = '0';
+	let zoom = '0';
+	let lat = '0';
+	let lon = '0';
+	let bearing = '0';
+	let pitch = '0';

-    $: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
+	$: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';

-    $: iframeOptions =
-        options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
-            ? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
-            : options;
+	$: iframeOptions =
+		options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+			? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
+			: options;

-    async function resizeMap() {
-        if ($map) {
-            await tick();
-            $map.resize();
-        }
-    }
+	async function resizeMap() {
+		if ($map) {
+			await tick();
+			$map.resize();
+		}
+	}

-    $: if (options.elevation.height || options.elevation.show) {
-        resizeMap();
-    }
+	$: if (options.elevation.height || options.elevation.show) {
+		resizeMap();
+	}

-    function updateCamera() {
-        if ($map) {
-            let center = $map.getCenter();
-            lat = center.lat.toFixed(4);
-            lon = center.lng.toFixed(4);
-            zoom = $map.getZoom().toFixed(2);
-            bearing = $map.getBearing().toFixed(1);
-            pitch = $map.getPitch().toFixed(0);
-        }
-    }
+	function updateCamera() {
+		if ($map) {
+			let center = $map.getCenter();
+			lat = center.lat.toFixed(4);
+			lon = center.lng.toFixed(4);
+			zoom = $map.getZoom().toFixed(2);
+			bearing = $map.getBearing().toFixed(1);
+			pitch = $map.getPitch().toFixed(0);
+		}
+	}

-    $: if ($map) {
-        $map.on('moveend', updateCamera);
-    }
+	$: if ($map) {
+		$map.on('moveend', updateCamera);
+	}
 </script>

-<Card.Root>
-    <Card.Header>
-        <Card.Title>{$_('embedding.title')}</Card.Title>
-    </Card.Header>
-    <Card.Content>
-        <fieldset class="flex flex-col gap-3">
-            <Label for="token">{$_('embedding.mapbox_token')}</Label>
-            <Input id="token" type="text" class="h-8" bind:value={options.token} />
-            <Label for="file_urls">{$_('embedding.file_urls')}</Label>
-            <Input id="file_urls" type="text" class="h-8" bind:value={files} />
-            <Label for="drive_ids">{$_('embedding.drive_ids')}</Label>
-            <Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
-            <Label for="basemap">{$_('embedding.basemap')}</Label>
-            <Select.Root
-                selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
-                onSelectedChange={(selected) => {
-                    if (selected?.value) {
-                        options.basemap = selected?.value;
-                    }
-                }}
-            >
-                <Select.Trigger id="basemap" class="w-full h-8">
-                    <Select.Value />
-                </Select.Trigger>
-                <Select.Content class="max-h-60 overflow-y-scroll">
-                    {#each allowedEmbeddingBasemaps as basemap}
-                        <Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-            <div class="flex flex-row items-center gap-2">
-                <Label for="profile">{$_('menu.elevation_profile')}</Label>
-                <Checkbox id="profile" bind:checked={options.elevation.show} />
-            </div>
-            {#if options.elevation.show}
-                <div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
-                    <Label class="flex flex-row items-center gap-2">
-                        {$_('embedding.height')}
-                        <Input
-                            type="number"
-                            bind:value={options.elevation.height}
-                            class="h-8 w-20"
-                        />
-                    </Label>
-                    <div class="flex flex-row items-center gap-2">
-                        <span class="shrink-0">
-                            {$_('embedding.fill_by')}
-                        </span>
-                        <Select.Root
-                            selected={{ value: 'none', label: $_('embedding.none') }}
-                            onSelectedChange={(selected) => {
-                                let value = selected?.value;
-                                if (value === 'none') {
-                                    options.elevation.fill = undefined;
-                                } else if (value === 'slope' || value === 'surface') {
-                                    options.elevation.fill = value;
-                                }
-                            }}
-                        >
-                            <Select.Trigger class="grow h-8">
-                                <Select.Value />
-                            </Select.Trigger>
-                            <Select.Content>
-                                <Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
-                                <Select.Item value="surface">{$_('quantities.surface')}</Select.Item
-                                >
-                                <Select.Item value="none">{$_('embedding.none')}</Select.Item>
-                            </Select.Content>
-                        </Select.Root>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="controls" bind:checked={options.elevation.controls} />
-                        <Label for="controls">{$_('embedding.show_controls')}</Label>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="show-speed" bind:checked={options.elevation.speed} />
-                        <Label for="show-speed" class="flex flex-row items-center gap-1">
-                            <Zap size="16" />
-                            {$_('chart.show_speed')}
-                        </Label>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="show-hr" bind:checked={options.elevation.hr} />
-                        <Label for="show-hr" class="flex flex-row items-center gap-1">
-                            <HeartPulse size="16" />
-                            {$_('chart.show_heartrate')}
-                        </Label>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="show-cad" bind:checked={options.elevation.cad} />
-                        <Label for="show-cad" class="flex flex-row items-center gap-1">
-                            <Orbit size="16" />
-                            {$_('chart.show_cadence')}
-                        </Label>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="show-temp" bind:checked={options.elevation.temp} />
-                        <Label for="show-temp" class="flex flex-row items-center gap-1">
-                            <Thermometer size="16" />
-                            {$_('chart.show_temperature')}
-                        </Label>
-                    </div>
-                    <div class="flex flex-row items-center gap-2">
-                        <Checkbox id="show-power" bind:checked={options.elevation.power} />
-                        <Label for="show-power" class="flex flex-row items-center gap-1">
-                            <SquareActivity size="16" />
-                            {$_('chart.show_power')}
-                        </Label>
-                    </div>
-                </div>
-            {/if}
-            <div class="flex flex-row items-center gap-2">
-                <Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
-                <Label for="distance-markers" class="flex flex-row items-center gap-1">
-                    <Coins size="16" />
-                    {$_('menu.distance_markers')}
-                </Label>
-            </div>
-            <div class="flex flex-row items-center gap-2">
-                <Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
-                <Label for="direction-markers" class="flex flex-row items-center gap-1">
-                    <Milestone size="16" />
-                    {$_('menu.direction_markers')}
-                </Label>
-            </div>
-            <div class="flex flex-row flex-wrap justify-between gap-3">
-                <Label class="flex flex-col items-start gap-2">
-                    {$_('menu.distance_units')}
-                    <RadioGroup.Root bind:value={options.distanceUnits}>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="metric" id="metric" />
-                            <Label for="metric">{$_('menu.metric')}</Label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="imperial" id="imperial" />
-                            <Label for="imperial">{$_('menu.imperial')}</Label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="nautical" id="nautical" />
-                            <Label for="nautical">{$_('menu.nautical')}</Label>
-                        </div>
-                    </RadioGroup.Root>
-                </Label>
-                <Label class="flex flex-col items-start gap-2">
-                    {$_('menu.velocity_units')}
-                    <RadioGroup.Root bind:value={options.velocityUnits}>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="speed" id="speed" />
-                            <Label for="speed">{$_('quantities.speed')}</Label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="pace" id="pace" />
-                            <Label for="pace">{$_('quantities.pace')}</Label>
-                        </div>
-                    </RadioGroup.Root>
-                </Label>
-                <Label class="flex flex-col items-start gap-2">
-                    {$_('menu.temperature_units')}
-                    <RadioGroup.Root bind:value={options.temperatureUnits}>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="celsius" id="celsius" />
-                            <Label for="celsius">{$_('menu.celsius')}</Label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroup.Item value="fahrenheit" id="fahrenheit" />
-                            <Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
-                        </div>
-                    </RadioGroup.Root>
-                </Label>
-            </div>
-            <Label class="flex flex-col items-start gap-2">
-                {$_('menu.mode')}
-                <RadioGroup.Root bind:value={options.theme} class="flex flex-row">
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="system" id="system" />
-                        <Label for="system">{$_('menu.system')}</Label>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="light" id="light" />
-                        <Label for="light">{$_('menu.light')}</Label>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="dark" id="dark" />
-                        <Label for="dark">{$_('menu.dark')}</Label>
-                    </div>
-                </RadioGroup.Root>
-            </Label>
-            <div class="flex flex-col gap-3 p-3 border rounded-md">
-                <div class="flex flex-row items-center gap-2">
-                    <Checkbox id="manual-camera" bind:checked={manualCamera} />
-                    <Label for="manual-camera" class="flex flex-row items-center gap-1">
-                        <Video size="16" />
-                        {$_('embedding.manual_camera')}
-                    </Label>
-                </div>
-                <p class="text-sm text-muted-foreground">
-                    {$_('embedding.manual_camera_description')}
-                </p>
-                <div class="flex flex-row flex-wrap items-center gap-6">
-                    <Label class="flex flex-col gap-1">
-                        <span>{$_('embedding.latitude')}</span>
-                        <span>{lat}</span>
-                    </Label>
-                    <Label class="flex flex-col gap-1">
-                        <span>{$_('embedding.longitude')}</span>
-                        <span>{lon}</span>
-                    </Label>
-                    <Label class="flex flex-col gap-1">
-                        <span>{$_('embedding.zoom')}</span>
-                        <span>{zoom}</span>
-                    </Label>
-                    <Label class="flex flex-col gap-1">
-                        <span>{$_('embedding.bearing')}</span>
-                        <span>{bearing}</span>
-                    </Label>
-                    <Label class="flex flex-col gap-1">
-                        <span>{$_('embedding.pitch')}</span>
-                        <span>{pitch}</span>
-                    </Label>
-                </div>
-            </div>
-            <Label>
-                {$_('embedding.preview')}
-            </Label>
-            <div class="relative h-[600px]">
-                <Embedding bind:options={iframeOptions} bind:hash useHash={false} />
-            </div>
-            <Label>
-                {$_('embedding.code')}
-            </Label>
-            <pre
-                class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
+<Card.Root id="embedding-playground">
+	<Card.Header>
+		<Card.Title>{$_('embedding.title')}</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<fieldset class="flex flex-col gap-3">
+			<Label for="token">{$_('embedding.mapbox_token')}</Label>
+			<Input id="token" type="text" class="h-8" bind:value={options.token} />
+			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
+			<Input id="file_urls" type="text" class="h-8" bind:value={files} />
+			<Label for="drive_ids">{$_('embedding.drive_ids')}</Label>
+			<Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
+			<Label for="basemap">{$_('embedding.basemap')}</Label>
+			<Select.Root
+				selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
+				onSelectedChange={(selected) => {
+					if (selected?.value) {
+						options.basemap = selected?.value;
+					}
+				}}
+			>
+				<Select.Trigger id="basemap" class="w-full h-8">
+					<Select.Value />
+				</Select.Trigger>
+				<Select.Content class="max-h-60 overflow-y-scroll">
+					{#each allowedEmbeddingBasemaps as basemap}
+						<Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<div class="flex flex-row items-center gap-2">
+				<Label for="profile">{$_('menu.elevation_profile')}</Label>
+				<Checkbox id="profile" bind:checked={options.elevation.show} />
+			</div>
+			{#if options.elevation.show}
+				<div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
+					<Label class="flex flex-row items-center gap-2">
+						{$_('embedding.height')}
+						<Input type="number" bind:value={options.elevation.height} class="h-8 w-20" />
+					</Label>
+					<div class="flex flex-row items-center gap-2">
+						<span class="shrink-0">
+							{$_('embedding.fill_by')}
+						</span>
+						<Select.Root
+							selected={{ value: 'none', label: $_('embedding.none') }}
+							onSelectedChange={(selected) => {
+								let value = selected?.value;
+								if (value === 'none') {
+									options.elevation.fill = undefined;
+								} else if (value === 'slope' || value === 'surface') {
+									options.elevation.fill = value;
+								}
+							}}
+						>
+							<Select.Trigger class="grow h-8">
+								<Select.Value />
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
+								<Select.Item value="surface">{$_('quantities.surface')}</Select.Item>
+								<Select.Item value="none">{$_('embedding.none')}</Select.Item>
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="controls" bind:checked={options.elevation.controls} />
+						<Label for="controls">{$_('embedding.show_controls')}</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-speed" bind:checked={options.elevation.speed} />
+						<Label for="show-speed" class="flex flex-row items-center gap-1">
+							<Zap size="16" />
+							{$_('chart.show_speed')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-hr" bind:checked={options.elevation.hr} />
+						<Label for="show-hr" class="flex flex-row items-center gap-1">
+							<HeartPulse size="16" />
+							{$_('chart.show_heartrate')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-cad" bind:checked={options.elevation.cad} />
+						<Label for="show-cad" class="flex flex-row items-center gap-1">
+							<Orbit size="16" />
+							{$_('chart.show_cadence')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-temp" bind:checked={options.elevation.temp} />
+						<Label for="show-temp" class="flex flex-row items-center gap-1">
+							<Thermometer size="16" />
+							{$_('chart.show_temperature')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-power" bind:checked={options.elevation.power} />
+						<Label for="show-power" class="flex flex-row items-center gap-1">
+							<SquareActivity size="16" />
+							{$_('chart.show_power')}
+						</Label>
+					</div>
+				</div>
+			{/if}
+			<div class="flex flex-row items-center gap-2">
+				<Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
+				<Label for="distance-markers" class="flex flex-row items-center gap-1">
+					<Coins size="16" />
+					{$_('menu.distance_markers')}
+				</Label>
+			</div>
+			<div class="flex flex-row items-center gap-2">
+				<Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
+				<Label for="direction-markers" class="flex flex-row items-center gap-1">
+					<Milestone size="16" />
+					{$_('menu.direction_markers')}
+				</Label>
+			</div>
+			<div class="flex flex-row flex-wrap justify-between gap-3">
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.distance_units')}
+					<RadioGroup.Root bind:value={options.distanceUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="metric" id="metric" />
+							<Label for="metric">{$_('menu.metric')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="imperial" id="imperial" />
+							<Label for="imperial">{$_('menu.imperial')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="nautical" id="nautical" />
+							<Label for="nautical">{$_('menu.nautical')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.velocity_units')}
+					<RadioGroup.Root bind:value={options.velocityUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="speed" id="speed" />
+							<Label for="speed">{$_('quantities.speed')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="pace" id="pace" />
+							<Label for="pace">{$_('quantities.pace')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.temperature_units')}
+					<RadioGroup.Root bind:value={options.temperatureUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="celsius" id="celsius" />
+							<Label for="celsius">{$_('menu.celsius')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="fahrenheit" id="fahrenheit" />
+							<Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+			</div>
+			<Label class="flex flex-col items-start gap-2">
+				{$_('menu.mode')}
+				<RadioGroup.Root bind:value={options.theme} class="flex flex-row">
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="system" id="system" />
+						<Label for="system">{$_('menu.system')}</Label>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="light" id="light" />
+						<Label for="light">{$_('menu.light')}</Label>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="dark" id="dark" />
+						<Label for="dark">{$_('menu.dark')}</Label>
+					</div>
+				</RadioGroup.Root>
+			</Label>
+			<div class="flex flex-col gap-3 p-3 border rounded-md">
+				<div class="flex flex-row items-center gap-2">
+					<Checkbox id="manual-camera" bind:checked={manualCamera} />
+					<Label for="manual-camera" class="flex flex-row items-center gap-1">
+						<Video size="16" />
+						{$_('embedding.manual_camera')}
+					</Label>
+				</div>
+				<p class="text-sm text-muted-foreground">
+					{$_('embedding.manual_camera_description')}
+				</p>
+				<div class="flex flex-row flex-wrap items-center gap-6">
+					<Label class="flex flex-col gap-1">
+						<span>{$_('embedding.latitude')}</span>
+						<span>{lat}</span>
+					</Label>
+					<Label class="flex flex-col gap-1">
+						<span>{$_('embedding.longitude')}</span>
+						<span>{lon}</span>
+					</Label>
+					<Label class="flex flex-col gap-1">
+						<span>{$_('embedding.zoom')}</span>
+						<span>{zoom}</span>
+					</Label>
+					<Label class="flex flex-col gap-1">
+						<span>{$_('embedding.bearing')}</span>
+						<span>{bearing}</span>
+					</Label>
+					<Label class="flex flex-col gap-1">
+						<span>{$_('embedding.pitch')}</span>
+						<span>{pitch}</span>
+					</Label>
+				</div>
+			</div>
+			<Label>
+				{$_('embedding.preview')}
+			</Label>
+			<div class="relative h-[600px]">
+				<Embedding bind:options={iframeOptions} bind:hash useHash={false} />
+			</div>
+			<Label>
+				{$_('embedding.code')}
+			</Label>
+			<pre class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
                <code class="language-html">
                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(options)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                </code>
            </pre>
-        </fieldset>
-    </Card.Content>
+		</fieldset>
+	</Card.Content>
 </Card.Root>
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -463,6 +463,28 @@
        "identity": "Free, ad-free and open source",
        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
    },
+    "docs": {
+        "edit": "Edit this page on GitHub",
+        "translate": "Improve this translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
    "embedding": {
        "title": "Create your own map",
        "mapbox_token": "Mapbox access token",