move to backend as the frontend (easier to manage and deploy)

pom.xml

@@ -52,6 +52,11 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+            <version>3.3.0</version>
+        </dependency>
 
         <!-- MongoDB for data storage -->
         <dependency>

src/main/java/cc/fascinated/backend/config/ThymeleafConfiguration.java

@@ -0,0 +1,41 @@
+package cc.fascinated.backend.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.EnableWebMvc;
+import org.thymeleaf.spring6.SpringTemplateEngine;
+import org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver;
+import org.thymeleaf.spring6.view.ThymeleafViewResolver;
+
+/**
+ * @author Fascinated (fascinated7)
+ */
+@Configuration
+@EnableWebMvc
+public class ThymeleafConfiguration {
+
+    @Bean
+    public SpringTemplateEngine templateEngine() {
+        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
+        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
+        return templateEngine;
+    }
+
+    @Bean
+    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
+        SpringResourceTemplateResolver templateResolver
+                = new SpringResourceTemplateResolver();
+        templateResolver.setPrefix("classpath:/templates/");
+        templateResolver.setSuffix(".html");
+        templateResolver.setTemplateMode("HTML");
+        templateResolver.setCacheable(false);
+        return templateResolver;
+    }
+
+    @Bean
+    public ThymeleafViewResolver thymeleafViewResolver() {
+        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
+        viewResolver.setTemplateEngine(templateEngine());
+        return viewResolver;
+    }
+}

src/main/java/cc/fascinated/backend/controller/IndexController.java

@@ -0,0 +1,49 @@
+package cc.fascinated.backend.controller;
+
+import cc.fascinated.backend.model.Paste;
+import cc.fascinated.backend.service.PasteService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+/**
+ * @author Fascinated (fascinated7)
+ */
+@Controller
+@RequestMapping(value = "/")
+public class IndexController {
+
+    private final PasteService pasteService;
+
+    @Autowired
+    public IndexController(PasteService pasteService) {
+        this.pasteService = pasteService;
+    }
+
+    @GetMapping(value = "/")
+    public String home() {
+        return "index";
+    }
+
+    @GetMapping(value = "/{id}")
+    public String paste(@PathVariable String id, Model model) {
+        Paste paste = pasteService.getPaste(id);
+        model.addAttribute("paste", paste);
+        model.addAttribute("title", "Paste - " + paste.getId());
+        model.addAttribute("rawUrl", "/raw/" + paste.getId());
+        return "paste";
+    }
+
+    @GetMapping(value = "/raw/{id}")
+    public String pasteRaw(@PathVariable String id, Model model) {
+        Paste paste = pasteService.getPaste(id);
+        model.addAttribute("paste", paste);
+        model.addAttribute("title", "Paste - " + paste.getId() + " (Raw)");
+        return "paste-raw";
+    }
+}

src/main/java/cc/fascinated/backend/controller/PasteController.java

@@ -10,7 +10,7 @@ import org.springframework.web.bind.annotation.*;
 import java.util.Map;
 
 @RestController
-@RequestMapping(value = "/")
+@RequestMapping(value = "/api")
 public class PasteController {
 
     private final PasteService pasteService;
@@ -20,20 +20,13 @@ public class PasteController {
         this.pasteService = pasteService;
     }
 
-    @GetMapping(value = "/")
-    public ResponseEntity<?> home() {
-        return ResponseEntity.ok(Map.of(
-                "status", "OK"
-        ));
-    }
-
     @PostMapping(value = "/upload", consumes = MediaType.TEXT_PLAIN_VALUE)
     public ResponseEntity<?> uploadPaste(@RequestBody String content) {
         String id = pasteService.createPaste(content);
         return ResponseEntity.ok(Map.of("id", id));
     }
 
-    @GetMapping(value = "/{id}")
+    @GetMapping(value = "/paste/{id}")
     public ResponseEntity<Paste> getPaste(@PathVariable String id) {
         Paste paste = pasteService.getPaste(id);
         return ResponseEntity.ok(paste);

src/main/resources/templates/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<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>Paste</title>
+
+    <!-- TailwindCSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-black text-white">
+    <div class="p-3 h-screen w-screen relative">
+        <div class="flex gap-2 h-full w-full text-xs">
+            <p class="hidden md:block">&gt;</p>
+            <textarea
+                    id="paste-input"
+                    class="w-full h-full bg-background outline-none resize-none bg-transparent"
+                    placeholder="Paste your code here..."></textarea>
+        </div>
+
+        <div class="absolute top-0 right-0 p-3">
+            <button id="paste-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+                Paste
+            </button>
+        </div>
+    </div>
+</body>
+
+<!-- Paste Script -->
+<script>
+    document.getElementById('paste-button').addEventListener('click', function() {
+        var pasteInput = document.getElementById('paste-input');
+        var paste = pasteInput.value;
+
+        fetch('/api/upload', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'text/plain'
+            },
+            body: paste
+        }).then(function(response) {
+            return response.json();
+        }).then(function(data) {
+            window.location.href = '/' + data.id;
+        });
+    });
+</script>
+</html>

src/main/resources/templates/paste-raw.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<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 th:text="${title}"></title>
+</head>
+<body>
+<pre><code th:text="${paste.content}"></code></pre>
+</body>
+</html>

src/main/resources/templates/paste.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<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 th:text="${title}"></title>
+
+    <!-- TailwindCSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Highlight.js -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+</head>
+<body class="bg-black text-white h-screen relative">
+<pre><code class="bg-transparent" th:text="${paste.content}"></code></pre>
+
+<div class="absolute top-0 right-0 p-3">
+    <button id="raw-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <a th:href="${rawUrl}">
+            Raw
+        </a>
+    </button>
+    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <a href="/">
+            New
+        </a>
+    </button>
+</div>
+</body>
+<script>hljs.highlightAll();</script>
+</html>