Commit intermedio

main
Antonio De Lucreziis 2 years ago
parent fc8bb1c482
commit 658a40c8bb

@ -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>

@ -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)
})
}

@ -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,26 +43,43 @@ body {
main {
display: flex;
.sidebar {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
min-height: 100vh;
min-width: 15rem;
gap: 1rem;
color: var(--fg-2-500);
background: var(--bg-2-500);
font-size: 18px;
z-index: -1;
}
.main-content {
width: 100%;
background: var(--bg-500);
box-shadow: 0 0 2rem 0 #00000022;
header {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
padding: 0.5rem 1rem;
padding: 1rem;
gap: 0.75rem;
background: var(--bg-100);
border-bottom: 1px solid var(--bg-600);
color: var(--fg-400);
vertical-align: middle;
.logo {
@ -104,6 +126,7 @@ main {
}
}
}
}
//
// Typography

Loading…
Cancel
Save