Skip to content

Commit 964ef5d

Browse files
dhayabsarahdayan
dhayab
and
sarahdayan
authored
feat: integrate onboarding data and demos (#473)
 --------- Co-authored-by: Sarah Dayan <[email protected]>
1 parent a8e43ed commit 964ef5d

File tree

267 files changed

+84400
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

267 files changed

+84400
-4
lines changed

Diff for: ‎README.md

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
# doc-code-samples
22

3-
This repository goal is to hold all code examples shown on the [Algolia.com documentation website](https://algolia.com/doc).
3+
This repository holds code examples shown on the [Algolia.com documentation website](https://algolia.com/doc) that can be run in [CodeSandbox](https://codesandbox.io/).
44

5-
For now it holds the InstantSearch code samples, which are runnable via [CodeSandbox](https://codesandbox.io/).
5+
## InstantSearch code samples
6+
7+
All code samples in InstantSearch guides that run on [CodeSandbox](https://codesandbox.io/). The full list is available [here](https://instantsearch-templates.netlify.com).
8+
9+
## Interactive onboarding
10+
11+
Datasets and code samples for the [Algolia interactive onboarding](https://algolia.com/doc/onboarding) are located in the `/onboarding` directory.
12+
13+
| E-commerce | Geo | Media | Saas |
14+
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
15+
| [InstantSearch.js](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/instantsearchjs/ecommerce)<br />[React InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/react/ecommerce)<br />[Vue InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/vue/ecommerce)<br />[Angular InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/angular/ecommerce) | [InstantSearch.js](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/instantsearchjs/geo)<br />[React InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/react/geo)<br />[Vue InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/vue/geo)<br />[Angular InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/angular/geo) | [InstantSearch.js](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/instantsearchjs/media)<br />[React InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/react/media)<br />[Vue InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/vue/media)<br />[Angular InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/angular/media) | [InstantSearch.js](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/instantsearchjs/saas)<br />[React InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/react/saas)<br />[Vue InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/vue/saas)<br />[Angular InstantSearch](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/onboarding/demos/angular/saas) |
616

7-
Since there are many links to go to manually via GitHub, here's a little online list which shows them all:
817

9-
- https://instantsearch-templates.netlify.com

Diff for: ‎onboarding/.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
demos/* linguist-documentation=false
2+

Diff for: ‎onboarding/.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.idea/
2+
.DS_Store
3+
node_modules/
4+
npm-debug.log
5+
package-lock.json
6+
yarn-error.log
7+
dist
8+
.cache
9+
.vscode

Diff for: ‎onboarding/.prettierrc.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true
4+
}

Diff for: ‎onboarding/datasets/ecommerce.json

+1
Large diffs are not rendered by default.

Diff for: ‎onboarding/datasets/geo.json

+1
Large diffs are not rendered by default.

Diff for: ‎onboarding/datasets/media.json

+1
Large diffs are not rendered by default.

Diff for: ‎onboarding/datasets/saas.json

+1
Large diffs are not rendered by default.

Diff for: ‎onboarding/demos/angular/ecommerce/.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
npm-debug.log
3+
yarn-debug.log
4+
yarn-error.log
5+
dist/

Diff for: ‎onboarding/demos/angular/ecommerce/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# angular-is-demo-saas
2+
3+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
4+
5+
## Get started
6+
7+
To run this project locally, install the dependencies and run the local server:
8+
9+
```sh
10+
npm install
11+
npm start
12+
```
13+
14+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
15+
16+
```sh
17+
yarn
18+
yarn start
19+
```

Diff for: ‎onboarding/demos/angular/ecommerce/angular.json

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-is-demo-saas": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {},
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/angular-is-demo-saas",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "src/tsconfig.app.json",
21+
"assets": [
22+
"src/favicon.png",
23+
"src/assets"
24+
],
25+
"styles": [
26+
"node_modules/angular-instantsearch/bundles/instantsearch.min.css",
27+
"node_modules/nouislider/distribute/nouislider.min.css",
28+
"src/styles.css"
29+
],
30+
"scripts": []
31+
},
32+
"configurations": {
33+
"production": {
34+
"fileReplacements": [
35+
{
36+
"replace": "src/environments/environment.ts",
37+
"with": "src/environments/environment.prod.ts"
38+
}
39+
],
40+
"optimization": true,
41+
"outputHashing": "all",
42+
"sourceMap": false,
43+
"extractCss": true,
44+
"namedChunks": false,
45+
"aot": true,
46+
"extractLicenses": true,
47+
"vendorChunk": false,
48+
"buildOptimizer": true
49+
}
50+
}
51+
},
52+
"serve": {
53+
"builder": "@angular-devkit/build-angular:dev-server",
54+
"options": {
55+
"browserTarget": "angular-is-demo-saas:build"
56+
},
57+
"configurations": {
58+
"production": {
59+
"browserTarget": "angular-is-demo-saas:build:production"
60+
}
61+
}
62+
},
63+
"extract-i18n": {
64+
"builder": "@angular-devkit/build-angular:extract-i18n",
65+
"options": {
66+
"browserTarget": "angular-is-demo-saas:build"
67+
}
68+
},
69+
"test": {
70+
"builder": "@angular-devkit/build-angular:karma",
71+
"options": {
72+
"main": "src/test.ts",
73+
"polyfills": "src/polyfills.ts",
74+
"tsConfig": "src/tsconfig.spec.json",
75+
"karmaConfig": "src/karma.conf.js",
76+
"styles": [
77+
"src/styles.css"
78+
],
79+
"scripts": [],
80+
"assets": [
81+
"src/favicon.png",
82+
"src/assets"
83+
]
84+
}
85+
},
86+
"lint": {
87+
"builder": "@angular-devkit/build-angular:tslint",
88+
"options": {
89+
"tsConfig": [
90+
"src/tsconfig.app.json",
91+
"src/tsconfig.spec.json"
92+
],
93+
"exclude": [
94+
"**/node_modules/**"
95+
]
96+
}
97+
}
98+
}
99+
},
100+
"angular-is-demo-saas-e2e": {
101+
"root": "e2e/",
102+
"projectType": "application",
103+
"architect": {
104+
"e2e": {
105+
"builder": "@angular-devkit/build-angular:protractor",
106+
"options": {
107+
"protractorConfig": "e2e/protractor.conf.js",
108+
"devServerTarget": "angular-is-demo-saas:serve"
109+
},
110+
"configurations": {
111+
"production": {
112+
"devServerTarget": "angular-is-demo-saas:serve:production"
113+
}
114+
}
115+
},
116+
"lint": {
117+
"builder": "@angular-devkit/build-angular:tslint",
118+
"options": {
119+
"tsConfig": "e2e/tsconfig.e2e.json",
120+
"exclude": [
121+
"**/node_modules/**"
122+
]
123+
}
124+
}
125+
}
126+
}
127+
},
128+
"defaultProject": "angular-is-demo-saas"
129+
}

Diff for: ‎onboarding/demos/angular/ecommerce/package.json

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "algolia-instantsearch-angular-ecommerce",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"ng": "ng",
7+
"start": "ng serve --port 3000",
8+
"build": "ng build",
9+
"test": "ng test",
10+
"lint": "ng lint",
11+
"e2e": "ng e2e"
12+
},
13+
"dependencies": {
14+
"@angular/animations": "6.0.3",
15+
"@angular/common": "6.0.3",
16+
"@angular/compiler": "6.0.3",
17+
"@angular/core": "6.0.3",
18+
"@angular/forms": "6.0.3",
19+
"@angular/http": "6.0.3",
20+
"@angular/platform-browser": "6.0.3",
21+
"@angular/platform-browser-dynamic": "6.0.3",
22+
"@angular/router": "6.0.3",
23+
"angular-instantsearch": "2.2.2",
24+
"core-js": "2.6.11",
25+
"rxjs": "6.2.0",
26+
"zone.js": "0.8.28"
27+
},
28+
"devDependencies": {
29+
"@angular-devkit/build-angular": "0.12.2",
30+
"@angular/cli": "6.2.9",
31+
"@angular/compiler-cli": "6.0.3",
32+
"@angular/language-service": "6.0.3",
33+
"@types/jasmine": "2.8.15",
34+
"@types/jasminewd2": "2.0.6",
35+
"@types/node": "8.10.59",
36+
"codelyzer": "4.2.1",
37+
"jasmine-core": "2.99.1",
38+
"jasmine-spec-reporter": "4.2.1",
39+
"karma": "1.7.1",
40+
"karma-chrome-launcher": "2.2.0",
41+
"karma-coverage-istanbul-reporter": "2.1.1",
42+
"karma-jasmine": "1.1.2",
43+
"karma-jasmine-html-reporter": "0.2.2",
44+
"protractor": "5.4.2",
45+
"ts-node": "5.0.1",
46+
"tslint": "5.12.1",
47+
"typescript": "2.7.2"
48+
}
49+
}

Diff for: ‎onboarding/demos/angular/ecommerce/src/app/app.component.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.header {
2+
display: flex;
3+
align-items: center;
4+
min-height: 50px;
5+
padding: 0.5rem 1rem;
6+
background-image: linear-gradient(to right, #c3002f, #dd0031);
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+
.container-app {
37+
display: grid;
38+
grid-template-columns: 20% 75%;
39+
grid-gap: 5%;
40+
}
41+
42+
.searchBox {
43+
margin-bottom: 2rem;
44+
}
45+
46+
.pagination {
47+
margin: 2rem auto;
48+
text-align: center;
49+
}

Diff for: ‎onboarding/demos/angular/ecommerce/src/app/app.component.html

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<ais-instantsearch [config]="config">
2+
<main class="search-container">
3+
<div class="right-panel">
4+
<div id="hits">
5+
<!-- Uncomment the following widget to add hits list -->
6+
<!-- <ais-hits>
7+
<ng-template let-hits="hits" let-results="results">
8+
<div *ngIf="hits.length === 0">
9+
No results found for
10+
<strong>{{results.query}}</strong>.
11+
</div>
12+
<div class="ais-hits" *ngFor="let hit of hits">
13+
<div class="hit">
14+
<div class="hit-image">
15+
<img src="{{hit.image}}" />
16+
</div>
17+
<div class="hit-content">
18+
<div>
19+
<div class="hit-name">
20+
<ais-highlight attribute="name" [hit]="hit">
21+
</ais-highlight>
22+
</div>
23+
<div class="hit-description">
24+
<p [innerHTML]="hit._snippetResult.description.value"></p>
25+
</div>
26+
</div>
27+
<div class="hit-price">${{hit.price}}</div>
28+
</div>
29+
</div>
30+
</div>
31+
</ng-template>
32+
</ais-hits> -->
33+
</div>
34+
<div id="searchbox">
35+
<!-- Uncomment the following widget to add a search bar -->
36+
<!-- <ais-search-box placeholder="Search for products"></ais-search-box> -->
37+
</div>
38+
<div id="stats">
39+
<!-- Uncomment the following widget to add search stats -->
40+
<!-- <ais-stats>
41+
<ng-template let-state="state">
42+
<div *ngIf="state.nbHits > 0">
43+
<span role="img" aria-label="emoji">⚡️</span>
44+
<strong>{{state.nbHits}}</strong>
45+
results found
46+
<span *ngIf="state.query.trim().length > 0">
47+
for
48+
<strong>"{{state.query.trim()}}"</strong>
49+
</span>
50+
in
51+
<strong>{{state.processingTimeMS}}ms</strong>
52+
</div>
53+
</ng-template>
54+
</ais-stats> -->
55+
</div>
56+
<div id="pagination">
57+
<!-- Uncomment the following widget to add pagination -->
58+
<!-- <ais-pagination></ais-pagination> -->
59+
</div>
60+
</div>
61+
<div class="left-panel">
62+
<div id="categories">
63+
<!-- Uncomment the following widget to add categories list -->
64+
<!-- <ais-panel header="Categories">
65+
<ais-refinement-list attribute="categories">
66+
</ais-refinement-list>
67+
</ais-panel> -->
68+
</div>
69+
<div id="brands">
70+
<!-- Uncomment the following widget to add brands list -->
71+
<!-- <ais-panel header="Brands">
72+
<ais-refinement-list attribute="brand" searchable="true" searchPlaceholder="Search for other...">
73+
</ais-refinement-list>
74+
</ais-panel> -->
75+
</div>
76+
<div id="price">
77+
<!-- Uncomment the following widget to add price -->
78+
<!-- <ais-panel header="Price">
79+
<ais-range-slider attribute="price" pips="false">
80+
</ais-range-slider>
81+
</ais-panel> -->
82+
</div>
83+
</div>
84+
</main>
85+
</ais-instantsearch>
86+
<footer>
87+
Source Code on
88+
<a href="https://github.com/algolia/doc-onboarding">GitHub</a> | Powered by
89+
<a href="https://www.algolia.com">Algolia</a>
90+
</footer>

0 commit comments

Comments
 (0)