fix: Performance and accessibility

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svin-chat",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Coolest chat in the world 😎",
   "main": "src/index.js",
   "scripts": {

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /attachment/
+Disallow: /thumbnail/
+Disallow: /preview/

src/index.js

@@ -27,7 +27,7 @@ app.set("views", path.join(__dirname, "views"));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static("public"));
+app.use(express.static("public", { maxAge: "1y" }));
 app.use(session({
     secret: process.env.SESSION_SECRET,
     resave: false,

src/routes/attachment.js

@@ -15,6 +15,7 @@ router.get("/thumbnail/:id", async (req, res) => {
                 throw "User has no access to this thumbnail!";
             }
             const attachment = await db.one("SELECT type, data FROM thumbnails WHERE attachment_id = $1", [ req.params.id ]);
+            res.set("Cache-Control", "max-age=31557600, immutable");
             res.contentType(attachment.type);
             res.write(attachment.data);
             res.end();
@@ -36,6 +37,7 @@ router.get("/attachment/:id", async (req, res) => {
                 throw "User has no access to this attachment!";
             }
             const attachment = await db.one("SELECT type, data FROM attachments WHERE id = $1", [ req.params.id ]);
+            res.set("Cache-Control", "max-age=31557600, immutable");
             res.contentType(attachment.type);
             res.write(attachment.data);
             res.end();

src/views/add.ejs

@@ -1,7 +1,7 @@
 <div class="chats-container">
     <div class="chat-header">
         <a href="/" class="action">
-            <img src="/img/back.png" />
+            <img src="/img/back.png" alt="Back to chats" />
         </a>
         <span class="chat-title">Add SvinChat</span>
     </div>

src/views/chat.ejs

@@ -1,7 +1,7 @@
 <div class="chats-container">
     <div class="chat-header">
         <a href="/" class="action">
-            <img src="/img/back.png" />
+            <img src="/img/back.png" alt="Back to chats" />
         </a>
         <span class="chat-title"><%- title %></span>
     </div>
@@ -14,7 +14,7 @@
             <div class="message align-end">
                 <% if (message.attachment !== null) { %>
                 <a href="/preview/<%- message.attachment %>" target="_blank">
-                    <img src="/thumbnail/<%- message.attachment %>" />
+                    <img src="/thumbnail/<%- message.attachment %>" width="256" height="256" alt="Message attachment" />
                 </a>
                 <% } %>
                 <div class="message-text user-message">
@@ -22,7 +22,7 @@
             <div class="message align-start">
                 <% if (message.attachment !== null) { %>
                 <a href="/preview/<%- message.attachment %>" target="_blank">
-                    <img src="/thumbnail/<%- message.attachment %>" />
+                    <img src="/thumbnail/<%- message.attachment %>" width="256" height="256" alt="Message attachment" />
                 </a>
                 <% } %>
                 <div class="message-text friend-message">
@@ -41,12 +41,12 @@
     <div id="attachment-preview">
         <span id="attachment-filename"></span>
         <span onclick="onAttachmentClose(event)" id="attachment-close" class="action">
-            <img src="/img/close.png" />
+            <img src="/img/close.png" alt="Remove attachment" />
         </span>
     </div>
     <form onsubmit="return onMessageSubmit(event)" class="input-form">
         <label for="message-attachment" class="action">
-            <img src="/img/clip.png" />
+            <img src="/img/clip.png" alt="Add attachment" />
         </label>
         <input type="file" id="message-attachment" name="attachment" onchange="onAttachmentChange(this)" accept=".jpg, .jpeg, .png, .webp, .avif" />
         <input type="text" id="message-input" name="text" placeholder="Enter message..." class="text-input" autocomplete="off" required />

src/views/chats.ejs

@@ -2,7 +2,7 @@
     <div class="chat-header">
         <span class="chat-title">SvinChats</span>
         <a href="/logout" class="action">
-            <img src="/img/logout.png" />
+            <img src="/img/logout.png" alt="Log out" />
         </a>
     </div>
     <div class="chat-list">
@@ -19,5 +19,5 @@
     </div>
 </div>
 <a href="/add" class="add-button">
-    <img src="/img/add.png" />
+    <img src="/img/add.png" alt="Add chat" />
 </a>

src/views/error.ejs

@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="SvinChat error page" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="/css/main.css">
     <title>Error</title>

src/views/home.ejs

@@ -1,6 +1,6 @@
 <div class="container">
     <div class="hss"></div>
-    <img src="/img/logo.png" class="hero-logo" />
+    <img src="/img/logo.png" class="hero-logo" alt="SvinChat logo" />
     <p class="hero-label">SvinChat</p>
     <div class="hs"></div>
     <form action="/login">

src/views/layout.ejs

@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="SvinChat" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="/css/main.css">
     <title>SvinChat</title>

src/views/login.ejs

@@ -1,5 +1,5 @@
 <div class="container">
-    <img src="/img/logo.png" class="auth-logo" />
+    <img src="/img/logo.png" class="auth-logo" alt="SvinChat logo" />
     <p class="auth-label">SvinChat</p>
     <div class="hs"></div>
     <form method="POST" action="/login">
@@ -11,5 +11,5 @@
     </form>
 </div>
 <a href="/" class="back-button">
-    <img src="/img/back.png" />
+    <img src="/img/back.png" alt="Home page" />
 </a>

src/views/preview.ejs

@@ -3,14 +3,15 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="SvinChat attachment preview" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="/css/main.css">
     <title>Preview</title>
 </head>
 <body>
-    <img src="/attachment/<%- attachment %>" class="preview" />
+    <img src="/attachment/<%- attachment %>" class="preview" alt="Attachment image" />
     <a href="/attachment/<%- attachment %>" download="attachment_<%- attachment %>.jpg" class="add-button">
-        <img src="/img/download.png" />
+        <img src="/img/download.png" alt="Download attachment" />
     </a>
 </body>
 </html>

src/views/register.ejs

@@ -1,5 +1,5 @@
 <div class="container">
-    <img src="/img/logo.png" class="auth-logo" />
+    <img src="/img/logo.png" class="auth-logo" alt="SvinChat logo" />
     <p class="auth-label">SvinChat</p>
     <div class="hs"></div>
     <form method="POST" action="/register">
@@ -11,5 +11,5 @@
     </form>
 </div>
 <a href="/" class="back-button">
-    <img src="/img/back.png" />
+    <img src="/img/back.png" alt="Home page" />
 </a>