Skip to content

Commit 06bdd17

Browse files
konstantinbrazhnikkonstantinbrazhnik
committed
Adds simple http-server
0 parents  commit 06bdd17

8 files changed

+142
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
variables.js

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20.10.0

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Yoko Front End JS Test - Algolia Map Facet
2+
3+
[View Instructions Here](https://docs.google.com/document/d/1O0uopr_JcNxsDhXTkEaMYuzZYC5wyMi7J8QY2eduZ20/edit?usp=sharing)
4+
5+
## Setup Instructions
6+
7+
1. Copy the `variables-sample.js` file to `variables.js` and add the credentials passed to you.

‎index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<html>
2+
<head>
3+
<title>Yoko Algolia Custom Map Widget Test</title>
4+
5+
<!-- Include Stylesheet -->
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
8+
<!-- Include Algolia InstantSearch.js -->
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-pxkGFjfnFWYGOtV9uhCWK/spKiGS0Z7gVDKYm39LyfM=" crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-5u4a3JbgF+Ok/p1R8e9iF4nWi4Qs8O1b89pc+8p1UB4=" crossorigin="anonymous"></script>
11+
12+
</head>
13+
<body>
14+
15+
<div id="algolia-search">
16+
<!-- Map -->
17+
<div id="map">Add Map Here</div>
18+
19+
<div class="results-and-facets" style="display: flex;">
20+
<!-- Facets -->
21+
<div id="facets" style="max-width: 300px; width: 33.333333%;">
22+
<div id="searchbox"></div>
23+
</div>
24+
<!-- Search Results -->
25+
<div id="hits" style="flex: 1;"></div>
26+
</div>
27+
</div>
28+
29+
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
30+
({key: "AIzaSyCbsO0xDChxG5oLq5vIh77EFrOZ6QGgTv0", v: "weekly"});</script>
31+
32+
<!-- Include Our Script.js -->
33+
<script src="variables.js"></script>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "yoko-algolia-map-test",
3+
"version": "1.0.0",
4+
"description": "[View Instructions Here](https://docs.google.com/document/d/1O0uopr_JcNxsDhXTkEaMYuzZYC5wyMi7J8QY2eduZ20/edit?usp=sharing)",
5+
"scripts": {
6+
"start": "npx http-server -p 8080 ./ -o /index.html"
7+
},
8+
"author": "Yoko Co",
9+
"license": "ISC"
10+
}

‎script.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
3+
function init( appId, apiKey, index) {
4+
// Get Algolia App ID from env
5+
const ALGOLIA_APP_ID = appId;
6+
7+
// Get Aloglia API Key from env
8+
const ALGOLIA_API_KEY = apiKey;
9+
10+
// Get Algolia Index from env
11+
const ALGOLIA_INDEX = index;
12+
13+
// Initialize InstantSearch
14+
const search = instantsearch({
15+
indexName: ALGOLIA_INDEX,
16+
searchClient: algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY),
17+
});
18+
19+
// Add search box
20+
search.addWidgets([
21+
instantsearch.widgets.searchBox({
22+
container: '#searchbox',
23+
placeholder: 'Search for Engineers',
24+
}),
25+
]);
26+
27+
// Add hits widget
28+
search.addWidgets([
29+
instantsearch.widgets.hits({
30+
container: '#hits',
31+
templates: {
32+
item: `
33+
<div>
34+
<h3>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h3>
35+
</div>
36+
`,
37+
},
38+
}),
39+
]);
40+
41+
search.start();
42+
};
43+
44+
// On Document Ready with Vanilla JS
45+
document.addEventListener('DOMContentLoaded', function() {
46+
try {
47+
// Get variables from env.
48+
const appId = ALGOLIA_APP_ID;
49+
const apiKey = ALGOLIA_API_KEY;
50+
const index = ALGOLIA_INDEX;
51+
52+
// Initialize InstantSearch
53+
init(appId, apiKey, index);
54+
} catch (error) {
55+
console.error('Error:', error);
56+
}
57+
});

‎style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
}
6+
7+
#algolia-search {
8+
width: 100%;
9+
max-width: 767px;
10+
margin: auto;
11+
}
12+
13+
.ais-GeoSearch-map, #map {
14+
height: 300px; /* You can change this height */
15+
margin-bottom: 2rem;
16+
}
17+
18+
#map:not(.ais-GeoSearch-map) {
19+
text-align: center;
20+
border: 10px dashed gray;
21+
display: flex;
22+
align-content: center;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+

‎variables-sample.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// All Algolia Variables
2+
const ALGOLIA_APP_ID = '';
3+
const ALGOLIA_API_KEY = '';
4+
const ALGOLIA_INDEX = '';

0 commit comments

Comments
 (0)