From 6bb48dbc16b1a534ab51191bbef49da5c0146418 Mon Sep 17 00:00:00 2001 From: Araozu Date: Thu, 9 Nov 2023 20:00:49 -0500 Subject: [PATCH] htmx --- .gitignore | 4 + .../jerguero/sample/SampleController.java | 31 ++++++ src/main/resources/frontend/main.css | 18 ++++ .../resources/frontend/tailwind.config.js | 15 ++- src/main/resources/static/index.html | 30 ++++++ src/main/resources/static/main.css | 102 ++++++++++-------- src/main/resources/templates/greeting.html | 6 +- .../resources/templates/partial-response.html | 6 ++ 8 files changed, 166 insertions(+), 46 deletions(-) create mode 100644 src/main/java/dev/araozu/jerguero/sample/SampleController.java create mode 100644 src/main/resources/static/index.html create mode 100644 src/main/resources/templates/partial-response.html diff --git a/.gitignore b/.gitignore index 549e00a..4abf3bb 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,7 @@ build/ ### VS Code ### .vscode/ + +### css compiled by tailwind ### +src/main/resources/static/main.css + diff --git a/src/main/java/dev/araozu/jerguero/sample/SampleController.java b/src/main/java/dev/araozu/jerguero/sample/SampleController.java new file mode 100644 index 0000000..12bef48 --- /dev/null +++ b/src/main/java/dev/araozu/jerguero/sample/SampleController.java @@ -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"; + } + +} diff --git a/src/main/resources/frontend/main.css b/src/main/resources/frontend/main.css index b5c61c9..48dc013 100644 --- a/src/main/resources/frontend/main.css +++ b/src/main/resources/frontend/main.css @@ -1,3 +1,21 @@ @tailwind base; @tailwind components; @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); +} diff --git a/src/main/resources/frontend/tailwind.config.js b/src/main/resources/frontend/tailwind.config.js index a7a8246..9a91173 100644 --- a/src/main/resources/frontend/tailwind.config.js +++ b/src/main/resources/frontend/tailwind.config.js @@ -1,8 +1,19 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["../templates/**/*.{html,js}"], // it will be explained later + content: [ + "../templates/**/*.{html,js}", + "../static/**/*.{html,js}", + ], theme: { - extend: {}, + extend: { + fontFamily: { + "mono": ["Iosevka", "monospace"], + } + }, + colors: { + "c-bg": "var(--c-bg)", + "c-on-bg": "var(--c-on-bg)", + } }, plugins: [], } diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html new file mode 100644 index 0000000..1872c7b --- /dev/null +++ b/src/main/resources/static/index.html @@ -0,0 +1,30 @@ + + + + + + + Jerguero + + + + + + +

+ Jerguero D: +

+ + + + + + + \ No newline at end of file diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 45d2cea..a6e0aa2 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -16,7 +16,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; + border-color: currentColor; /* 2 */ } @@ -129,7 +129,7 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Iosevka, monospace; /* 1 */ font-size: 1em; /* 2 */ @@ -543,10 +543,6 @@ video { margin-bottom: 0.5rem; } -.rounded { - border-radius: 0.25rem; -} - .rounded-md { border-radius: 0.375rem; } @@ -555,49 +551,58 @@ video { border-radius: 0.75rem; } -.rounded-2xl { - border-radius: 1rem; -} - -.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; +.bg-c-on-bg { + background-color: var(--c-on-bg); } .p-2 { 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; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-teal-900 { - --tw-text-opacity: 1; - color: rgb(19 78 74 / var(--tw-text-opacity)); +.text-c-bg { + color: var(--c-bg); +} + +.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 { @@ -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); } -.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); +/* 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); } diff --git a/src/main/resources/templates/greeting.html b/src/main/resources/templates/greeting.html index e3d6629..a1505af 100644 --- a/src/main/resources/templates/greeting.html +++ b/src/main/resources/templates/greeting.html @@ -12,10 +12,14 @@
-

+

still a piece of garbage

+ + + + diff --git a/src/main/resources/templates/partial-response.html b/src/main/resources/templates/partial-response.html new file mode 100644 index 0000000..cdcd618 --- /dev/null +++ b/src/main/resources/templates/partial-response.html @@ -0,0 +1,6 @@ +
+