Skip to content

Commit 1e5f429

Browse files
dhayabdhayab
committed
migrate renderState guide demo
1 parent a35f110 commit 1e5f429

File tree

13 files changed

+2740
-0
lines changed

13 files changed

+2740
-0
lines changed

‎instantsearch.js/render-state/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎instantsearch.js/render-state/.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
/dist
3+
/.cache

‎instantsearch.js/render-state/.eslintrc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: 'algolia',
3+
};

‎instantsearch.js/render-state/.gitignore

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/dist
11+
/.cache
12+
13+
# misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎instantsearch.js/render-state/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"proseWrap": "never",
4+
"trailingComma": "es5"
5+
}

‎instantsearch.js/render-state/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# render-state
2+
3+
[![Edit render-state](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/instantsearch.js/render-state)
4+
5+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app) by [Algolia](https://algolia.com)._
6+
7+
## Get started
8+
9+
To run this project locally, install the dependencies and run the local server:
10+
11+
```sh
12+
npm install
13+
npm start
14+
```
15+
16+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
17+
18+
```sh
19+
yarn
20+
yarn start
21+
```
22+
23+
Open http://localhost:3000 to see your app.

‎instantsearch.js/render-state/favicon.png

906 Bytes
Loading

‎instantsearch.js/render-state/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
11+
<link rel="shortcut icon" href="./favicon.png" />
12+
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
16+
/>
17+
<link rel="stylesheet" href="./src/index.css" />
18+
<link rel="stylesheet" href="./src/app.css" />
19+
20+
<title>render-state</title>
21+
</head>
22+
23+
<body>
24+
<header class="header">
25+
<h1 class="header-title">
26+
<a href="/">render-state</a>
27+
</h1>
28+
<p class="header-subtitle">
29+
using
30+
<a
31+
href="https://github.com/algolia/instantsearch/tree/master/packages/instantsearch.js"
32+
>
33+
InstantSearch.js
34+
</a>
35+
</p>
36+
</header>
37+
38+
<div class="container">
39+
<div class="search-panel">
40+
<div class="search-panel__filters">
41+
<div id="brand"></div>
42+
<div id="categories"></div>
43+
<p class="desc">
44+
Categories menu disappears when there is no result.
45+
</p>
46+
</div>
47+
48+
<div class="search-panel__results">
49+
<div id="searchbox"></div>
50+
<div id="current-refinements"></div>
51+
<button type="button" id="predefined-search-button" class="button">
52+
Search products in "Pear" brand
53+
</button>
54+
<div id="empty-hits"></div>
55+
<div id="hits"></div>
56+
57+
<div id="pagination"></div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<script type="module" src="./src/app.js"></script>
63+
</body>
64+
</html>

‎instantsearch.js/render-state/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "render-state",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "parcel index.html --port 3000",
7+
"build": "parcel build index.html",
8+
"lint": "eslint . && prettier --check .",
9+
"lint:fix": "eslint . --fix && prettier --write ."
10+
},
11+
"devDependencies": {
12+
"eslint": "8.15.0",
13+
"parcel": "2.0.1",
14+
"prettier": "2.6.2"
15+
},
16+
"dependencies": {
17+
"algoliasearch": "4",
18+
"instantsearch.js": "4.63.1"
19+
}
20+
}

‎instantsearch.js/render-state/src/app.css

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
.header {
2+
display: flex;
3+
align-items: center;
4+
min-height: 50px;
5+
padding: 0.5rem 1rem;
6+
background-image: linear-gradient(284deg, #fedd4e, #fcb43a);
7+
color: #fff;
8+
margin-bottom: 1rem;
9+
}
10+
11+
.header a {
12+
color: #fff;
13+
text-decoration: none;
14+
}
15+
16+
.header-title {
17+
font-size: 1.2rem;
18+
font-weight: normal;
19+
}
20+
21+
.header-title::after {
22+
content: ' ▸ ';
23+
padding: 0 0.5rem;
24+
}
25+
26+
.header-subtitle {
27+
font-size: 1.2rem;
28+
}
29+
30+
.container {
31+
max-width: 1200px;
32+
margin: 0 auto;
33+
padding: 1rem;
34+
}
35+
36+
.search-panel {
37+
display: flex;
38+
}
39+
40+
.search-panel__filters {
41+
flex: 1;
42+
}
43+
44+
.search-panel__results {
45+
flex: 3;
46+
}
47+
48+
.ais-Highlight-highlighted {
49+
color: inherit;
50+
font-size: inherit;
51+
}
52+
53+
#pagination {
54+
margin: 2rem auto;
55+
text-align: center;
56+
}
57+
58+
.ais-CurrentRefinements {
59+
margin-top: 1rem;
60+
}
61+
62+
.ais-CurrentRefinements--noRefinement {
63+
display: none;
64+
}
65+
66+
#predefined-search-button {
67+
margin: 1rem 0;
68+
width: 100%;
69+
}
70+
71+
.button {
72+
-webkit-appearance: none;
73+
-moz-appearance: none;
74+
appearance: none;
75+
background-color: #fff;
76+
background-image: -webkit-gradient(
77+
linear,
78+
left top,
79+
left bottom,
80+
from(#fff),
81+
to(#fcfcfd)
82+
);
83+
background-image: linear-gradient(-180deg, #fff, #fcfcfd);
84+
border: 1px solid #d6d6e7;
85+
border-radius: 3px;
86+
-webkit-box-shadow: 0 1px 0 0 rgba(35, 38, 59, 0.05);
87+
box-shadow: 0 1px 0 0 rgba(35, 38, 59, 0.05);
88+
color: #23263b;
89+
cursor: pointer;
90+
display: -webkit-inline-box;
91+
display: -ms-inline-flexbox;
92+
display: inline-flex;
93+
font-size: 0.875rem;
94+
font-weight: 400;
95+
height: 2rem;
96+
-webkit-box-pack: center;
97+
-ms-flex-pack: center;
98+
justify-content: center;
99+
line-height: 1.25rem;
100+
padding: 0 1rem;
101+
place-items: center;
102+
text-decoration: none;
103+
-webkit-user-select: none;
104+
-moz-user-select: none;
105+
-ms-user-select: none;
106+
user-select: none;
107+
}
108+
109+
.button:hover {
110+
background-image: -webkit-gradient(
111+
linear,
112+
left top,
113+
left bottom,
114+
from(#fff),
115+
to(#f5f5fa)
116+
);
117+
background-image: linear-gradient(-180deg, #fff, #f5f5fa);
118+
border-color: #d6d6e7;
119+
}
120+
121+
.button:focus {
122+
background-image: -webkit-gradient(
123+
linear,
124+
left top,
125+
left bottom,
126+
from(#fff),
127+
to(#f5f5fa)
128+
);
129+
background-image: linear-gradient(-180deg, #fff, #f5f5fa);
130+
border-color: #3c4fe0;
131+
-webkit-box-shadow: #3c4fe0 0 0 0 1px, rgba(35, 38, 59, 0.05) 0 2px 0 1px;
132+
box-shadow: #3c4fe0 0 0 0 1px, rgba(35, 38, 59, 0.05) 0 2px 0 1px;
133+
outline: currentcolor none medium;
134+
}
135+
136+
.button:active {
137+
border-color: #d6d6e7;
138+
-webkit-box-shadow: rgba(119, 122, 175, 0.4) 0 1px 4px 0 inset,
139+
rgba(119, 122, 175, 0.4) 0 1px 1px 0 inset, rgba(35, 38, 59, 0.05) 0 1px 0 0;
140+
box-shadow: rgba(119, 122, 175, 0.4) 0 1px 4px 0 inset,
141+
rgba(119, 122, 175, 0.4) 0 1px 1px 0 inset, rgba(35, 38, 59, 0.05) 0 1px 0 0;
142+
}
143+
144+
#categories {
145+
margin-top: 2rem;
146+
}
147+
148+
.desc {
149+
font-size: 0.8rem;
150+
color: #666;
151+
}

0 commit comments

Comments
 (0)