Working redirects

README.md

@@ -1 +1,13 @@
 # Lupus Lite
+
+## Usage
+
+```bash
+# Development Mode: also starts "npm run dev" inside "frontend/"
+$ MODE=dev go run .
+
+# Production Mode
+$ cd frontend
+$ npm run build
+$ go build
+```

frontend/index.html

@@ -13,6 +13,12 @@
     <link rel="stylesheet" href="/src/main.scss">
 </head>
 <body>
-    <h1>Lupus Lite</h1>
+    <main>
+        <h1>Lupus Lite</h1>
+        <hr>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore qui quibusdam placeat officiis necessitatibus. Unde quis eos quo. Laborum, quis.</p>
+        <hr>
+        <a href="/login" class="button">Login</a>
+    </main>
 </body>
 </html>

frontend/src/main.scss

@@ -13,10 +13,9 @@
     --ft-sans-wt-regular: 400;
     --ft-sans-wt-bold: 900;
 
-    --text-500: #f0f0f0;
-
-    --accent-100: #f19d90;
-    --accent-500: #a31e17;
+    --accent-100: #f7dfdb;
+    --accent-400: #c55341;
+    --accent-500: #a93523;
 
     --bg-500: #222;
 }
@@ -29,13 +28,30 @@ body {
 
     font-family: var(--ft-sans);
     font-weight: var(--ft-sans-wt-regular);
-    font-size: 16px;
+    font-size: 17px;
 
-    color: var(--text-500);
+    color: var(--accent-100);
     background: var(--bg-500);
 }
 
+//
+// Pages Structure
+//
+
+main {
+    margin: 0 auto;
+    padding: 1rem 0.5rem;
+
+    max-width: 80ch;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+//
 // Components
+//
 
 form {
     display: grid;
@@ -66,15 +82,31 @@ form {
     }
 }
 
+a {
+    &.button {
+        text-decoration: none;
+    }
+}
+
+button,
+.button {
+    border: none;
+
+    color: var(--accent-100);
+    background: var(--accent-500);
+
+    padding: 0.5rem 1rem;
+}
+
 //
 // Typography
 //
 
 hr {
     width: 100%;
-    height: 2px;
+    height: 1px;
     border: none;
-    background: var(--accent-700);
+    background: var(--accent-500);
 }
 
 p {
@@ -103,7 +135,7 @@ $heading-scale: 1.33;
         margin: 0;
 
         font-family: var(--ft-serif);
-        color: var(--accent-100);
+        color: var(--accent-400);
 
         $factor: pow($heading-scale, 5 - $i);
         font-size: $base-font-size * $factor;

frontend/vite.config.js

@@ -2,18 +2,31 @@ import { defineConfig } from 'vite'
 import { basename, extname, resolve } from 'path'
 
 const stripExt = path => basename(path, extname(path))
+const entryPoints = ['index.html', 'login.html', 'user.html', 'game.html']
+
+const redirect = redirectMap => ({
+    name: 'redirect',
+    configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+            if (!!redirectMap[req.url]) {
+                res.statusCode = 302
+                res.setHeader('Location', redirectMap[req.url])
+                res.setHeader('Content-Length', '0')
+                res.end()
+            } else {
+                next()
+            }
+        })
+    },
+})
+
+const redirectMap = Object.fromEntries(entryPoints.map(path => ['/' + stripExt(path), '/' + path]))
 
 export default defineConfig({
     build: {
         rollupOptions: {
             input: Object.fromEntries(
-                [
-                    // Entry points
-                    'index.html',
-                    'login.html',
-                    'user.html',
-                    'game.html',
-                ].map(path => [stripExt(path), resolve(__dirname, path)])
+                entryPoints.map(path => [stripExt(path), resolve(__dirname, path)])
             ),
         },
     },
@@ -22,5 +35,5 @@ export default defineConfig({
             '/api': 'http://127.0.0.1:4000',
         },
     },
-    plugins: [],
+    plugins: [redirect(redirectMap)],
 })