Merge pull request #2545 from ably/web-4327-non-js-docs-fix

[WEB-4327] Fix default language setting on non-JS templates

Author: jamiehenson

src/components/LanguageButton/LanguageButton.tsx

@@ -8,7 +8,7 @@ import { languageInfo } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';
 import { useLayoutContext } from 'src/contexts/layout-context';
 
-const LanguageButton: FC<LanguageNavigationComponentProps> = ({ language, selectedLocalLanguage }) => {
+const LanguageButton: FC<LanguageNavigationComponentProps> = ({ language }) => {
   const { activePage, setLanguage } = useLayoutContext();
   const selectedLanguage = getTrimmedLanguage(language);
   const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(selectedLanguage, activePage.language);

src/components/Layout/LanguageSelector.tsx

@@ -74,10 +74,9 @@ const LanguageSelectorOption = ({ isOption, setMenuOpen, langParam, ...props }:
 };
 
 export const LanguageSelector = () => {
-  const { activePage, products } = useLayoutContext();
+  const { activePage } = useLayoutContext();
   const location = useLocation();
-  const activeProduct = products[activePage.tree[0].index]?.[0];
-  const languageVersions = languageData[activeProduct ?? 'pubsub'];
+  const languageVersions = languageData[activePage.product ?? 'pubsub'];
   const [menuOpen, setMenuOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState<LanguageSelectorOptionData | null>(null);
   const selectRef = useRef<HTMLDivElement>(null);

src/components/Layout/LeftSidebar.test.tsx

@@ -4,8 +4,6 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import LeftSidebar from './LeftSidebar';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import { NavProduct } from 'src/data/nav/types';
-import { ProductKey } from 'src/data/types';
 
 jest.mock('src/contexts/layout-context', () => ({
   useLayoutContext: jest.fn(),
@@ -25,57 +23,58 @@ jest.mock('../Link', () => {
   return MockLink;
 });
 
-const mockUseLayoutContext = useLayoutContext as jest.Mock;
-const mockUseLocation = useLocation as jest.Mock;
-
-const mockProducts: [ProductKey, NavProduct][] = [
-  [
-    'platform',
-    {
-      name: 'Platform',
-      icon: { open: 'icon-gui-chevron-up-micro', closed: 'icon-gui-chevron-down-micro' },
-      content: [
-        {
-          name: 'Overview',
-          pages: [
-            { name: 'Introduction', link: '/platform/intro' },
-            { name: 'Getting Started', link: '/platform/getting-started' },
-          ],
-        },
-      ],
-      api: [
-        {
-          name: 'API Overview',
-          pages: [
-            { name: 'API Introduction', link: '/platform/api-intro' },
-            { name: 'API Reference', link: '/platform/api-reference' },
-          ],
-        },
-      ],
-      link: '/platform',
-      showJumpLink: true,
+// Mock productData
+jest.mock('src/data', () => ({
+  productData: {
+    platform: {
+      nav: {
+        name: 'Platform',
+        icon: { open: 'icon-gui-chevron-up-micro', closed: 'icon-gui-chevron-down-micro' },
+        content: [
+          {
+            name: 'Overview',
+            pages: [
+              { name: 'Introduction', link: '/platform/intro' },
+              { name: 'Getting Started', link: '/platform/getting-started' },
+            ],
+          },
+        ],
+        api: [
+          {
+            name: 'API Overview',
+            pages: [
+              { name: 'API Introduction', link: '/platform/api-intro' },
+              { name: 'API Reference', link: '/platform/api-reference' },
+            ],
+          },
+        ],
+        link: '/platform',
+        showJumpLink: true,
+      },
     },
-  ],
-  [
-    'pubsub',
-    {
-      name: 'Pub/Sub',
-      icon: { open: 'icon-gui-chevron-up-outline', closed: 'icon-gui-chevron-down-outline' },
-      content: [
-        {
-          name: 'Overview',
-          pages: [
-            { name: 'Introduction', link: '/pubsub/intro' },
-            { name: 'Getting Started', link: '/pubsub/getting-started' },
-          ],
-        },
-      ],
-      api: [],
-      link: '/pubsub',
-      showJumpLink: false,
+    pubsub: {
+      nav: {
+        name: 'Pub/Sub',
+        icon: { open: 'icon-gui-chevron-up-outline', closed: 'icon-gui-chevron-down-outline' },
+        content: [
+          {
+            name: 'Overview',
+            pages: [
+              { name: 'Introduction', link: '/pubsub/intro' },
+              { name: 'Getting Started', link: '/pubsub/getting-started' },
+            ],
+          },
+        ],
+        api: [],
+        link: '/pubsub',
+        showJumpLink: false,
+      },
     },
-  ],
-];
+  },
+}));
+
+const mockUseLayoutContext = useLayoutContext as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 
 describe('LeftSidebar', () => {
   beforeEach(() => {
@@ -86,7 +85,6 @@ describe('LeftSidebar', () => {
           { index: 1, page: { name: 'Link 2', link: '/link-2' } },
         ],
       },
-      products: mockProducts,
     });
 
     mockUseLocation.mockReturnValue({

src/components/Layout/LeftSidebar.tsx

@@ -2,8 +2,11 @@ import { useMemo, useState, useEffect, useRef } from 'react';
 import { navigate, useLocation } from '@reach/router';
 import cn from '@ably/ui/core/utils/cn';
 import Accordion from '@ably/ui/core/Accordion';
+import { AccordionData } from '@ably/ui/core/Accordion/types';
 import Icon from '@ably/ui/core/Icon';
+import { throttle } from 'lodash';
 
+import { productData } from 'src/data';
 import { NavProduct, NavProductContent, NavProductPages } from 'src/data/nav/types';
 import {
   commonAccordionOptions,
@@ -13,11 +16,8 @@ import {
   sidebarAlignmentClasses,
   sidebarAlignmentStyles,
 } from './utils/nav';
-import { ProductKey } from 'src/data/types';
 import Link from '../Link';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import { AccordionData } from '@ably/ui/core/Accordion/types';
-import { throttle } from 'lodash';
 
 type ContentType = 'content' | 'api';
 
@@ -119,12 +119,9 @@ const renderProductContent = (
     </div>
   ));
 
-const constructProductNavData = (
-  activePageTree: PageTreeNode[],
-  products: [ProductKey, NavProduct][],
-  inHeader: boolean,
-): AccordionData[] => {
-  const navData: AccordionData[] = products.map(([productKey, product], index) => {
+const constructProductNavData = (activePageTree: PageTreeNode[], inHeader: boolean): AccordionData[] => {
+  const navData: AccordionData[] = Object.entries(productData).map(([productKey, productObj], index) => {
+    const product = productObj.nav as NavProduct;
     const apiReferencesId = `${productKey}-api-references`;
 
     return {
@@ -199,7 +196,7 @@ const constructProductNavData = (
 };
 
 const LeftSidebar = ({ inHeader = false }: LeftSidebarProps) => {
-  const { activePage, products } = useLayoutContext();
+  const { activePage } = useLayoutContext();
   const [hasScrollbar, setHasScrollbar] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
 
@@ -218,10 +215,7 @@ const LeftSidebar = ({ inHeader = false }: LeftSidebarProps) => {
     };
   }, []);
 
-  const productNavData = useMemo(
-    () => constructProductNavData(activePage.tree, products, inHeader),
-    [activePage.tree, products, inHeader],
-  );
+  const productNavData = useMemo(() => constructProductNavData(activePage.tree, inHeader), [activePage.tree, inHeader]);
 
   return (
     <Accordion

src/components/blocks/software/__snapshots__/Pre.test.tsx.snap

@@ -55,7 +55,7 @@ exports[`<Pre /> should successfully render Code elements with language 1`] = `
               role="log"
             />
             <div
-              class="ably-select__control css-bo7mvc-control"
+              class="ably-select__control css-178amwe-control"
             >
               <div
                 class="ably-select__value-container ably-select__value-container--has-value css-1fdsijx-ValueContainer"
@@ -185,7 +185,7 @@ exports[`<Pre /> should successfully render code elements with  only Realtime la
               role="log"
             />
             <div
-              class="ably-select__control css-bo7mvc-control"
+              class="ably-select__control css-178amwe-control"
             >
               <div
                 class="ably-select__value-container ably-select__value-container--has-value css-1fdsijx-ValueContainer"
@@ -263,7 +263,7 @@ exports[`<Pre /> should successfully render code elements with  only Rest langua
       </svg>
     </div>
     <div
-      class="ml-8 leading-normal"
+      class="ml-8 leading-tight"
     >
       You're currently viewing the 
       <span
@@ -400,7 +400,7 @@ exports[`<Pre /> should successfully render code elements with both Rest and Rea
               role="log"
             />
             <div
-              class="ably-select__control css-bo7mvc-control"
+              class="ably-select__control css-178amwe-control"
             >
               <div
                 class="ably-select__value-container ably-select__value-container--has-value css-1fdsijx-ValueContainer"

src/components/blocks/wrappers/__snapshots__/LocalLanguageAlternatives.test.tsx.snap

@@ -43,7 +43,7 @@ exports[`<LocalLanguageAlternatives /> renders correctly 1`] = `
             role="log"
           />
           <div
-            class="ably-select__control css-bo7mvc-control"
+            class="ably-select__control css-178amwe-control"
           >
             <div
               class="ably-select__value-container ably-select__value-container--has-value css-1fdsijx-ValueContainer"

src/contexts/layout-context.tsx

@@ -2,26 +2,20 @@ import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo
 import { useLocation } from '@reach/router';
 import { ActivePage, determineActivePage } from 'src/components/Layout/utils/nav';
 import { productData } from 'src/data';
-import { NavProduct } from 'src/data/nav/types';
-import { ProductData, ProductKey } from 'src/data/types';
 import { LanguageKey } from 'src/data/languages/types';
-import { languageData } from 'src/data/languages';
+import { languageData, languageInfo } from 'src/data/languages';
 
 /**
  * LayoutContext
  *
  * activePage - The navigation tree that leads to the current page, and a list of languages referenced on the page.
- * products - List of products with their navigation data.
- * setLanguages - Set the possible languages for the current page.
  * setLanguage - Set the active language for the current page.
  */
 
 export const DEFAULT_LANGUAGE = 'javascript';
 
 const LayoutContext = createContext<{
   activePage: ActivePage;
-  products: [ProductKey, NavProduct][];
-  setLanguages: (languages: LanguageKey[]) => void;
   setLanguage: (language: LanguageKey) => void;
 }>({
   activePage: {
@@ -31,10 +25,6 @@ const LayoutContext = createContext<{
     language: DEFAULT_LANGUAGE,
     product: null,
   },
-  products: [],
-  setLanguages: (languages) => {
-    console.warn('setLanguages called without a provider', languages);
-  },
   setLanguage: (language) => {
     console.warn('setLanguage called without a provider', language);
   },
@@ -77,29 +67,24 @@ export const LayoutProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
+    const langParam = params.get('lang') as LanguageKey;
 
-    if (params.get('lang')) {
-      setLanguage(params.get('lang') as LanguageKey);
-    } else if (activePage.product) {
-      setLanguage(Object.keys(languageData[activePage.product])[0]);
-    }
-  }, [location.search, activePage.product]);
+    if (langParam && Object.keys(languageInfo).includes(langParam)) {
+      setLanguage(langParam);
+    } else if (activePage.product && activePage.languages.length > 0) {
+      const productLanguages = languageData[activePage.product];
+      const defaultLanguage =
+        Object.keys(productLanguages ?? []).filter((lang) => activePage.languages.includes(lang))[0] ??
+        DEFAULT_LANGUAGE;
 
-  const products = useMemo(
-    () =>
-      Object.entries(productData satisfies ProductData).map((product) => [product[0], product[1].nav]) as [
-        ProductKey,
-        NavProduct,
-      ][],
-    [],
-  );
+      setLanguage(defaultLanguage);
+    }
+  }, [location.search, activePage.product, activePage.languages]);
 
   return (
     <LayoutContext.Provider
       value={{
         activePage,
-        products,
-        setLanguages,
         setLanguage,
       }}
     >

src/templates/base-template.tsx

@@ -1,5 +1,5 @@
 import { Script, ScriptStrategy } from 'gatsby';
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { Head } from 'src/components/Head';
 import Article from 'src/components/Article';
@@ -9,8 +9,6 @@ import { PathnameContext } from 'src/contexts';
 import { AblyDocument, AblyDocumentMeta, AblyTemplateData, ProductName } from './template-data';
 import { useSiteMetadata } from 'src/hooks/use-site-metadata';
 import { getMetaTitle } from 'src/components/common/meta-title';
-import { useLayoutContext } from 'src/contexts/layout-context';
-import { LanguageKey } from 'src/data/languages/types';
 
 const getMetaDataDetails = (
   document: AblyDocument,
@@ -31,21 +29,6 @@ const Template = ({
   data: { document: ablyDocument },
   currentProduct,
 }: ITemplate) => {
-  const { setLanguages } = useLayoutContext();
-
-  useLayoutEffect(() => {
-    const languagesSet = new Set<LanguageKey>();
-
-    document.querySelectorAll('.docs-language-navigation').forEach((element) => {
-      const languages = element.getAttribute('data-languages');
-      if (languages) {
-        languages.split(',').forEach((language) => languagesSet.add(language as LanguageKey));
-      }
-    });
-
-    setLanguages(Array.from(languagesSet));
-  }, [setLanguages]);
-
   const title = getMetaDataDetails(ablyDocument, 'title') as string;
   const description = getMetaDataDetails(ablyDocument, 'meta_description', META_DESCRIPTION_FALLBACK) as string;
   const { canonicalUrl } = useSiteMetadata();