Improve input search help. Change code color scheme.

browser-extension/Makefile

@@ -2,7 +2,8 @@
 
 .PHONY: dev
 dev: ## Start development.
-	npm start
+	npm link @hackage-ui/react-lib
+	npm run dev
 
 .PHONY: build
 build: ## Build the project.

browser-extension/content/Content.module.css

@@ -14,7 +14,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: var(--transition-short);
   background-color: var(--purple-color-2);
   position: absolute;
   border-radius: 8px;

browser-extension/content/Content.tsx

@@ -4,6 +4,7 @@ import globalsStyles from '../../styles/globals.css';
 import fontsStyles from '../../styles/fonts.css';
 import reactLibStyles from '@hackage-ui/react-lib/dist/react-lib.css';
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css';
+import hljsStyles from 'highlight.js/styles/kimbie-light.css';
 import styles from './Content.module.css';
 import * as s from './Content.module.css';
 import haskellLogo from '!!raw-loader!./haskell-monochrome.svg'
@@ -80,6 +81,7 @@ const Content = (props: { rootElement: HTMLElement }) => {
     globalsStyles.use({ target: stylesContainerRef.current });
     reactLibStyles.use({ target: stylesContainerRef.current });
     reactToastifyStyles.use({ target: stylesContainerRef.current });
+    hljsStyles.use({ target: stylesContainerRef.current });
     styles.use({ target: stylesContainerRef.current });
 
     setIsReady(true);

browser-extension/package-lock.json

@@ -17116,6 +17116,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.4.0.tgz",
+      "integrity": "sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

browser-extension/package.json

@@ -9,9 +9,11 @@
     "README.md"
   ],
   "dependencies": {
+    "@hackage-ui/react-lib": "*",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "express": "^4.17.1",
+    "highlight.js": "^11.4.0",
     "postcss-selector-replace": "^1.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -20,9 +22,8 @@
     "stream-browserify": "^3.0.0",
     "url-parse": "^1.5.3",
     "uuid": "^8.3.2",
-    "ws": "^8.2.0",
     "webextension-polyfill": "^0.8.0",
-    "@hackage-ui/react-lib": "*"
+    "ws": "^8.2.0"
   },
   "devDependencies": {
     "@swc/core": "^1.2.107",

hackage-ui/Makefile

@@ -2,6 +2,8 @@
 
 .PHONY: dev
 dev: ## Start development.
+	cd ../react-lib && make build && npm link
+	npm link @hackage-ui/react-lib
 	npm run dev
 
 .PHONY: build

hackage-ui/package.json

@@ -9,10 +9,11 @@
     "prepare": "cp -r ../styles ./public/"
   },
   "dependencies": {
+    "@hackage-ui/react-lib": "*",
     "axios": "^0.24.0",
     "cheerio": "^1.0.0-rc.10",
     "fuse.js": "^6.5.3",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.4.0",
     "lodash": "^4.17.21",
     "next": "12.0.7",
     "react": "17.0.2",
@@ -20,8 +21,7 @@
     "react-toastify": "^8.1.0",
     "react-tooltip": "^4.2.21",
     "timeago.js": "^4.0.2",
-    "use-debounce": "^7.0.1",
-    "@hackage-ui/react-lib": "*"
+    "use-debounce": "^7.0.1"
   },
   "devDependencies": {
     "@types/gtag.js": "0.0.8",

hackage-ui/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head'
 import { appContext } from '@hackage-ui/react-lib';
 import '@hackage-ui/react-lib/dist/react-lib.css';
 import 'react-toastify/dist/ReactToastify.css';
+import 'highlight.js/styles/kimbie-light.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <>

hackage-ui/pages/package/[packageId].tsx

@@ -4,7 +4,6 @@ import PackagePage from '../../components/pages/package/PackagePage';
 import { PackageProps, Versions, License, Homepage } from '../../components/pages/package/common';
 import axios from 'axios';
 import hljs from 'highlight.js';
-import 'highlight.js/styles/a11y-dark.css';
 import cheerio, { CheerioAPI } from 'cheerio';
 import unescape from 'lodash/unescape';
 

hackage-ui/public/styles/globals.css

@@ -36,6 +36,10 @@ body {
   min-height: 100vh;
 }
 
+body {
+  font-size: 16rem;
+}
+
 a {
   color: var(--purple-color-2);
   text-decoration: none;
@@ -57,9 +61,6 @@ pre {
 
 code.hljs,
 pre.hljs {
-  background-color: var(
-    --purple-color-1
-  ) !important; /* important! here is to override highlight.js theme styles */
   border-radius: 4rem;
   padding: 1rem 6rem;
   font-size: 14rem;
@@ -78,7 +79,6 @@ hr {
   width: 100%;
   max-width: var(--max-content-width);
   height: 4rem;
-  background-color: var(--surface-color);
   border: none;
   border-radius: 4rem;
 }

react-lib/Makefile

@@ -2,7 +2,7 @@
 
 .PHONY: dev
 dev: ## Start development.
-	npm run dev
+	npm link && npm run dev
 
 .PHONY: build
 build: ## Build the project.

react-lib/src/SearchInput/HackageSearchResults.tsx

@@ -38,7 +38,7 @@ const HackageSearchResults = ({ query, apiUrl, asEmbeddedWidget }: HackageSearch
           { headers: { 'Content-Type': 'application/json' } }
         )).data;
       } catch (err) {
-        appContext.notifyError('An error occured during searching on Hackage');
+        appContext.notifyError(`An error occurred while searching for packages`);
         console.log(err);
       } finally {
         appContext.finishTask(taskId);
@@ -61,10 +61,10 @@ const HackageSearchResults = ({ query, apiUrl, asEmbeddedWidget }: HackageSearch
   return (
     <div className={s.searchResults}>
       {searchResults.length === 0 && (
-        <NothingFound waitBeforeShow={1500}>Nothing found in Hackage. Try another query.</NothingFound>
+        <NothingFound waitBeforeShow={1500}>No packages found. Try another query.</NothingFound>
       )}
       {searchResults.length > 0 && (
-        <Header>Found on Hackage: {searchResults.length}</Header>
+        <Header>Packages found: {searchResults.length}</Header>
       )}
       <div className={s.searchResultsContainer}>
         {searchResults.map(pkg => {

react-lib/src/SearchInput/SearchInput.module.css

@@ -25,12 +25,14 @@
 }
 
 .help {
-  padding: 18rem 24rem;
-  background-color: var(--background-color);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.help code {
-  color: #fff;
+.helpContainer {
+  padding: 18rem 24rem;
+  overflow: auto;
 }
 
 .helpHeader {
@@ -39,6 +41,41 @@
   margin-bottom: 8rem;
 }
 
+.helpSection {
+  margin-bottom: 18rem;
+}
+
+.helpSection:last-child {
+  margin-bottom: 0;
+}
+
+.helpSectionHeader {
+  margin-bottom: 8rem;
+  font-size: 16rem;
+  font-weight: bold;
+}
+
+.helpExamples {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.clickableExample {
+  display: inline-flex;
+  margin-bottom: 12rem;
+  flex: 1 1 auto;
+}
+
+.clickableExample:hover {
+  cursor: pointer;
+  opacity: 0.66;
+}
+
+.clickableExample code {
+  box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 50%);
+}
+
 @media (max-width: 1000px) {
   .searchResultsContainer {
     width: calc(100vw - 32rem);

react-lib/src/SearchInput/SearchInput.tsx

@@ -4,6 +4,7 @@ import Input from "./Input";
 import s from './SearchInput.module.css';
 import { useDebounce } from 'use-debounce';
 import { NextRouter } from 'next/router';
+import Header from './Header';
 import HackageSearchResults from './HackageSearchResults';
 import HoogleSearchResults from './HoogleSearchResults';
 import RecentSearches from './RecentSearches';
@@ -19,7 +20,7 @@ type SearchResultsProps = {
   query: string,
   setQuery: (query: string) => void,
   api: Api,
-  asEmbeddedWidget?: boolean
+  asEmbeddedWidget?: boolean,
 }
 
 const SearchResults = (props: SearchResultsProps) => {
@@ -59,7 +60,7 @@ const SearchResults = (props: SearchResultsProps) => {
   return (
     <div className={`${s.searchResultsContainer} ${SearchResultsClassName}`}>
       <div className={s.searchResults}>
-        {queryType === 'showHelp' && (<Help />)}
+        {queryType === 'showHelp' && (<Help onExampleClick={props.setQuery} />)}
         {query && queryType === 'hackage' && (
           <HackageSearchResults
             query={query.trim()}
@@ -163,7 +164,7 @@ export const SearchInput = (props: SearchInputProps) => {
   );
 }
 
-const Help = () => {
+const Help = (props: { onExampleClick: (query: string) => void }) => {
   const appContext = useContext(AppContext);
   useEffect(() => {
     appContext.analytics?.gtag('event', 'FeatureUsed', { event_label: 'SearchInputHelpPopup' });
@@ -171,10 +172,51 @@ const Help = () => {
 
   return (
     <div className={s.help}>
-      <h3 className={s.helpHeader}>Search Examples</h3>
-      <p><code className="hljs">servant</code> to search for packages in Hackage.</p>
-      <p><code className="hljs">:t a -&gt; a</code> to search by type signature or function name in Hoogle.</p>
-      <p><code className="hljs">:r smth</code> to show your recent searches.</p>
+      <Header>Help</Header>
+      <div className={s.helpContainer}>
+        <div className={s.helpSection}>
+          <div className={s.helpSectionHeader}>
+            Search Anything
+          </div>
+          <div className={s.helpExamples}>
+            <ClickableExample query="map" onClick={props.onExampleClick} />
+            <ClickableExample query="Int -> String" onClick={props.onExampleClick} />
+            <ClickableExample query="Ord a => [a] -> [a]" onClick={props.onExampleClick} />
+            <ClickableExample query="Data.Set.insert" onClick={props.onExampleClick} />
+            <ClickableExample query="+bytestring concat" onClick={props.onExampleClick} />
+          </div>
+        </div>
+
+        <div className={s.helpSection}>
+          <div className={s.helpSectionHeader}>
+            Search Packages
+          </div>
+          <div className={s.helpExamples}>
+            <ClickableExample query=":p" onClick={props.onExampleClick} />
+            <ClickableExample query=":p servant" onClick={props.onExampleClick} />
+          </div>
+        </div>
+
+        <div className={s.helpSection}>
+          <div className={s.helpSectionHeader}>
+            Filter Recent Queries
+          </div>
+          <div className={s.helpExamples}>
+            <ClickableExample query=":r" onClick={props.onExampleClick} />
+            <ClickableExample query=":r ser" onClick={props.onExampleClick} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ClickableExample = (props: { query: string, onClick: (query: string) => void }) => {
+  return (
+    <div className={s.clickableExample}>
+      <code className="hljs" onClick={() => props.onClick(props.query)}>
+        {props.query}
+      </code>
     </div>
   );
 }

styles/globals.css

@@ -36,6 +36,10 @@ body {
   min-height: 100vh;
 }
 
+body {
+  font-size: 16rem;
+}
+
 a {
   color: var(--purple-color-2);
   text-decoration: none;
@@ -57,9 +61,6 @@ pre {
 
 code.hljs,
 pre.hljs {
-  background-color: var(
-    --purple-color-1
-  ) !important; /* important! here is to override highlight.js theme styles */
   border-radius: 4rem;
   padding: 1rem 6rem;
   font-size: 14rem;
@@ -78,7 +79,6 @@ hr {
   width: 100%;
   max-width: var(--max-content-width);
   height: 4rem;
-  background-color: var(--surface-color);
   border: none;
   border-radius: 4rem;
 }