hds-web 1.15.8 → 1.15.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.15.8",
+  "version": "1.15.9",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -11,12 +11,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "algoliasearch": "^4.18.0",
+    "dotenv": "^16.3.1",
     "framer-motion": "^10.12.16",
+    "path-browserify": "^1.0.1",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-github-btn": "^1.4.0",
+    "react-instantsearch-dom": "^6.40.1",
     "react-markdown": "^8.0.7",
     "react-scripts": "5.0.1",
     "uuid": "^9.0.0",

package/src/HDS/components/Cards/index.js

@@ -5,7 +5,6 @@ export * from './Dropdown';
 export * from './Feedback';
 export * from './Link';
 export * from './TalkDetailCard';
-export * from './ImageSlider';
 export * from './CommunityCard';
 export * from './Announcement';
 export * from './VideoCard';

package/src/HDS/components/Headers/v3Header.js

@@ -8,6 +8,7 @@ import { V3Dropdown } from '../Cards/Dropdown'
 import { HDSColor } from '../../foundation/ColorPalette';
 import { motion } from "framer-motion"
 import { AnimatePresence } from 'framer-motion';
+import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
 
 const solutions = [
     {
@@ -965,6 +966,7 @@ export default function V3Header(props) {
 
                     <div className='hidden tb-l:flex flex-row items-center gap-x-4 '>
 
+                    <AlgoliaSearch />
                     
                     <a href='' className='hidden tb:flex'>
                         <Typography textStyle='body3c-medium' className='text-neutral-800'>

package/src/HDS/components/Snippet/CodeSnippet.js

@@ -1,70 +1,70 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism.css';
-import 'prismjs/components/prism-javascript';
+// import React, { useState, useRef, useEffect } from 'react';
+// import PropTypes from 'prop-types';
+// import Prism from 'prismjs';
+// import 'prismjs/themes/prism.css';
+// import 'prismjs/components/prism-javascript';
 
-function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
+// function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
 
-  if(!snippet){
-    snippet='as'
-  }
+//   if(!snippet){
+//     snippet='as'
+//   }
  
-  const [isCopied, setIsCopied] = useState(false);
-  const preRef = useRef(null);
+//   const [isCopied, setIsCopied] = useState(false);
+//   const preRef = useRef(null);
 
-  async function copyToClipboard() {
-    try {
-      await navigator.clipboard.writeText(snippet);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1500);
-    } catch (error) {
-      console.error('Failed to copy to clipboard', error);
-    }
-  }
+//   async function copyToClipboard() {
+//     try {
+//       await navigator.clipboard.writeText(snippet);
+//       setIsCopied(true);
+//       setTimeout(() => setIsCopied(false), 1500);
+//     } catch (error) {
+//       console.error('Failed to copy to clipboard', error);
+//     }
+//   }
 
   
-  useEffect(() => {
-    console.log(snippet)
-    if (preRef.current ) {
-      Prism.highlightAll();
-    }
-  }, [snippet, preRef.current]);
+//   useEffect(() => {
+//     console.log(snippet)
+//     if (preRef.current ) {
+//       Prism.highlightAll();
+//     }
+//   }, [snippet, preRef.current]);
 
 
-  const lines = snippet.split('\n');
-  const lineCount = lines.length;
-  if(snippet){}
-  return (
-    <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
-      {filename ? (
-        <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
-      ) : null}
+//   const lines = snippet.split('\n');
+//   const lineCount = lines.length;
+//   if(snippet){}
+//   return (
+//     <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
+//       {filename ? (
+//         <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
+//       ) : null}
 
-      <div className='my-6 mx-10'>
-        <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
-          {lines.map((line, index) => (
-            <code className='language-javascript' key={index}>
-              <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
-              {line}
-              {index < lineCount - 1 ? '\n' : null}
-            </code>
-          ))}
-        </pre>
+//       <div className='my-6 mx-10'>
+//         <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
+//           {lines.map((line, index) => (
+//             <code className='language-javascript' key={index}>
+//               <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
+//               {line}
+//               {index < lineCount - 1 ? '\n' : null}
+//             </code>
+//           ))}
+//         </pre>
 
-        <button
-          className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
-          onClick={copyToClipboard}
-        >
-          {isCopied ? 'Copied!' : 'Copy to Clipboard'}
-        </button>
-      </div>
-    </div>
-  );
-}
+//         <button
+//           className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
+//           onClick={copyToClipboard}
+//         >
+//           {isCopied ? 'Copied!' : 'Copy to Clipboard'}
+//         </button>
+//       </div>
+//     </div>
+//   );
+// }
 
-// CodeSnippetWithCopy.propTypes = {
-//   snippet: PropTypes.string.isRequired,
-// };
+// // CodeSnippetWithCopy.propTypes = {
+// //   snippet: PropTypes.string.isRequired,
+// // };
 
-export default CodeSnippetWithCopy;
+// export default CodeSnippetWithCopy;

package/src/HDS/components/Snippet/index.js

@@ -1 +1 @@
-export {default as CodeSnippet} from './CodeSnippet';
+// export {default as CodeSnippet} from './CodeSnippet';

package/src/HDS/components/index.js

@@ -8,7 +8,6 @@ export * from './Checkbox';
 export * from './Headers';
 export * from './common-components';
 export * from './InputFields';
-export * from './Snippet';
 export * from './Tabs';
 export * from './Tooltip';
 export * from './Hero';

package/src/HDS/helpers/AlgoliaSearch/constants.js

@@ -0,0 +1,48 @@
+export const INDEX_TYPES = Object.freeze({
+  blog: "blog",
+  docs: "docs",
+  learn: "learn",
+});
+
+export const SEARCH_INDICES = [
+  { name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
+  { name: `graphql-docs-prod`, title: `Hasura GraphQL Engine Docs`, type: INDEX_TYPES.docs },
+  { name: `learn-intro-graphql`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-intro-graphql-zh`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-elm-graphql`, title: `Learn ELM GraphQl`, type: INDEX_TYPES.learn },
+  { name: `learn-flutter-graphql`, title: `Learn Flutter GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-database-mysql`, title: `Learn Database MySQL`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-database-postgresql`,
+    title: `Learn Database PostgreSQL`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-hasura-backend`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-ja`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-zh`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-advanced`, title: `Learn Hasura Backend Advanced`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-auth-slack`, title: `Learn Hasura Auth Slack`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo-hooks`, title: `Learn React Apollo Hooks`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo`, title: `Learn React Apollo`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-typescript-react-apollo`,
+    title: `Learn TypeScript React Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-angular-apollo`, title: `Learn Angular Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-vue-apollo`, title: `Learn Vue Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-ios-apollo`, title: `Learn IOS Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-svelte-apollo`, title: `Learn Svelte Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-android-apollo`, title: `Learn Android Apollo`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-react-native-apollo`,
+    title: `Learn React Native Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  {
+    name: `learn-reason-react-apollo`,
+    title: `Learn Reason React Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },
+];

package/src/HDS/helpers/AlgoliaSearch/index.js

@@ -0,0 +1 @@
+export {default as AlgoliaSearch } from './search';

package/src/HDS/helpers/AlgoliaSearch/search.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import SearchOverlay from "./searchoverlay";
+export default function Search() {
+  const [showSearch, setShowSearch] = useState(false);
+
+  const handleSearchWithKeyboard = e => {
+    if (e.key === "/" || e.key === "Escape") {
+      e.preventDefault();
+      if (e.key === "/") return setShowSearch(true);
+      if (e.key === "Escape") return onCloseSearch();
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleSearchWithKeyboard);
+
+    return () => {
+      document.removeEventListener("keydown", handleSearchWithKeyboard);
+    };
+  }, []);
+
+  const onCloseSearch = () => setShowSearch(false);
+
+  return (
+    <>
+      <div className="pt-10">
+        <div className="max-w-7xl mx-auto">
+          <div className="w-full" onClick={() => {setShowSearch(preShowSearch => !preShowSearch);}}>
+            Search
+          </div>
+        </div>
+      </div>
+      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} />
+    </>
+  );
+}

package/src/HDS/helpers/AlgoliaSearch/search.scss

@@ -0,0 +1,38 @@
+.search-results {
+  width: calc(100% - 150px);
+  .ais-Hits, .Hits {
+    .ais-Hits-list {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-gap: 40px;
+      .ais-Hits-item {
+        border-bottom: 1px solid transparent;
+        &:hover {
+          border-bottom: 1px solid #E5E7EB;
+        }
+        .hit-slug {
+          word-break: break-word;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 799px) {
+  .search-results {
+    .ais-Hits, .Hits {
+      .ais-Hits-list {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+@media (min-width: 800px) and (max-width: 905px) {
+  .search-results {
+    .ais-Hits, .Hits {
+      .ais-Hits-list {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+  }
+}

package/src/HDS/helpers/AlgoliaSearch/searchbox.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from "react";
+import { connectSearchBox } from "react-instantsearch-dom";
+import { Icon } from '../../components/common-components/Icon'
+import { Typography } from '../../foundation/Typography'
+const searchSuggestions = [
+  "GraphQL",
+  "Actions",
+  "Authentication",
+  "React",
+  "Remote Joins",
+  "Postgres",
+];
+
+const DebouncedSearchBox = ({
+  refine,
+  currentRefinement,
+  className,
+  delay = 500,
+  isSearchStalled,
+}) => {
+  const [value, setValue] = useState(currentRefinement);
+  const timerId = useRef();
+  const searchInputRef = useRef();
+  useEffect(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
+  const trySuggestion = inputValue => {
+    refine(inputValue);
+    setValue(inputValue);
+  };
+
+  const resetInput = () => {
+    refine("");
+    setValue("");
+  };
+
+  const onChangeDebounced = event => {
+    const value = event.target.value;
+
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(() => refine(value), delay);
+
+    setValue(value);
+  };
+  return (
+    <div className=" sticky -top-20 tb-m:-top-20 z-10 py-8 pt-16 tb-m:pt-16 tb-m:py-9 bg-neutral-50">
+      <div className="flex relative items-center w-full">
+        <div className="absolute left-2">
+          {isSearchStalled ? (
+            <div className="loader-spin border-[3px] border-neutral-400 border-t-blue-500 w-5 h-5 rounded-full" />
+          ) : (
+            <Icon height={'w-5 h-5 stroke-[1.5px]'} variant="searchsm" strokeClass="stroke-neutral-800" />
+          )}
+        </div>
+        <form className={`${className} w-full`} onSubmit={e => e.preventDefault()}>
+          <input
+            id="search-input"
+            ref={searchInputRef}
+            className="w-full indent-5 rounded-xl border-neutral-400 h-12"
+            type="text"
+            placeholder="Search for tutorials, articles or docs"
+            aria-label="Search"
+            onChange={onChangeDebounced}
+            value={value}
+          />
+        </form>
+        <div onClick={resetInput} className="absolute right-2 cursor-pointer bg-neutral-200 rounded-md">
+          <Icon height={'w-6 h-6 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
+        </div>
+      </div>
+      <div className="hidden tb:flex flex-wrap items-center mt-4">
+        <Typography textStyle="body2c-bold" className="uppercase text-neutral-500 mr-4">POPULAR</Typography>
+        {searchSuggestions.map(suggestion => (
+          <button
+            key={suggestion}
+            className={`px-3 py-1 border rounded-md m-1 ${currentRefinement === suggestion ? "border-neutral-300 hover:bg-neutral-300 bg-neutral-300" : "bg-neutral-150 hover:bg-neutral-200 border-neutral-150"}`}
+            onClick={() => trySuggestion(suggestion)}
+          >
+            {suggestion}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default connectSearchBox(DebouncedSearchBox);

package/src/HDS/helpers/AlgoliaSearch/searchfooter.js

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { PoweredBy } from "react-instantsearch-dom";
+
+const SearchFooter = () => (
+  <Fragment>
+    <hr className="my-5 border-t-neutral-200" />
+    <div className="mt-12 flex flex-wrap justify-between">
+      <div className="community-links-wrapper">
+        <p>Unable to find what you're looking for?</p>
+        <p>
+          Reach out to our{" "}
+          <a className="text-blue-500 hover:text-blue-700" href="https://discord.com/invite/hasura" target="_blank" rel="noopener noreferrer">
+            Discord Community
+          </a>{" "}
+          or start a{" "}
+          <a className="text-blue-500 hover:text-blue-700"
+            href="https://github.com/hasura/graphql-engine/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Discussion on GitHub
+          </a>
+        </p>
+      </div>
+      <PoweredBy />
+    </div>
+  </Fragment>
+);
+
+export default SearchFooter;

package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { Icon } from '../../components/common-components/Icon'
+import SearchWrapper from "./searchwrapper";
+import { SEARCH_INDICES } from "./constants";
+
+export default function SearchOverlay({showSearch, onCloseSearch}) {
+  
+  useEffect(() => {
+    if (showSearch) {
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [showSearch]);
+
+  if (!showSearch) return null;
+
+  return (
+    <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-50">
+      <div className="absolute top-4 right-4 cursor-pointer z-[11]" onClick={onCloseSearch}>
+        <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
+      </div>
+      <div className="py-20 overflow-y-auto h-full w-full">
+        <div className="px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="w-full">
+              <SearchWrapper indices={SEARCH_INDICES} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/HDS/helpers/AlgoliaSearch/searchresults.js

@@ -0,0 +1,98 @@
+import React, { Fragment } from "react";
+import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-instantsearch-dom";
+import { INDEX_TYPES } from "./constants";
+import SearchFooter from "./searchfooter";
+import { Typography } from '../../foundation/Typography'
+
+// import SearchFooter from "./SearchFooter";
+
+const baseDomain = 'hasura.io';
+
+
+const HitsHeader = ({ searchResults, indexTitle, showSeparator }) => {
+  const hitCount = searchResults && searchResults.nbHits;
+  return hitCount > 0 ? (
+    <Fragment>
+      {showSeparator && <hr className="my-5 border-t-neutral-200" />}
+      {/* <div className="HitCount">
+        {hitCount} result{hitCount !== 1 ? `s` : ``}
+      </div> */}
+      <Typography textStyle="body2c-medium" className="pb-4">{indexTitle}</Typography>
+    </Fragment>
+  ) : null;
+};
+
+const CustomHitsHeader = connectStateResults(HitsHeader);
+
+const PageHit = ({ hit, indexType }) => (
+  <a href={hit.url} className="grid h-full">
+    <div className="self-start">
+      <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography>
+      {indexType === INDEX_TYPES.docs ? (
+        <Fragment>
+          {!!hit.hierarchy && (
+            <Typography textStyle="body1c-bold" className="font-semibold py-3">{`${
+              Object.values(hit.hierarchy)
+                .filter(h => !!h)
+                .reverse()[0]
+            }`}</Typography>
+          )}
+          <Typography textStyle="body2" className="text-neutral-600 break-words">
+            <Snippet attribute="content" hit={hit} tagName="mark" />
+          </Typography>
+          
+        </Fragment>
+      ) : (
+        <Fragment>
+          <Typography textStyle="body1c-bold" className="font-semibold py-3">
+            <Highlight attribute="title" hit={hit} tagName="mark" />
+          </Typography>
+          <Typography textStyle="body2" className="text-neutral-600 break-words">
+            <Snippet attribute="excerpt" hit={hit} tagName="mark" />
+          </Typography>
+        </Fragment>
+      )}
+    </div>
+    {hit.url ? (
+      <Typography textStyle="body3" className="self-end my-2 pt-3 text-neutral-600">
+        <span className='hit-slug break-words'>{hit.url.replace(`https://${baseDomain}/`, "/")}</span>
+      </Typography>
+    ) : null}
+  </a>
+);
+
+const HitsByIndexType = ({ indexType }) => {
+  if (INDEX_TYPES[indexType] === undefined) return null;
+
+  return (
+    <Hits
+      className="Hits"
+      hitComponent={hitProps => <PageHit {...hitProps} indexType={indexType} />}
+    />
+  );
+};
+
+const HitsInIndex = ({ index, show }) => (
+  <Index indexName={index.name}>
+    {show && (
+      <Fragment>
+        <CustomHitsHeader
+          indexTitle={index.title}
+          showSeparator={index.type !== INDEX_TYPES.blog}
+        />
+        <HitsByIndexType indexType={index.type} />
+      </Fragment>
+    )}
+  </Index>
+);
+
+const SearchResult = ({ indices, className, id, wrapperRef, activeIndexTypes }) => (
+  <div id={id} className={`${className} search-results z-[2] clear-both`} ref={wrapperRef}>
+    {indices.map(index => (
+      <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
+    ))}
+    <SearchFooter />
+  </div>
+);
+
+export default SearchResult;