Styles & html for a single post

src/main/java/dev/araozu/jerguero/GreetingController.java

@@ -1,19 +0,0 @@
-package dev.araozu.jerguero;
-
-import org.springframework.context.annotation.Bean;
-import org.springframework.stereotype.Controller;
-import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-
-@Controller
-public class GreetingController {
-    @GetMapping("/greeting")
-    public String greeting(
-            @RequestParam(name = "name", required = false, defaultValue = "World") String name,
-            Model model
-    ) {
-        model.addAttribute("name", name);
-        return "greeting";
-    }
-}

src/main/java/dev/araozu/jerguero/controller/IndexController.java

@@ -0,0 +1,17 @@
+package dev.araozu.jerguero.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class IndexController {
+
+    @GetMapping("/")
+    public String index(Model model) {
+        model.addAttribute("time", System.currentTimeMillis());
+
+        return "views/index";
+    }
+
+}

src/main/java/dev/araozu/jerguero/controller/post/PostController.java

@@ -1,11 +1,21 @@
 package dev.araozu.jerguero.controller.post;
 
+import dev.araozu.jerguero.model.Post;
+import dev.araozu.jerguero.model.PostRepository;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 
 @Controller
 public class PostController {
+
+    PostRepository postRepository;
+
+    public PostController(PostRepository postRepository) {
+        this.postRepository = postRepository;
+    }
+
     @GetMapping("/crear")
     public String createEntry() {
         return "post/create";
@@ -22,13 +32,11 @@ public class PostController {
             @RequestParam("definition-content") String content,
             Model model
     ) {
+        postRepository.save(new Post(title, content));
+
         model.addAttribute("title", title);
         model.addAttribute("content", content);
         return "post/create_result";
     }
 }
 
-
-class PostInfo {
-
-}

src/main/resources/frontend/main.css

@@ -8,6 +8,7 @@
     --chicha-yellow: #ffff00;
     --chicha-orange: #ffaa00;
     --chicha-pink: #ff007a;
+    --gray-1: #9ca3af;
 }
 
 /* Dark theme by default */
@@ -21,6 +22,7 @@
     :root {
         --c-bg: white;
         --c-on-bg: black;
+        --c-outline: var(--gray-1);
     }
 }
 

src/main/resources/frontend/tailwind.config.js

@@ -5,11 +5,7 @@ module.exports = {
         "../static/**/*.{html,js}",
     ],
     theme: {
-        extend: {
+        extend: {},
-            fontFamily: {
-                "mono": ["Iosevka", "monospace"],
-            }
-        },
         colors: {
             "c-bg": "var(--c-bg)",
             "c-on-bg": "var(--c-on-bg)",
@@ -17,10 +13,13 @@ module.exports = {
             "c-chicha-pink": "var(--chicha-pink)",
             "c-chicha-yellow": "var(--chicha-yellow)",
             "c-chicha-orange": "var(--chicha-orange)",
+            "c-outline": "var(--c-outline)",
         },
         fontFamily: {
             "chicha": ["Lobster", "serif"],
             "rubik": ["Rubik", "sans-serif"],
+            "vina-sans": ["Vina Sans", "sans-serif"],
+            "mono": ["Iosevka", "monospace"],
         }
     },
     plugins: [],

src/main/resources/templates/fragments/definition.html

@@ -0,0 +1,43 @@
+<div class="m-2 p-4 border-2 border-c-chicha-green rounded-md">
+    <h2 class="text-4xl font-vina-sans text-c-chicha-pink pb-1">
+        Palta
+    </h2>
+
+    <div class="pb-4 text-xl">
+        <span class="text-sm opacity-50">
+            Usado en:
+        </span>
+        <br>
+        <span title="Perú" class="cursor-pointer mr-1">
+            🇵🇪
+        </span>
+        <span title="Chile" class="cursor-pointer mr-1">
+            🇨🇱
+        </span>
+    </div>
+
+    <p>
+        - Problema, dificultad, obstáculo.
+        <br>
+        <span class="pl-4 opacity-75">Esa ya no es mi palta causita</span>
+    </p>
+    <p>
+        - Otro nombre para "Aguacate"
+        <br>
+        <span class="pl-4 opacity-75">Corre a la tienda y compra 1 kilo de palta</span>
+    </p>
+
+
+    <div class="pt-4">
+        <span class="text-xs opacity-50">
+            Creado por:
+        </span>
+        <br>
+        <a href="/usuario/1" class="relative
+                before:block before:absolute before:-inset-1 before:-skew-y-1 before:bg-c-chicha-orange">
+            <span class="relative text-[black] hover:underline font-vina-sans text-xl">
+                pablito de los backyardigans
+            </span>
+        </a>
+    </div>
+</div>

src/main/resources/templates/fragments/navbar.html

@@ -1,9 +1,23 @@
 <nav class="p-1 border-b-4 border-c-chicha-green" th:fragment="nav">
-    <div class="text-4xl font-bold font-chicha inline-block px-2 pt-2 pb-4 bg-[black] rounded-xl">
+    <div class="grid grid-cols-[9.5rem_auto] gap-2">
-    <span class="text-c-chicha-green">
+        <div class="text-4xl font-bold font-vina-sans inline-block px-2 pt-2 pb-4
-        J</span><span class="text-c-chicha-orange">e</span><span class="text-c-chicha-pink">r</span><span
+            bg-[black] rounded-xl">
-            class="text-c-chicha-yellow">g</span><span class="text-c-chicha-green">u</span><span
+            <span class="text-c-chicha-green inline-block relative -translate-y-1">
-            class="text-c-chicha-orange">e</span><span class="text-c-chicha-pink">r</span><span
+            J</span><span
-            class="text-c-chicha-yellow">o</span>
+                class="text-c-chicha-orange">e</span><span
+                class="text-c-chicha-pink inline-block relative translate-y-1">r</span><span
+                class="text-c-chicha-yellow">g</span><span
+                class="text-c-chicha-green inline-block relative translate-y-1">u</span><span
+                class="text-c-chicha-orange">e</span><span
+                class="text-c-chicha-pink inline-block relative translate-y-1">r</span><span
+                class="text-c-chicha-yellow">o</span>
+        </div>
+        <div class="flex items-center">
+            <input
+                    class="border border-c-outline rounded-xl px-2 py-2 w-full"
+                    type="text"
+                    placeholder="Buscar"
+            >
+        </div>
     </div>
 </nav>

src/main/resources/templates/greeting.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="es" xmlns:th="http://www.thymeleaf.org">
-<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>
-<div class="bg-teal-900 text-white rounded-xl p-4 m-4 shadow">
-    <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">
-        still a piece of garbage
-    </p>
-</div>
-
-
-<!-- htmx -->
-<script src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
-</body>
-</html>

src/main/resources/templates/views/index.html

@@ -8,11 +8,11 @@
     <title>Jerguero</title>
 
     <!-- tailwind -->
-    <link href="/main.css" rel="stylesheet">
+    <link th:href="|/main.css?t=${time}|" href="/main.css" rel="stylesheet">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Vina+Sans&display=swap" rel="stylesheet">
 </head>
 <body>
 
@@ -34,6 +34,8 @@
     carita feliz :D
 </button>
 
+<div th:replace="fragments/definition"></div>
+
 <!-- htmx -->
 <script src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
 </body>