WIP

.github/workflows/deploy-pages-site.yml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+# adapted from https://github.com/actions/starter-workflows/blob/main/pages/jekyll-gh-pages.yml
+on:
+  push:
+    branches: [chore/create_pages_site]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v1
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build react-search Package
+        run: npm run build
+
+      - name: Build Page Script
+        run: npm run buildDevScript
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload entire repository
+          path: "public/build"
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

dev/build.js

@@ -0,0 +1,4 @@
+const { build } = require("esbuild");
+const { config } = require("./buildConfigs");
+
+build(config);

dev/buildConfigs.js

@@ -0,0 +1,13 @@
+module.exports = {
+  config: {
+    bundle: true,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(
+        process.env.NODE_ENV || "development"
+      ),
+    },
+    entryPoints: ["dev/index.tsx"],
+    outfile: "dev/public/script.js",
+    sourcemap: true,
+  },
+};

dev/devServer.js

@@ -2,23 +2,14 @@ const esbuild = require("esbuild");
 const chokidar = require("chokidar");
 const liveServer = require("live-server");
 const { esm } = require("../buildConfigs");
+const { config: devScriptBuildConfig } = require("./buildConfigs");
 
 (async () => {
   // Builder for the react-search package
   const pkgBuilder = await esbuild.context(esm);
 
   // Builder for the development page
-  const devPageBuilder = await esbuild.context({
-    bundle: true,
-    define: {
-      "process.env.NODE_ENV": JSON.stringify(
-        process.env.NODE_ENV || "development"
-      ),
-    },
-    entryPoints: ["dev/index.tsx"],
-    outfile: "dev/public/script.js",
-    sourcemap: true,
-  });
+  const devPageBuilder = await esbuild.context(devScriptBuildConfig);
 
   chokidar
     // Watch for changes to dev env code or react-search build

package.json

@@ -7,6 +7,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir dist",
+    "buildDevScript": "node dev/build.js",
     "clean": "rimraf dist",
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "npm run build && node dev/devServer.js"

src/index.tsx

@@ -23,7 +23,6 @@ import { SearchResult } from "./SearchResult";
 import { SearchModal } from "./SearchModal";
 import { useSearchHistory } from "./useSearchHistory";
 import "./_index.scss";
-import { BrowserRouter } from "react-router-dom";
 import { SearchInput } from "SearchInput";
 
 const getQueryParam = (urlParams: URLSearchParams, key: string) => {
@@ -246,73 +245,71 @@ export const ReactSearch: FC<Props> = ({
 
   return (
     <>
-      <BrowserRouter>
-        <div className="styleWrapper">
-          <div ref={buttonRef}>
-            <button className="searchButton" onClick={() => setIsOpen(true)}>
-              <VuiFlexContainer
-                alignItems="center"
-                spacing="none"
-                justifyContent="spaceBetween"
-                className="searchButton__inner"
-              >
-                <VuiFlexItem>
-                  <VuiFlexContainer alignItems="center" spacing="xs">
-                    <VuiFlexItem>
-                      <VuiIcon>
-                        <BiSearch />
-                      </VuiIcon>
-                    </VuiFlexItem>
-
-                    <VuiFlexItem>
-                      <VuiText>
-                        <div>Search</div>
-                      </VuiText>
-                    </VuiFlexItem>
-                  </VuiFlexContainer>
-                </VuiFlexItem>
-
-                <div className="searchButtonShortcut">Ctrl + K</div>
-              </VuiFlexContainer>
-            </button>
-          </div>
-
-          <SearchModal isOpen={isOpen} onClose={closeModalAndResetResults}>
-            <form>
-              <div className="searchForm">
-                <SearchInput
-                  isLoading={isLoading}
-                  value={searchValue}
-                  onChange={onChange}
-                  onKeyDown={onKeyDown}
-                  placeholder={placeholder}
-                />
-                {isLoading ? (
-                  <div className="submitButtonWrapper">
-                    <VuiSpinner size="xs" />
-                  </div>
-                ) : (
-                  <div className="submitButtonWrapper">
-                    <button
-                      className="submitButton"
-                      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                        e.preventDefault();
-                        sendSearchQuery(searchValue);
-                      }}
-                    >
-                      <BiSearch size="20px" />
-                    </button>
-                  </div>
-                )}
-              </div>
-            </form>
-
-            {resultsList && (
-              <div className="searchModalResults">{resultsList}</div>
-            )}
-          </SearchModal>
+      <div className="styleWrapper">
+        <div ref={buttonRef}>
+          <button className="searchButton" onClick={() => setIsOpen(true)}>
+            <VuiFlexContainer
+              alignItems="center"
+              spacing="none"
+              justifyContent="spaceBetween"
+              className="searchButton__inner"
+            >
+              <VuiFlexItem>
+                <VuiFlexContainer alignItems="center" spacing="xs">
+                  <VuiFlexItem>
+                    <VuiIcon>
+                      <BiSearch />
+                    </VuiIcon>
+                  </VuiFlexItem>
+
+                  <VuiFlexItem>
+                    <VuiText>
+                      <div>Search</div>
+                    </VuiText>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+              </VuiFlexItem>
+
+              <div className="searchButtonShortcut">Ctrl + K</div>
+            </VuiFlexContainer>
+          </button>
         </div>
-      </BrowserRouter>
+
+        <SearchModal isOpen={isOpen} onClose={closeModalAndResetResults}>
+          <form>
+            <div className="searchForm">
+              <SearchInput
+                isLoading={isLoading}
+                value={searchValue}
+                onChange={onChange}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+              />
+              {isLoading ? (
+                <div className="submitButtonWrapper">
+                  <VuiSpinner size="xs" />
+                </div>
+              ) : (
+                <div className="submitButtonWrapper">
+                  <button
+                    className="submitButton"
+                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                      e.preventDefault();
+                      sendSearchQuery(searchValue);
+                    }}
+                  >
+                    <BiSearch size="20px" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </form>
+
+          {resultsList && (
+            <div className="searchModalResults">{resultsList}</div>
+          )}
+        </SearchModal>
+      </div>
     </>
   );
 };