Working redirects

2 years ago · 328271edc3
parent 4901bf49ef
commit 328271edc3
4 changed files with 81 additions and 18 deletions
--- a/README.md
+++ b/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
+```
--- a/frontend/index.html
+++ b/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>
--- a/frontend/src/main.scss
+++ b/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;
--- a/frontend/vite.config.js
+++ b/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)],
 })