Refactor web frontend and remove unnecessary dependencies.

- Eliminate frontend JS build step completely:
  (remove dep: NodeJS, npx, tailwind, postcss, autoprefixer)

- Declutter and cleanup index.html (8.49 KB to 3.4 KB) = ~60% savings.

- Replace tailwind with custom CSS (10.64 KB to 1.96 KB) = ~81% savings.

- Remove Google font (~100 KB) as there is very little text on the page.

- Refactor and cleanup main.js and remove tailwind styling logic.
  (2.82 KB to 1.12 KB) = ~60% savings.

- Net static asset reduction = 21.95 KB to 6.48 KB = ~70% savings
  apart from the 100+ KB elimination of Google fonts.

Makefile

@@ -9,18 +9,10 @@ VERSION := ${HASH}
 build-cli:
 	go build -o ${CLI_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/cli/
 
-.PHONY: build-frontend
-build-frontend:
-	cd cmd/doggo/api && NODE_ENV=production npx tailwindcss build -o ./assets/tailwind.css
-
 .PHONY: build-api
 build-api:
 	go build -o ${API_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/api/
 
-.PHONY: deps
-deps:
-	cd cmd/doggo/api && npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
-
 .PHONY: build
 build: build-api build-cli
 
@@ -29,7 +21,7 @@ run-cli: build-cli ## Build and Execute the CLI binary after the build step.
 	${CLI_BIN}
 
 .PHONY: run-api
-run-api: build-frontend build-api ## Build and Execute the API binary after the build step.
+run-api: build-api ## Build and Execute the API binary after the build step.
 	${API_BIN} --config config-api-sample.toml
 
 .PHONY: clean

cmd/doggo/api/assets/main.js

@@ -1,154 +1,90 @@
 const $ = document.querySelector.bind(document);
 const $new = document.createElement.bind(document);
-const apiURL = "/api/lookup/";
+const $show = (el) => {
-const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
+    el.classList.remove('hidden');
-
+};
-function handleNSChange() {
+const $hide = (el) => {
-    if ($('select[name=ns]').value == "custom") {
+    el.classList.add('hidden');
-        $('div[id=custom_ns]').classList.remove("hidden");
+};
-        $('div[id=ns]').classList.add("hidden");
-    } else {
-        $('div[id=custom_ns]').classList.add("hidden");
-        $('div[id=ns]').classList.remove("hidden");
-        $('input[name=ns]').placeholder = $('select[name=ns]').value;
-    }
-}
-
-
-// Source: https://stackoverflow.com/a/1026087.
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    handleNSChange();
-});
 
+const apiURL = '/api/lookup/';
 
 (function () {
-    const fields = ['name', 'address', 'type', 'ttl', 'rtt', 'nameserver'];
+    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.classList.add("px-6", "py-4", "whitespace-nowrap", "text-sm");
+            td.innerText = item[f];
-            if (f == "ttl" || f == "rtt" || f == "nameserver") {
+            td.classList.add(f);
-                td.classList.add("text-gray-500");
-            } else {
-                td.classList.add("text-gray-900");
-            }
-            if (f == "name") {
-                td.classList.add("font-semibold");
-            }
-            if (f == "type") {
-                td.innerHTML = '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">' + item[f] + '</span>';
-            } else {
-                td.innerText = item[f];
-            }
             tr.appendChild(td);
         });
         return tr;
     }
 
+    const handleSubmit = async () => {
+        const tbody = $('#table tbody'),
+              tbl = $('#table');
+        tbody.innerHTML = '';
+        $hide(tbl);
 
-    // `createList` creates a table row with the given cell values.
+        const q = $('input[name=q]').value.trim(),
-    function createList(item) {
+              typ = $('select[name=type]').value,
-        const ul = $new('ul');
+              addr = $('input[name=address]').value.trim();
-        ul.classList.add("m-4", "block", "bg-indigo-100");
-        fields.forEach((f) => {
-            const li = $new('li');
-            const span = $new('span');
-            span.classList.add("p-2", "text-gray-500", "font-semibold");
-            span.innerText = capitalizeFirstLetter(f) + ': ' + item[f]
-            li.appendChild(span);
-            ul.appendChild(li);
-        });
-        return ul;
-    }
 
-    function prepareNSAddr(ns) {
+        // Post to the API.
-        switch (ns) {
+        const req = await fetch(apiURL, {
-            // If it's a custom nameserver, get the value from the user's input.
+                    method: 'POST',
-            case "custom":
+                    headers: { 'Content-Type': 'application/json' },
-                return $('input[name=custom_ns]').value.trim()
+                    body: JSON.stringify({ query: [q,], type: [typ,], nameservers: [addr,] })
-            // Else get it from the select dropdown field.
+              });
-            default:
-                return $('select[name=ns]').value.trim()
-        }
-    }
 
-    const postForm = body => {
+        const res = await req.json();
-        return fetch(apiURL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body
-        });
-    };
 
-    const handleSubmit = async (e) => {
+        if (res.status != 'success') {
-        e.preventDefault();
-
-        const tbl = $('table tbody');
-        const list = $('div[id=mobile-answers-sec]');
-        tbl.innerHTML = '';
-        list.innerHTML = '';
-
-        $('p[id=empty-name-sec]').classList.add("hidden");
-        const errSec = $('div[id=api-error-sec]');
-        errSec.classList.add("hidden");
-
-        const q = $('input[name=q]').value.trim(), typ = $('select[name=type]').value;
-        const ns = $('select[name=ns]').value;
-
-        if (!q) {
-            $('p[id=empty-name-sec]').classList.remove("hidden");
-            throw ('Invalid query name.');
-        }
-
-        if (!q || !typ || !ns) {
-            throw ('Invalid or empty query params.');
-        }
-
-        const nsAddr = prepareNSAddr(ns);
-        const body = JSON.stringify({ query: [q,], type: [typ,], nameservers: [nsAddr,] });
-
-        const response = await postForm(body);
-        const res = await response.json();
-        if (res.status != "success") {
-            // get error message from body or default to response statusText
             const error = (res && res.message) || response.statusText;
-            errSec.classList.remove("hidden");
+            throw(error);
-            errSec.innerHTML = '<p class="text-xl text-red-500">' + error + '</p>'
+            return;
-            throw (error);
         }
 
         if (res.data[0].answers == null) {
-            const errSec = $('div[id=api-error-sec]');
+            throw('No records found.');
-            errSec.classList.remove("hidden");
+            return;
-            errSec.innerHTML = '<p class="text-xl text-red-500">' + 'No records found!' + '</p>'
-            return null;
         }
 
-        $('div[id=answer_sec]').classList.remove("hidden");
+        res.data[0].answers.forEach((item) => {
-
+            tbody.appendChild(createRow(item));
-        if (isMobile === true) {
+        });
-            list.classList.remove("hidden");
-            res.data[0].answers.forEach((item) => {
-                console.log("appending", item)
-                list.appendChild(createList(item));
-            });
-
-        } else {
-            res.data[0].answers.forEach((item) => {
-                tbl.appendChild(createRow(item));
-            });
-        }
 
+        $show(tbl);
     };
 
-    document.querySelector('form').addEventListener('submit', handleSubmit);
+    // 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/doggo/api/assets/style.css

@@ -0,0 +1,195 @@
+: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;
+}
+
+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;
+}
+
+.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;
+    }
+}

cmd/doggo/api/index.html

@@ -1,175 +1,100 @@
 <!DOCTYPE html>
 <html>
-
 <head>
     <title>Doggo DNS</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-
+    <link href="assets/style.css" rel="stylesheet">
-    <link href="assets/tailwind.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
-
-    <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-    </style>
-
 </head>
-
+<body>
-<noscript>
+<div class="main">
-    <div class="noscript">
+    <header>
-        <h2>This service requires Javascript</h2>
+        <h1 class="logo"><span>Doggo</span> DNS</h1>
-        <p>Please enable JavaScript so that the form data can be sent to the API backend.</p>
-    </div>
-</noscript>
-
-<body class="p-10 max-w-screen-lg m-auto min-h-screen flex flex-col">
-    <header class="mt-10">
-        <h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo</span> DNS</h1>
     </header>
-    <main id="app" class="main flex flex-col flex-grow">
-        <form>
-            <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
-                <div class="-mx-3 md:flex mb-6">
-                    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                        <label>
-                            Domain Name
-                        </label>
-                        <input required autofocus name="q" type="text" placeholder="domain.tld"
-                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                        <p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to
-                            query.
-                        </p>
-                    </div>
-                    <div class="md:w-1/2 px-3">
-                        <label>
-                            Query Type
-                        </label>
-                        <select name="type"
-                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            <option default>A</option>
-                            <option>AAAA</option>
-                            <option>CAA</option>
-                            <option>CNAME</option>
-                            <option>MX</option>
-                            <option>NAPTR</option>
-                            <option>NS</option>
-                            <option>PTR</option>
-                            <option>SOA</option>
-                            <option>SRV</option>
-                            <option>TXT</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="-mx-3 md:flex">
-                    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                        <label>
-                            Nameserver
-                        </label>
-                        <select name="ns" onchange="handleNSChange()"
-                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            <option default value="tcp://1.1.1.1:53">Cloudflare</option>
-                            <option value="https://cloudflare-dns.com/dns-query">Cloudflare (DOH)</option>
-                            <option value="tcp://8.8.8.8:53">Google</option>
-                            <option value="tcp://9.9.9.9:53">Quad9</option>
-                            <option value="custom">Custom</option>
-                        </select>
-                    </div>
-                    <div class="md:w-1/2 px-3">
-                        <label for="grid-zip">
-                            Address
-                        </label>
-                        <div id="custom_ns" class="hidden">
-                            <input name="custom_ns" type="text" placeholder="Enter Nameserver address"
-                                class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            <p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer
-                                to the
-                                instructions <a class="font-semibold"
-                                    href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p>
-                        </div>
-                        <div id="ns">
-                            <input readonly name="ns" type="text"
-                                class="bg-gray-50 w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                        </div>
-                    </div>
-                </div>
-                <div class="mt-8 text-right">
-                    <button class="w-full sm:w-auto flex-none bg-indigo-700 hover:bg-indigo-500
-                        text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded
-                        focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-700 focus:outline-none
-                        transition-colors duration-400">
-                        Submit
-                    </button>
-                </div>
-            </div>
-        </form>
 
-        <!--Responses-->
+    <form method="post" id="form" class="box">
-        <div id="answer_sec" class="hidden mt-12 flex flex-col">
+        <div class="row">
-            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 sm:block hidden">
+            <div class="field">
-                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                <label for="domain">Domain name</label>
-                    <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                <input id="domain" name="q" placeholder="domain.tld" required autofocus />
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        Name
-                                    </th>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        Address
-                                    </th>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        Type
-                                    </th>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        TTL
-                                    </th>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        RTT
-                                    </th>
-                                    <th scope="col"
-                                        class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                                        Nameserver
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
-                                <!--tr is added by JS-->
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
             </div>
-            <!--On Mobile-->
+            <div class="field">
-            <div id="mobile-answers-sec" class="hidden">
+                <label for="type">Query type</label>
+                <select id="type" name="type">
+                    <option default>A</option>
+                    <option>AAAA</option>
+                    <option>CAA</option>
+                    <option>CNAME</option>
+                    <option>MX</option>
+                    <option>NAPTR</option>
+                    <option>NS</option>
+                    <option>PTR</option>
+                    <option>SOA</option>
+                    <option>SRV</option>
+                    <option>TXT</option>
+                </select>
             </div>
         </div>
-
+        <div class="row">
-        <!--No Answers-->
+            <div class="field">
-        <div id="no-answers-sec" class="hidden mt-12 text-center">
+                <label for="ns">Nameserver</label>
-            <p class="text-xl text-gray-900">Oops! Found no records for this query.</p>
+                <select id="ns" name="ns">
+                    <option default value="tcp://1.1.1.1:53">Cloudflare</option>
+                    <option value="https://cloudflare-dns.com/dns-query">Cloudflare (DOH)</option>
+                    <option value="tcp://8.8.8.8:53">Google</option>
+                    <option value="tcp://9.9.9.9:53">Quad9</option>
+                    <option value="">Custom</option>
+                </select>
+            </div>
+            <div class="field">
+                <label for="address">Nameserver address</label>
+                <input id="address" name="address" type="text" placeholder="tcp://your-ip"
+                    required pattern="(tcp|udp|tls|https):\/\/(.*)" />
+                <p class="help">
+                    To use different protocols like DOH, DOT etc. refer to the instructions
+                    <a href="https://github.com/mr-karan/doggo#transport-options">here</a>.
+                </p>
+            </div>
         </div>
-
+        <div class="row">
-        <!--Show Error-->
+            <div class="field"><p id="message"></p></div>
-        <div id="api-error-sec" class="hidden mt-12 text-center">
+            <div class="field submit">
+                <button type="submit">Submit</button>
+            </div>
         </div>
+    </form>
 
-    </main>
+    <!--Responses-->
+    <table class="box hidden" id="table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Address</th>
+                <th class="type">Type</th>
+                <th>TTL</th>
+                <th>RTT</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
 
-    <footer class="p-10">
+    <footer >
-        <div class="container mx-auto flex flex-col items-center justify-center">
+        <div>
-            <p class="text-xl font-bold">Built with <span style=" color: #4338ca;">&#9829;</span> by <a
+            <p>Built with
-                    href="https://mrkaran.dev"><span class="text-indigo-700 font-semibold">mrkaran</span></a></p>
+                <span>&#9829;</span> by
-            <p class="text-center"><a href="https://github.com/mr-karan/doggo">Source Code</a></p>
+                <a href="https://mrkaran.dev"><strong>mrkaran</strong></a>
+            </p>
+            <p><a href="https://github.com/mr-karan/doggo">Source Code</a></p>
         </div>
     </footer>
-
     <script src="assets/main.js"> </script>
-</body>
+
+    <noscript>
+        <div class="noscript">
+            <h2>This service requires Javascript</h2>
+            <p>Please enable JavaScript so that the form data can be sent to the API backend.</p>
+        </div>
+    </noscript>
+</div>
+</body>
+</html>