Adds simple http-server

Yoko-Co · Feb 22, 2024 · 06bdd17 · 06bdd17
commit 06bdd17
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+variables.js
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+20.10.0
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Yoko Front End JS Test - Algolia Map Facet
+
+[View Instructions Here](https://docs.google.com/document/d/1O0uopr_JcNxsDhXTkEaMYuzZYC5wyMi7J8QY2eduZ20/edit?usp=sharing)
+
+## Setup Instructions
+
+1. Copy the `variables-sample.js` file to `variables.js` and add the credentials passed to you.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<html>
+	<head>
+		<title>Yoko Algolia Custom Map Widget Test</title>
+
+		<!-- Include Stylesheet -->
+		<link rel="stylesheet" type="text/css" href="style.css">
+
+		<!-- Include Algolia InstantSearch.js -->
+		<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.22.1/dist/algoliasearch-lite.umd.js" integrity="sha256-pxkGFjfnFWYGOtV9uhCWK/spKiGS0Z7gVDKYm39LyfM=" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.65.0/dist/instantsearch.production.min.js" integrity="sha256-5u4a3JbgF+Ok/p1R8e9iF4nWi4Qs8O1b89pc+8p1UB4=" crossorigin="anonymous"></script>
+
+	</head>
+	<body>
+
+		<div id="algolia-search">
+			<!-- Map -->
+			<div id="map">Add Map Here</div>
+
+			<div class="results-and-facets" style="display: flex;">
+				<!-- Facets -->
+				<div id="facets" style="max-width: 300px; width: 33.333333%;">
+					<div id="searchbox"></div>
+				</div>
+				<!-- Search Results -->
+				<div id="hits" style="flex: 1;"></div>
+			</div>
+		</div>
+
+		<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))})
+			({key: "AIzaSyCbsO0xDChxG5oLq5vIh77EFrOZ6QGgTv0", v: "weekly"});</script>
+
+		<!-- Include Our Script.js -->
+		<script src="variables.js"></script>
+		<script src="script.js"></script>		
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "yoko-algolia-map-test",
+  "version": "1.0.0",
+  "description": "[View Instructions Here](https://docs.google.com/document/d/1O0uopr_JcNxsDhXTkEaMYuzZYC5wyMi7J8QY2eduZ20/edit?usp=sharing)",
+  "scripts": {
+	"start": "npx http-server -p 8080 ./ -o /index.html"
+  },
+  "author": "Yoko Co",
+  "license": "ISC"
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+
+
+function init( appId, apiKey, index) {
+	// Get Algolia App ID from env
+	const ALGOLIA_APP_ID = appId;
+
+	// Get Aloglia API Key from env
+	const ALGOLIA_API_KEY = apiKey;
+
+	// Get Algolia Index from env
+	const ALGOLIA_INDEX = index;
+
+	// Initialize InstantSearch
+	const search = instantsearch({
+		indexName: ALGOLIA_INDEX,
+		searchClient: algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY),
+	});
+
+	// Add search box
+	search.addWidgets([
+		instantsearch.widgets.searchBox({
+			container: '#searchbox',
+			placeholder: 'Search for Engineers',
+		}),
+	]);
+
+	// Add hits widget
+	search.addWidgets([
+		instantsearch.widgets.hits({
+			container: '#hits',
+			templates: {
+				item: `
+					<div>
+						<h3>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h3>
+					</div>
+				`,
+			},
+		}),
+	]);
+
+	search.start();
+};
+
+// On Document Ready with Vanilla JS
+document.addEventListener('DOMContentLoaded', function() {
+	try {
+		// Get variables from env.
+		const appId = ALGOLIA_APP_ID;
+		const apiKey = ALGOLIA_API_KEY;
+		const index = ALGOLIA_INDEX;
+
+		// Initialize InstantSearch
+		init(appId, apiKey, index);
+	} catch (error) {
+		console.error('Error:', error);
+	}
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,26 @@
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#algolia-search {
+	width: 100%;
+	max-width: 767px;
+	margin: auto;
+}
+
+.ais-GeoSearch-map, #map {
+	height: 300px; /* You can change this height */
+	margin-bottom: 2rem;
+}
+
+#map:not(.ais-GeoSearch-map) {
+	text-align: center;
+	border: 10px dashed gray;
+	display: flex;
+	align-content: center;
+	justify-content: center;
+	align-items: center;
+}
+
diff --git a/variables-sample.js b/variables-sample.js
@@ -0,0 +1,4 @@
+// All Algolia Variables
+const ALGOLIA_APP_ID = '';
+const ALGOLIA_API_KEY = '';
+const ALGOLIA_INDEX = '';