feat(templates): Add port templates

src/routes/port.ts

@@ -4,6 +4,7 @@ import { z } from "zod";
 import * as IP from "ip";
 import realIP from "../middlewares/real-ip";
 import presentation from "../middlewares/presentation";
+import render from "../utils/renderer";
 
 export const portRoute = new Hono();
 
@@ -55,12 +56,14 @@ portRoute.get("/:port", realIP, presentation, async context => {
 
 	const result = await connectToAddress(ip, port, { timeout });
 
-	return context.json({
+	return render(context, "port", {
+		port: port,
 		isOpen: result.isOpen,
+		ip: ip,
 	});
 });
 
-portRoute.get("/:ip/:port", async context => {
+portRoute.get("/:ip/:port", realIP, presentation, async context => {
 	const rawData = {
 		ip: context.req.param("ip"),
 		port: context.req.param("port"),
@@ -92,7 +95,9 @@ portRoute.get("/:ip/:port", async context => {
 
 	const result = await connectToAddress(ip, port, { timeout });
 
-	return context.json({
+	return render(context, "port", {
+		port: port,
 		isOpen: result.isOpen,
+		ip: ip,
 	});
 });

src/utils/renderer.ts

@@ -4,7 +4,7 @@ import * as nunjucks from "nunjucks";
 
 export default async function render(
 	context: Context,
-	templateName: "index",
+	templateName: "index" | "port",
 	ctx: Record<string, any>,
 ) {
 	const presentation = context.get("presentation") as PresentationType;

templates/base.html.njk

@@ -33,6 +33,11 @@
 				border-radius: 1em;
 				padding: 3em;
 			}
+
+			h2 {
+				margin-top: 0;
+				text-align: left;
+			}
 		</style>
 
 		{% block header %}{% endblock %}

templates/index.html.njk

@@ -2,11 +2,6 @@
 
 {% block header %}
 	<style type="text/css">
-		h2 {
-			margin-top: 0;
-			text-align: left;
-		}
-
 		code {
 			background-color: #2f2f2f;
 			color: #eee;

templates/port.html.njk

@@ -0,0 +1,96 @@
+{% extends "base.html.njk" %}
+
+{% block header %}
+    <style type="text/css">
+        .status {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            column-gap: .6em;
+
+            font-size: 1.5rem;
+        }
+
+        .status p {
+            margin: 0;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        #icon {
+            width: 0.7em;
+            height: 0.7em;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: relative;
+        }
+
+        .status.success {
+            color: #2ecc71;
+        }
+
+        .status.error {
+            color: #e74c3c;
+        }
+
+        .status.success #icon {
+            background-color: #2ecc71;
+        }
+
+        .status.error #icon {
+            background-color: #e74c3c;
+        }
+
+        .status.success #icon::before {
+            content: "";
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-color: #2ecc71;
+            opacity: 0.3;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            transform: scale(2);
+
+            animation: pulse 3s ease-out infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                opacity: 0.6;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+    </style>
+{% endblock %}
+
+{% block main %}
+    <h2>Am I Open</h2>
+
+    <i>{{ ip }}</i>
+
+    {% if isOpen %}
+        <div class="status success">
+            <div id="icon"></div>
+
+            <p>Port <strong>{{port}}</strong> is open</p>
+        </div>
+    {% else %}
+        <div class="status error">
+            <div id="icon"></div>
+
+            <p>Port <strong>{{port}}</strong> is closed</p>
+        </div>
+    {% endif %}
+{% endblock %}

templates/port.txt.njk

@@ -0,0 +1 @@
+{% if isOpen %}open{% else %}closed{% endif %}