chore: deploy dev page as github page on PR merge

vectara · Jan 16, 2024 · 6ce3b99 · 6ce3b99
1 parent 2f26465
commit 6ce3b99
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 88 deletions.
diff --git a/.github/workflows/deploy-pages-site.yml b/.github/workflows/deploy-pages-site.yml
@@ -0,0 +1,52 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [chore/create_pages_site]
+
+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: "dev/public"
+
+  # 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
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}
diff --git a/dev/build.js b/dev/build.js
@@ -0,0 +1,4 @@
+const { build } = require("esbuild");
+const { config } = require("./buildConfigs");
+
+build(config);
diff --git a/dev/buildConfigs.js b/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,
+  },
+};
diff --git a/dev/devServer.js b/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

diff --git a/dev/index.tsx b/dev/index.tsx
@@ -1,21 +1,120 @@
-import React from "react";
+import React, { ChangeEvent, useCallback, useState } from "react";
 import ReactDOM from "react-dom";
 import { ReactSearch } from "../";
 
-const App = () => (
-  <div id="app">
-    <h1>@vectara/react-search</h1>
-    <div id="searchWrapper">
-      <ReactSearch
-        corpusId="1"
-        customerId="1366999410"
-        apiKey="zqt_UXrBcnI2UXINZkrv4g1tQPhzj02vfdtqYJIDiA"
-        placeholder="What would you like to search for?"
-      />
-    </div>
-    <code>{codeSnippet}</code>
-  </div>
-);
+const DEFAULT_CORPUS_ID = "1";
+const DEFAULT_CUSTOMER_ID = "1366999410";
+const DEFAULT_API_KEY = "zqt_UXrBcnI2UXINZkrv4g1tQPhzj02vfdtqYJIDiA";
+const DEFAULT_PLACEHOLDER = "What would you like to search for?";
+
+const App = () => {
+  const [corpusId, setCorpusId] = useState<string>("");
+  const [customerId, setCustomerId] = useState<string>("");
+  const [apiKey, setApiKey] = useState<string>("");
+  const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER);
+
+  const onUpdateCorpusId = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCorpusId(e.target.value);
+  }, []);
+
+  const onUpdateCustomerId = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCustomerId(e.target.value);
+  }, []);
+
+  const onUpdateApiKey = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setApiKey(e.target.value);
+  }, []);
+
+  const onUpdatePlaceholder = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setPlaceholder(e.target.value);
+  }, []);
+
+  return (
+    <>
+      <Navbar />
+      <div className="pageContentWrapper">
+        <h1 id="title">@vectara/react-search</h1>
+        <div>
+          <div className="subsection">
+            <p>
+              ReactSearch is the easiest way to add Vectara semantic search to your React apps. With just a few lines of
+              code, you can add a Vectara-powered search UI to your React applications.
+            </p>
+            <p>
+              Try it out below! You can also make changes to the options in the Configuration section to modify the
+              component's behavior/appearance.
+            </p>
+          </div>
+          <div className="searchOuterWrapper">
+            <div className="searchInnerWrapper">
+              <ReactSearch
+                corpusId={corpusId === "" ? DEFAULT_CORPUS_ID : corpusId}
+                customerId={customerId === "" ? DEFAULT_CUSTOMER_ID : customerId}
+                apiKey={apiKey === "" ? DEFAULT_API_KEY : apiKey}
+                placeholder={placeholder}
+              />
+            </div>
+          </div>
+          <div></div>
+          <div className="subsection">
+            <h2 className="header">CONFIGURATION</h2>
+            <div className="propSet">
+              <h3 className="header">REQUIRED PROPS</h3>
+              <p>
+                These props determine the datastore that the component connects to. If you have already have a Vectara
+                datastore, you can enter values here to have the ReactSearch component search your own datastore.
+              </p>
+              <form>
+                <div className="configurationField">
+                  <label htmlFor="corpusId">Vectara Corpus ID: </label>
+                  <input id="corpusId" value={corpusId} onChange={onUpdateCorpusId} />
+                </div>
+
+                <div className="configurationField">
+                  <label htmlFor="customerId">Vectara Customer ID: </label>
+                  <input id="customerId" value={customerId} onChange={onUpdateCustomerId} />
+                </div>
+
+                <div className="configurationField">
+                  <label htmlFor="apiKey">Vectara Query API Key: </label>
+                  <input id="apiKey" value={apiKey} className="longInput" onChange={onUpdateApiKey} />
+                </div>
+              </form>
+            </div>
+            <div className="propSet">
+              <h3 className="header">OPTIONAL PROPS</h3>
+              <p>These props determine the look and feel of the component.</p>
+              <form>
+                <div className="configurationField">
+                  <label htmlFor="placeholer">Placeholder: </label>
+                  <input id="placeholder" value={placeholder} className="longInput" onChange={onUpdatePlaceholder} />
+                </div>
+              </form>
+            </div>
+          </div>
+          <div className="subsection">
+            <h2 className="header">USAGE</h2>
+            <p>First, install the ReactSearch component:</p>
+            <code>npm install @vectara/react-search</code>
+            <p>Then, in your code, import ReactSearch and integrate it into any component:</p>
+            <code>{codeSnippet}</code>
+          </div>
+
+          <div className="subsection">
+            <h2 className="header">GITHUB REPOSITORY</h2>
+            <p>
+              Source code and full documentation are available{" "}
+              <a href="https://github.com/vectara/react-search" target="_blank">
+                here
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
 
 const codeSnippet = `
 import { ReactSearch } from "@vectara/react-search";
@@ -30,7 +129,17 @@ export const App = () => (
     />
   </div>
 );
-
 `;
 
+const Navbar = () => (
+  <div id="navbar">
+    <a href="https://vectara.com/" target="_blank">
+      <img src="https://vectara.com/wp-content/uploads/2023/07/vectara-color-logo.svg" alt="Vectara Logo" />
+    </a>
+    <div>
+      <a href="https://console.vectara.com/signup">Try Vectara Free</a>
+    </div>
+  </div>
+);
+
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/dev/public/index.css b/dev/public/index.css
@@ -4,39 +4,97 @@ body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
+    "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  margin: 0;
 }
 
 code {
   background: #eee;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   width: 100%;
-  max-width: 800px;
   display: block;
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   white-space: pre-wrap;
   font-size: 0.8rem;
   margin: 20px 0;
   padding: 20px;
 }
 
-#root {
-  height: 100%;
+.pageContentWrapper {
+  padding: 0 1rem 1rem 1rem;
 }
 
-#app {
-  align-items: center;
+.searchOuterWrapper {
+  box-sizing: border-box;
   display: flex;
-  height: 100%;
   justify-content: center;
-  flex-direction: column;
+  width: 100%;
+  padding: 1rem;
 }
 
-#searchWrapper {
+.searchInnerWrapper {
   width: 100%;
   max-width: 800px;
+  padding: 3rem 1rem;
+}
+
+/**
+ * Styles governing each subsection of the page.
+ * A subsection is composed of text/form content and an optional header/subheaders.
+ */
+.subsection {
+  margin-bottom: 2rem;
+  line-height: 1.65rem;
+}
+
+.header {
+  font-weight: 300;
+}
+
+h2.header {
+  text-decoration: underline;
+}
+
+h3.header {
+  font-weight: 600;
+  margin: 0.25rem 0;
+}
+
+/**
+ * Styles governing the component configuration form.
+ */
+
+.configurationField {
+  box-sizing: border-box;
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 0;
+}
+
+.longInput {
+  width: 320px;
+}
+
+.propSet {
+  margin-bottom: 1rem;
+}
+
+#title {
+  font-weight: 400;
+}
+
+#navbar {
+  align-items: center;
+  background-color: #f3f7fb;
+  box-shadow: 0 2px 5px -1px #32325d40, 0 1px 3px -1px #0000004d;
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.75rem;
+}
+
+#navbar a {
+  color: black;
+  text-decoration: none;
 }
diff --git a/dev/public/index.html b/dev/public/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="/script.js"></script>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/package.json b/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"