adding wasm to webpage

index.html

@@ -58,7 +58,7 @@
 			<!-- End of Toast -->
 
 			<div id="daBod">
-				<p class="mt-5 fs-5">Hello there! Welcome to my little nook. This page is a work in progress...</p>
+				<p class="mt-5 fs-5">Hello there! Welcome to my little nook. This page is a work in progress... over-engineered using TypeScript and WASM.</p>
 				<p class="t-5 fs-5">My name is Dan: I am a dad, a software development engineer, a lifelong learner, 
 					and a service member in the US Armed Forces.</p>
 				<p class="mt-5 fs-5">I am a full stack developer with a heavier emphasis in the back-end and data science.</p>
@@ -83,6 +83,10 @@
 								<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Kubernetes_logo_without_workmark.svg/1200px-Kubernetes_logo_without_workmark.svg.png" alt="" width="60" height="60">
 									Kubernetes
 							</li>
+							<li class="list-group-item list-group-item-dark text-truncate">
+								<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/WebAssembly_Logo.svg/600px-WebAssembly_Logo.svg.png" alt="" width="60" height="60">
+									WebAssembly
+							</li>
 							<li class="list-group-item list-group-item-dark text-truncate">
 								<img src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png" alt="" width="60" height="60">
 									Docker
@@ -165,7 +169,7 @@
 			</div>
 			<div class="pt-5">
 				<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-					<p class="col-md-4 mb-0 mt-0 text-muted">Last Updated: 2024-01-02</p>
+					<p class="col-md-4 mb-0 mt-0 text-muted">Last Updated: 2024-02-18</p>
 					<a href="./files/public-key.pem" class="btn btn-dark">Public Key</a>
 				</footer>
 			</div>

src/material.ts

@@ -1,6 +1,6 @@
 // import * as $ from "jquery";
-import {greeting} from "./time";
-import {vidGen} from "./video";
+import { greeting } from "./time";
+import { vidGen } from "./video";
 import * as BS from "bootstrap";
 
 // window.showem = function(iden) {
@@ -12,10 +12,11 @@ import * as BS from "bootstrap";
 // let mCollection = new Object;
 //
 function timer(ms: number) {
-    return new Promise(resolve => setTimeout(() => resolve(true), ms));
+	return new Promise(resolve => setTimeout(() => resolve(true), ms));
 }
+
 async function startToast(x: number) {
-    await timer(x);
+	await timer(x);
 	let toastLive = document.getElementById('liveToast');
 	let toastbody = document.querySelector('#liveToast .toast-body');
 	let toastheader = document.querySelector('#liveToast .me-auto');
@@ -26,24 +27,28 @@ async function startToast(x: number) {
 	let toast = new BS.Toast(toastLive);
 	toast.show();
 }
+
+vidGen().then(() => {
+	startToast(5000).then(() => console.log("Toast has launched!"));
+});
 // async function closeSidebar(x) {
 //     await timer(x);
 //     mCollection.sidenav[0].close();
 // }
 //
-document.addEventListener('DOMContentLoaded', function() {
-    // let elems = [
-    //     document.querySelectorAll('.collapsible'),
-    //     document.querySelectorAll('.tooltipped'),
-    //     document.querySelectorAll('.sidenav'),
-    // ];
-    // mCollection.collInst = M.Collapsible.init(elems[0]);
-    // mCollection.toolInst = M.Tooltip.init(elems[1], {"position": "right"});
-    // mCollection.sidenav  = M.Sidenav.init(elems[2]);
-    startToast(5000).then(() => console.log("Toast has launched!"));
-    vidGen();
-	console.log("STARTING!");
-});
+// document.addEventListener('DOMContentLoaded', function() {
+//     // let elems = [
+//     //     document.querySelectorAll('.collapsible'),
+//     //     document.querySelectorAll('.tooltipped'),
+//     //     document.querySelectorAll('.sidenav'),
+//     // ];
+//     // mCollection.collInst = M.Collapsible.init(elems[0]);
+//     // mCollection.toolInst = M.Tooltip.init(elems[1], {"position": "right"});
+//     // mCollection.sidenav  = M.Sidenav.init(elems[2]);
+//     startToast(5000).then(() => console.log("Toast has launched!"));
+//     vidGen();
+// 	console.log("STARTING!");
+// });
 //
 // document.querySelector("#menu").addEventListener("click", function() {
 //     //console.log(this.getAttribute("class"));

src/pweb/.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+- package-ecosystem: cargo
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "08:00"
+  open-pull-requests-limit: 10

src/pweb/.gitignore

@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log

src/pweb/Cargo.toml

@@ -0,0 +1,28 @@
+[package]
+name = "pweb"
+version = "0.1.0"
+authors = ["Daniel Choi <[email protected]>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2.84"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.7", optional = true }
+chrono = { version = "0.4.34", features = ["wasmbind"] }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.34"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

src/pweb/src/lib.rs

@@ -0,0 +1,26 @@
+mod utils;
+
+use chrono::Timelike;
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn greet() -> String {
+    utils::set_panic_hook();
+
+    let time = chrono::offset::Local::now();
+    let hour = time.hour();
+
+    if (4..12).contains(&hour) {
+        // morning
+        "m".to_string()
+    } else if (12..17).contains(&hour) {
+        // afternoon
+        "a".to_string()
+    } else if (0..4).contains(&hour) {
+        // evening
+        "l".to_string()
+    } else {
+        // late
+        "e".to_string()
+    }
+}

src/pweb/src/utils.rs

@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}

src/pweb/tests/web.rs

@@ -0,0 +1,13 @@
+//! Test suite for the Web and headless browsers.
+
+#![cfg(target_arch = "wasm32")]
+
+extern crate wasm_bindgen_test;
+use wasm_bindgen_test::*;
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn pass() {
+    assert_eq!(1 + 1, 2);
+}

src/time.ts

@@ -1,29 +1,19 @@
+import { greet } from "./pweb/pkg/pweb";
+
 // Get the time when the site was first opened...
-let d = new Date;
-let theHour = d.getHours();
-let theMin = d.getMinutes();
 let greeting: string;
 
 // Greetings
-let theStringMin: string;
-if (theMin < 10) {
-	theStringMin = '0' + theMin;
-} else {
-	theStringMin = theMin.toString();
-}
+let category = greet();
 
-if (theHour >= 0 && theHour < 4) {
-    if (theHour == 0) {
-        greeting = `Wow it's 12:${theMin} in the morning... you're up late.`;
-    } else {
-        greeting = `Wow it's ${theHour}:${theStringMin} in the morning... you're up late.`;
-    }
-} else if (theHour >= 4 && theHour < 12) {
-    greeting = "Good Morning!";
-} else if (theHour >= 12 && theHour < 15) {
-    greeting = "Good Afternoon!";
+if (category === "m") {
+	greeting = "Good Morning!";
+} else if (category === "a") {
+	greeting = "Good Afternoon!";
+} else if (category === "e") {
+	greeting = "Good Evening!";
 } else {
-    greeting = "Good Evening!";
+	greeting = "You're up late!";
 }
 
-export {greeting};
+export { greeting };

webpack.config.js

@@ -24,6 +24,10 @@ module.exports = {
 	resolve: {
 		extensions: ['.tsx', '.ts', '.js'],
 	},
+	experiments: {
+		asyncWebAssembly: true,
+		syncWebAssembly: true,
+	},
 	module: {
 		rules: [{
 			test: /\.ts|\.js$/,