mirror of
https://github.com/visortelle/haskell-spotlight.git
synced 2024-09-11 03:55:54 +03:00
Improve input search help. Change code color scheme.
This commit is contained in:
parent
7b4b9027be
commit
ba4b07f84a
@ -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.
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
5
browser-extension/package-lock.json
generated
5
browser-extension/package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
|
@ -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 <>
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
.PHONY: dev
|
||||
dev: ## Start development.
|
||||
npm run dev
|
||||
npm link && npm run dev
|
||||
|
||||
.PHONY: build
|
||||
build: ## Build the project.
|
||||
|
@ -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 => {
|
||||
|
@ -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);
|
||||
|
@ -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 -> 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>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user