refactor: extract shared styles to app.css

feat: adopt layout and improve error handling
feat: add a shared html layout
2025-12-28 17:48:58 +01:00 · 2025-12-28 17:48:37 +01:00 · 2025-12-28 17:48:17 +01:00 · 2025-12-28 17:48:05 +01:00
5 changed files with 173 additions and 161 deletions
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -0,0 +1,137 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.6;
+    color: #222;
+    background: #fafafa;
+    margin: 0;
+    padding: 0;
+}
+
+.page {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.page-center {
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #444;
+}
+
+.page-center h1 {
+    margin-bottom: 0.5rem;
+}
+
+p {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #444;
+    font-weight: 500;
+}
+
+input[type="url"] {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+input[type="url"]:focus {
+    outline: none;
+    border-color: #444;
+}
+
+button {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+    background-color: #444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+button:hover {
+    background-color: #333;
+}
+
+button:disabled {
+    background-color: #999;
+    cursor: not-allowed;
+}
+
+.result {
+    margin-top: 2rem;
+    padding: 1rem;
+    border-radius: 4px;
+    display: none;
+}
+
+.result.success {
+    background-color: #e8f5e9;
+    border: 1px solid #4caf50;
+    color: #2e7d32;
+}
+
+.result.error {
+    background-color: #ffebee;
+    border: 1px solid #f44336;
+    color: #c62828;
+}
+
+.result.show {
+    display: block;
+}
+
+.short-url {
+    word-break: break-all;
+    font-weight: 500;
+    margin-top: 0.5rem;
+}
+
+.short-url a {
+    color: #2e7d32;
+    text-decoration: none;
+}
+
+.short-url a:hover {
+    text-decoration: underline;
+}
+
+.error-message {
+    margin-top: 0.5rem;
+}
+
+.link-home {
+    display: inline-block;
+    margin-top: 1.5rem;
+    color: #444;
+    text-decoration: none;
+    border-bottom: 1px solid #444;
+}
+
+.link-home:hover {
+    color: #333;
+    border-color: #333;
+}
--- a/templates/404.html.ep
+++ b/templates/404.html.ep
@@ -1,32 +1,7 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>404 Not Found</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            line-height: 1.6;
-            color: #222;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 2rem;
-            text-align: center;
-        }
-        h1 {
-            font-size: 3rem;
-            margin-bottom: 0.5rem;
-            color: #444;
-        }
-        p {
-            font-size: 1.1rem;
-            color: #666;
-        }
-    </style>
-</head>
-<body>
+% layout 'default';
+% stash title => '404 Not Found';
+<main class="page page-center">
    <h1>404 Not Found</h1>
    <p>The requested short link was not found.</p>
-</body>
-</html>
+    <a href="/" class="link-home">Back to home</a>
+</main>
--- a/templates/500.html.ep
+++ b/templates/500.html.ep
@@ -1,32 +1,7 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>500 Internal Server Error</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            line-height: 1.6;
-            color: #222;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 2rem;
-            text-align: center;
-        }
-        h1 {
-            font-size: 3rem;
-            margin-bottom: 0.5rem;
-            color: #444;
-        }
-        p {
-            font-size: 1.1rem;
-            color: #666;
-        }
-    </style>
-</head>
-<body>
+% layout 'default';
+% stash title => '500 Internal Server Error';
+<main class="page page-center">
    <h1>500 Internal Server Error</h1>
    <p>An error occurred while processing your request.</p>
-</body>
-</html>
+    <a href="/" class="link-home">Back to home</a>
+</main>
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -1,100 +1,6 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Urupam - URL Shortener</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            line-height: 1.6;
-            color: #222;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-            color: #444;
-            text-align: center;
-        }
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: #444;
-            font-weight: 500;
-        }
-        input[type="url"] {
-            width: 100%;
-            padding: 0.75rem;
-            font-size: 1rem;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-        }
-        input[type="url"]:focus {
-            outline: none;
-            border-color: #444;
-        }
-        button {
-            width: 100%;
-            padding: 0.75rem;
-            font-size: 1rem;
-            background-color: #444;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-weight: 500;
-        }
-        button:hover {
-            background-color: #333;
-        }
-        button:disabled {
-            background-color: #999;
-            cursor: not-allowed;
-        }
-        .result {
-            margin-top: 2rem;
-            padding: 1rem;
-            border-radius: 4px;
-            display: none;
-        }
-        .result.success {
-            background-color: #e8f5e9;
-            border: 1px solid #4caf50;
-            color: #2e7d32;
-        }
-        .result.error {
-            background-color: #ffebee;
-            border: 1px solid #f44336;
-            color: #c62828;
-        }
-        .result.show {
-            display: block;
-        }
-        .short-url {
-            word-break: break-all;
-            font-weight: 500;
-            margin-top: 0.5rem;
-        }
-        .short-url a {
-            color: #2e7d32;
-            text-decoration: none;
-        }
-        .short-url a:hover {
-            text-decoration: underline;
-        }
-        .error-message {
-            margin-top: 0.5rem;
-        }
-    </style>
-</head>
-<body>
+% layout 'default';
+% stash title => 'Urupam - URL Shortener';
+<main class="page">
    <h1>Urupam</h1>
    <form id="shorten-form">
        <div class="form-group">
@@ -132,13 +38,21 @@
                    body: JSON.stringify({ url: url })
                });

-                const data = await response.json();
+                const contentType = response.headers.get('content-type') || '';
+                let data = {};
+                if (contentType.includes('application/json')) {
+                    data = await response.json();
+                } else {
+                    const text = await response.text();
+                    data = { error: text || 'Unexpected response' };
+                }

                if (response.ok && data.success) {
                    showSuccess(data.short_url, data.original_url);
                    urlInput.value = '';
                } else {
-                    showError(data.error || 'An error occurred');
+                    const message = data.error || `Request failed (${response.status})`;
+                    showError(message);
                }
            } catch (error) {
                showError('Network error: ' + error.message);
@@ -176,5 +90,4 @@
            return div.innerHTML;
        }
    </script>
-</body>
-</html>
+</main>
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title><%= stash('title') || 'Urupam' %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= stylesheet '/css/app.css' %>
+</head>
+<body>
+    <%= content %>
+</body>
+</html>
Author	SHA1	Message	Date
Kharec	edc1c8cd66	refactor: extract shared styles to app.css	2025-12-28 17:48:58 +01:00
Kharec	fcbb8f8e5e	feat: adopt layout and improve error handling	2025-12-28 17:48:37 +01:00
Kharec	d8c43cd29b	feat: add a shared html layout	2025-12-28 17:48:17 +01:00
Kharec	2ae22a271b	feat: use shared layout	2025-12-28 17:48:05 +01:00