Pkgs + test CSP + cookies -> localStorage

DEVTomatoCake · Apr 7, 2024 · 696576d · 696576d
1 parent 8d7f754
commit 696576d
Show file tree

Hide file tree

Showing 12 changed files with 248 additions and 226 deletions.
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -1,6 +1,7 @@
 name: ESLint
 
 on:
+  pull_request:
   push:
 
 jobs:
@@ -15,6 +16,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 21
+          cache: "npm"
 
       - name: "🛸 install eslint html plugins"
         run: npm i --omit=optional

diff --git a/_headers b/_headers
@@ -0,0 +1,7 @@
+/*
+	Content-Security-Policy-Report-Only: default-src 'none' 'report-sample'; script-src-elem 'self'; script-src-attr 'unsafe-inline'; style-src-elem 'self'; style-src-attr 'unsafe-inline'; img-src 'self'; connect-src 'self' https://sh0rt.zip/ https://cloudflareinsights.com/cdn-cgi/rum https://static.cloudflareinsights.com; form-action 'none'; frame-ancestors 'none'; worker-src 'self'; manifest-src 'self'; report-uri https://api.tomatenkuchen.com/csp-violation
+	Report-To: {"group":"default","max_age":2592000,"endpoints":[{"url":"https://api.tomatenkuchen.com/csp-violation"}],"include_subdomains":false}
+	Cross-Origin-Opener-Policy: same-origin
+	X-Frame-Options: DENY
+	X-Content-Type-Options: nosniff
+	Referrer-Policy: strict-origin-when-cross-origin
diff --git a/manifest.json → assets/manifest.json b/manifest.json → assets/manifest.json
@@ -51,7 +51,7 @@
 	"scope": "/",
 	"theme_color": "#216E4A",
 	"lang": "en",
-	"description": "A tool which allows you to analyze Minecraft Java data and resource packs, and generate stats and share from them.",
+	"description": "A tool which allows you to analyze Minecraft Java data and resource packs, and generate shareable stats from them.",
 	"screenshots": [
 		{
 			"src": "/assets/images/showcase1.png",

diff --git a/assets/script.js b/assets/script.js
@@ -1,21 +1,12 @@
-// Cookie/"load" code modified from https://github.com/DEVTomatoCake/dashboard/blob/700b21999a671f4e9c32ba4a1a35f94156db11d4/assets/js/script.js#L16-L31
-
-function setCookie(name = "", value = "", days = void 0) {
-	let cookie = name + "=" + value + ";path=/;Secure;"
-	if (days) cookie += "expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * days).toUTCString() + ";"
-
-	document.cookie = cookie
-}
-function getCookie(name) {
-	for (const rawCookie of document.cookie.split(";")) {
-		const cookie = rawCookie.trim()
-		if (cookie.split("=")[0] == name) return cookie.substring(name.length + 1, cookie.length)
-	}
-	return void 0
-}
+// "load" code modified from https://github.com/DEVTomatoCake/dashboard/blob/700b21999a671f4e9c32ba4a1a35f94156db11d4/assets/js/script.js#L16-L31
 
 const requestVersions = async () => {
-	const res = await fetch("https://raw.githubusercontent.com/misode/mcmeta/summary/versions/data.json")
+	const res = await fetch("https://raw.githubusercontent.com/misode/mcmeta/summary/versions/data.json", {
+		headers: {
+			Accept: "application/json",
+			"User-Agent": "DEVTomatoCake/Pack-Analyzer"
+		}
+	})
 	const json = await res.json()
 	window.versions = json.map(ver => ({
 		name: ver.id,
@@ -91,11 +82,11 @@ let rpExclusive = {
 	textures: 0
 }
 
-window.addEventListener("load", () => {
-	if (getCookie("theme") == "light") document.body.classList.add("light")
+window.addEventListener("DOMContentLoaded", () => {
+	if (localStorage.getItem("theme") == "light") document.body.classList.add("light")
 	else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
 		document.body.classList.add("light")
-		setCookie("theme", "light", 365)
+		localStorage.setItem("theme", "light")
 	}
 
 	const params = new URLSearchParams(location.search)
@@ -122,6 +113,46 @@ window.addEventListener("load", () => {
 		mainScan(true)
 	}
 
+	document.getElementById("clear-results").addEventListener("click", () => {
+		document.getElementById("progress").innerText = ""
+		document.getElementById("result").innerHTML = ""
+		document.getElementById("resultButtons").hidden = true
+		document.getElementById("shareImage").style.display = "none"
+		if (interval) clearInterval(interval)
+	})
+	document.getElementById("toggle-theme").addEventListener("click", () => {
+		localStorage.setItem("theme", document.body.classList.toggle("light") ? "light" : "dark")
+	})
+	document.getElementById("about-button").addEventListener("click", () => openDialog(document.getElementById("aboutDialog")))
+
+	document.getElementById("select-folder").addEventListener("click", () => {
+		if (interval) clearInterval(interval)
+		selected = null
+
+		const input = document.createElement("input")
+		input.type = "file"
+		input.webkitdirectory = true
+		input.onchange = e => {
+			selected = e.target.files
+			mainScan()
+		}
+		if ("showPicker" in HTMLInputElement.prototype) input.showPicker()
+		else input.click()
+	})
+	document.getElementById("select-zip").addEventListener("click", () => {
+		if (interval) clearInterval(interval)
+
+		const input = document.createElement("input")
+		input.type = "file"
+		input.accept = ".zip"
+		input.onchange = e => handleZip(e.target.files[0])
+
+		if ("showPicker" in HTMLInputElement.prototype) input.showPicker()
+		else input.click()
+	})
+
+	for (const elem of document.getElementsByClassName("share")) elem.addEventListener("click", () => share(elem.dataset.type))
+
 	if (location.protocol == "https:" && "serviceWorker" in navigator) navigator.serviceWorker.register("/serviceworker.js")
 })
 
@@ -182,18 +213,6 @@ function openDialog(dialog) {
 	}
 }
 
-const toggleTheme = () => {
-	setCookie("theme", document.body.classList.toggle("light") ? "light" : "dark", 365)
-}
-
-const clearResults = () => {
-	document.getElementById("progress").innerText = ""
-	document.getElementById("result").innerHTML = ""
-	document.getElementById("resultButtons").hidden = true
-	document.getElementById("shareImage").style.display = "none"
-	if (interval) clearInterval(interval)
-}
-
 async function share(type) {
 	let content = ""
 	if (type == "txt") content = document.getElementById("result").innerText
@@ -239,7 +258,7 @@ async function share(type) {
 			if (res.ok) {
 				document.getElementById("share-link").href = "https://sh0rt.zip/" + name
 				document.getElementById("share-link").innerText = "https://sh0rt.zip/" + name
-				document.getElementById("share-img").src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent("https://sh0rt.zip/" + name) + "&size=150x150&qzone=2"
+				document.getElementById("share-img").src = "https://sh0rt.zip/qr/" + name
 				openDialog(document.getElementById("shareDialog"))
 			} else alert("Couldn't create link: " + json.error)
 			return
@@ -713,33 +732,6 @@ async function mainScan(hasData = false) {
 	}, 100)
 }
 
-async function selectFolder() {
-	if (interval) clearInterval(interval)
-	selected = null
-
-	const input = document.createElement("input")
-	input.type = "file"
-	input.webkitdirectory = true
-	input.onchange = e => {
-		selected = e.target.files
-		mainScan()
-	}
-	if ("showPicker" in HTMLInputElement.prototype) input.showPicker()
-	else input.click()
-}
-
-async function selectZip() {
-	if (interval) clearInterval(interval)
-
-	const input = document.createElement("input")
-	input.type = "file"
-	input.accept = ".zip"
-	input.onchange = e => handleZip(e.target.files[0])
-
-	if ("showPicker" in HTMLInputElement.prototype) input.showPicker()
-	else input.click()
-}
-
 function handleZip(file) {
 	selected = []
 

diff --git a/assets/style.css b/assets/style.css
@@ -40,7 +40,7 @@ button {
 	border: none;
 	border-radius: 7px;
 	cursor: pointer;
-	box-shadow: inset 0px -1px 2px rgba(17, 24, 39, .15), 0 0 0 0 transparent;
+	box-shadow: inset 0 -1px 2px rgba(17, 24, 39, .15), 0 0 0 0 transparent;
 }
 
 p {
@@ -91,11 +91,9 @@ a {
 .indented {
 	margin-left: 25px;
 }
-
 .indented2 {
 	margin-left: 50px;
 }
-
 .indented3 {
 	margin-left: 75px;
 }
@@ -134,7 +132,7 @@ summary {
 	height: 100%;
 	overflow: auto;
 	background-color: var(--dialog-shadow);
-	transition: .3;
+	transition: .3s;
 }
 
 .dialog-content {

diff --git a/eslint.config.js b/eslint.config.js
@@ -103,6 +103,7 @@ const rules = {
 	"prefer-const": 2,
 	"use-isnan": 2,
 	"valid-typeof": 2,
+	yoda: 2,
 
 	"@stylistic/js/array-bracket-spacing": 2,
 	"@stylistic/js/arrow-parens": [2, "as-needed"],
@@ -195,6 +196,8 @@ const rules = {
 	"unicorn/require-number-to-fixed-digits-argument": 2,
 	"unicorn/switch-case-braces": [2, "avoid"],
 	"unicorn/text-encoding-identifier-case": 2,
+	"unicorn/no-await-in-promise-methods": 2,
+	"unicorn/no-single-promise-in-promise-methods": 2,
 
 	"sonarjs/no-extra-arguments": 2,
 	"sonarjs/no-empty-collection": 2,

diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 		<meta property="og:url" content="https://pack-analyzer.pages.dev/">
 		<meta property="og:image" content="https://pack-analyzer.pages.dev/assets/images/showcase1.png">
 
-		<link rel="manifest" href="./manifest.json">
+		<link rel="manifest" href="./assets/manifest.json">
 		<link href="./assets/images/icon-128x128.png" rel="shortcut icon" type="image/x-icon">
 		<link href="./assets/images/icon-192x192.png" rel="apple-touch-icon" sizes="192x192">
 
@@ -23,17 +23,17 @@
 			<h1>Minecraft Java Data and Resource pack analyzer</h1>
 			<h2>Drop/paste a .zip or .mcfunction file, or select a folder below to analyze it!</h2>
 			<div>
-				<button type="button" onclick="selectFolder()">Select folder</button>
-				<button type="button" onclick="selectZip()">Select .zip</button>
-				<button type="button" onclick="toggleTheme()">Toggle theme</button>
-				<button type="button" onclick="openDialog(document.getElementById('aboutDialog'))">About</button>
+				<button type="button" id="select-folder">Select folder</button>
+				<button type="button" id="select-zip">Select .zip</button>
+				<button type="button" id="toggle-theme">Toggle theme</button>
+				<button type="button" id="about-button">About</button>
 			</div>
 			<div id="resultButtons" hidden>
-				<button type="button" onclick="clearResults()">Clear results</button>
-				<button type="button" onclick="share('txt')">Export as .txt</button>
-				<button type="button" onclick="share('json')">Export as .json</button>
-				<button type="button" onclick="share('link')">Share as link</button>
-				<button type="button" onclick="share('png')">Generate image</button>
+				<button type="button" id="clear-results">Clear results</button>
+				<button type="button" class="share" data-type="txt">Export as .txt</button>
+				<button type="button" class="share" data-type="json">Export as .json</button>
+				<button type="button" class="share" data-type="link">Share as link</button>
+				<button type="button" class="share" data-type="png">Generate image</button>
 			</div>
 
 			<br>