Commit intermedio

2 years ago · 658a40c8bb
parent fc8bb1c482
commit 658a40c8bb
3 changed files with 113 additions and 46 deletions
--- a/_frontend/index.html
+++ b/_frontend/index.html
@ -14,7 +14,46 @@
    <link rel="stylesheet" href="/styles/main.scss">
 </head>
 <body>
-    <main></main>
-    <script type="module" src="/src/home.jsx"></script>
+    <main>
+        <div class="sidebar">
+            <div class="logo">Storage</div>
+            <div class="items">
+                <div class="item">
+                    <div class="label">
+                        Dashboard
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="label">
+                        Buckets
+                    </div>
+                    <div class="children">
+                        <div class="item">
+                            <div class="label">Bucket 1</div>
+                        </div>
+                        <div class="item">
+                            <div class="label">Bucket 2</div>
+                        </div>
+                        <div class="item">
+                            <div class="label">Bucket 3</div>
+                        </div>
+                        <div class="item">
+                            <div class="label">Bucket 4</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main-content">
+            <header>
+                <div class="group">
+                    <div class="label">Dashboard</div>
+                </div>
+                <div class="group">
+                    <div class="label">Login</div>
+                </div>
+            </header>
+        </div>
+    </main>
 </body>
 </html>
--- a/_frontend/server.js
+++ b/_frontend/server.js
@ -2,6 +2,7 @@ import { dirname, resolve } from 'path'
 import express from 'express'
 import { createServer as createViteServer } from 'vite'
 import { fileURLToPath } from 'url'
+import { readFileSync } from 'fs'

 const __dirname = dirname(fileURLToPath(import.meta.url))

@ -15,11 +16,15 @@ async function createServer(customHtmlRoutes) {
    })

    for (const [route, file] of Object.entries(customHtmlRoutes)) {
-        app.get(route, (req, res) => {
+        app.get(route, async (req, res) => {
            const filePath = resolve(__dirname, file)
            console.log(`Custom Route: %s`, req.url)

-            return res.sendFile(filePath)
+            let htmlFile = readFileSync(filePath, 'utf8')
+            htmlFile = await vite.transformIndexHtml(req.originalUrl, htmlFile)
+
+            res.setHeader('Content-Type', 'text/html')
+            return res.send(htmlFile)
        })
    }

--- a/_frontend/styles/main.scss
+++ b/_frontend/styles/main.scss
@ -9,9 +9,14 @@
    --bg-500: #f0f0f0;
    --bg-600: #e0e0e0;

+    --bg-2-400: #666;
+    --bg-2-500: #38383d;
+
    --fg-400: #3d3d3d;
    --fg-500: #333;

+    --fg-2-500: #ddd;
+
    --ft-sans: 'Open Sans', sans-serif;

    --ft-sans-wt-light: 300;
@ -38,68 +43,86 @@ body {

 main {
    display: flex;
-    flex-direction: column;

-    align-items: center;
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+
+        padding: 1rem;
+        min-height: 100vh;
+        min-width: 15rem;
+
+        color: var(--fg-2-500);
+        background: var(--bg-2-500);
+
+        font-size: 18px;

-    gap: 1rem;
+        z-index: -1;
+    }

-    header {
+    .main-content {
        width: 100%;
+        background: var(--bg-500);
+        box-shadow: 0 0 2rem 0 #00000022;

-        display: flex;
-        align-items: center;
-        justify-content: center;
+        header {
+            width: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;

-        padding: 0.5rem 1rem;
-        gap: 0.75rem;
+            padding: 1rem;
+            gap: 0.75rem;

-        background: var(--bg-100);
-        border-bottom: 1px solid var(--bg-600);
+            background: var(--bg-100);
+            border-bottom: 1px solid var(--bg-600);

-        color: var(--fg-400);
-        vertical-align: middle;
+            color: var(--fg-400);

-        .logo {
-            font-size: 32px;
-            font-weight: var(--ft-sans-wt-bold);
-        }
+            vertical-align: middle;

-        .machine {
-            font-size: 24px;
-            font-weight: var(--ft-sans-wt-normal);
+            .logo {
+                font-size: 32px;
+                font-weight: var(--ft-sans-wt-bold);
+            }
+
+            .machine {
+                font-size: 24px;
+                font-weight: var(--ft-sans-wt-normal);
+            }
        }
-    }

-    .widgets {
-        display: flex;
-        justify-content: center;
-        align-items: start;
+        .widgets {
+            display: flex;
+            justify-content: center;
+            align-items: start;

-        flex-wrap: wrap;
-        gap: 2rem;
+            flex-wrap: wrap;
+            gap: 2rem;

-        max-width: 120ch;
+            max-width: 120ch;

-        .widget {
-            background: var(--bg-100);
-            border: 1px solid var(--bg-600);
-            padding: 1rem;
+            .widget {
+                background: var(--bg-100);
+                border: 1px solid var(--bg-600);
+                padding: 1rem;

-            min-height: 10rem;
-            max-width: 50ch;
+                min-height: 10rem;
+                max-width: 50ch;

-            .title {
-                font-weight: var(--ft-sans-wt-bold);
+                .title {
+                    font-weight: var(--ft-sans-wt-bold);

-                code {
-                    font-weight: normal;
+                    code {
+                        font-weight: normal;
+                    }
                }
-            }

-            &.todo {
-                width: 300px;
-                height: 200px;
+                &.todo {
+                    width: 300px;
+                    height: 200px;
+                }
            }
        }
    }