ekzyis/delphi.market
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Setup tailwindcss

Browse Source
This commit is contained in:
ekzyis 2024-07-10 06:11:28 +02:00
parent 4ed1ae973b
commit 01f85bd098
6 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -10,3 +10,6 @@ public/hotreload
# templ # templ
*_templ.go *_templ.go
# tailwindcss
public/css/tailwind.css

2
Makefile
View File

@ -5,10 +5,12 @@ SOURCE := $(shell find db env lib lnd pages public server -type f) main.go
build: delphi.market build: delphi.market
delphi.market: $(SOURCE) delphi.market: $(SOURCE)
tailwindcss -i public/css/_tw-input.css -o public/css/tailwind.css
templ generate -path server/router/pages templ generate -path server/router/pages
go build -o delphi.market . go build -o delphi.market .
run: run:
tailwindcss -i public/css/_tw-input.css -o public/css/tailwind.css
templ generate -path server/router/pages templ generate -path server/router/pages
go run . go run .

1
hotreload.sh
View File

@ -9,6 +9,7 @@ function restart_server() {
[[ -z "$PID" ]] || kill -15 $PID [[ -z "$PID" ]] || kill -15 $PID
ENV=development make build -B ENV=development make build -B
set -e set -e
tailwindcss -i public/css/_tw-input.css -o public/css/tailwind.css
templ generate -path server/router/pages templ generate -path server/router/pages
go build -o delphi.market . go build -o delphi.market .
./delphi.market >> server.log 2>&1 & ./delphi.market >> server.log 2>&1 &

41
public/css/_tw-input.css Normal file
View File

@ -0,0 +1,41 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background-color: #191d21;
--color: #d3d3d3;
--muted-color: #6c757d;
}
@layer base {
body {
background-color: var(--background-color);
color: var(--color);
transition: background-color 150ms ease-in;
}
footer {
color: var(--muted-color);
}
hr {
border-color: var(--muted-color);
border-style: dashed;
@apply pb-1;
}
a {
text-decoration: underline;
transition: background-color 150ms ease-in, color 150ms ease-in;
}
a:hover {
background-color: var(--color);
color: var(--background-color);
}
nav>a {
padding: 0 0.25em;
}
}

14
server/router/pages/index.templ
View File

@ -14,7 +14,7 @@ templ Index() {
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="manifest" href="/site.webmanifest"/> <link rel="manifest" href="/site.webmanifest"/>
<link rel="stylesheet" href="/css/index.css"/> <link rel="stylesheet" href="/css/tailwind.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#091833"/> <meta name="theme-color" content="#091833"/>
<script src="/js/htmx.js" integrity="sha384-Xh+GLLi0SMFPwtHQjT72aPG19QvKB8grnyRbYBNIdHWc2NkCrz65jlU7YrzO6qRp" crossorigin="anonymous"></script> <script src="/js/htmx.js" integrity="sha384-Xh+GLLi0SMFPwtHQjT72aPG19QvKB8grnyRbYBNIdHWc2NkCrz65jlU7YrzO6qRp" crossorigin="anonymous"></script>
@ -22,8 +22,8 @@ templ Index() {
<script defer src="/js/hotreload.js"></script> <script defer src="/js/hotreload.js"></script>
} }
</head> </head>
<body> <body class="container">
<header class="flex flex-row text-center justify-center pt-1"> <header class="flex flex-row text-center justify-center mt-1">
<nav> <nav>
<a href="/">home</a> <a href="/">home</a>
if ctx.Value(c.SessionContextKey) != nil { if ctx.Value(c.SessionContextKey) != nil {
@ -33,8 +33,8 @@ templ Index() {
} }
</nav> </nav>
</header> </header>
<div class="container flex flex-column text-center"> <div class="flex flex-col text-center">
<code> <code class="my-3">
<strong> <strong>
<!-- need to escape backslashes or backtick here ... --> <!-- need to escape backslashes or backtick here ... -->
<pre> <pre>
@ -48,9 +48,9 @@ templ Index() {
</pre> </pre>
</strong> </strong>
</code> </code>
<div class="font-mono mb-1">A prediction market using the lightning network [WIP]</div> <div class="font-mono my-3">A prediction market using the lightning network</div>
</div> </div>
<footer class="flex justify-center"> <footer class="flex justify-center px-1 pt-3">
<div> <div>
<hr/> <hr/>
<small> <small>

12
tailwind.config.js Normal file
View File

@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./server/router/pages/*.templ"],
theme: {
container: {
center: true,
padding: '1rem'
},
extend: {},
},
plugins: [],
}