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.
pull/18/head
Kailash Nadh 2021-03-11 00:03:06 +05:30 committed by Karan Sharma
parent 0dc61ac8ec
commit b8ba782cf3
5 changed files with 337 additions and 1435 deletions

View File

@ -9,18 +9,10 @@ VERSION := ${HASH}
build-cli: build-cli:
go build -o ${CLI_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/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 .PHONY: build-api
build-api: build-api:
go build -o ${API_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/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 .PHONY: build
build: build-api build-cli 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} ${CLI_BIN}
.PHONY: run-api .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 ${API_BIN} --config config-api-sample.toml
.PHONY: clean .PHONY: clean

View File

@ -1,154 +1,90 @@
const $ = document.querySelector.bind(document); const $ = document.querySelector.bind(document);
const $new = document.createElement.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 () { (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. // createRow creates a table row with the given cell values.
function createRow(item) { function createRow(item) {
const tr = $new('tr'); const tr = $new('tr');
fields.forEach((f) => { fields.forEach((f) => {
const td = $new('td'); 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); tr.appendChild(td);
}); });
return tr; 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; 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) { 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();
}
};
})(); })();

View File

@ -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;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,175 +1,100 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Doggo DNS</title> <title>Doggo DNS</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> <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> </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> </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> </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> </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>
<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> </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> </div>
</footer> </footer>
<script src="assets/main.js"> </script> <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>