Add footer, canonical URLs, fix record parsing

assets/scripts/records/DkimRecord.js

@@ -17,10 +17,20 @@ export class DkimRecord extends TagListRecord {
 			.required()
 			.pos(1),
 
+		new EnumTag("k", ["rsa", "ed25519"])
+			.label("Key type")
+			.desc("")
+			.options(["RSA", "Ed25519"])
+			.default("rsa")
+			.pos(1),
+
 		new FlagsTag("t", ["y", "s"])
 			.label("Flags")
-			.desc("Optional extra options that can be enabled")
+			.options(["Test mode", "Strict mode (Recommended)"])
-			.options(["Test mode", "Require identical domain in i= and d= tags of DKIM signature (Recommended)"])
+			.optionDesc([
+				"Indicates the server is currently testing DKIM support",
+				"Require identical domain in i= and d= tags of DKIM signature (Recommended unless using subdomains)",
+			])
 			.default("")
 			.pos(1),
 
@@ -38,11 +48,6 @@ export class DkimRecord extends TagListRecord {
 			.default("")
 			.pos(1),
 
-		new EnumTag("k", ["rsa"])
-			.disabled()
-			.default("rsa")
-			.pos(1),
-
 		new EnumTag("s", ["*", "email"])
 			.disabled()
 			.default("*")

assets/scripts/records/SpfRecord.js

@@ -50,7 +50,7 @@ export class SpfRecord {
 			.label("Include")
 			.desc("Check the SPF record of another domain. If it passes, return with the selected result")
 			.multiple()
-			.pos(1),
+			.pos(2),
 
 		new DomainMechanism("exists")
 			.label("Exists")

assets/scripts/tags/FlagsTag.js

@@ -11,11 +11,19 @@ export class FlagsTag extends Tag {
 		return this;
 	}
 
+	optionDesc(descriptions) {
+		this.flagDescriptions = descriptions;
+		return this;
+	}
+
 	getInputHtml() {
 		return `
 			<div style="display: flex; flex-direction: column; gap: 0.5rem">` +
 				this.flags.map((flag, i) => `
-					<label><input id="${this.id + "-" + flag}" type="checkbox"> ${this.flagLabels[i]}</label>
+					<label>
+						<input id="${this.id + "-" + flag}" type="checkbox"> ${this.flagLabels[i]}<br>
+						<span class="checkbox-desc">${this.flagDescriptions[i]}</span>
+					</label>
 				`).join("") +
 			"</div>";
 	}

assets/scripts/ui/creator.js

@@ -3,12 +3,12 @@ import { DmarcRecord } from "../records/DmarcRecord.js";
 import { SpfRecord } from "../records/SpfRecord.js";
 
 const records = {
-	"/dkim-creator": DkimRecord,
+	"dkim-creator": DkimRecord,
-	"/dmarc-creator": DmarcRecord,
+	"dmarc-creator": DmarcRecord,
-	"/spf-creator": SpfRecord,
+	"spf-creator": SpfRecord,
 };
 
-const Record = records[location.pathname];
+const Record = records[location.pathname.split("/")[1]];
 
 const inputs = [];
 

assets/scripts/ui/validator.js

@@ -2,11 +2,11 @@ import { DmarcRecord } from "../records/DmarcRecord.js";
 import { SpfRecord } from "../records/SpfRecord.js";
 
 const records = {
-	"/dmarc-validator": DmarcRecord,
+	"dmarc-validator": DmarcRecord,
-	"/spf-validator": SpfRecord,
+	"spf-validator": SpfRecord,
 };
 
-const Record = records[location.pathname];
+const Record = records[location.pathname.split("/")[1]];
 
 document.getElementById("record").oninput = event => validate(event.target.value);
 

assets/styles/main.css

@@ -27,6 +27,16 @@ body {
 	padding: 1rem;
 }
 
+footer {
+	font-size: 0.8rem;
+	text-align: center;
+	margin-bottom: 1rem;
+}
+
+footer a {
+	color: black;
+}
+
 h1, h2 {
 	text-align: center;
 }
@@ -67,7 +77,7 @@ main {
 	background-color: white;
 	border: 1px solid #BDBDBD;
 	padding: 1rem 2rem;
-	margin: 2rem auto;
+	margin: 1rem auto;
 	color: #424242;
 	font-size: 0.8rem;
 }
@@ -166,6 +176,11 @@ summary:hover {
 	color: black;
 }
 
+.checkbox-desc {
+	color: #9E9E9E;
+	margin-left: 2em;
+}
+
 .field-container {
 	display: flex;
 	flex-direction: column;
@@ -191,3 +206,25 @@ summary:hover {
 .text-button:hover {
 	color: black;
 }
+
+.tool-button {
+	display: inline-block;
+	margin: 0.25rem 1rem 0.25rem 0;
+	background-color: #F9F9F9;
+	padding: 0.75rem 1.5rem;
+	border: 1px solid #BDBDBD;
+	color: black;
+	text-decoration: none;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+	font-weight: bold;
+	width: 170px;
+	text-align: center;
+	position: relative;
+	bottom: 0;
+	transition: box-shadow, bottom 200ms;
+}
+
+.tool-button:hover {
+	bottom: 3px;
+	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+}

dkim-creator/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>DKIM Record Creator - Generate DKIM DNS Records</title>
+		<link rel="canonical" href="https://email-dns.tools/dkim-creator/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/creator.js"></script>
 	</head>
@@ -53,5 +54,9 @@
 				<a href="/spf-creator">SPF Creator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>

dmarc-creator/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>DMARC Record Creator - Generate DMARC DNS Records</title>
+		<link rel="canonical" href="https://email-dns.tools/dmarc-creator/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/creator.js"></script>
 	</head>
@@ -41,9 +42,13 @@
 			<center>
 				<h3>More tools:</h3>
 				<a href="/dmarc-validator">DMARC Validator Tool</a> &bull;
-				<a href="/DKIM-creator">DKIM Creator Tool</a> &bull;
+				<a href="/dkim-creator">DKIM Creator Tool</a> &bull;
 				<a href="/spf-creator">SPF Creator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>

dmarc-validator/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>DMARC Record Validator - Validate DMARC DNS Records</title>
+		<link rel="canonical" href="https://email-dns.tools/dmarc-validator/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/validator.js"></script>
 	</head>
@@ -78,5 +79,9 @@
 				<a href="/spf-validator">SPF Validator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>

spf-creator/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>SPF Record Creator - Generate SPF DNS Records</title>
+		<link rel="canonical" href="https://email-dns.tools/spf-creator/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/creator.js"></script>
 	</head>
@@ -63,5 +64,9 @@
 				<a href="/dmarc-creator">DMARC Creator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>

spf-macro-guide/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>SPF Macro Guide - Explanation of all SPF macros with examples</title>
+		<link rel="canonical" href="https://email-dns.tools/spf-macro-guide/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/validator.js"></script>
 	</head>
@@ -149,5 +150,9 @@
 				<a href="/spf-creator">SPF Creator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>

spf-validator/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>SPF Record Validator - Validate SPF DNS Records</title>
+		<link rel="canonical" href="https://email-dns.tools/spf-validator/">
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<script type="module" src="/assets/scripts/ui/validator.js"></script>
 	</head>
@@ -69,5 +70,9 @@
 				<a href="/dmarc-validator">DMARC Validator Tool</a>
 			</center>
 		</main>
+
+		<footer>
+			<a href="/">Home</a>
+		</footer>
 	</body>
 </html>