feat: integrate onboarding data and demos (#473)

---------

Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>

README.md

@@ -1,9 +1,17 @@
 # doc-code-samples
 
-This repository goal is to hold all code examples shown on the [Algolia.com documentation website](https://algolia.com/doc).
+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/).
 
-For now it holds the InstantSearch code samples, which are runnable via [CodeSandbox](https://codesandbox.io/).
+## InstantSearch code samples
+
+All code samples in InstantSearch guides that run on [CodeSandbox](https://codesandbox.io/). The full list is available [here](https://instantsearch-templates.netlify.com).
+
+## Interactive onboarding
+
+Datasets and code samples for the [Algolia interactive onboarding](https://algolia.com/doc/onboarding) are located in the `/onboarding` directory.
+
+| E-commerce                                                   | Geo                                                          | Media                                                        | Saas                                                         |
+| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| [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) |
 
-Since there are many links to go to manually via GitHub, here's a little online list which shows them all: 
 
-- https://instantsearch-templates.netlify.com

onboarding/.gitattributes

@@ -0,0 +1,2 @@
+demos/* linguist-documentation=false
+

onboarding/.gitignore

@@ -0,0 +1,9 @@
+.idea/
+.DS_Store
+node_modules/
+npm-debug.log
+package-lock.json
+yarn-error.log
+dist
+.cache
+.vscode

onboarding/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

onboarding/demos/angular/ecommerce/.npmignore

@@ -0,0 +1,5 @@
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+dist/

onboarding/demos/angular/ecommerce/README.md

@@ -0,0 +1,19 @@
+# angular-is-demo-saas
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```

onboarding/demos/angular/ecommerce/angular.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-is-demo-saas": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-is-demo-saas",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.png",
+              "src/assets"
+            ],
+            "styles": [
+              "node_modules/angular-instantsearch/bundles/instantsearch.min.css",
+              "node_modules/nouislider/distribute/nouislider.min.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-is-demo-saas:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-is-demo-saas:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-is-demo-saas:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.png",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular-is-demo-saas-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular-is-demo-saas:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angular-is-demo-saas:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-is-demo-saas"
+}

onboarding/demos/angular/ecommerce/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "algolia-instantsearch-angular-ecommerce",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 3000",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "dependencies": {
+    "@angular/animations": "6.0.3",
+    "@angular/common": "6.0.3",
+    "@angular/compiler": "6.0.3",
+    "@angular/core": "6.0.3",
+    "@angular/forms": "6.0.3",
+    "@angular/http": "6.0.3",
+    "@angular/platform-browser": "6.0.3",
+    "@angular/platform-browser-dynamic": "6.0.3",
+    "@angular/router": "6.0.3",
+    "angular-instantsearch": "2.2.2",
+    "core-js": "2.6.11",
+    "rxjs": "6.2.0",
+    "zone.js": "0.8.28"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "0.12.2",
+    "@angular/cli": "6.2.9",
+    "@angular/compiler-cli": "6.0.3",
+    "@angular/language-service": "6.0.3",
+    "@types/jasmine": "2.8.15",
+    "@types/jasminewd2": "2.0.6",
+    "@types/node": "8.10.59",
+    "codelyzer": "4.2.1",
+    "jasmine-core": "2.99.1",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "2.1.1",
+    "karma-jasmine": "1.1.2",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.4.2",
+    "ts-node": "5.0.1",
+    "tslint": "5.12.1",
+    "typescript": "2.7.2"
+  }
+}

onboarding/demos/angular/ecommerce/src/app/app.component.css

@@ -0,0 +1,49 @@
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #c3002f, #dd0031);
+  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;
+}
+
+.container-app {
+  display: grid;
+  grid-template-columns: 20% 75%;
+  grid-gap: 5%;
+}
+
+.searchBox {
+  margin-bottom: 2rem;
+}
+
+.pagination {
+  margin: 2rem auto;
+  text-align: center;
+}

onboarding/demos/angular/ecommerce/src/app/app.component.html

@@ -0,0 +1,90 @@
+<ais-instantsearch [config]="config">
+  <main class="search-container">
+    <div class="right-panel">
+      <div id="hits">
+        <!-- Uncomment the following widget to add hits list -->
+        <!-- <ais-hits>
+          <ng-template let-hits="hits" let-results="results">
+            <div *ngIf="hits.length === 0">
+              No results found for
+              <strong>{{results.query}}</strong>.
+            </div>
+            <div class="ais-hits" *ngFor="let hit of hits">
+              <div class="hit">
+                <div class="hit-image">
+                  <img src="{{hit.image}}" />
+                </div>
+                <div class="hit-content">
+                  <div>
+                    <div class="hit-name">
+                      <ais-highlight attribute="name" [hit]="hit">
+                      </ais-highlight>
+                    </div>
+                    <div class="hit-description">
+                      <p [innerHTML]="hit._snippetResult.description.value"></p>
+                    </div>
+                  </div>
+                  <div class="hit-price">${{hit.price}}</div>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </ais-hits> -->
+      </div>
+      <div id="searchbox">
+        <!-- Uncomment the following widget to add a search bar -->
+        <!-- <ais-search-box placeholder="Search for products"></ais-search-box> -->
+      </div>
+      <div id="stats">
+        <!-- Uncomment the following widget to add search stats -->
+        <!-- <ais-stats>
+          <ng-template let-state="state">
+            <div *ngIf="state.nbHits > 0">
+              <span role="img" aria-label="emoji">⚡️</span>
+              <strong>{{state.nbHits}}</strong>
+              results found
+              <span *ngIf="state.query.trim().length > 0">
+                for
+                <strong>"{{state.query.trim()}}"</strong>
+              </span>
+              in
+              <strong>{{state.processingTimeMS}}ms</strong>
+            </div>
+          </ng-template>
+        </ais-stats> -->
+      </div>
+      <div id="pagination">
+        <!-- Uncomment the following widget to add pagination -->
+        <!-- <ais-pagination></ais-pagination> -->
+      </div>
+    </div>
+    <div class="left-panel">
+      <div id="categories">
+        <!-- Uncomment the following widget to add categories list -->
+        <!-- <ais-panel header="Categories">
+          <ais-refinement-list attribute="categories">
+          </ais-refinement-list>
+        </ais-panel> -->
+      </div>
+      <div id="brands">
+        <!-- Uncomment the following widget to add brands list -->
+        <!-- <ais-panel header="Brands">
+          <ais-refinement-list attribute="brand" searchable="true" searchPlaceholder="Search for other...">
+          </ais-refinement-list>
+        </ais-panel> -->
+      </div>
+      <div id="price">
+        <!-- Uncomment the following widget to add price -->
+        <!-- <ais-panel header="Price">
+          <ais-range-slider attribute="price" pips="false">
+          </ais-range-slider>
+        </ais-panel> -->
+      </div>
+    </div>
+  </main>
+</ais-instantsearch>
+<footer>
+  Source Code on
+  <a href="https://github.com/algolia/doc-onboarding">GitHub</a> | Powered by
+  <a href="https://www.algolia.com">Algolia</a>
+</footer>