Init

src/main.ts

@@ -1,10 +1,13 @@
+const __APP_VERSION__ = "__APP_VERSION";
+const __APP_BUILD_TIME__ = __APP_BUILD_TIME;
+
 import "./styles/base.css";
 import "./styles/header.css";
 import "./styles/contents.css";
 
 import Typed from "typed.js";
 
-window.addEventListener("load", (event) => {
+window.addEventListener("load", (_ev) => {
 	new Typed(document.querySelector("description") ?? "description", {
 		stringsElement: "#description-list",
 		shuffle: true,
@@ -20,4 +23,33 @@ window.addEventListener("load", (event) => {
 		tooltip.innerText = Elem.getAttribute("alt") ?? "";
 		Elem.appendChild(tooltip);
 	});
+
+	// @ts-expect-error
+	document.querySelector(
+		"#footer > div"
+	).innerHTML += `<img alt="Update Commit" src="https://blog.186526.xyz/shields.io/badge/commit-${__APP_VERSION__}-blue" /> <img alt="Latest Update" src="https://blog.186526.xyz/shields.io/date/${__APP_BUILD_TIME__}?color=sucessful&label=latest%20update" />`;
+
+	if ("serviceWorker" in navigator) {
+		navigator.serviceWorker
+			.register("./sw.js", {
+				scope: "/",
+			})
+			.then(function (registration) {
+				console.log(
+					"ServiceWorker registration successful with scope: ",
+					registration.scope
+				);
+			})
+			.catch(function (err) {
+				console.warn("ServiceWorker registration failed: ", err);
+			});
+		let refreshing = false;
+		navigator.serviceWorker.addEventListener("controllerchange", () => {
+			if (refreshing) {
+				return;
+			}
+			refreshing = true;
+			window.location.reload();
+		});
+	}
 });

src/styles/contents.css

@@ -3,6 +3,11 @@ contents {
     position: absolute;
     top: 75vh;
 
+    right: 0vh;
+    left: 0vh;
+
+    margin: 0vh 5vw;
+
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
@@ -48,7 +53,7 @@ group#friend > card > a > img {
 
 group#footer {
     display: block;
-    margin: 0vh 2.5vw;
+    margin: 2rem 0.5rem;
 	align-self: flex-start;
 	color: var(--font-color-lighter);
 	font-size: calc(var(--font-size-description) - 0.4rem);
@@ -63,3 +68,10 @@ group#footer > * {
         filter: invert(100%);
     }
 }
+
+
+@media screen and (max-width: 480px) {
+	contents {
+		margin: 0 2vw;
+	}
+}

src/vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+declare const __APP_VERSION: string;
+declare const __APP_BUILD_TIME: string;