Fix issue with search bar.

Signed-off-by: Thomas Hallgren <thomas@tada.se>

.github/workflows/blc.yaml

@@ -13,9 +13,9 @@ jobs:
         with:
           repository: datawire/getambassador.io-blc2
           path: blc
-      - run: yarn install
+      - run: yarn
         working-directory: site
-      - run: yarn run gatsby build
+      - run: yarn build
         working-directory: site
       - run: npm install
         working-directory: blc
@@ -24,7 +24,7 @@ jobs:
           set -o pipefail
           (TARGET=../site PRODUCT=telepresenceio make -C . > blc.log) || ! (grep 'has a broken' blc.log)
         working-directory: blc
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         with:
           name: blc.log
           path: blc/blc.log

.github/workflows/lint.yml

@@ -6,11 +6,10 @@ jobs:
     steps:
       - uses: actions/setup-node@v4
       - uses: actions/checkout@v4
-      - run: yarn install
-      - name: "yarn run gatsby build"
+      - run: yarn
+      - name: "yarn build"
         run: |
-          # The sed part of this command removes terminal escape codes.
-          NODE_ENV=development yarn run gatsby build
+          yarn build
       - name: "Dirty check"
         run: |
           git add .

.gitignore

@@ -6,6 +6,10 @@
 /.cache/
 /public/
 
+# Docusaurus
+/.docusaurus/
+/build/
+
 # gatsby-plugin-extract-schema
 /schema.graphql
 

docusaurus.config.ts

@@ -37,7 +37,6 @@ const config: Config = {
 			'classic',
 			{
 				docs: {
-					sidebarPath: './sidebars.ts',
 					// Please change this to your repo.
 					// Remove this to remove the "edit this page" links.
 					editUrl: ({docPath}) => {
@@ -47,15 +46,15 @@ const config: Config = {
 					includeCurrentVersion: false,
 					beforeDefaultRemarkPlugins: [remarkGithubAdmonitionsToDirectives],
 					async sidebarItemsGenerator(args) {
-						const { docs, version: {versionName, contentPath}} = args;
+						const {docs, version: {versionName, contentPath}} = args;
 						type LinkItem = {
 							link?: string,
 							title: string,
 							items?: LinkItem[]
 						}
 						const idSet = new Set<string>(docs.map(doc => doc.id))
 						const linkToItem = ((linkItem: LinkItem) => {
-							if(linkItem.link) {
+							if (linkItem.link) {
 								idSet.delete(linkItem.link);
 								return {
 									type: 'doc',

src/components/ClientOnly.tsx

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react'
+
+function ClientOnly({ children, ...delegated }) {
+	const [hasMounted, setHasMounted] = useState(false);
+
+	useEffect(() => {
+		setHasMounted(true);
+	}, []);
+	if (!hasMounted) {
+		return (<div>Loading...</div>);
+	}
+	return (
+		<div {...delegated}>
+		{children}
+		</div>
+	);
+}
+
+export default ClientOnly

src/components/Platform/index.tsx

@@ -65,14 +65,12 @@ function Provider({children}: Props) {
 		doAutoDetect: true,
 	});
 	if (!state.setTab) {
-		console.log("Setting setState function")
 		state.setTab = (newTab: string) => {
 			window.history.replaceState(
 				null,
 				'',
 				`?os=${newTab}${window.location.hash}`,
 			);
-			console.log("Setting state to " + newTab)
 			setState({
 				curTab: newTab,
 				setTab: null,
@@ -85,11 +83,9 @@ function Provider({children}: Props) {
 		const query = new URLSearchParams(window.location.search);
 		let os = query.get('os');
 		if (os === null) {
-			console.log("Query for 'os' returned null")
 			os = detectUserOS(window);
 		}
 		if (publicTabs().map((cls) => cls.slug).includes(os)) {
-			console.log("OS " + os + " is included")
 			if (state.doAutoDetect || state.curTab !== os) {
 				setState({
 					curTab: os,

src/components/Search.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import styled from "@mui/material/styles/styled";
+
+const GoogleSearch = styled('div')(() => ({
+	table: {
+		padding: 0,
+		margin: 0,
+		border: 0,
+	},
+	tr: {
+		color: "var(--ifm-navbar-color)",
+		border: 0,
+	},
+	td: {
+		padding: 0,
+		margin: 0,
+		border: 0,
+		lineHeight: 1.2,
+	},
+	'.gsc-control-cse': {
+		padding: 0,
+		margin: 0,
+	},
+	'.gsc': {
+		backgroundColor: "var(--ifm-navbar-background-color)",
+		borderColor: "var(--ifm-navbar-background-color)",
+		'&-control': {
+			'&-cse': {
+				backgroundColor: "var(--ifm-navbar-background-color)",
+				borderColor: "var(--ifm-navbar-background-color)",
+				overflow: 'hidden',
+			}
+		},
+		'&-input': {
+			backgroundColor: "var(--ifm-navbar-background-color)",
+			'.gsib_a': {
+				padding: '5px 1px 5px 8px',
+			},
+			'&-box': {
+				borderRadius: '8px',
+				overflow: 'hidden',
+			}
+		},
+		'&-search-button': {
+			margin: '0 0',
+			'&-v2': {
+				padding: '7px 7px',
+				borderRadius: '50%',
+			},
+		},
+	}
+}));
+
+// Search must be combined with a script tag in head that points to the
+// Google search engine declaration. Our is added in ./Root/index.tsx
+//
+// See https://programmablesearchengine.google.com/ for more info.
+function Search() {
+	return (
+		<GoogleSearch><div className="gcse-search"/></GoogleSearch>
+	)
+}
+export default Search;

src/theme/ColorModeToggle/index.tsx

@@ -15,7 +15,6 @@ export default function ColorModeToggleWrapper(props: Props): JSX.Element {
 
 	// Whenever the theme changes in docusaurus, trigger the change in MUI
 	useEffect(() => {
-		console.log("setColorScheme: "+value)
 		setMode(value);
 	});
 

src/theme/DocItem/Metadata/index.tsx

@@ -13,7 +13,6 @@ export default function MetadataWrapper(props: Props): JSX.Element {
   const { pathname } = useLocation();
   const canonical = `${customFields['canonicalBaseUrl']}${pathname}`
 
-  console.log("canonical: "+canonical);
   return (
     <>
       <Metadata {...props} />

src/theme/MDXComponents/CopyButton.tsx

@@ -18,10 +18,8 @@ function CopyButton({ content }: { content: string }) {
       disabled={copied}
       onClick={async () => {
         navigator.clipboard.writeText(content).then(() => {
-          console.log('set copied true');
           setCopied(true);
           delay(1500).then(() => {
-            console.log('set copied false');
             setCopied(false);
           })
       })}}

src/theme/Root/index.tsx

@@ -1,18 +1,13 @@
 import React, {JSX} from 'react';
 import {ThemeProvider} from "@mui/material/styles";
 import {customTheme} from "./custom-themes";
-import Head from "@docusaurus/Head";
 
 function Root({children}): JSX.Element {
-  return (
-    <>
-      <Head>
-        <script defer src="https://cse.google.com/cse.js?cx=c1eaf17d1db4e4ac8"/>
-      </Head>
-      <ThemeProvider theme={customTheme()}>
-        {children}
-      </ThemeProvider>
-    </>
-  );
+	return (
+		<ThemeProvider theme={customTheme()}>
+			{children}
+		</ThemeProvider>
+	);
 }
+
 export default Root

src/theme/SearchBar.tsx

@@ -1,67 +1,15 @@
-import styled from "@mui/material/styles/styled";
-import BrowserOnly from "@docusaurus/BrowserOnly";
 import * as React from "react";
+import {useEffect} from "react";
+import Search from '@site/src/components/Search'
 
-const GoogleSearch = styled('div')(() => ({
-	table: {
-		padding: 0,
-		margin: 0,
-		border: 0,
-	},
-	tr: {
-		color: "var(--ifm-navbar-color)",
-		border: 0,
-	},
-	td: {
-		padding: 0,
-		margin: 0,
-		border: 0,
-		lineHeight: 1.2,
-	},
-	'.gsc-control-cse': {
-		padding: 0,
-		margin: 0,
-	},
-	'.gsc': {
-		backgroundColor: "var(--ifm-navbar-background-color)",
-		borderColor: "var(--ifm-navbar-background-color)",
-		'&-control': {
-			'&-cse': {
-				backgroundColor: "var(--ifm-navbar-background-color)",
-				borderColor: "var(--ifm-navbar-background-color)",
-				overflow: 'hidden',
-			}
-		},
-		'&-input': {
-			backgroundColor: "var(--ifm-navbar-background-color)",
-			'.gsib_a': {
-				padding: '5px 1px 5px 8px',
-			},
-			'&-box': {
-				borderRadius: '8px',
-				overflow: 'hidden',
-			}
-		},
-		'&-search-button': {
-			margin: '0 0',
-			'&-v2': {
-				padding: '7px 7px',
-				borderRadius: '50%',
-			},
-		},
-	}
-}));
-
-// SearchBar must be combined with a script tag in head that points to the
-// Google search engine declaration. Our is added in ./Root/index.tsx
-//
-// See https://programmablesearchengine.google.com/ for more info.
 export default function SearchBar() {
-	return <BrowserOnly>
-		{() => (
-			<GoogleSearch>
-				<div className="gcse-search"></div>
-			</GoogleSearch>
-		)}
-	</BrowserOnly>
+	useEffect(() => {
+		const script = document.createElement("script");
+		document.head.append(script);
+		script.src = "https://cse.google.com/cse.js?cx=c1eaf17d1db4e4ac8";
+	}, []);
+
+	return (
+		<Search/>
+	);
 }

tsconfig.json

@@ -8,5 +8,5 @@
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
     "types": ["docusaurus-plugin-sass"]
   },
-  "include": ["src/components", "src/custom.d.ts"]
+  "include": ["sidebars.ts", "docusaurus.config.ts", "src/components", "src/plugin", "src/theme", "src/custom.d.ts"]
 }

versioned_sidebars/version-2.19-sidebars.json

@@ -0,0 +1,8 @@
+{
+  "docsSidebar": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}