Fix Algolia env vars (#1106)

Author: drwpow

docs/astro.config.mjs

@@ -6,5 +6,11 @@ import react from "@astrojs/react";
 export default defineConfig({
   integrations: [preact(), react()],
   site: `https://openapi-typescript.pages.dev`,
-  vite: {},
+  vite: {
+    define: {
+      "import.meta.env.VITE_ALGOLIA_APP_ID": JSON.stringify(process.env.ALGOLIA_APP_ID ?? ""),
+      "import.meta.env.VITE_ALGOLIA_INDEX_NAME": JSON.stringify(process.env.ALGOLIA_INDEX_NAME ?? ""),
+      "import.meta.env.VITE_ALGOLIA_SEARCH_KEY": JSON.stringify(process.env.ALGOLIA_SEARCH_KEY ?? ""),
+    },
+  },
 });

docs/package.json

@@ -12,16 +12,16 @@
     "@astrojs/react": "^2.1.3",
     "@docsearch/css": "^3.3.4",
     "@docsearch/react": "^3.3.4",
-    "@types/node": "^18.16.3",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "^18.2.3",
-    "astro": "^2.4.1",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "astro": "^2.4.3",
     "preact": "^10.13.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.62.1"
   },
   "devDependencies": {
+    "@types/node": "^20.1.1",
     "html-escaper": "^3.0.3",
     "typescript": "^5.0.4"
   }

docs/src/components/Header/Search.tsx

@@ -8,8 +8,7 @@ import * as docSearchReact from "@docsearch/react";
 
 /** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */
 const DocSearchModal = docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal;
-const useDocSearchKeyboardEvents =
-  docSearchReact.useDocSearchKeyboardEvents || (docSearchReact as any).default.useDocSearchKeyboardEvents;
+const useDocSearchKeyboardEvents = docSearchReact.useDocSearchKeyboardEvents || (docSearchReact as any).default.useDocSearchKeyboardEvents;
 
 export default function Search() {
   const [isOpen, setIsOpen] = useState(false);
@@ -44,13 +43,7 @@ export default function Search() {
     <>
       <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input">
         <svg className="search-icon" viewBox="0 0 24 24" fill="none">
-          <path
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
+          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
         <span>Search</span>
@@ -70,9 +63,9 @@ export default function Search() {
             initialQuery={initialQuery}
             initialScrollY={window.scrollY}
             onClose={onClose}
-            indexName={import.meta.env.ALGOLIA_INDEX_NAME}
-            appId={import.meta.env.ALGOLIA_APP_ID}
-            apiKey={import.meta.env.ALGOLIA_SEARCH_KEY}
+            indexName={import.meta.env.VITE_ALGOLIA_INDEX_NAME}
+            appId={import.meta.env.VITE_ALGOLIA_APP_ID}
+            apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
             transformItems={(items) => {
               return items.map((item) => {
                 // We transform the absolute URL into a relative URL to