From 2d9321cc77ae7c1595b171efb4da20b5e81f9426 Mon Sep 17 00:00:00 2001 From: Adam Dunn Date: Sat, 27 Jan 2024 19:44:48 -0700 Subject: [PATCH] tab groups are better --- docusaurus.config.js | 66 +++++++++++++++++++++------------------ src/theme/Layout/index.js | 46 +++++++++++++++++---------- src/theme/TOC/index.js | 12 ------- 3 files changed, 66 insertions(+), 58 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index a92d020fd..0fbc3940e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,77 +1,83 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion -const themeConfig = require('./docusaurus-config/theme-config'); -const getTopNav = require('./docusaurus-config/nav'); - - +const themeConfig = require("./docusaurus-config/theme-config"); +const getTopNav = require("./docusaurus-config/nav"); /** @type {import('@docusaurus/types').Config} */ const config = { - title: 'Wilderness Labs Developer Portal', - tagline: 'Wilderness Labs developer documentation and resource site.', - favicon: 'img/favicon.ico', - staticDirectories: ['docs', 'static'], + title: "Wilderness Labs Developer Portal", + tagline: "Wilderness Labs developer documentation and resource site.", + favicon: "img/favicon.ico", + staticDirectories: ["docs", "static"], customFields: { - email: 'hello@wildernesslabs.co', - twitter_username: 'wildernesslabs', - github_username: 'wildernesslabs', - topNav: getTopNav() + email: "hello@wildernesslabs.co", + twitter_username: "wildernesslabs", + github_username: "wildernesslabs", + topNav: getTopNav(), + tabGroups: [ + { + id: "os", + defaultTab: "windows", + }, + { + id: "ide", + defaultTab: "visualstudio2022", + }, + ], }, - plugins: ['docusaurus-plugin-sass'], + plugins: ["docusaurus-plugin-sass"], // Set the production url of your site here - url: 'https://developer-docusaurus.wildernesslabs.co/', + url: "https://developer-docusaurus.wildernesslabs.co/", // Set the // pathname under which your site is served // For GitHub pages deployment, it is often '//' - baseUrl: '/', + baseUrl: "/", trailingSlash: true, // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. - organizationName: 'WildernessLabs', // Usually your GitHub org/user name. - projectName: 'Documentation', // Usually your repo name. + organizationName: "WildernessLabs", // Usually your GitHub org/user name. + projectName: "Documentation", // Usually your repo name. - onBrokenLinks: 'warn', - onBrokenMarkdownLinks: 'warn', + onBrokenLinks: "warn", + onBrokenMarkdownLinks: "warn", // Even if you don't use internalization, you can use this field to set useful // metadata like html lang. For example, if your site is Chinese, you may want // to replace "en" with "zh-Hans". i18n: { - defaultLocale: 'en', - locales: ['en'], + defaultLocale: "en", + locales: ["en"], }, presets: [ [ - 'classic', + "classic", /** @type {import('@docusaurus/preset-classic').Options} */ ({ docs: { - sidebarPath: require.resolve('./src/sidebars/sidebars.js'), + sidebarPath: require.resolve("./src/sidebars/sidebars.js"), // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: - 'https://github.com/WildernessLabs/Documentation/tree/main/', - routeBasePath: '/' // <-- removes "docs" from url + editUrl: "https://github.com/WildernessLabs/Documentation/tree/main/", + routeBasePath: "/", // <-- removes "docs" from url }, blog: { showReadingTime: true, // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: - 'https://github.com/WildernessLabs/Documentation/tree/main/', + editUrl: "https://github.com/WildernessLabs/Documentation/tree/main/", }, theme: { - customCss: require.resolve('./src/css/custom.scss'), + customCss: require.resolve("./src/css/custom.scss"), }, }), ], ], - themeConfig + themeConfig, }; module.exports = config; diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js index 2a0a71033..0c787c301 100644 --- a/src/theme/Layout/index.js +++ b/src/theme/Layout/index.js @@ -1,20 +1,21 @@ -import React, { useEffect } from 'react'; -import clsx from 'clsx'; -import ErrorBoundary from '@docusaurus/ErrorBoundary'; +import React, { useEffect } from "react"; +import clsx from "clsx"; +import ErrorBoundary from "@docusaurus/ErrorBoundary"; import { PageMetadata, SkipToContentFallbackId, ThemeClassNames, -} from '@docusaurus/theme-common'; -import {useKeyboardNavigation} from '@docusaurus/theme-common/internal'; -import SkipToContent from '@theme/SkipToContent'; -import AnnouncementBar from '@theme/AnnouncementBar'; -import Navbar from '@theme/Navbar'; -import Footer from '@theme/Footer'; -import LayoutProvider from '@theme/Layout/Provider'; -import ErrorPageContent from '@theme/ErrorPageContent'; -import styles from './styles.module.css'; -import lozad from 'lozad'; +} from "@docusaurus/theme-common"; +import { useKeyboardNavigation } from "@docusaurus/theme-common/internal"; +import SkipToContent from "@theme/SkipToContent"; +import AnnouncementBar from "@theme/AnnouncementBar"; +import Navbar from "@theme/Navbar"; +import Footer from "@theme/Footer"; +import LayoutProvider from "@theme/Layout/Provider"; +import ErrorPageContent from "@theme/ErrorPageContent"; +import styles from "./styles.module.css"; +import lozad from "lozad"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; export default function Layout(props) { const { children, @@ -24,6 +25,19 @@ export default function Layout(props) { title, description, } = props; + + //loop through the configured tab groups, and make sure they are in the local storage. + const { siteConfig } = useDocusaurusContext(); + const tabGroups = siteConfig.customFields.tabGroups; + for(let group of tabGroups) + { + const item = localStorage.getItem(`docusaurus.tab.${group.id}`); + if(!item) + { + localStorage.setItem(`docusaurus.tab.${group.id}`, group.defaultTab); + } + } + useKeyboardNavigation(); useEffect(() => { // Initialize lozad @@ -37,7 +51,6 @@ export default function Layout(props) { -
+ wrapperClassName + )} + > }> {children} diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js index b4e7dac97..b9c68aca0 100644 --- a/src/theme/TOC/index.js +++ b/src/theme/TOC/index.js @@ -17,18 +17,6 @@ function useForceUpdate() { return update; } -function getDocusaurusTabItems() { - const items = {}; - for (let i = 0; i < localStorage.length; i++) { - const key = localStorage.key(i); - if (/^docusaurus\.tab\..+/.test(key)) { - // Regular expression to match the pattern - items[key] = localStorage.getItem(key); - } - } - return items; -} - export default function TOC({ className, ...props }) { const forceUpdate = useForceUpdate(); let activeTab, setActiveTab;