SU-SWS · jdwjdwjdw · May 17, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ node_modules
 *.log
 *.sql
 webpack-assets.json
+.yarn
diff --git a/algolia-search/.env b/algolia-search/.env
@@ -0,0 +1,3 @@
+ALGOLIA_APP_ID=ALGOLIA_APP_ID
+ALGOLIA_KEY=ALGOLIA_KEY
+ALGOLIA_INDEX=ALGOLIA_INDEX
diff --git a/algolia-search/.gitignore b/algolia-search/.gitignore
@@ -0,0 +1,2 @@
+.env.local
+.yarn
diff --git a/algolia-search/.nvmrc b/algolia-search/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/algolia-search/.yarnrc.yml b/algolia-search/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/algolia-search/algolia_search.info.yml b/algolia-search/algolia_search.info.yml
@@ -0,0 +1,11 @@
+name: Resources Directory Algolia filter
+machine_name: resources-directory-filter
+type: pdb
+description: 'Algolia filter for Resources Directory'
+package: React
+core_version_requirement: ^9 || ^10
+module_status: active
+presentation: react
+add_js:
+  footer:
+    'dist/islands/algolia-search.island.js': { }
diff --git a/algolia-search/dist/index.html b/algolia-search/dist/index.html
@@ -0,0 +1,24 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Widgets</title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/><style>body {
+      font-family: 'Inter', sans-serif;
+    }
+
+    .preview {
+      width: 100%;
+      max-width: 1100px;
+      margin: 80px auto;
+      border: 1px dashed rgba(0, 0, 0, 0.2);
+      position: relative;
+      padding: 1rem;
+    }
+
+    .preview::before {
+      content: 'WIDGET PREVIEW';
+      position: absolute;
+      display: block;
+      top: -18px;
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+    .visually-hidden {
+      display: none;
+    }</style><script defer="defer" src="/islands/algolia-search.island.js"></script></head><body><div class="preview"><algolia-search></algolia-search></div></body></html>
diff --git a/algolia-search/dist/islands/algolia-search.island.js b/algolia-search/dist/islands/algolia-search.island.js
diff --git a/algolia-search/dist/islands/algolia-search.island.js.LICENSE.txt b/algolia-search/dist/islands/algolia-search.island.js.LICENSE.txt
@@ -0,0 +1,11 @@
+/*! algoliasearch-lite.umd.js | 4.23.3 | © Algolia, inc. | https://github.com/algolia/algoliasearch-client-javascript */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/algolia-search/package.json b/algolia-search/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "preact-island-examples",
+  "version": "0.1.0",
+  "description": "",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.module.js",
+  "source": "src/index.tsx",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "webpack --env prod",
+    "dev": "webpack serve --env dev"
+  },
+  "dependencies": {
+    "algoliasearch": "^4.23.3",
+    "preact": "^10.21.0",
+    "react-instantsearch": "^7.7.3",
+    "styled-components": "^6.1.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@types/styled-components": "^5.1.34",
+    "@types/webpack": "^5.28.5",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.11.0",
+    "dotenv-webpack": "^8.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "preact-island": "^1.1.2",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/algolia-search/src/algolia-search.island.tsx b/algolia-search/src/algolia-search.island.tsx
@@ -0,0 +1,160 @@
+import algoliasearch from 'algoliasearch/lite';
+import { createIslandWebComponent } from 'preact-island';
+import { HitsProps, InstantSearch, useInfiniteHits, Configure, useInstantSearch } from 'react-instantsearch';
+import FilterForm from "./filter-form";
+import EventHit from "./hits/events";
+import NewsHit from "./hits/news";
+import DefaultHit from "./hits/default-hit";
+import styled from "styled-components";
+import { StanfordHit } from "./hits/hit.types";
+import { SortBy } from "./sort-by";
+import { FunctionComponent } from 'preact';
+
+const islandName = 'algolia-search';
+const appId = 'FKQ9KXS4B7';
+const key = 'b59f434249ba65222c8973874f23095a';
+const searchClient = algoliasearch(appId, key);
+
+const Hit: FunctionComponent<{ hit: StanfordHit }> = ({ hit }) => {
+  if (hit.type === 'Event') return <EventHit hit={hit} />;
+  if (hit.type === 'News') return <NewsHit hit={hit} />;
+  return <DefaultHit hit={hit} />;
+};
+
+const ResultsContainer = styled.ul<{ children?: preact.ComponentChildren; id?: string }>`
+  list-style: none;
+  padding-left: 0;
+  margin-top: 5rem;
+  margin-bottom: 10rem;
+
+  @media (min-width: 768px) {
+    padding-left: 6rem;
+  }
+
+  @media (min-width: 1200px) {
+    padding-left: 0;
+  }
+
+  li {
+    border-bottom: 1px solid #ccc;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+`;
+
+const Container = styled.div<{ children?: preact.ComponentChildren }>`
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+  }
+
+  li {
+    margin-bottom: 10px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  [type=checkbox],[type=radio] {
+    -webkit-clip-path: unset;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    clip: unset;
+    overflow: unset;
+    position: relative;
+    clip-path: unset;
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+  fieldset {
+    padding: 0;
+  }
+`;
+
+const LoadingIndicator = styled.div<{ children?: preact.ComponentChildren }>`
+  text-align: center;
+  padding: 2rem;
+  font-size: 1.5rem;
+  color: #006CB8;
+`;
+
+const CustomHits: FunctionComponent = () => {
+  const { hits, showMore, isLastPage } = useInfiniteHits<StanfordHit>();
+  const { status } = useInstantSearch();
+
+  if (status === 'loading') {
+    return <LoadingIndicator>Loading...</LoadingIndicator>;
+  }
+
+  if (hits.length === 0) {
+    return <p>No results for your search. Please try another search.</p>;
+  }
+
+  return (
+    <ResultsContainer id="results">
+      {hits.map(hit => (
+        <li key={hit.objectID}>
+          <Hit hit={hit} />
+        </li>
+      ))}
+      {!isLastPage && (
+        <div style={{ display: 'flex' }}>
+          <button onClick={showMore} className="su-button--secondary" style={{ margin: '5rem auto' }}>
+            Show more results
+          </button>
+        </div>
+      )}
+    </ResultsContainer>
+  );
+};
+
+const Search: FunctionComponent = () => {
+  const currentSearchParams = new URLSearchParams(window.location.search);
+  const initialUiState: any = {};
+
+  if (currentSearchParams.get('key')) {
+    initialUiState.query = currentSearchParams.get('key');
+  }
+  if (currentSearchParams.get('page-type')) {
+    initialUiState.refinementList = { basic_page_type: currentSearchParams.get('page-type')?.split(',') };
+  }
+  if (currentSearchParams.get('shared')) {
+    initialUiState.refinementList = { shared_tags: currentSearchParams.get('shared')?.split(',') };
+  }
+
+  const searchIndex = 'techsource_resources';
+  const searchIndexAsc = 'techsource_resources_title_asc';
+  const searchIndexDesc = 'techsource_resources_title_desc';
+
+  return (
+    <>
+      <a href="#results" className="visually-hidden">Skip to results</a>
+      <InstantSearch
+        searchClient={searchClient}
+        indexName={searchIndexAsc}
+        initialUiState={{
+          [searchIndexAsc]: initialUiState,
+        }}
+        future={{ preserveSharedStateOnUnmount: true }}
+      >
+        <Container>
+          <FilterForm searchIndex={searchIndex} searchIndexAsc={searchIndexAsc} searchIndexDesc={searchIndexDesc} />
+          <div>
+            <SortBy searchIndex={searchIndex} searchIndexAsc={searchIndexAsc} searchIndexDesc={searchIndexDesc} />
+            <CustomHits />
+          </div>
+        </Container>
+      </InstantSearch>
+    </>
+  );
+};
+
+const island = createIslandWebComponent(islandName, Search);
+island.render({
+  selector: `${islandName}, #${islandName}, #resources-directory-filter`,
+});