Commit intermedio

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

@ -14,7 +14,46 @@
<link rel="stylesheet" href="/styles/main.scss"> <link rel="stylesheet" href="/styles/main.scss">
</head> </head>
<body> <body>
<main></main> <main>
<script type="module" src="/src/home.jsx"></script> <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> </body>
</html> </html>

@ -2,6 +2,7 @@ import { dirname, resolve } from 'path'
import express from 'express' import express from 'express'
import { createServer as createViteServer } from 'vite' import { createServer as createViteServer } from 'vite'
import { fileURLToPath } from 'url' import { fileURLToPath } from 'url'
import { readFileSync } from 'fs'
const __dirname = dirname(fileURLToPath(import.meta.url)) const __dirname = dirname(fileURLToPath(import.meta.url))
@ -15,11 +16,15 @@ async function createServer(customHtmlRoutes) {
}) })
for (const [route, file] of Object.entries(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) const filePath = resolve(__dirname, file)
console.log(`Custom Route: %s`, req.url) 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-500: #f0f0f0;
--bg-600: #e0e0e0; --bg-600: #e0e0e0;
--bg-2-400: #666;
--bg-2-500: #38383d;
--fg-400: #3d3d3d; --fg-400: #3d3d3d;
--fg-500: #333; --fg-500: #333;
--fg-2-500: #ddd;
--ft-sans: 'Open Sans', sans-serif; --ft-sans: 'Open Sans', sans-serif;
--ft-sans-wt-light: 300; --ft-sans-wt-light: 300;
@ -38,26 +43,43 @@ body {
main { main {
display: flex; display: flex;
.sidebar {
display: flex;
flex-direction: column; 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 { header {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
padding: 0.5rem 1rem; padding: 1rem;
gap: 0.75rem; gap: 0.75rem;
background: var(--bg-100); background: var(--bg-100);
border-bottom: 1px solid var(--bg-600); border-bottom: 1px solid var(--bg-600);
color: var(--fg-400); color: var(--fg-400);
vertical-align: middle; vertical-align: middle;
.logo { .logo {
@ -104,6 +126,7 @@ main {
} }
} }
} }
}
// //
// Typography // Typography

Loading…
Cancel
Save