diff --git a/examples/react/getting-started/index.html b/examples/react/getting-started/index.html index 0c360b898a..4f864804d6 100644 --- a/examples/react/getting-started/index.html +++ b/examples/react/getting-started/index.html @@ -18,6 +18,10 @@ href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css" /> + + + + React InstantSearch — Getting started diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css index 3dc8bd058a..28f0782152 100644 --- a/examples/react/getting-started/src/App.css +++ b/examples/react/getting-started/src/App.css @@ -113,3 +113,36 @@ em { height: 100%; justify-content: space-between; } + +.ais-Hits-item img { + width: 100%; + height: 100px; + object-fit: contain; + margin: 1.2rem 0; +} + +.ais-Hits-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; +} + +.ais-Hits-item { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + align-items: center; + text-align: center; +} + +.ais-Hits-item img { + width: 100%; + height: 100px; + object-fit: contain; + margin: 1.2rem 0; +} + +.ais-Hits-item a { + font-size: 1.2rem; +} diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx index 2d55e4b9cb..dcafce7044 100644 --- a/examples/react/getting-started/src/App.tsx +++ b/examples/react/getting-started/src/App.tsx @@ -1,26 +1,7 @@ -import algoliasearch from 'algoliasearch/lite'; -import { Hit } from 'instantsearch.js'; import React from 'react'; -import { - Configure, - Highlight, - Hits, - InstantSearch, - Pagination, - RefinementList, - SearchBox, - TrendingItems, -} from 'react-instantsearch'; - -import { Panel } from './Panel'; import './App.css'; -const searchClient = algoliasearch( - 'latency', - '6be0576ff61c053d5f9a3225e2a90f76' -); - export function App() { return (
@@ -37,67 +18,8 @@ export function App() {
- - -
-
- - - -
- -
- - - -
- -
-
- -
-
-
-
+
); } - -type HitType = Hit<{ - image: string; - name: string; - description: string; -}>; - -function HitComponent({ hit }: { hit: HitType }) { - return ( -
-

- - - -

-

- -

- See product -
- ); -} - -function ItemComponent({ item }: { item: Hit }) { - return ( -
-
- -

{item.name}

-
- See product -
- ); -} diff --git a/packages/instantsearch.js/src/index.ts b/packages/instantsearch.js/src/index.ts index 38919692b6..17bc1f9766 100644 --- a/packages/instantsearch.js/src/index.ts +++ b/packages/instantsearch.js/src/index.ts @@ -1,3 +1,5 @@ +import algoliasearch from 'algoliasearch'; + import * as connectors from './connectors/index'; import * as helpers from './helpers/index'; import { createInfiniteHitsSessionStorageCache } from './lib/infiniteHitsCache/index'; @@ -77,4 +79,39 @@ instantsearch.snippet = helpers.snippet; instantsearch.reverseSnippet = helpers.reverseSnippet; instantsearch.insights = helpers.insights; +const config = { + appId: (document.querySelector('meta[name="appId"]') as HTMLMetaElement) + .content, + apiKey: (document.querySelector('meta[name="apiKey"]') as HTMLMetaElement) + .content, +}; + +const searchClient = algoliasearch(config.appId, config.apiKey); +const search = instantsearch({ + // This is hardcoded for the purpose of the PoC, wouldn't be in a real bundle + indexName: 'fx_hackathon_24_bm_products', + searchClient, +}); + +const observer = new MutationObserver(() => { + const block = document.getElementById('block'); + + if (!block) { + return; + } + + observer.disconnect(); + search.addWidgets([ + // @ts-ignore + // Path is hardcoded for the purpose of the PoC as well + widgets.page({ container: block, path: 'excellent-apple.html' }), + ]); + search.start(); +}); + +observer.observe(document.documentElement, { + childList: true, + subtree: true, +}); + export default instantsearch;