tab groups are better

WildernessLabs · Jan 28, 2024 · 2d9321c · 2d9321c
1 parent 062b645
commit 2d9321c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 58 deletions.
diff --git 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 /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  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
@@ -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,16 +51,16 @@ export default function Layout(props) {
       <SkipToContent />
 
       <AnnouncementBar />
-
       <Navbar />
 
       <div
         id={SkipToContentFallbackId}
         className={clsx(
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,
-          wrapperClassName,
-        )}>
+          wrapperClassName
+        )}
+      >
         <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
           {children}
         </ErrorBoundary>

diff --git 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;