asleepace · September 13, 2022 21:13
diff --git a/index.html b/index.html
 <html>

 <head>
 	<title>Soladex Corp.</title>
 	<description></description>
 	<script>

 	</script>
 </head>

 <body>
 	<div class='header'>
 		<h1>Soladex Corp.</h1>
 		<h2>Advanced Solar Technology
 	</div>
 	<div class='container'>
 		<div class="display">
 			<h1>Solar Power Index</h1>
 			<h2 class="address">
 		</div>
 		<h3 style="text-align:center;" id="location">
 			loading current location ...
 		</h3>
 		<script>
 			const addressString = useGeolocation()
 		</script>
 	</div>
 	</div>
 	<div class="widgets">
 	</div>
 	</div>
 </body>

 </html>
diff --git a/script.typescript b/script.typescript
 import * as React from "https://cdn.skypack.dev/[email protected]";

 /**
 *  Geolocation Hook
 *  Colin Teahan
 *
 *  This hook is used to load geolocation from Google maps and can be used with either coordinates or
 *  a normal address. More documentation can be found hereL
 *
 *  https://console.cloud.google.com/google/maps-apis/overview
 *
 *  Make sure to create an API_KEY on Google cloud which does support a free trial, but does
 *  eventually cost money.
 */

 const API_KEY = "AIzaSyAZjry2U8FIU1lLaPls1fMtg1yhlanFu6Y";

 export type Coordinates = {
 	longitude: number;
 	latitude: number;
 };

 export type Geolocation = {
 	coords?: Coordinates;
 };

 /** This function is used to get the coordinates from the users current address */
 function getCurrentCoordinates(): Promise<Coordinates> {
 	return new Promise((resolve, reject) => {
 		navigator.geolocation.getCurrentPosition(({ coords }: Geolocation) => {
 			if (!coords?.latitude || !coords?.longitude)
 				return reject(new Error("[useGeolocation] failed loading coordinates ..."));
 			resolve({ ...coords });
 		});
 	});
 }

 /** This function is used to convert geolocation data into a url string */
 function getCoordinateUrl({ latitude, longitude }: Coordinates): string {
 	return `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${API_KEY}`;
 }

 /** Fetch the users current location and retrieve the address */
 async function useGeolocation(): Promise<any> {
 	try {
 		const geolocation = await getCurrentCoordinates();
 		const coordinateUrl = getCoordinateUrl(geolocation);
 		const addressData = await fetch(coordinateUrl);
 		const address = await addressData.json();
 		return address;
 	} catch (error) {
 		console.error(error);
 	} finally {
 		return { error: "Failed to load geolocation" };
 	}
 }

 useGeolocation();
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
diff --git a/soladex.markdown b/soladex.markdown
diff --git a/style.css b/style.css
 html {
 	overflow: hidden;
 	font-family: "Montserrat", sans-serif;
 	width: 100%;
 	height: 100%;
 	flex-direction: column;
 	display: flex;
 	flex: 1;
 }

 body {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	overflow: hidden;
 	-webkit-font-smoothing: antialiased;
 	color: #202124;
 	margin: 0;
 	text-size-adjust: 100%;
 	padding: 0px;
 	flex-direction: column;
 	flex: 1;
 }

 h1 {
 	font-size: 50px;
 	line-height: 60px;
 	margin: 0px;
 }

 h2 {
 	font-size: 22px;
 	line-height: 34px;
 	font-weight: 320;
 	color: rgba(0, 0, 0, 0.8);
 	margin: 0px;
 }

 h3 {
 	font-size: 14px;
 	line-height: 24px;
 	font-weight: 500;
 	color: rgba(0, 0, 0, 0.7);
 	margin: 0px;
 }

 .container {
 	padding: 16px;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	display: flex;
 	height: 100%;
 	flex: 1;
 }

 .widgets {
 	background-color: "red";
 	display: flex;
 	margin: 16px;
 }

 .header {
 	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 	padding: 32px;
 	position: absolute;
 	left: 0;
 	right: 0;
 	top: 0;
 }

 .display: {
 	padding: 16px;
 	text-align: center;
 	flex-direction: center;
 	align-items: center;
 	justify-content: center;
 	display: flex;
 	flex: 1;
 }
	<html>

	<head>
	<title>Soladex Corp.</title>
	<description></description>
	<script>

	</script>
	</head>

	<body>
	<div class='header'>
	<h1>Soladex Corp.</h1>
	<h2>Advanced Solar Technology
	</div>
	<div class='container'>
	<div class="display">
	<h1>Solar Power Index</h1>
	<h2 class="address">
	</div>
	<h3 style="text-align:center;" id="location">
	loading current location ...
	</h3>
	<script>
	const addressString = useGeolocation()
	</script>
	</div>
	</div>
	<div class="widgets">
	</div>
	</div>
	</body>

	</html>
	import * as React from "https://cdn.skypack.dev/[email protected]";

	/**
	* Geolocation Hook
	* Colin Teahan
	*
	* This hook is used to load geolocation from Google maps and can be used with either coordinates or
	* a normal address. More documentation can be found hereL
	*
	* https://console.cloud.google.com/google/maps-apis/overview
	*
	* Make sure to create an API_KEY on Google cloud which does support a free trial, but does
	* eventually cost money.
	*/

	const API_KEY = "AIzaSyAZjry2U8FIU1lLaPls1fMtg1yhlanFu6Y";

	export type Coordinates = {
	longitude: number;
	latitude: number;
	};

	export type Geolocation = {
	coords?: Coordinates;
	};

	/** This function is used to get the coordinates from the users current address */
	function getCurrentCoordinates(): Promise<Coordinates> {
	return new Promise((resolve, reject) => {
	navigator.geolocation.getCurrentPosition(({ coords }: Geolocation) => {
	if (!coords?.latitude \|\| !coords?.longitude)
	return reject(new Error("[useGeolocation] failed loading coordinates ..."));
	resolve({ ...coords });
	});
	});
	}

	/** This function is used to convert geolocation data into a url string */
	function getCoordinateUrl({ latitude, longitude }: Coordinates): string {
	return `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${API_KEY}`;
	}

	/** Fetch the users current location and retrieve the address */
	async function useGeolocation(): Promise<any> {
	try {
	const geolocation = await getCurrentCoordinates();
	const coordinateUrl = getCoordinateUrl(geolocation);
	const addressData = await fetch(coordinateUrl);
	const address = await addressData.json();
	return address;
	} catch (error) {
	console.error(error);
	} finally {
	return { error: "Failed to load geolocation" };
	}
	}

	useGeolocation();
	html {
	overflow: hidden;
	font-family: "Montserrat", sans-serif;
	width: 100%;
	height: 100%;
	flex-direction: column;
	display: flex;
	flex: 1;
	}

	body {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	color: #202124;
	margin: 0;
	text-size-adjust: 100%;
	padding: 0px;
	flex-direction: column;
	flex: 1;
	}

	h1 {
	font-size: 50px;
	line-height: 60px;
	margin: 0px;
	}

	h2 {
	font-size: 22px;
	line-height: 34px;
	font-weight: 320;
	color: rgba(0, 0, 0, 0.8);
	margin: 0px;
	}

	h3 {
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.7);
	margin: 0px;
	}

	.container {
	padding: 16px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: flex;
	height: 100%;
	flex: 1;
	}

	.widgets {
	background-color: "red";
	display: flex;
	margin: 16px;
	}

	.header {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 32px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	}

	.display: {
	padding: 16px;
	text-align: center;
	flex-direction: center;
	align-items: center;
	justify-content: center;
	display: flex;
	flex: 1;
	}