mleku/next.orly.dev
1
0
Fork 1
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace remote Tailwind CSS with a minimal local build; refine build script and UI styling.

Browse Source 
- Added `tailwind.min.css` tailored to current app requirements to reduce external dependencies.
- Updated `index.html` to use the local Tailwind CSS file.
- Improved `package.json` `build` script to ensure `dist` directory creation and inclusion of all `public/` assets.
- Refined CSS and layout in `App.jsx` for better consistency and responsiveness.
This commit is contained in:
mleku
2025-09-20 20:24:04 +01:00
parent 6b38291bf9
commit effeae4495
4 changed files with 86 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/package.json
View File

@@ -5,7 +5,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "bun run --hot src/index.jsx", "dev": "bun run --hot src/index.jsx",
"build": "bun build ./src/index.jsx --outdir ./dist --minify && cp public/index.html dist/", "build": "bun build ./src/index.jsx --outdir ./dist --minify && mkdir -p dist && cp -r public/* dist/",
"start": "bun run dist/index.js" "start": "bun run dist/index.js"
}, },
"dependencies": { "dependencies": {

2
app/web/public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nostr Relay</title> <title>Nostr Relay</title>
<script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="tailwind.min.css" />
</head> </head>
<body class="bg-white"> <body class="bg-white">
<div id="root"></div> <div id="root"></div>

82
app/web/public/tailwind.min.css vendored Normal file
View File

@@ -0,0 +1,82 @@
/*
Local Tailwind CSS (minimal subset for this UI)
Note: This file includes just the utilities used by the app to keep size small.
You can replace this with a full Tailwind build if desired.
*/
/* Preflight-like resets (very minimal) */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html,body,#root{height:100%}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,\"Apple Color Emoji\",\"Segoe UI Emoji\"}
body{margin:0}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
/* Layout */
.sticky{position:sticky}.relative{position:relative}.absolute{position:absolute}
.top-0{top:0}.left-0{left:0}.inset-0{top:0;right:0;bottom:0;left:0}
.z-50{z-index:50}.z-10{z-index:10}
.block{display:block}.flex{display:flex}
.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.flex-grow{flex-grow:1}.shrink-0{flex-shrink:0}
.overflow-hidden{overflow:hidden}
/* Sizing */
.w-full{width:100%}.w-auto{width:auto}.w-16{width:4rem}
.h-full{height:100%}.h-16{height:4rem}
.aspect-square{aspect-ratio:1/1}
.max-w-3xl{max-width:48rem}
/* Spacing */
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.mr-0{margin-right:0}.mr-2{margin-right:.5rem}
.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}
.mx-auto{margin-left:auto;margin-right:auto}
/* Borders & Radius */
.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}
.border-0{border-width:0}.border-2{border-width:2px}
.border-white{border-color:#fff}
.border{border-width:1px}.border-gray-300{border-color:#d1d5db}
/* Colors / Backgrounds */
.bg-white{background-color:#fff}
.bg-gray-100{background-color:#f3f4f6}
.bg-blue-600{background-color:#2563eb}.hover\:bg-blue-700:hover{background-color:#1d4ed8}
.bg-red-600{background-color:#dc2626}.hover\:bg-red-700:hover{background-color:#b91c1c}
.bg-cyan-100{background-color:#cffafe}
.bg-green-100{background-color:#d1fae5}
.bg-red-100{background-color:#fee2e2}
.bg-cover{background-size:cover}.bg-center{background-position:center}
.bg-transparent{background-color:transparent}
/* Text */
.text-left{text-align:left}
.text-white{color:#fff}
.text-gray-500{color:#6b7280}.hover\:text-gray-800:hover{color:#1f2937}
.text-green-800{color:#065f46}
.text-red-800{color:#991b1b}
.text-cyan-800{color:#155e75}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.font-bold{font-weight:700}
/* Opacity */
.opacity-70{opacity:.7}
/* Effects */
.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);box-shadow:var(--tw-shadow)}
/* Cursor */
.cursor-pointer{cursor:pointer}
/* Box model */
.box-border{box-sizing:border-box}
/* Utilities */
.hover\:bg-transparent:hover{background-color:transparent}
/* Height for avatar images in header already inherit from container */

7
app/web/src/App.jsx
View File

@@ -317,9 +317,6 @@ function App() {
// Logged in view with user profile // Logged in view with user profile
<div className="sticky top-0 left-0 w-full bg-gray-100 z-50 h-16 flex items-center overflow-hidden"> <div className="sticky top-0 left-0 w-full bg-gray-100 z-50 h-16 flex items-center overflow-hidden">
<div className="flex items-center h-full w-full box-border"> <div className="flex items-center h-full w-full box-border">
<div className="flex items-center justify-start h-full">
<img src="/docs/orly.png" alt="Logo" className="h-full aspect-square w-auto object-cover shrink-0" />
</div>
<div className="relative overflow-hidden flex flex-grow items-center justify-start h-full"> <div className="relative overflow-hidden flex flex-grow items-center justify-start h-full">
{profileData?.banner && ( {profileData?.banner && (
<div className="absolute inset-0 opacity-70 bg-cover bg-center" style={{ backgroundImage: `url(${profileData.banner})` }}></div> <div className="absolute inset-0 opacity-70 bg-cover bg-center" style={{ backgroundImage: `url(${profileData.banner})` }}></div>
@@ -337,8 +334,8 @@ function App() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-end h-full"> <div className="flex items-center justify-end shrink-0 h-full">
<button className="bg-transparent text-gray-500 border-0 text-2xl cursor-pointer p-0 flex items-center justify-center w-12 h-full ml-2 mr-0 shrink-0 hover:bg-transparent hover:text-gray-800" onClick={logout}>✕</button> <button className="bg-transparent text-gray-500 border-0 text-2xl cursor-pointer flex items-center justify-center h-full aspect-square shrink-0 hover:bg-transparent hover:text-gray-800" onClick={logout}>✕</button>
</div> </div>
</div> </div>
</div> </div>