Add icon, homepage and sitemap

assets/images/icon.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect stroke="black" stroke-width="6" fill="#EEE" x="6" y="20" width="88" height="60" />
+    <polyline points="6,20 50,50 94,20" stroke-width="6" stroke="black" fill="none" />
+</svg>

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>

index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Email DNS Tools</title>
+		<link rel="canonical" href="https://email-dns.tools/">
+		<link rel="stylesheet" href="/assets/styles/main.css">
+	</head>
+	<body>
+		<h1>Email DNS Tools</h1>
+
+		<main>
+			<p>
+				This site provides various tools for managing email DNS records, such as for DKIM, DMARC and SPF.
+				If you have feedback, please send an email
+				<a href="mailto:?to=Reimar%20<%6D%61%69%6C%40%72%65%69%6D%2E%61%72>&subject=Email%20DNS%20Tools%20Feedback">here</a>.
+			</p>
+
+			<h2>Tools</h2>
+
+			<h3>DKIM</h3>
+
+			<a class="tool-button" href="/dkim-creator">DKIM Record Creator</a>
+
+			<h3>DMARC</h3>
+
+			<a class="tool-button" href="/dmarc-creator">DKIM Record Creator</a>
+
+			<a class="tool-button" href="/dmarc-validator">DMARC Record Validator</a>
+
+			<h3>SPF</h3>
+
+			<a class="tool-button" href="/spf-creator">SPF Record Creator</a>
+
+			<a class="tool-button" href="/spf-validator">SPF Record Validator</a>
+
+			<hr>
+
+			<h3>Articles</h3>
+
+			<ul>
+				<li><a href="/spf-macro-guide">SPF Macro Guide</a></li>
+			</ul>
+		</main>
+	</body>
+</html>

sitemap.txt

@@ -0,0 +1,8 @@
+https://email-dns.tools/
+https://email-dns.tools/dkim-creator/
+https://email-dns.tools/dmarc-creator/
+https://email-dns.tools/dmarc-validator/
+https://email-dns.tools/spf-creator/
+https://email-dns.tools/spf-macro-guide/
+https://email-dns.tools/spf-validator/
+

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>