Skip to content

Commit 52d1e47

Browse files
bidoubiwabidoubiwa
committed
Add angular playground
1 parent adf0d18 commit 52d1e47

19 files changed

+9352
-0
lines changed

‎playgrounds/angular/.browserslistrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR
17+
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

‎playgrounds/angular/.gitignore‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎playgrounds/angular/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Angular Playground
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn start
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn build
16+
```
17+
18+
## Running end-to-end tests
19+
20+
```
21+
yarn e2e
22+
```
23+
24+
Run `yarn e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
25+

‎playgrounds/angular/angular.json‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/angular",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"aot": true,
22+
"assets": [
23+
"src/favicon.ico",
24+
"src/assets"
25+
],
26+
"styles": [
27+
"node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css",
28+
29+
"src/styles.css"
30+
],
31+
"scripts": []
32+
},
33+
"configurations": {
34+
"production": {
35+
"fileReplacements": [
36+
{
37+
"replace": "src/environments/environment.ts",
38+
"with": "src/environments/environment.prod.ts"
39+
}
40+
],
41+
"optimization": true,
42+
"extractCss": true,
43+
"outputHashing": "all",
44+
"sourceMap": false,
45+
"namedChunks": false,
46+
"extractLicenses": true,
47+
"vendorChunk": false,
48+
"buildOptimizer": true,
49+
"budgets": [
50+
{
51+
"type": "initial",
52+
"maximumWarning": "2mb",
53+
"maximumError": "5mb"
54+
},
55+
{
56+
"type": "anyComponentStyle",
57+
"maximumWarning": "6kb",
58+
"maximumError": "10kb"
59+
}
60+
]
61+
}
62+
}
63+
},
64+
"serve": {
65+
"builder": "@angular-devkit/build-angular:dev-server",
66+
"options": {
67+
"browserTarget": "angular:build"
68+
},
69+
"configurations": {
70+
"production": {
71+
"browserTarget": "angular:build:production"
72+
}
73+
}
74+
},
75+
"extract-i18n": {
76+
"builder": "@angular-devkit/build-angular:extract-i18n",
77+
"options": {
78+
"browserTarget": "angular:build"
79+
}
80+
},
81+
"e2e": {
82+
"builder": "@angular-devkit/build-angular:protractor",
83+
"options": {
84+
"protractorConfig": "e2e/protractor.conf.js",
85+
"devServerTarget": "angular:serve"
86+
},
87+
"configurations": {
88+
"production": {
89+
"devServerTarget": "angular:serve:production"
90+
}
91+
}
92+
}
93+
}
94+
}
95+
},
96+
"defaultProject": "angular"
97+
}

‎playgrounds/angular/package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "angular",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"e2e": "ng e2e"
9+
},
10+
"private": true,
11+
"dependencies": {
12+
"@angular/animations": "~11.1.2",
13+
"@angular/common": "~11.1.2",
14+
"@angular/compiler": "~11.1.2",
15+
"@angular/core": "~11.1.2",
16+
"@angular/forms": "~11.1.2",
17+
"@angular/platform-browser": "~11.1.2",
18+
"@angular/platform-browser-dynamic": "~11.1.2",
19+
"@angular/router": "~11.1.2",
20+
"angular-instantsearch": "^3.0.0-beta.5",
21+
"instantsearch.css": "^7.4.5",
22+
"instantsearch.js": "^4.14.0",
23+
"rxjs": "~6.6.0",
24+
"tslib": "^2.0.0",
25+
"zone.js": "~0.11.3"
26+
},
27+
"devDependencies": {
28+
"@angular-devkit/build-angular": "~0.1101.4",
29+
"@angular/cli": "~11.1.4",
30+
"@angular/compiler-cli": "~11.1.2",
31+
"@types/algoliasearch": "^3.34.11",
32+
"@types/algoliasearch-helper": "^2.26.1",
33+
"@types/jasmine": "~3.6.0",
34+
"@types/node": "^12.11.1",
35+
"jasmine-core": "~3.6.0",
36+
"jasmine-spec-reporter": "~5.0.0",
37+
"protractor": "~7.0.0",
38+
"ts-node": "~8.3.0",
39+
"typescript": "~4.1.2"
40+
}
41+
}

‎playgrounds/angular/src/app/app.component.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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, #f03774, #f03774);
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+
.searchbox {
49+
margin-bottom: 2rem;
50+
}
51+
52+
.pagination {
53+
margin: 2rem auto;
54+
text-align: center;
55+
}
56+
57+
.ais-Hits-item img {
58+
margin-bottom: 10px;
59+
max-width: 100%;
60+
}

‎playgrounds/angular/src/app/app.component.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<header class="header">
2+
<h1 class="header-title">MeiliSearch + Angular InstantSearch</h1>
3+
<p class="header-subtitle">Search in Steam video games 🎮</p>
4+
5+
</header>
6+
7+
<div class="container">
8+
<ais-instantsearch [config]="config">
9+
<div class="search-panel">
10+
<div class="search-panel__filters">
11+
<ais-clear-refinements></ais-clear-refinements>
12+
<ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
13+
<h2>Genres</h2>
14+
<ais-refinement-list attribute="genres" ></ais-refinement-list>
15+
<h2>Players</h2>
16+
<ais-refinement-list attribute="players" ></ais-refinement-list>
17+
<h2>Platforms</h2>
18+
<ais-refinement-list attribute="platforms" ></ais-refinement-list>
19+
<h2>Misc</h2>
20+
<ais-refinement-list attribute="misc" ></ais-refinement-list>
21+
</div>
22+
23+
<div class="search-panel__results">
24+
<div class="searchbox">
25+
<ais-search-box placeholder=""></ais-search-box>
26+
</div>
27+
28+
<ais-hits>
29+
<ng-template let-hits="hits">
30+
<div *ngIf="hits.length === 0">
31+
No results found matching <strong></strong>.
32+
</div>
33+
<ol class="ais-Hits-list">
34+
<li *ngFor="let hit of hits" class="ais-Hits-item">
35+
<img src="{{hit.image}}" alt="{{hit.name}}" align="left" />
36+
<div class="hit-name">
37+
<ais-highlight attribute="name" [hit]="hit"></ais-highlight>
38+
</div>
39+
<div class="hit-description">
40+
<ais-highlight attribute="description" [hit]="hit"></ais-highlight>
41+
</div>
42+
<div class="hit-price">${{hit.price}}</div>
43+
</li>
44+
</ol>
45+
</ng-template>
46+
</ais-hits>
47+
48+
<div class="pagination">
49+
<ais-pagination></ais-pagination>
50+
</div>
51+
</div>
52+
53+
</div>
54+
</ais-instantsearch>
55+
</div>

‎playgrounds/angular/src/app/app.component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component } from '@angular/core'
2+
import { instantMeiliSearch } from '../../../../src'
3+
4+
const searchClient = instantMeiliSearch(
5+
'https://demos.meilisearch.com',
6+
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
7+
)
8+
9+
@Component({
10+
selector: 'app-root',
11+
templateUrl: './app.component.html',
12+
styleUrls: ['./app.component.css'],
13+
})
14+
export class AppComponent {
15+
title = 'angular-app'
16+
config = {
17+
indexName: 'steam-video-games',
18+
searchClient,
19+
// searchFunction: (_) => {},
20+
}
21+
}

‎playgrounds/angular/src/app/app.module.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { NgAisModule } from 'angular-instantsearch'
4+
5+
import { AppComponent } from './app.component'
6+
7+
@NgModule({
8+
declarations: [AppComponent],
9+
imports: [BrowserModule, NgAisModule.forRoot()],
10+
providers: [],
11+
bootstrap: [AppComponent],
12+
})
13+
export class AppModule {}

‎playgrounds/angular/src/environments/environment.prod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true,
3+
}

0 commit comments

Comments
 (0)