-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(javascript): add browser playground with instantsearch (#3687)
- Loading branch information
Showing
14 changed files
with
4,349 additions
and
2,068 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta charset="utf-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| /> | ||
|
|
||
| <title>algoliasearch-client-javascript generated clients</title> | ||
| <link rel="shortcut icon" href="favicon.png" /> | ||
|
|
||
| <title>React InstantSearch — Getting started</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <h1>algoliasearch-client-javascript generated clients</h1> | ||
|
|
||
| <button id="search">Click to search!</button> | ||
| <noscript> You need to enable JavaScript to run this app. </noscript> | ||
|
|
||
| <div id="results"></div> | ||
| </div> | ||
| <div id="root"></div> | ||
|
|
||
| <script src="../../../clients/algoliasearch-client-javascript/packages/client-search/dist/client-search.umd.js"></script> | ||
| <script type="module" src="app.ts"></script> | ||
| <script type="module" src="src/index.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| /> | ||
|
|
||
| <link rel="shortcut icon" href="favicon.png" /> | ||
|
|
||
| <title>React InstantSearch — Getting started</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <noscript> You need to enable JavaScript to run this app. </noscript> | ||
|
|
||
| <div id="root"></div> | ||
|
|
||
| <script type="module" src="src/products.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| body, | ||
| h1 { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, | ||
| Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; | ||
| } | ||
|
|
||
| em { | ||
| background: cyan; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| min-height: 50px; | ||
| padding: 0.5rem 1rem; | ||
| background-image: linear-gradient(to right, #8e43e7, #00aeff); | ||
| color: #fff; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .header a { | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .header-title { | ||
| font-size: 1.2rem; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .header-title::after { | ||
| content: ' ▸ '; | ||
| padding: 0 0.5rem; | ||
| } | ||
|
|
||
| .header-subtitle { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .search-panel { | ||
| display: flex; | ||
| } | ||
|
|
||
| .search-panel__filters { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .search-panel__results { | ||
| flex: 3; | ||
| } | ||
|
|
||
| .searchbox { | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .pagination { | ||
| margin: 2rem auto; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #related-products, | ||
| .ais-Hits--single { | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
| .ais-Hits--single article { | ||
| display: flex; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .ais-Hits--single img { | ||
| width: 150px; | ||
| height: 150px; | ||
| object-fit: contain; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .ais-TrendingItems-item, | ||
| .ais-RelatedProducts-item { | ||
| background: none !important; | ||
| align-items: stretch !important; | ||
| padding: 0 !important; | ||
| box-shadow: none !important; | ||
| } | ||
|
|
||
| .ais-TrendingItems-item > div, | ||
| .ais-RelatedProducts-item > div { | ||
| align-items: start; | ||
| background: #fff; | ||
| align-items: center; | ||
| padding: 1.5rem; | ||
| display: flex; | ||
| box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26; | ||
| } | ||
|
|
||
| .ais-TrendingItems-item img, | ||
| .ais-RelatedProducts-item img { | ||
| width: 100%; | ||
| height: 100px; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| .ais-TrendingItems-item article, | ||
| .ais-RelatedProducts-item article { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .ais-TrendingItems-item h2, | ||
| .ais-RelatedProducts-item h2 { | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| line-height: 1.2; | ||
| } | ||
|
|
||
| .ais-Carousel-item { | ||
| padding: 0.5rem !important; | ||
| } | ||
|
|
||
| .ais-Carousel-list { | ||
| margin: -0.5rem !important; | ||
| grid-auto-columns: calc(22% - 0.5rem) !important; | ||
| } | ||
|
|
||
| .ais-Carousel::before, | ||
| .ais-Carousel::after { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| width: 0.5rem; | ||
| display: block; | ||
| background: rgb(255, 255, 255); | ||
| content: ''; | ||
| } | ||
|
|
||
| .ais-Carousel::before { | ||
| left: -0.5rem; | ||
| background: linear-gradient( | ||
| 90deg, | ||
| rgba(255, 255, 255, 1) 0%, | ||
| rgba(255, 255, 255, 0) 100% | ||
| ); | ||
| } | ||
|
|
||
| .ais-Carousel::after { | ||
| right: -0.5rem; | ||
| background: linear-gradient( | ||
| 90deg, | ||
| rgba(255, 255, 255, 0) 0%, | ||
| rgba(255, 255, 255, 1) 100% | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { liteClient as algoliasearch } from 'algoliasearch/lite'; | ||
| import { Hit } from 'instantsearch.js'; | ||
| import React from 'react'; | ||
| import { | ||
| Configure, | ||
| Highlight, | ||
| Hits, | ||
| InstantSearch, | ||
| Pagination, | ||
| RefinementList, | ||
| SearchBox, | ||
| TrendingItems, | ||
| Carousel, | ||
| } from 'react-instantsearch'; | ||
|
|
||
| import { Panel } from './Panel'; | ||
|
|
||
| import './App.css'; | ||
| import 'instantsearch.css/themes/satellite.css'; | ||
|
|
||
| const searchClient = algoliasearch( | ||
| 'latency', | ||
| '6be0576ff61c053d5f9a3225e2a90f76' | ||
| ); | ||
|
|
||
| export function App() { | ||
| return ( | ||
| <div> | ||
| <header className="header"> | ||
| <h1 className="header-title"> | ||
| <a href="/">Getting started</a> | ||
| </h1> | ||
| <p className="header-subtitle"> | ||
| using{' '} | ||
| <a href="https://github.com/algolia/instantsearch/tree/master/packages/react-instantsearch"> | ||
| React InstantSearch | ||
| </a> | ||
| </p> | ||
| </header> | ||
|
|
||
| <div className="container"> | ||
| <InstantSearch | ||
| searchClient={searchClient} | ||
| indexName="instant_search" | ||
| insights={true} | ||
| > | ||
| <Configure hitsPerPage={8} /> | ||
| <div className="search-panel"> | ||
| <div className="search-panel__filters"> | ||
| <Panel header="brand"> | ||
| <RefinementList attribute="brand" /> | ||
| </Panel> | ||
| </div> | ||
|
|
||
| <div className="search-panel__results"> | ||
| <SearchBox placeholder="" className="searchbox" /> | ||
| <Hits hitComponent={HitComponent} /> | ||
|
|
||
| <div className="pagination"> | ||
| <Pagination /> | ||
| </div> | ||
| <div> | ||
| <TrendingItems | ||
| itemComponent={ItemComponent} | ||
| limit={6} | ||
| layoutComponent={Carousel} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </InstantSearch> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| type HitType = Hit<{ | ||
| image: string; | ||
| name: string; | ||
| description: string; | ||
| }>; | ||
|
|
||
| function HitComponent({ hit }: { hit: HitType }) { | ||
| return ( | ||
| <article> | ||
| <h1> | ||
| <a href={`/products.html?pid=${hit.objectID}`}> | ||
| <Highlight attribute="name" hit={hit} /> | ||
| </a> | ||
| </h1> | ||
| <p> | ||
| <Highlight attribute="description" hit={hit} /> | ||
| </p> | ||
| <a href={`/products.html?pid=${hit.objectID}`}>See product</a> | ||
| </article> | ||
| ); | ||
| } | ||
|
|
||
| function ItemComponent({ item }: { item: Hit }) { | ||
| return ( | ||
| <div> | ||
| <article> | ||
| <div> | ||
| <img src={item.image} /> | ||
| <h2>{item.name}</h2> | ||
| </div> | ||
| <a href={`/products.html?pid=${item.objectID}`}>See product</a> | ||
| </article> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.