chore: Restructure package directories

cmd/api/assets/main.js

@@ -0,0 +1,90 @@
+const $ = document.querySelector.bind(document);
+const $new = document.createElement.bind(document);
+const $show = (el) => {
+    el.classList.remove('hidden');
+};
+const $hide = (el) => {
+    el.classList.add('hidden');
+};
+
+const apiURL = '/api/lookup/';
+
+(function () {
+    const fields = ['name', 'address', 'type', 'ttl', 'rtt'];
+
+    // createRow creates a table row with the given cell values.
+    function createRow(item) {
+        const tr = $new('tr');
+        fields.forEach((f) => {
+            const td = $new('td');
+            td.innerText = item[f];
+            td.classList.add(f);
+            tr.appendChild(td);
+        });
+        return tr;
+    }
+
+    const handleSubmit = async () => {
+        const tbody = $('#table tbody'),
+              tbl = $('#table');
+        tbody.innerHTML = '';
+        $hide(tbl);
+
+        const q = $('input[name=q]').value.trim(),
+              typ = $('select[name=type]').value,
+              addr = $('input[name=address]').value.trim();
+
+        // Post to the API.
+        const req = await fetch(apiURL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ query: [q,], type: [typ,], nameservers: [addr,] })
+              });
+
+        const res = await req.json();
+
+        if (res.status != 'success') {
+            const error = (res && res.message) || response.statusText;
+            throw(error);
+            return;
+        }
+
+        if (res.data[0].answers == null) {
+            throw('No records found.');
+            return;
+        }
+
+        res.data[0].answers.forEach((item) => {
+            tbody.appendChild(createRow(item));
+        });
+
+        $show(tbl);
+    };
+
+    // Capture the form submit.
+    $('#form').onsubmit = async (e) => {
+        e.preventDefault();
+
+        const msg = $('#message');
+        $hide(msg);
+
+        try {
+            await handleSubmit();
+        } catch(e) {
+            msg.innerText = e.toString();
+            $show(msg);
+            throw e;
+        }
+    };
+
+    // Change the address on ns change.
+    const ns = $("#ns"), addr = $("#address");
+    addr.value = ns.value;
+
+    ns.onchange = (e) => {
+        addr.value = e.target.value;
+        if(addr.value === "") {
+            addr.focus();
+        }
+    };
+})();

cmd/api/assets/style.css

@@ -0,0 +1,201 @@
+:root {
+	--primary: #4338ca;
+	--secondary: #333;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+:focus {
+  outline: 0;
+}
+
+body {
+	font-family: "Segoe UI", "Helvetica Neue", Inter, sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	color: #111;
+	margin: 0 auto;
+}
+
+h1, h2, h3, h4 {
+    line-height: 1.3em;
+}
+
+a {
+	color: var(--primary);
+}
+	a:hover {
+		color: #111;
+		text-decoration: none;
+	}
+
+input, select, button {
+	border-radius: 5px;
+	border: 1px solid #ddd;
+	font-size: 1.3rem;
+	padding: 10px 15px;
+	width: 100%;
+}
+	input:focus, select:focus {
+		border-color: var(--primary); 
+	}
+	button {
+		border-color: var(--primary); 
+		background: var(--primary); 
+		color: #fff;
+		cursor: pointer;
+		width: auto;
+		padding: 10px 30px;
+	}
+		button:focus,
+		button:hover {
+			border-color: var(--secondary); 
+			background: var(--secondary); 
+		}
+
+label {
+	display: block;
+	padding-bottom: 0.5rem;
+}
+
+.box {
+	box-shadow: 1px 1px 4px #eee;
+	border: 1px solid #eee;
+	padding: 30px;
+	border-radius: 3px;
+}
+
+.hidden {
+	display: none !important;
+}
+
+.main {
+	margin: 60px auto 30px auto;
+	max-width: 900px;
+}
+
+header {
+	text-align: center;
+	font-size: 1.5em;
+	margin-bottom: 60px;
+}
+	.logo span {
+		color: var(--primary);
+		font-weight: 900;
+	}
+
+form {
+	margin-bottom: 45px;
+}
+
+	.row {
+		display: flex;
+		margin-bottom: 15px;
+	}
+		.row .field {
+			flex: 50%;
+		}
+		.row .field:last-child {
+			margin-left: 30px;
+		}
+
+		.submit {
+			text-align: right;
+		}
+	.help {
+		color: #666;
+		font-size: 0.875em;
+	}
+
+#message {
+	color: #ff3300;
+}
+
+table.box {
+	width: 100%;
+	max-width: 100%;
+	padding: 0;
+}
+	table th {
+		background: #f9fafb;
+		color: #666;
+		font-size: 0.875em;
+		border-bottom: 1px solid #ddd;
+	}
+	table th, tbody td {
+		padding: 10px 15px;
+		text-align: left;
+	}
+	td.name {
+		font-weight: bold;
+	}
+	th.type, td.type {
+		text-align: center;
+	}
+	td.type {
+		background: #d1fae5;
+		color: #065f46;
+		font-weight: bold;
+	}
+
+footer {
+	margin: 60px 0 0 0;
+	text-align: center;
+}
+	footer a {
+		text-decoration: none;
+	}
+
+
+@media (max-width: 650px) {
+	.main {
+		margin: 60px 30px 30px 30px;
+	}
+	.box {
+		box-shadow: none;
+		border: 0;
+		padding: 0;
+	}
+
+	.row {
+		display: block;
+	}
+	.field {
+		margin: 0 0 20px 0;
+	}
+	.row .field:last-child {
+		margin: 0;
+	}
+	.submit button {
+		width: 100%;
+	}
+
+	table {
+		table-layout: fixed;
+	}
+    table th {
+    	width: 100%;
+    }
+    table tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 30px;
+    }
+    table td {
+        border: 1px solid #eee;
+        margin: 0 -1px -1px 0;
+        position: relative;
+        width: 100%;
+		word-wrap:break-word;
+    }
+    table th.type, table td.type {
+    	text-align: left;
+    }
+    table td span {
+        display: block;
+    }
+}