Merge pull request #56 from TxtDot/frontend-1

Frontend improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "txtdot",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "description": "",
   "main": "dist/app.js",

src/errors/handler.ts

@@ -2,6 +2,8 @@ import { FastifyReply, FastifyRequest } from "fastify";
 import { NotHtmlMimetypeError, TxtDotError } from "./main";
 import { getFastifyError } from "./validation";
 
+import { IGetSchema } from "../types/requests/browser";
+
 export default function errorHandler(
   error: Error,
   req: FastifyRequest,
@@ -10,7 +12,9 @@ export default function errorHandler(
   if (req.originalUrl.startsWith("/api/")) {
     return apiErrorHandler(error, reply);
   }
-  return htmlErrorHandler(error, reply);
+
+  const url = (req as FastifyRequest<IGetSchema>).query.url;
+  return htmlErrorHandler(error, reply, url);
 }
 
 function apiErrorHandler(error: Error, reply: FastifyReply) {
@@ -40,13 +44,14 @@ function apiErrorHandler(error: Error, reply: FastifyReply) {
   return generateResponse(500);
 }
 
-function htmlErrorHandler(error: Error, reply: FastifyReply) {
+function htmlErrorHandler(error: Error, reply: FastifyReply, url: string) {
   if (error instanceof NotHtmlMimetypeError) {
     return reply.redirect(301, error.url);
   }
 
   if (getFastifyError(error)?.statusCode === 400) {
     return reply.code(400).view("/templates/error.ejs", {
+      url,
       code: 400,
       description: `Invalid parameter specified: ${error.message}`,
     })
@@ -54,12 +59,14 @@ function htmlErrorHandler(error: Error, reply: FastifyReply) {
 
   if (error instanceof TxtDotError) {
     return reply.code(error.code).view("/templates/error.ejs", {
+      url,
       code: error.code,
       description: error.description,
     });
   }
 
   return reply.code(500).view("/templates/error.ejs", {
+    url,
     code: 500,
     description: `${error.name}: ${error.message}`,
   });

src/publicConfig.ts

@@ -1,5 +1,5 @@
 export default {
-  version: "1.1.1",
+  version: "1.3.1",
   description:
-    "HTTP proxy that parses only text, links and pictures from pages reducing internet traffic, removing ads and heavy scripts",
+    "txtdot is an HTTP proxy that parses only text, links and pictures from pages reducing internet bandwidth usage, removing ads and heavy scripts",
 };

src/routes/browser/index.ts

@@ -1,9 +1,11 @@
 import { FastifyInstance } from "fastify";
+
+import publicConfig from "../../publicConfig";
 import { engineList } from "../../handlers/main";
 import { indexSchema } from "../../types/requests/browser";
 
 export default async function indexRoute(fastify: FastifyInstance) {
   fastify.get("/", { schema: indexSchema }, async (_, reply) => {
-    return reply.view("/templates/index.ejs", { engineList });
+    return reply.view("/templates/index.ejs", { publicConfig, engineList });
   });
 }

static/common.css

@@ -45,6 +45,12 @@ main {
   margin: auto;
 }
 
+.menu {
+  display: flex;
+  flex-direction: row;
+  column-gap: 0.25rem;
+}
+
 .button {
   padding: 0.25rem 0.75rem;
 
@@ -54,6 +60,7 @@ main {
   background: var(--bg);
   color: var(--fg);
   text-decoration: none;
+  font-size: 1rem;
 
   cursor: pointer;
 }

static/get.css

@@ -1,8 +1,4 @@
-.menu {
+.menu .button {
-  display: flex;
-  flex-direction: row;
-  column-gap: 0.25rem;
-
   font-size: 0.9rem;
 }
 

static/index.css

@@ -16,3 +16,7 @@ h1 > .dot {
 h1 > .dot-err {
   color: var(--error);
 }
+
+.menu {
+  justify-content: center;
+}

templates/error.ejs

@@ -13,9 +13,12 @@
     <main>
       <header>
         <h1>txt<span class="dot-err">.</span></h1>
+        <p class="menu">
+          <a href="/" class="button">Home</a>
+          <a href="<%= url %>" class="button secondary">Original page</a>
+        </p>
         <p><%= description %></p>
       </header>
-      <a href="/" class="button secondary">Home</a>
     </main>
   </body>
 </html>

templates/index.ejs

@@ -1,11 +1,10 @@
-<% const desc="txtdot is a HTTP proxy that parses text, links and pictures from pages reducing internet traffic, removing ads and heavy scripts" %>
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="<%= desc %>">
+    <meta name="description" content="<%= publicConfig.description %>">
     <title>txt. main page</title>
     <link rel="stylesheet" href="/static/common.css">
     <link rel="stylesheet" href="/static/index.css">
@@ -15,7 +14,12 @@
     <main>
       <header>
         <h1>txt<span class="dot">.</span></h1>
-        <p><%= desc %></p>
+        <p class="menu">
+          <a href="https://github.com/TxtDot/txtdot/releases/latest" class="button secondary">v<%= publicConfig.version %></a>
+          <a href="https://github.com/txtdot/txtdot" class="button secondary">GitHub</a>
+          <a href="https://txtdot.github.io/documentation" class="button secondary">Docs</a>
+        </p>
+        <p><%= publicConfig.description %></p>
       </header>
       <form action="/get" method="get" class="input-grid">
         <div class="input">