From 6363167b68bc5e9abdea67c61fa59c7c8949442d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Mon, 27 Jan 2025 12:34:06 +0000 Subject: [PATCH] docs: new theme header (#9151) https://linear.app/unleash/issue/2-3175/header New docs theme header. Kept [swizzling](https://docusaurus.io/docs/swizzling) to a minimum and instead tried to keep most things in CSS to avoid adding more complexity. Remember to test responsiveness by resizing your window, as well as dark mode. [Preview link](https://unleash-docs-git-docs-new-theme-header-unleash-team.vercel.app/) ### Before ![image](https://github.com/user-attachments/assets/738ba645-57d0-4271-81b3-cbb5049d5ef2) ### After ![image](https://github.com/user-attachments/assets/bae7650d-ba1e-4bff-be74-b3e73eb2b512) --------- Co-authored-by: Melinda Fekete --- website/docusaurus.config.ts | 1713 ++++++++--------- website/src/css/custom.css | 156 +- .../DocSidebar/Desktop/Content/index.tsx | 21 + website/src/theme/Navbar/Content/index.tsx | 93 + .../theme/Navbar/Content/styles.module.css | 8 + 5 files changed, 1111 insertions(+), 880 deletions(-) create mode 100644 website/src/theme/DocSidebar/Desktop/Content/index.tsx create mode 100644 website/src/theme/Navbar/Content/index.tsx create mode 100644 website/src/theme/Navbar/Content/styles.module.css diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 1683e9b679..bd6ca06c11 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -42,900 +42,891 @@ const addDocsRoutePrefix = ({ from, ...rest }) => { }; }; -const config: Config = { - title: 'Unleash Documentation', - tagline: 'The enterprise ready feature flag service', - url: 'https://docs.getunleash.io', - baseUrl: '/', - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'throw', - favicon: 'img/favicon.ico', - organizationName: 'Unleash', // Usually your GitHub org/user name. - projectName: 'unleash.github.io', // Usually your repo name. - trailingSlash: false, - customFields: { - // expose env vars etc here - environment: process.env.NODE_ENV, - }, - themeConfig: { - defaultMode: 'light', - disableSwitch: true, - respectPrefersColorScheme: false, - algolia: { - appId: '5U05JI5NE1', - apiKey: 'dc9c4491fcf9143ee34015f22d1dd9d6', - indexName: 'getunleash', - }, - navbar: { - style: 'dark', - logo: { - alt: 'Unleash logo', - src: 'img/unleash_logo_white.svg', - href: 'https://www.getunleash.io', - }, - items: [ - { - type: 'doc', - position: 'right', - docId: 'quickstart', - html: 'Quickstart', - }, - { - type: 'doc', - position: 'right', - docId: 'welcome', - html: 'Docs', - }, - { - type: 'html', - value: 'Product', - position: 'right', - }, - { - type: 'html', - value: 'Plans', - position: 'right', - }, - { - type: 'html', - value: 'Blog', - position: 'right', - }, - { - type: 'html', - position: 'right', - value: '', - }, - { - type: 'dropdown', - position: 'right', - html: 'Unleash Academy', - to: 'unleash-academy/introduction', - items: [ - { - type: 'doc', - docId: 'unleash-academy/foundational', - label: 'Foundational', - }, - { - type: 'doc', - docId: 'unleash-academy/advanced-for-devs', - label: 'Advanced for Developers', - }, - { - type: 'doc', - docId: 'unleash-academy/managing-unleash-for-devops', - label: 'Managing Unleash for DevOps/Admins', - }, - ], - }, +const getUnleashRepoStars = async () => { + const response = await fetch( + `https://api.github.com/repos/unleash/unleash`, + ); + const data = await response.json(); - { - type: 'dropdown', - position: 'right', - html: 'Unleash Certification', - items: [ - { - label: 'Foundational Unleash', - href: 'https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform', - }, - { - label: 'Advanced Unleash for Developers', - href: 'https://docs.google.com/forms/d/1NUL9hyO8Ys916TB6fPV3-jkvD97OmPXZ8_TO84Wjqgc/viewform', - }, - { - label: 'Managing Unleash for DevOps/Admins', - href: 'https://docs.google.com/forms/d/1JlIqmXI3P7dj0n-OiUs2IYsYXgmqw23BChaemlSgHJA/viewform', - }, - ], + const unleashRepoStars = data.stargazers_count; + const formattedStars = + unleashRepoStars >= 1000 + ? `${(unleashRepoStars / 1000).toFixed(1)}k` + : unleashRepoStars.toString(); + return formattedStars; +}; + +export default async function createConfigAsync(): Promise { + const stars = await getUnleashRepoStars(); + return { + title: 'Unleash Documentation', + tagline: 'The enterprise ready feature flag service', + url: 'https://docs.getunleash.io', + baseUrl: '/', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'throw', + favicon: 'img/favicon.ico', + organizationName: 'Unleash', // Usually your GitHub org/user name. + projectName: 'unleash.github.io', // Usually your repo name. + trailingSlash: false, + customFields: { + // expose env vars etc here + environment: process.env.NODE_ENV, + }, + themeConfig: { + defaultMode: 'light', + disableSwitch: true, + respectPrefersColorScheme: false, + algolia: { + appId: '5U05JI5NE1', + apiKey: 'dc9c4491fcf9143ee34015f22d1dd9d6', + indexName: 'getunleash', + }, + navbar: { + logo: { + alt: 'Unleash logo', + src: 'img/unleash_logo_dark.svg', + srcDark: 'img/unleash_logo_white.svg', + href: 'https://www.getunleash.io', }, - { - type: 'html', - position: 'right', - value: '', - }, - { - type: 'html', - value: 'Sign in', - position: 'right', - }, - { - type: 'html', - position: 'right', - value: '', - }, - { - type: 'html', - position: 'right', - value: `Product', + position: 'left', + }, + { + type: 'html', + value: 'Plans', + position: 'left', + }, + { + type: 'html', + value: 'Blog', + position: 'left', + }, + { + type: 'html', + value: 'Academy', + position: 'left', + }, + { + type: 'html', + position: 'right', + value: ` `, + className: 'show-at-small-sizes', + }, + { + type: 'html', + position: 'right', + value: ` + + Star + ${stars} + `, + className: 'hide-at-small-sizes', + }, + { + type: 'html', + position: 'right', + value: '', + className: 'hide-at-small-sizes', + }, + { + type: 'html', + value: 'Sign in', + position: 'right', + className: 'hide-at-small-sizes', + }, + { + type: 'html', + position: 'right', + value: 'Get a demo', + className: 'hide-at-small-sizes', + }, + ], + }, + prism: { + additionalLanguages: [ + 'csharp', + 'dart', + 'java', + 'php', + 'ruby', + 'bash', + 'diff', + ], + }, + languageTabs: [ + { + highlight: 'bash', + language: 'curl', + }, + { + highlight: 'python', + language: 'python', + variant: 'requests', + }, + { + highlight: 'go', + language: 'go', + }, + { + highlight: 'javascript', + language: 'nodejs', + variant: 'native', + }, + { + highlight: 'ruby', + language: 'ruby', + }, + { + highlight: 'csharp', + language: 'csharp', + variant: 'httpclient', + }, + { + highlight: 'php', + language: 'php', + }, + { + highlight: 'java', + language: 'java', + }, + { + highlight: 'powershell', + language: 'powershell', }, ], + footer: { + style: 'dark', + links: [ + { + title: 'Product', + items: [ + { + label: 'Docs', + to: '/', + }, + { + label: 'Unleash on GitHub', + href: 'https://github.com/Unleash/unleash', + }, + { + label: 'Roadmap', + href: 'https://github.com/orgs/Unleash/projects/10', + }, + { + label: 'Unleash help center', + href: 'https://getunleash.zendesk.com/hc/en-gb', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'GitHub discussions', + href: 'https://github.com/unleash/unleash/discussions/', + }, + { + label: 'Slack', + href: 'https://slack.unleash.run/', + }, + { + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/unleash', + }, + { + label: 'Twitter', + href: 'https://twitter.com/getunleash', + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} Unleash. Built with Docusaurus.`, + logo: { + src: 'img/logo.svg', + alt: 'Unleash logo', + }, + }, + image: 'img/logo.png', + imageZoom: { + // Optional medium-zoom options at + // https://www.npmjs.com/package/medium-zoom#options + options: { + background: 'var(--ifm-background-color)', + }, + }, }, - prism: { - additionalLanguages: [ - 'csharp', - 'dart', - 'java', - 'php', - 'ruby', - 'bash', - 'diff', - ], - }, - languageTabs: [ - { - highlight: 'bash', - language: 'curl', - }, - { - highlight: 'python', - language: 'python', - variant: 'requests', - }, - { - highlight: 'go', - language: 'go', - }, - { - highlight: 'javascript', - language: 'nodejs', - variant: 'native', - }, - { - highlight: 'ruby', - language: 'ruby', - }, - { - highlight: 'csharp', - language: 'csharp', - variant: 'httpclient', - }, - { - highlight: 'php', - language: 'php', - }, - { - highlight: 'java', - language: 'java', - }, - { - highlight: 'powershell', - language: 'powershell', - }, - ], - footer: { - style: 'dark', - links: [ + presets: [ + [ + '@docusaurus/preset-classic', { - title: 'Product', - items: [ + docs: { + // Please change this to your repo. + editUrl: + 'https://github.com/Unleash/unleash/edit/main/website/', + routeBasePath: '/', + remarkPlugins: [[pluginNpm2Yarn, { sync: true }]], + docItemComponent: '@theme/ApiItem', + sidebarPath: './sidebars.ts', + }, + theme: { + customCss: './src/css/custom.css', + }, + googleAnalytics: { + trackingID: 'UA-134882379-1', + }, + googleTagManager: { + containerId: 'GTM-KV5PRR2', + }, + sitemap: { + changefreq: 'weekly', + lastmod: 'date', + priority: 0.5, + createSitemapItems: async (params) => { + const { defaultCreateSitemapItems, ...rest } = + params; + const items = await defaultCreateSitemapItems(rest); + return items.filter( + (item) => !item.url.includes('/page/'), + ); + }, + }, + }, + ], + ], + plugins: [ + [ + // heads up to anyone making redirects: + // + // remember that redirects only work in production and not in + // development, as mentioned in the docs + // https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-client-redirects/ + '@docusaurus/plugin-client-redirects', + { + fromExtensions: ['html', 'htm'], + redirects: [ { - label: 'Docs', + to: '/how-to/how-to-create-api-tokens', + from: [ + '/user_guide/api-token', + '/deploy/user_guide/api-token', + ], + }, + { + from: '/advanced/audit_log', + to: '/reference/events', + }, + { + from: '/reference/event-log', + to: '/reference/events', + }, + { + from: '/reference/event-types', + to: '/reference/events', + }, + { + from: '/advanced/api_access', + to: '/how-to/how-to-use-the-admin-api', + }, + { + from: '/advanced/archived_toggles', + to: '/reference/feature-toggles', + }, + { + from: [ + '/advanced/custom-activation-strategy', + '/advanced/custom_activation_strategy', + ], + to: '/reference/custom-activation-strategies', + }, + { + from: '/advanced/feature_toggle_types', + to: '/reference/feature-toggles', + }, + { + from: [ + '/toggle_variants', + '/advanced/feature_toggle_variants', + '/advanced/toggle_variants', + ], + to: '/reference/feature-toggle-variants', + }, + { + from: [ + '/advanced/impression-data', + '/advanced/impression_data', + ], + to: '/reference/impression-data', + }, + { + from: '/advanced/stickiness', + to: '/reference/stickiness', + }, + { + from: '/advanced/sso-google', + to: '/how-to/how-to-add-sso-google', + }, + { + from: '/advanced/sso-open-id-connect', + to: '/how-to/how-to-add-sso-open-id-connect', + }, + { + from: '/advanced/sso-saml-keycloak', + to: '/how-to/how-to-add-sso-saml-keycloak', + }, + { + from: '/advanced/sso-saml', + to: '/how-to/how-to-add-sso-saml', + }, + { + from: '/advanced/enterprise-authentication', + to: '/reference/sso', + }, + { + from: ['/addons', '/reference/addons'], + to: '/reference/integrations', + }, + { + from: [ + '/addons/datadog', + '/reference/addons/datadog', + ], + to: '/reference/integrations/datadog', + }, + { + from: ['/addons/slack', '/reference/addons/slack'], + to: '/reference/integrations/slack', + }, + { + from: [ + '/addons/slack-app', + '/reference/addons/slack-app', + ], + to: '/reference/integrations/slack-app', + }, + { + from: ['/addons/teams', '/reference/addons/teams'], + to: '/reference/integrations/teams', + }, + { + from: [ + '/addons/webhook', + '/reference/addons/webhook', + ], + to: '/reference/integrations/webhook', + }, + { + from: '/guides/feature_updates_to_slack', + to: '/how-to/how-to-send-feature-updates-to-slack-deprecated', + }, + { + from: [ + '/integrations/integrations', + '/integrations', + ], + to: '/reference/integrations', + }, + { + from: '/integrations/jira_server_plugin_installation', + to: '/reference/integrations/jira-server-plugin-installation', + }, + { + from: '/integrations/jira_server_plugin_usage', + to: '/reference/integrations/jira-server-plugin-usage', + }, + { + from: [ + '/sdks', + '/user_guide/client-sdk', + '/client-sdk', + '/user_guide/connect_sdk', + '/sdks/community', + ], + to: '/reference/sdks', + }, + { + from: '/sdks/go_sdk', + to: '/reference/sdks/go', + }, + { + from: '/sdks/java_sdk', + to: '/reference/sdks/java', + }, + { + from: '/sdks/node_sdk', + to: '/reference/sdks/node', + }, + { + from: '/sdks/php_sdk', + to: '/reference/sdks/php', + }, + { + from: '/sdks/python_sdk', + to: '/reference/sdks/python', + }, + { + from: '/sdks/dot_net_sdk', + to: '/reference/sdks/dotnet', + }, + { + from: '/sdks/ruby_sdk', + to: '/reference/sdks/ruby', + }, + { + from: '/sdks/android_proxy_sdk', + to: '/reference/sdks/android-proxy', + }, + { + from: '/sdks/proxy-ios', + to: '/reference/sdks/ios-proxy', + }, + { + from: [ + '/sdks/proxy-javascript', + '/sdks/javascript-browser', + ], + to: '/reference/sdks/javascript-browser', + }, + { + from: ['/sdks/proxy-react', '/sdks/react'], + to: '/reference/sdks/react', + }, + { + from: '/sdks/proxy-vue', + to: '/reference/sdks/vue', + }, + { + from: '/sdks/proxy-svelte', + to: '/reference/sdks/svelte', + }, + { + from: [ + '/user_guide/native_apps', + '/user_guide/proxy-api', + '/sdks/unleash-proxy', + ], + to: '/reference/unleash-proxy', + }, + { + to: '/reference/activation-strategies', + from: [ + '/user_guide/control_rollout', + '/user_guide/activation_strategy', + ], + }, + { + from: '/user_guide/environments', + to: '/reference/environments', + }, + { + from: '/user_guide/projects', + to: '/reference/projects', + }, + { + from: ['/user_guide/rbac', '/advanced/groups'], + to: '/reference/rbac', + }, + { + from: '/user_guide/technical_debt', + to: '/reference/technical-debt', + }, + { + from: '/user_guide/unleash_context', + to: '/reference/unleash-context', + }, + { + from: '/user_guide/user-management', + to: '/how-to/how-to-add-users-to-unleash', + }, + { + from: '/user_guide/v4-whats-new', + to: '/reference/whats-new-v4', + }, + { + from: [ + '/user_guide/important-concepts', + '/tutorials/important-concepts', + '/reference/concepts/', + ], + to: '/reference', + }, + { + from: [ + '/user_guide/quickstart', + '/docs/getting_started', + '/tutorials/quickstart', + '/tutorials/getting-started', + ], + to: '/quickstart', + }, + { + from: '/api/basic-auth', + to: '/reference/api/legacy/unleash/basic-auth', + }, + { + from: '/api', + to: '/reference/api/legacy/unleash', + }, + { + from: '/api/admin/addons', + to: '/reference/api/legacy/unleash/admin/addons', + }, + { + from: '/api/admin/context', + to: '/reference/api/legacy/unleash/admin/context', + }, + { + from: '/api/admin/events', + to: '/reference/api/legacy/unleash/admin/events', + }, + { + from: '/api/admin/feature-toggles-v2', + to: '/reference/api/legacy/unleash/admin/features-v2', + }, + { + from: '/api/admin/feature-types', + to: '/reference/api/legacy/unleash/admin/feature-types', + }, + { + from: '/api/admin/features', + to: '/reference/api/legacy/unleash/admin/features', + }, + { + from: '/api/admin/features-archive', + to: '/reference/api/legacy/unleash/admin/archive', + }, + { + from: '/api/admin/metrics', + to: '/reference/api/legacy/unleash/admin/metrics', + }, + { + from: '/api/admin/projects', + to: '/reference/api/legacy/unleash/admin/projects', + }, + { + from: '/api/admin/segments', + to: '/reference/api/legacy/unleash/admin/segments', + }, + { + from: '/api/admin/state', + to: '/reference/api/legacy/unleash/admin/state', + }, + { + from: '/api/admin/strategies', + to: '/reference/api/legacy/unleash/admin/strategies', + }, + { + from: '/api/admin/tags', + to: '/reference/api/legacy/unleash/admin/tags', + }, + { + from: '/api/admin/user-admin', + to: '/reference/api/legacy/unleash/admin/user-admin', + }, + { + from: '/api/client/features', + to: '/reference/api/legacy/unleash/client/features', + }, + { + from: '/api/client/metrics', + to: '/reference/api/legacy/unleash/client/metrics', + }, + { + from: '/api/client/register', + to: '/reference/api/legacy/unleash/client/register', + }, + { + from: '/api/internal/internal', + to: '/reference/api/legacy/unleash/internal/prometheus', + }, + { + from: '/api/internal/health', + to: '/reference/api/legacy/unleash/internal/health', + }, + { + from: '/help', to: '/', }, { - label: 'Unleash on GitHub', - href: 'https://github.com/Unleash/unleash', + from: [ + '/topics/feature-flags/tutorials', + '/tutorials', + ], + to: '/feature-flag-tutorials', }, { - label: 'Roadmap', - href: 'https://github.com/orgs/Unleash/projects/10', + from: ['/tutorials/academy', '/unleash-academy'], + to: '/unleash-academy/introduction', }, { - label: 'Unleash help center', - href: 'https://getunleash.zendesk.com/hc/en-gb', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'GitHub discussions', - href: 'https://github.com/unleash/unleash/discussions/', + from: '/tutorials/academy-foundational', + to: '/unleash-academy/foundational', }, { - label: 'Slack', - href: 'https://slack.unleash.run/', + from: '/tutorials/academy-advanced-for-devs', + to: '/unleash-academy/advanced-for-devs', }, { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/unleash', + from: '/tutorials/academy-managing-unleash-for-devops', + to: '/unleash-academy/managing-unleash-for-devops', }, { - label: 'Twitter', - href: 'https://twitter.com/getunleash', + from: '/developer-guide', + to: '/contributing', }, - ], + { + from: [ + '/tutorials/unleash-overview', + '/user_guide/unleash_overview', + ], + to: '/understanding-unleash/unleash-overview', + }, + { + from: [ + '/tutorials/managing-constraints', + '/topics/managing-constraints', + ], + to: '/understanding-unleash/managing-constraints', + }, + { + from: [ + '/tutorials/the-anatomy-of-unleash', + '/topics/the-anatomy-of-unleash', + ], + to: '/understanding-unleash/the-anatomy-of-unleash', + }, + { + from: [ + '/tutorials/proxy-hosting', + '/topics/proxy-hosting', + ], + to: '/understanding-unleash/proxy-hosting', + }, + { + from: [ + '/tutorials/data-collection', + '/topics/data-collection', + ], + to: '/understanding-unleash/data-collection', + }, + + { + from: '/how-to/how-to-troubleshoot-flag-exposure', + to: '/using-unleash/troubleshooting/flag-exposure', + }, + { + from: '/how-to/how-to-troubleshoot-flag-not-returned', + to: '/using-unleash/troubleshooting/flag-not-returned', + }, + { + from: '/how-to/how-to-troubleshoot-cors', + to: '/using-unleash/troubleshooting/cors', + }, + { + from: '/how-to/how-to-troubleshoot-https', + to: '/using-unleash/troubleshooting/https', + }, + { + from: '/how-to/how-to-troubleshoot-feature-not-available', + to: '/using-unleash/troubleshooting/feature-not-available', + }, + { + from: ['/reference/deploy', '/deploy'], + to: '/using-unleash/deploy', + }, + { + from: [ + '/reference/deploy/getting-started', + '/deploy/getting_started', + ], + to: '/using-unleash/deploy/getting-started', + }, + { + from: [ + '/reference/deploy/configuring-unleash', + '/deploy/configuring_unleash', + ], + to: '/using-unleash/deploy/configuring-unleash', + }, + { + from: [ + '/reference/deploy/database-setup', + '/deploy/database-setup', + ], + to: '/using-unleash/deploy/database-setup', + }, + { + from: [ + '/reference/deploy/database-backup', + '/deploy/database-backup', + ], + to: '/using-unleash/deploy/database-backup', + }, + { + from: [ + '/reference/deploy/email-service', + '/deploy/email', + ], + to: '/using-unleash/deploy/email-service', + }, + { + from: [ + '/reference/deploy/google-auth-hook', + '/deploy/google_auth', + ], + to: '/using-unleash/deploy/google-auth-hook', + }, + { + from: [ + '/deploy/migration_guide', + '/reference/deploy/migration-guide', + ], + to: '/using-unleash/deploy/upgrading-unleash', + }, + { + from: [ + '/reference/deploy/securing-unleash', + '/deploy/securing_unleash', + ], + to: '/using-unleash/deploy/securing-unleash', + }, + { + from: [ + '/reference/deploy/import-export', + '/deploy/import_export', + ], + to: '/how-to/how-to-import-export', + }, + { + from: [ + '/reference/deploy/environment-import-export', + '/deploy/environment-import-export', + ], + to: '/how-to/how-to-environment-import-export', + }, + { + from: [ + '/topics/feature-flags/runtime-control', + '/topics/feature-flags/never-expose-pii', + '/topics/feature-flags/evaluate-flags-close-to-user', + '/topics/feature-flags/scale-horizontally', + '/topics/feature-flags/limit-payloads', + '/topics/feature-flags/availability-over-consistency', + '/topics/feature-flags/short-lived-feature-flags', + '/topics/feature-flags/unique-names', + '/topics/feature-flags/democratize-feature-flag-access', + '/topics/feature-flags/prioritize-ux', + '/topics/feature-flags/enable-traceability', + ], + to: '/topics/feature-flags/feature-flag-best-practices', + }, + { + from: [ + '/topics/feature-flag-migration/feature-flag-migration-scope', + '/topics/feature-flag-migration/business-case-feature-flag-migration', + '/topics/feature-flag-migration/planning-feature-flag-migration', + '/topics/feature-flag-migration/how-to-execute-feature-flag-migration', + '/topics/feature-flag-migration/onbording-users-to-feature-flag-service', + ], + to: '/topics/feature-flag-migration/feature-flag-migration-best-practices', + }, + { + from: '/topics/a-b-testing', + to: '/feature-flag-tutorials/use-cases/a-b-testing', + }, + ].map(addDocsRoutePrefix), // add /docs prefixes + createRedirects: (toPath) => { + if ( + toPath.indexOf('/docs/') === -1 && + toPath.indexOf('index.html') === -1 + ) { + return `/docs/${toPath}`; + } + }, }, ], - copyright: `Copyright © ${new Date().getFullYear()} Unleash. Built with Docusaurus.`, - logo: { - src: 'img/logo.svg', - alt: 'Unleash logo', - }, - }, - image: 'img/logo.png', - imageZoom: { - // Optional medium-zoom options at - // https://www.npmjs.com/package/medium-zoom#options - options: { - background: 'var(--ifm-background-color)', - }, - }, - }, - presets: [ - [ - '@docusaurus/preset-classic', - { - docs: { - // Please change this to your repo. - editUrl: - 'https://github.com/Unleash/unleash/edit/main/website/', - routeBasePath: '/', - remarkPlugins: [[pluginNpm2Yarn, { sync: true }]], - docItemComponent: '@theme/ApiItem', - sidebarPath: './sidebars.ts', - }, - theme: { - customCss: './src/css/custom.css', - }, - googleAnalytics: { - trackingID: 'UA-134882379-1', - }, - googleTagManager: { - containerId: 'GTM-KV5PRR2', - }, - sitemap: { - changefreq: 'weekly', - lastmod: 'date', - priority: 0.5, - createSitemapItems: async (params) => { - const { defaultCreateSitemapItems, ...rest } = params; - const items = await defaultCreateSitemapItems(rest); - return items.filter( - (item) => !item.url.includes('/page/'), - ); - }, - }, - }, - ], - ], - plugins: [ - [ - // heads up to anyone making redirects: - // - // remember that redirects only work in production and not in - // development, as mentioned in the docs - // https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-client-redirects/ - '@docusaurus/plugin-client-redirects', - { - fromExtensions: ['html', 'htm'], - redirects: [ - { - to: '/how-to/how-to-create-api-tokens', - from: [ - '/user_guide/api-token', - '/deploy/user_guide/api-token', - ], - }, - { - from: '/advanced/audit_log', - to: '/reference/events', - }, - { - from: '/reference/event-log', - to: '/reference/events', - }, - { - from: '/reference/event-types', - to: '/reference/events', - }, - { - from: '/advanced/api_access', - to: '/how-to/how-to-use-the-admin-api', - }, - { - from: '/advanced/archived_toggles', - to: '/reference/feature-toggles', - }, - { - from: [ - '/advanced/custom-activation-strategy', - '/advanced/custom_activation_strategy', - ], - to: '/reference/custom-activation-strategies', - }, - { - from: '/advanced/feature_toggle_types', - to: '/reference/feature-toggles', - }, - { - from: [ - '/toggle_variants', - '/advanced/feature_toggle_variants', - '/advanced/toggle_variants', - ], - to: '/reference/feature-toggle-variants', - }, - { - from: [ - '/advanced/impression-data', - '/advanced/impression_data', - ], - to: '/reference/impression-data', - }, - { - from: '/advanced/stickiness', - to: '/reference/stickiness', - }, - { - from: '/advanced/sso-google', - to: '/how-to/how-to-add-sso-google', - }, - { - from: '/advanced/sso-open-id-connect', - to: '/how-to/how-to-add-sso-open-id-connect', - }, - { - from: '/advanced/sso-saml-keycloak', - to: '/how-to/how-to-add-sso-saml-keycloak', - }, - { - from: '/advanced/sso-saml', - to: '/how-to/how-to-add-sso-saml', - }, - { - from: '/advanced/enterprise-authentication', - to: '/reference/sso', - }, - { - from: ['/addons', '/reference/addons'], - to: '/reference/integrations', - }, - { - from: ['/addons/datadog', '/reference/addons/datadog'], - to: '/reference/integrations/datadog', - }, - { - from: ['/addons/slack', '/reference/addons/slack'], - to: '/reference/integrations/slack', - }, - { - from: [ - '/addons/slack-app', - '/reference/addons/slack-app', - ], - to: '/reference/integrations/slack-app', - }, - { - from: ['/addons/teams', '/reference/addons/teams'], - to: '/reference/integrations/teams', - }, - { - from: ['/addons/webhook', '/reference/addons/webhook'], - to: '/reference/integrations/webhook', - }, - { - from: '/guides/feature_updates_to_slack', - to: '/how-to/how-to-send-feature-updates-to-slack-deprecated', - }, - { - from: ['/integrations/integrations', '/integrations'], - to: '/reference/integrations', - }, - { - from: '/integrations/jira_server_plugin_installation', - to: '/reference/integrations/jira-server-plugin-installation', - }, - { - from: '/integrations/jira_server_plugin_usage', - to: '/reference/integrations/jira-server-plugin-usage', - }, - { - from: [ - '/sdks', - '/user_guide/client-sdk', - '/client-sdk', - '/user_guide/connect_sdk', - '/sdks/community', - ], - to: '/reference/sdks', - }, - { - from: '/sdks/go_sdk', - to: '/reference/sdks/go', - }, - { - from: '/sdks/java_sdk', - to: '/reference/sdks/java', - }, - { - from: '/sdks/node_sdk', - to: '/reference/sdks/node', - }, - { - from: '/sdks/php_sdk', - to: '/reference/sdks/php', - }, - { - from: '/sdks/python_sdk', - to: '/reference/sdks/python', - }, - { - from: '/sdks/dot_net_sdk', - to: '/reference/sdks/dotnet', - }, - { - from: '/sdks/ruby_sdk', - to: '/reference/sdks/ruby', - }, - { - from: '/sdks/android_proxy_sdk', - to: '/reference/sdks/android-proxy', - }, - { - from: '/sdks/proxy-ios', - to: '/reference/sdks/ios-proxy', - }, - { - from: [ - '/sdks/proxy-javascript', - '/sdks/javascript-browser', - ], - to: '/reference/sdks/javascript-browser', - }, - { - from: ['/sdks/proxy-react', '/sdks/react'], - to: '/reference/sdks/react', - }, - { - from: '/sdks/proxy-vue', - to: '/reference/sdks/vue', - }, - { - from: '/sdks/proxy-svelte', - to: '/reference/sdks/svelte', - }, - { - from: [ - '/user_guide/native_apps', - '/user_guide/proxy-api', - '/sdks/unleash-proxy', - ], - to: '/reference/unleash-proxy', - }, - { - to: '/reference/activation-strategies', - from: [ - '/user_guide/control_rollout', - '/user_guide/activation_strategy', - ], - }, - { - from: '/user_guide/environments', - to: '/reference/environments', - }, - { - from: '/user_guide/projects', - to: '/reference/projects', - }, - { - from: ['/user_guide/rbac', '/advanced/groups'], - to: '/reference/rbac', - }, - { - from: '/user_guide/technical_debt', - to: '/reference/technical-debt', - }, - { - from: '/user_guide/unleash_context', - to: '/reference/unleash-context', - }, - { - from: '/user_guide/user-management', - to: '/how-to/how-to-add-users-to-unleash', - }, - { - from: '/user_guide/v4-whats-new', - to: '/reference/whats-new-v4', - }, - { - from: [ - '/user_guide/important-concepts', - '/tutorials/important-concepts', - '/reference/concepts/', - ], - to: '/reference', - }, - { - from: [ - '/user_guide/quickstart', - '/docs/getting_started', - '/tutorials/quickstart', - '/tutorials/getting-started', - ], - to: '/quickstart', - }, - { - from: '/api/basic-auth', - to: '/reference/api/legacy/unleash/basic-auth', - }, - { - from: '/api', - to: '/reference/api/legacy/unleash', - }, - { - from: '/api/admin/addons', - to: '/reference/api/legacy/unleash/admin/addons', - }, - { - from: '/api/admin/context', - to: '/reference/api/legacy/unleash/admin/context', - }, - { - from: '/api/admin/events', - to: '/reference/api/legacy/unleash/admin/events', - }, - { - from: '/api/admin/feature-toggles-v2', - to: '/reference/api/legacy/unleash/admin/features-v2', - }, - { - from: '/api/admin/feature-types', - to: '/reference/api/legacy/unleash/admin/feature-types', - }, - { - from: '/api/admin/features', - to: '/reference/api/legacy/unleash/admin/features', - }, - { - from: '/api/admin/features-archive', - to: '/reference/api/legacy/unleash/admin/archive', - }, - { - from: '/api/admin/metrics', - to: '/reference/api/legacy/unleash/admin/metrics', - }, - { - from: '/api/admin/projects', - to: '/reference/api/legacy/unleash/admin/projects', - }, - { - from: '/api/admin/segments', - to: '/reference/api/legacy/unleash/admin/segments', - }, - { - from: '/api/admin/state', - to: '/reference/api/legacy/unleash/admin/state', - }, - { - from: '/api/admin/strategies', - to: '/reference/api/legacy/unleash/admin/strategies', - }, - { - from: '/api/admin/tags', - to: '/reference/api/legacy/unleash/admin/tags', - }, - { - from: '/api/admin/user-admin', - to: '/reference/api/legacy/unleash/admin/user-admin', - }, - { - from: '/api/client/features', - to: '/reference/api/legacy/unleash/client/features', - }, - { - from: '/api/client/metrics', - to: '/reference/api/legacy/unleash/client/metrics', - }, - { - from: '/api/client/register', - to: '/reference/api/legacy/unleash/client/register', - }, - { - from: '/api/internal/internal', - to: '/reference/api/legacy/unleash/internal/prometheus', - }, - { - from: '/api/internal/health', - to: '/reference/api/legacy/unleash/internal/health', - }, - { - from: '/help', - to: '/', - }, - { - from: ['/topics/feature-flags/tutorials', '/tutorials'], - to: '/feature-flag-tutorials', - }, - { - from: ['/tutorials/academy', '/unleash-academy'], - to: '/unleash-academy/introduction', - }, - { - from: '/tutorials/academy-foundational', - to: '/unleash-academy/foundational', - }, - { - from: '/tutorials/academy-advanced-for-devs', - to: '/unleash-academy/advanced-for-devs', - }, - { - from: '/tutorials/academy-managing-unleash-for-devops', - to: '/unleash-academy/managing-unleash-for-devops', - }, - { - from: '/developer-guide', - to: '/contributing', - }, - { - from: [ - '/tutorials/unleash-overview', - '/user_guide/unleash_overview', - ], - to: '/understanding-unleash/unleash-overview', - }, - { - from: [ - '/tutorials/managing-constraints', - '/topics/managing-constraints', - ], - to: '/understanding-unleash/managing-constraints', - }, - { - from: [ - '/tutorials/the-anatomy-of-unleash', - '/topics/the-anatomy-of-unleash', - ], - to: '/understanding-unleash/the-anatomy-of-unleash', - }, - { - from: [ - '/tutorials/proxy-hosting', - '/topics/proxy-hosting', - ], - to: '/understanding-unleash/proxy-hosting', - }, - { - from: [ - '/tutorials/data-collection', - '/topics/data-collection', - ], - to: '/understanding-unleash/data-collection', - }, - - { - from: '/how-to/how-to-troubleshoot-flag-exposure', - to: '/using-unleash/troubleshooting/flag-exposure', - }, - { - from: '/how-to/how-to-troubleshoot-flag-not-returned', - to: '/using-unleash/troubleshooting/flag-not-returned', - }, - { - from: '/how-to/how-to-troubleshoot-cors', - to: '/using-unleash/troubleshooting/cors', - }, - { - from: '/how-to/how-to-troubleshoot-https', - to: '/using-unleash/troubleshooting/https', - }, - { - from: '/how-to/how-to-troubleshoot-feature-not-available', - to: '/using-unleash/troubleshooting/feature-not-available', - }, - { - from: ['/reference/deploy', '/deploy'], - to: '/using-unleash/deploy', - }, - { - from: [ - '/reference/deploy/getting-started', - '/deploy/getting_started', - ], - to: '/using-unleash/deploy/getting-started', - }, - { - from: [ - '/reference/deploy/configuring-unleash', - '/deploy/configuring_unleash', - ], - to: '/using-unleash/deploy/configuring-unleash', - }, - { - from: [ - '/reference/deploy/database-setup', - '/deploy/database-setup', - ], - to: '/using-unleash/deploy/database-setup', - }, - { - from: [ - '/reference/deploy/database-backup', - '/deploy/database-backup', - ], - to: '/using-unleash/deploy/database-backup', - }, - { - from: [ - '/reference/deploy/email-service', - '/deploy/email', - ], - to: '/using-unleash/deploy/email-service', - }, - { - from: [ - '/reference/deploy/google-auth-hook', - '/deploy/google_auth', - ], - to: '/using-unleash/deploy/google-auth-hook', - }, - { - from: [ - '/deploy/migration_guide', - '/reference/deploy/migration-guide', - ], - to: '/using-unleash/deploy/upgrading-unleash', - }, - { - from: [ - '/reference/deploy/securing-unleash', - '/deploy/securing_unleash', - ], - to: '/using-unleash/deploy/securing-unleash', - }, - { - from: [ - '/reference/deploy/import-export', - '/deploy/import_export', - ], - to: '/how-to/how-to-import-export', - }, - { - from: [ - '/reference/deploy/environment-import-export', - '/deploy/environment-import-export', - ], - to: '/how-to/how-to-environment-import-export', - }, - { - from: [ - '/topics/feature-flags/runtime-control', - '/topics/feature-flags/never-expose-pii', - '/topics/feature-flags/evaluate-flags-close-to-user', - '/topics/feature-flags/scale-horizontally', - '/topics/feature-flags/limit-payloads', - '/topics/feature-flags/availability-over-consistency', - '/topics/feature-flags/short-lived-feature-flags', - '/topics/feature-flags/unique-names', - '/topics/feature-flags/democratize-feature-flag-access', - '/topics/feature-flags/prioritize-ux', - '/topics/feature-flags/enable-traceability', - ], - to: '/topics/feature-flags/feature-flag-best-practices', - }, - { - from: [ - '/topics/feature-flag-migration/feature-flag-migration-scope', - '/topics/feature-flag-migration/business-case-feature-flag-migration', - '/topics/feature-flag-migration/planning-feature-flag-migration', - '/topics/feature-flag-migration/how-to-execute-feature-flag-migration', - '/topics/feature-flag-migration/onbording-users-to-feature-flag-service', - ], - to: '/topics/feature-flag-migration/feature-flag-migration-best-practices', - }, - { - from: '/topics/a-b-testing', - to: '/feature-flag-tutorials/use-cases/a-b-testing', - }, - ].map(addDocsRoutePrefix), // add /docs prefixes - createRedirects: (toPath) => { - if ( - toPath.indexOf('/docs/') === -1 && - toPath.indexOf('index.html') === -1 - ) { - return `/docs/${toPath}`; - } - }, - }, - ], - [ - 'docusaurus-plugin-openapi-docs', - { - id: 'api-operations', - docsPluginId: 'classic', - config: { - server: { - specPath: 'docs/generated/openapi.json', - outputDir: 'docs/reference/api/unleash', - sidebarOptions: { - groupPathsBy: 'tag', - categoryLinkSource: 'tag', + [ + 'docusaurus-plugin-openapi-docs', + { + id: 'api-operations', + docsPluginId: 'classic', + config: { + server: { + specPath: 'docs/generated/openapi.json', + outputDir: 'docs/reference/api/unleash', + sidebarOptions: { + groupPathsBy: 'tag', + categoryLinkSource: 'tag', + }, }, }, }, - }, + ], + [ + 'docusaurus-plugin-remote-content', + { + // more info at https://github.com/rdilweb/docusaurus-plugin-remote-content#options + name: 'content-sdks', + sourceBaseUrl: 'https://raw.githubusercontent.com/Unleash/', // gets prepended to all of the documents when fetching + outDir: 'docs/generated', // the base directory to output to. + documents: sdks.urls, // the file names to download + modifyContent: sdks.modifyContent, + noRuntimeDownloads: true, + }, + ], + [ + 'docusaurus-plugin-remote-content', + { + // more info at https://github.com/rdilweb/docusaurus-plugin-remote-content#options + name: 'content-external', + sourceBaseUrl: 'https://raw.githubusercontent.com/Unleash/', // gets prepended to all of the documents when fetching + outDir: 'docs/generated/', // the base directory to output to. + documents: edgeAndProxy.urls, // the file names to download + modifyContent: edgeAndProxy.modifyContent, + noRuntimeDownloads: true, + }, + ], + 'plugin-image-zoom', ], - [ - 'docusaurus-plugin-remote-content', + themes: [ + 'docusaurus-theme-openapi-docs', // Allows use of @theme/ApiItem and other components + ], + scripts: [ { - // more info at https://github.com/rdilweb/docusaurus-plugin-remote-content#options - name: 'content-sdks', - sourceBaseUrl: 'https://raw.githubusercontent.com/Unleash/', // gets prepended to all of the documents when fetching - outDir: 'docs/generated', // the base directory to output to. - documents: sdks.urls, // the file names to download - modifyContent: sdks.modifyContent, - noRuntimeDownloads: true, + src: 'https://widget.kapa.ai/kapa-widget.bundle.js', // See configuration: https://docs.kapa.ai/integrations/website-widget/configuration + 'data-website-id': '1d187510-1726-4011-b0f7-62742ae064ee', + 'data-project-name': 'Unleash', + 'data-project-color': '#1A4049', + 'data-project-logo': + 'https://cdn.getunleash.io/uploads/2024/05/logo-unleash-white.svg', + 'data-modal-image': + 'https://cdn.getunleash.io/uploads/2022/05/logo.png', + 'data-button-position-right': '0', + 'data-button-border-radius': '10px 0px 0px 10px', + 'data-button-width': '80px', + 'data-button-height': '100px', + 'data-button-image-height': '55px', + 'data-button-image-width': '55px', + 'data-button-text-font-weight': '400', + 'data-button-text-font-size': '16px', + 'data-button-text-font-family': '"Sen", sans-serif', + 'data-button-text': 'ASK AI', + defer: true, }, ], - [ - 'docusaurus-plugin-remote-content', - { - // more info at https://github.com/rdilweb/docusaurus-plugin-remote-content#options - name: 'content-external', - sourceBaseUrl: 'https://raw.githubusercontent.com/Unleash/', // gets prepended to all of the documents when fetching - outDir: 'docs/generated/', // the base directory to output to. - documents: edgeAndProxy.urls, // the file names to download - modifyContent: edgeAndProxy.modifyContent, - noRuntimeDownloads: true, - }, - ], - 'plugin-image-zoom', - ], - themes: [ - 'docusaurus-theme-openapi-docs', // Allows use of @theme/ApiItem and other components - ], - scripts: [ - { - src: 'https://widget.kapa.ai/kapa-widget.bundle.js', // See configuration: https://docs.kapa.ai/integrations/website-widget/configuration - 'data-website-id': '1d187510-1726-4011-b0f7-62742ae064ee', - 'data-project-name': 'Unleash', - 'data-project-color': '#1A4049', - 'data-project-logo': - 'https://cdn.getunleash.io/uploads/2024/05/logo-unleash-white.svg', - 'data-modal-image': - 'https://cdn.getunleash.io/uploads/2022/05/logo.png', - 'data-button-position-right': '0', - 'data-button-border-radius': '10px 0px 0px 10px', - 'data-button-width': '80px', - 'data-button-height': '100px', - 'data-button-image-height': '55px', - 'data-button-image-width': '55px', - 'data-button-text-font-weight': '400', - 'data-button-text-font-size': '16px', - 'data-button-text-font-family': '"Sen", sans-serif', - 'data-button-text': 'ASK AI', - defer: true, - }, - ], - clientModules: ['./global.js'], -}; - -export default config; + clientModules: ['./global.js'], + }; +} diff --git a/website/src/css/custom.css b/website/src/css/custom.css index edaabbc5aa..a6d56e77fc 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -56,9 +56,14 @@ html[data-theme="light"] { --unleash-color-navigation-background-active: #f4f3fd; --unleash-color-welcome-title: #1e373f; - --unleash-color-welcome-strong: #1a4049; + --unleash-color-welcome-strong: var(--unleash-color-green); --unleash-color-welcome-card-hover: #f7f7fa; + --unleash-logo: url("/img/unleash_logo_dark.svg"); + + --docsearch-searchbox-background: var(--ifm-background-color); + + --unleash-color-header-separator: var(--unleash-color-green); } html[data-theme="dark"] { @@ -100,6 +105,9 @@ html[data-theme="dark"] { --unleash-color-welcome-title: var(--ifm-font-color-base); --unleash-color-welcome-strong: var(--ifm-font-color-base); --unleash-color-welcome-card-hover: #2b2a3c; + --unleash-logo: url("/img/unleash_logo_white.svg"); + + --unleash-color-header-separator: rgba(255, 255, 255, 0.3); } /* navbar */ @@ -107,30 +115,51 @@ html[data-theme="dark"] { .navbar { color: var(--unleash-navbar-font-color); height: 3.75rem; - background-color: #1a4049; + background-color: var(--unleash-color-green); color: var(--ifm-navbar-link-color); } +.navbar__link { + transition: all 0.2s ease-in-out; +} + .header-github-link { color: var(--ifm-navbar-link-color); - align-items: center; display: flex; - justify-content: space-between; - gap: 10px; - height: 100%; + align-items: center; + gap: 6px; + text-decoration: none; } -.header-demo-button { - background-color: var(--ifm-color-primary); - color: var(--ifm-color-primary-contrast-background); +.header-github-link:hover { + text-decoration: none; +} + +.navbar-link-outlined { + padding: 2px; + padding-right: 6px; + border: 1px solid var(--ifm-navbar-link-color); border-radius: 4px; - padding: 0.5rem 1rem; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; - text-align: center; - display: inline-block; - margin: 0.5rem; +} + +.header-github-link.navbar-link-outlined:hover { + border: 1px solid var(--ifm-navbar-link-hover-color); +} + +.navbar .theme-toggle:hover { + color: var(--ifm-navbar-link-hover-color); +} + +.navbar-link-solid { + background: var(--ifm-navbar-link-color); + padding: 10px; + border-radius: 4px; + color: var(--ifm-background-color); +} + +.navbar-link-solid:hover { + background: var(--ifm-navbar-link-hover-color); + color: var(--ifm-background-color); } .navbar .navbar__link--active:has(.hide-when-active) { @@ -154,10 +183,18 @@ html[data-theme="dark"] { ); } +.navbar .show-at-small-sizes { + display: none; +} + @media (max-width: 1150px) { .navbar .hide-at-small-sizes { display: none; } + + .navbar .show-at-small-sizes { + display: inline-block; + } } @media (min-width: 997px) { @@ -303,19 +340,100 @@ main .theme-doc-breadcrumbs { .navbar__item:has(.navbar-separator) { width: 1px; - height: 100%; - background: rgba(255, 255, 255, 0.3); + height: 80%; + background: var(--unleash-color-header-separator); padding: 0; - margin-inline: var(--ifm-spacing-horizontal); + margin-inline: 8px; } .footer { z-index: 1; } +.navbar { + background-color: var(--unleash-color-sub-background); + box-shadow: none; +} + +.navbar > .navbar__inner { + --ifm-navbar-link-color: var(--unleash-color-table-of-contents-header-color); + color: var(--unleash-color-table-of-contents-header-color); +} + @media (min-width: 997px) { aside.theme-doc-sidebar-container { border-right: none; + background: var(--ifm-background-color); + z-index: 200; + position: relative; + } + + aside.theme-doc-sidebar-container > div > div { + padding-top: 0; + } + + aside.theme-doc-sidebar-container .menu { + margin-top: 20px; + } + + .sidebar-brand-logo { + content: ""; + display: flex; + width: 300px; + height: 36px; + margin-top: 10px; + margin-left: 10px; + background-image: var(--unleash-logo); + background-size: contain; + background-repeat: no-repeat; + } + + .navbar { + padding-left: 314px; + justify-content: center; + } + + .navbar .navbar__brand { + display: none; + } + + .navbar .navbar__link { + font-weight: 700; + } + + .navbar > .navbar__inner { + max-width: 1320px; + } + + .docs-doc-id-welcome .navbar > .navbar__inner { + max-width: 1230px; + } +} + +@media (min-width: 1150px) { + .navbar > .navbar__inner { + margin: 0 30px; + } + + .navbar__items > .navbar__item:first-of-type, + .navbar__items > .navbar__item:first-of-type > .navbar__item { + padding-left: 0; + } +} + +@media (min-width: 1366px) { + .DocSearch-Button { + width: 250px; + } +} + +@media (min-width: 1150px) and (max-width: 1366px) { + .DocSearch-Button { + width: 36px; + } + .DocSearch-Button .DocSearch-Button-Keys, + .DocSearch-Button .DocSearch-Button-Placeholder { + display: none; } } diff --git a/website/src/theme/DocSidebar/Desktop/Content/index.tsx b/website/src/theme/DocSidebar/Desktop/Content/index.tsx new file mode 100644 index 0000000000..bac1a47d98 --- /dev/null +++ b/website/src/theme/DocSidebar/Desktop/Content/index.tsx @@ -0,0 +1,21 @@ +import Content from '@theme-original/DocSidebar/Desktop/Content'; +import type ContentType from '@theme/DocSidebar/Desktop/Content'; +import type { WrapperProps } from '@docusaurus/types'; + +type Props = WrapperProps; + +export default function ContentWrapper(props: Props): JSX.Element { + return ( + <> + +
+ + + + ); +} diff --git a/website/src/theme/Navbar/Content/index.tsx b/website/src/theme/Navbar/Content/index.tsx new file mode 100644 index 0000000000..d8439d64be --- /dev/null +++ b/website/src/theme/Navbar/Content/index.tsx @@ -0,0 +1,93 @@ +import type { ReactNode } from 'react'; +import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; +import { + splitNavbarItems, + useNavbarMobileSidebar, +} from '@docusaurus/theme-common/internal'; +import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'; +import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; +import SearchBar from '@theme/SearchBar'; +import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; +import NavbarLogo from '@theme/Navbar/Logo'; +import NavbarSearch from '@theme/Navbar/Search'; + +import styles from './styles.module.css'; + +function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items as NavbarItemConfig[]; +} + +function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element { + return ( + <> + {items.map((item, i) => ( + + new Error( + `A theme navbar item failed to render. +Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: +${JSON.stringify(item, null, 2)}`, + { cause: error }, + ) + } + > + + + ))} + + ); +} + +function NavbarContentLayout({ + left, + right, +}: { + left: ReactNode; + right: ReactNode; +}) { + return ( +
+
{left}
+
{right}
+
+ ); +} + +export default function NavbarContent(): JSX.Element { + const mobileSidebar = useNavbarMobileSidebar(); + + const items = useNavbarItems(); + const [leftItems, rightItems] = splitNavbarItems(items); + + const searchBarItem = items.find((item) => item.type === 'search'); + + return ( + + {!mobileSidebar.disabled && } + + + + } + right={ + // TODO stop hardcoding items? + // Ask the user to add the respective navbar items => more flexible + <> + {!searchBarItem && ( + + + + )} + + + + } + /> + ); +} diff --git a/website/src/theme/Navbar/Content/styles.module.css b/website/src/theme/Navbar/Content/styles.module.css new file mode 100644 index 0000000000..4c9471e109 --- /dev/null +++ b/website/src/theme/Navbar/Content/styles.module.css @@ -0,0 +1,8 @@ +/* +Hide color mode toggle in small viewports + */ +@media (max-width: 996px) { + .colorModeToggle { + display: none; + } +}