5.14.4

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.14.2",
+	"version": "5.14.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.14.2",
+			"version": "5.14.4",
 			"license": "MIT",
 			"dependencies": {
 				"ejs": "^3.1.5",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.14.2",
+	"version": "5.14.4",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {

server/scripts/custom.sample.js

@@ -2,8 +2,7 @@
 // it is intended to allow for customizations that do not get published back to the git repo
 // for example, changing the logo
 
-// start running after all content is loaded
+const customTask = () => {
-document.addEventListener('DOMContentLoaded', () => {
 	// get all of the logo images
 	const logos = document.querySelectorAll('.logo img');
 	// loop through each logo
@@ -11,4 +10,16 @@ document.addEventListener('DOMContentLoaded', () => {
 		// change the source
 		elem.src = 'my-custom-logo.gif';
 	});
+};
+
+// start running after all content is loaded, or immediately if page content is already loaded
+if (document.readyState === 'loading') {
+	// Loading hasn't finished yet
+	document.addEventListener('DOMContentLoaded', customTask);
+} else {
+	// `DOMContentLoaded` has already fired
+	customTask();
+}
+document.addEventListener('DOMContentLoaded', () => {
+
 });

server/scripts/index.mjs

@@ -9,6 +9,7 @@ import settings from './modules/settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
+	getCustomCode();
 });
 
 const categories = [
@@ -413,3 +414,15 @@ const fullScreenResizeCheck = () => {
 	// store state of fullscreen element for next change detection
 	fullScreenResizeCheck.wasFull = !!document.fullscreenElement;
 };
+
+const getCustomCode = async () => {
+	// fetch the custom file and see if it returns a 200 status
+	const response = await fetch('scripts/custom.js', { method: 'HEAD' });
+	if (response.ok) {
+		// add the script element to the page
+		const customElem = document.createElement('script');
+		customElem.src = 'scripts/custom.js';
+		customElem.type = 'text/javascript';
+		document.body.append(customElem);
+	}
+};

server/scripts/modules/regionalforecast-utils.mjs

@@ -1,16 +1,21 @@
 import { getWeatherRegionalIconFromIconLink } from './icons.mjs';
 import { preloadImg } from './utils/image.mjs';
 import { json } from './utils/fetch.mjs';
+import { temperature as temperatureUnit } from './utils/units.mjs';
 
-const buildForecast = (forecast, city, cityXY) => ({
+const buildForecast = (forecast, city, cityXY) => {
-	daytime: forecast.isDaytime,
+	// get a unit converter
-	temperature: forecast.temperature || 0,
+	const temperatureConverter = temperatureUnit('us');
-	name: formatCity(city.city),
+	return {
-	icon: forecast.icon,
+		daytime: forecast.isDaytime,
-	x: cityXY.x,
+		temperature: temperatureConverter(forecast.temperature || 0),
-	y: cityXY.y,
+		name: formatCity(city.city),
-	time: forecast.startTime,
+		icon: forecast.icon,
-});
+		x: cityXY.x,
+		y: cityXY.y,
+		time: forecast.startTime,
+	};
+};
 
 const getRegionalObservation = async (point, city) => {
 	try {

server/scripts/modules/utils/units.mjs

@@ -7,6 +7,7 @@ const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** d
 
 const kphToMph = (Kph) => Math.round(Kph / 1.609_34);
 const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
+const fahrenheitToCelsius = (Fahrenheit) => Math.round((Fahrenheit - 32) * 5 / 9);
 const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.609_34);
 const metersToFeet = (Meters) => Math.round(Meters / 0.3048);
 const pascalToInHg = (Pascal) => round2(Pascal * 0.000_295_3, 2);
@@ -35,7 +36,11 @@ const temperature = (defaultUnit = 'si') => {
 	let converter = (passthru) => Math.round(passthru);
 	// change the converter if there is a mismatch
 	if (defaultUnit !== settings.units.value) {
-		converter = celsiusToFahrenheit;
+		if (defaultUnit === 'us') {
+			converter = fahrenheitToCelsius;
+		} else {
+			converter = celsiusToFahrenheit;
+		}
 	}
 	// append units
 	if (settings.units.value === 'si') {

views/index.ejs

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
@@ -14,13 +14,15 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <link rel="manifest" href="manifest.json" />
   <link rel="icon" href="images/Logo192.png" />
+	<meta property="og:image" content="images/social/1200x600.png">
+	<meta property="og:image:width" content="1200">
+	<meta property="og:image:height" content="627">
 
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
   <script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/vendor.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
-  <script type="text/javascript" src="scripts/custom.js?_=<%=production%>"></script>
   <% } else { %>
   <link rel="stylesheet" type="text/css" href="styles/main.css" />
   <script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
@@ -45,14 +47,10 @@
   <script type="module" src="scripts/modules/radar.mjs"></script>
   <script type="module" src="scripts/modules/settings.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
-	<script type="text/javascript" src="scripts/custom.js"></script>
   <!-- data -->
   <script type="text/javascript" src="scripts/data/travelcities.js"></script>
   <script type="text/javascript" src="scripts/data/regionalcities.js"></script>
   <script type="text/javascript" src="scripts/data/stations.js"></script>
-
-  <script type="text/javascript" src="scripts/custom.js"></script>
-
   <% } %>
 
 </head>