fernando/jerguero
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

htmx

Browse Source
This commit is contained in:
Araozu 2023-11-09 20:00:49 -05:00
parent ac7a6806ae
commit 6bb48dbc16
8 changed files with 166 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -31,3 +31,7 @@ build/
### VS Code ### ### VS Code ###
.vscode/ .vscode/
### css compiled by tailwind ###
src/main/resources/static/main.css

31
src/main/java/dev/araozu/jerguero/sample/SampleController.java Normal file
View File

@ -0,0 +1,31 @@
package dev.araozu.jerguero.sample;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Calendar;
@Controller
public class SampleController {
@GetMapping(
value = "/sampuru",
produces = "text/html"
)
public String sampuru(Model model) {
// number of milliseconds since unix epoch
long millis = Calendar.getInstance().getTimeInMillis();
String additionalColor = "";
if (Math.random() > 0.5) {
additionalColor = "#B71C1C";
} else {
additionalColor = "#0D47A1";
}
model.addAttribute("millis", millis);
model.addAttribute("additionalColor", additionalColor);
return "partial-response";
}
}

18
src/main/resources/frontend/main.css
View File

@ -1,3 +1,21 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Base variables */
:root {
}
/* Dark theme by default */
:root {
--c-bg: #202020;
--c-on-bg: white;
}
html {
background-color: var(--c-bg);
color: var(--c-on-bg);
}

15
src/main/resources/frontend/tailwind.config.js
View File

@ -1,8 +1,19 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["../templates/**/*.{html,js}"], // it will be explained later content: [
"../templates/**/*.{html,js}",
"../static/**/*.{html,js}",
],
theme: { theme: {
extend: {}, extend: {
fontFamily: {
"mono": ["Iosevka", "monospace"],
}
},
colors: {
"c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)",
}
}, },
plugins: [], plugins: [],
} }

30
src/main/resources/static/index.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jerguero</title>
<!-- tailwind -->
<link href="/main.css" rel="stylesheet">
</head>
<body>
<h1 class="text-4xl font-bold">
Jerguero D:
</h1>
<button
class="bg-c-on-bg text-c-bg py-2 px-4 rounded-xl shadow"
hx-get="/sampuru"
hx-swap="innerHTML"
>
carita feliz :D
</button>
<!-- htmx -->
<script src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
</body>
</html>

102
src/main/resources/static/main.css
View File

@ -16,7 +16,7 @@
/* 2 */ /* 2 */
border-style: solid; border-style: solid;
/* 2 */ /* 2 */
border-color: #e5e7eb; border-color: currentColor;
/* 2 */ /* 2 */
} }
@ -129,7 +129,7 @@ code,
kbd, kbd,
samp, samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: Iosevka, monospace;
/* 1 */ /* 1 */
font-size: 1em; font-size: 1em;
/* 2 */ /* 2 */
@ -543,10 +543,6 @@ video {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.rounded {
border-radius: 0.25rem;
}
.rounded-md { .rounded-md {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
@ -555,49 +551,58 @@ video {
border-radius: 0.75rem; border-radius: 0.75rem;
} }
.rounded-2xl { .bg-c-on-bg {
border-radius: 1rem; background-color: var(--c-on-bg);
}
.rounded-full {
border-radius: 9999px;
}
.bg-teal-900 {
--tw-bg-opacity: 1;
background-color: rgb(19 78 74 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.p-1 {
padding: 0.25rem;
} }
.p-2 { .p-2 {
padding: 0.5rem; padding: 0.5rem;
} }
.text-white { .p-4 {
padding: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.font-mono {
font-family: Iosevka, monospace;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.font-bold {
font-weight: 700;
}
.uppercase {
text-transform: uppercase;
}
.text-\[white\] {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.text-teal-900 { .text-c-bg {
--tw-text-opacity: 1; color: var(--c-bg);
color: rgb(19 78 74 / var(--tw-text-opacity)); }
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-inner { .shadow-inner {
@ -606,8 +611,19 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow { /* Base variables */
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); :root {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
/* Dark theme by default */
:root {
--c-bg: #202020;
--c-on-bg: white;
}
html {
background-color: var(--c-bg);
color: var(--c-on-bg);
} }

6
src/main/resources/templates/greeting.html
View File

@ -12,10 +12,14 @@
</head> </head>
<body> <body>
<div class="bg-teal-900 text-white rounded-xl p-4 m-4 shadow"> <div class="bg-teal-900 text-white rounded-xl p-4 m-4 shadow">
<p th:text="|Oh hi ${name}, thanks for checking in, i'm|"/> <p th:text="|Oh hi ${name}, thanks for checking in, im|" />
<p class="bg-white text-teal-900 p-2 my-2 rounded-xl shadow-inner"> <p class="bg-white text-teal-900 p-2 my-2 rounded-xl shadow-inner">
still a piece of garbage still a piece of garbage
</p> </p>
</div> </div>
<!-- htmx -->
<script src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
</body> </body>
</html> </html>

6
src/main/resources/templates/partial-response.html Normal file
View File

@ -0,0 +1,6 @@
<div
class="font-bold font-mono uppercase text-[white] rounded-md p-2"
th:text="|hola mundo :D this should be rendered by htmx (it is ${millis} millis btw)|"
th:style="|background-color: ${additionalColor}|"
>
</div>