Docs site cleanup (#948)

* add language selector

* docs site cleanup

* review feedback

* code review comments

1 files changed, 44 insertions, 0 deletions

diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx
new file mode 100644
index 000000000..62849e867
--- /dev/null
+++ b/docs/src/components/Header/LanguageSelect.tsx
@@ -0,0 +1,44 @@
+import type { FunctionalComponent } from 'preact';
+import { h } from 'preact';
+import './LanguageSelect.css';
+
+const SelectLanguage: FunctionalComponent<{}> = ({}) => {
+  let defaultValue = undefined;
+  if (!import.meta.env.SSR) {
+    const oldPathname = window.location.pathname;
+    const oldPathnameParts = oldPathname.split('/');
+    if (/[a-z]{2}/.test(oldPathnameParts[1])) {
+      defaultValue = oldPathnameParts[1];
+    }
+  }
+
+  return (
+    <div class="language-select-wrapper">
+      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.2em" width="1.2em"> <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" /> </svg>
+      <select class="language-select" value={defaultValue} onChange={(e) => {
+        const newLang = e.target.value;
+        if (newLang === 'en') {
+          window.location.pathname = `/getting-started`;
+        } else {
+          window.location.pathname = `/${newLang}/getting-started`;
+        }
+        // TODO: Preserve the current page, if it exists:
+        // const oldPathname = window.location.pathname;
+        // const oldPathnameParts = oldPathname.split('/');
+        // oldPathnameParts.shift();
+        // if (/^[a-z]{2}$/.test(oldPathnameParts[0])) {
+        //   oldPathnameParts.shift();
+        // }
+        // if (newLang !== 'en') {
+        //   oldPathnameParts.unshift(newLang);
+        // }
+        // window.location.pathname = '/' + oldPathnameParts.join('/');
+      }}>
+        <option value="en"><span>English</span></option>
+        <option value="nl"><span>Dutch</span></option>
+      </select> 
+    </div>
+  );
+};
+
+export default SelectLanguage;