Fix issue with search bar.

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

Author: thallgren

.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',

sidebars.ts

@@ -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/ClientOnly.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/Platform/index.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/components/Search.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/ColorModeToggle/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} />