2025-07-11 18:21:36 -07:00
10 changed files with 246 additions and 14 deletions
--- a/internal/app/handlers/page_handler.go
+++ b/internal/app/handlers/page_handler.go
@ -128,3 +128,10 @@ func SearchPage(ctx *gin.Context) {

 	ctx.HTML(http.StatusOK, "", layouts.AppLayout(title, page))
 }
+
+func NotFoundPage(ctx *gin.Context) {
+	title := "Potion - Not Found"
+	page := pages.NotFoundPage()
+
+	ctx.HTML(http.StatusOK, "", layouts.AppLayout(title, page))
+}
--- a/internal/app/server/server.go
+++ b/internal/app/server/server.go
@ -5,6 +5,7 @@ import (
 	"fmt"
 	"net/http"
 	"os"
+	"strings"

 	"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
 	"github.com/gin-contrib/cors"
@ -166,6 +167,7 @@ func (s *Server) Setup() *Server {
 	router_web.GET("/list", handlers.ListPage)
 	router_web.GET("/recipe/:id", handlers.RecipePage)
 	router_web.GET("/search", handlers.SearchPage)
+	router_web.GET("/404", handlers.NotFoundPage)

 	// WEB state endpoints
 	router_state.POST("/tags", handlers.NewTag)
@ -180,5 +182,23 @@ func (s *Server) Setup() *Server {
 	router_api.POST("/recipe", handlers.CreateRecipe)
 	router_api.POST("/recipe/search", handlers.SearchRecipes)

+	// Catch un-routed URLS
+	s.Router.NoRoute(func(ctx *gin.Context) {
+		path := ctx.Request.URL.Path
+
+		// TODO: Use constants for errors?
+		if strings.HasPrefix(path, domain.VERSION+domain.API) {
+			ctx.JSON(http.StatusNotFound, gin.H{
+				"status":  404,
+				"error":   "API_NOT_FOUND",
+				"message": "The request endpoint does not exist.",
+				"path":    path,
+			})
+			return
+		}
+
+		ctx.Redirect(http.StatusSeeOther, domain.WEB_NOT_FOUND)
+	})
+
 	return s
 }
--- a/internal/domain/server/routes.go
+++ b/internal/domain/server/routes.go
@ -16,6 +16,7 @@ const WEB_PROFIlE = VERSION + WEB + "/profile"
 const WEB_LIST = VERSION + WEB + "/list"
 const WEB_RECIPE = VERSION + WEB + "/recipe/%d"
 const WEB_SEARCH = VERSION + WEB + "/search"
+const WEB_NOT_FOUND = VERSION + WEB + "/404"

 // API prefixed routes
 const API_AUTH_LOGIN = VERSION + API + "/auth/login"
--- a/internal/templates/pages/favorites.templ
+++ b/internal/templates/pages/favorites.templ
@ -3,5 +3,13 @@ package templates
 import "github.com/haydenhargreaves/Potion/internal/templates/components"

 templ FavoritesPage() {
-  @components.Navbar("favorites")
+	@components.Navbar("favorites")
+	<div class="w-full h-screen flex justify-center">
+		<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
+			<div class="flex flex-col items-center justify-center h-full gap-y-2">
+				<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
+				<p class="text-gray-700">Sit tight, this page is coming soon!</p>
+			</div>
+		</div>
+	</div>
 }
--- a/internal/templates/pages/favorites_templ.go
+++ b/internal/templates/pages/favorites_templ.go
@ -35,6 +35,10 @@ func FavoritesPage() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		return nil
 	})
 }
--- a/internal/templates/pages/list.templ
+++ b/internal/templates/pages/list.templ
@ -3,6 +3,14 @@ package templates
 import "github.com/haydenhargreaves/Potion/internal/templates/components"

 templ ListPage() {
-  @components.Navbar("list")
+	@components.Navbar("list")
+	<div class="w-full h-screen flex justify-center">
+		<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
+			<div class="flex flex-col items-center justify-center h-full gap-y-2">
+				<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
+				<p class="text-gray-700">Sit tight, this page is coming soon!</p>
+			</div>
+		</div>
+	</div>
 }

--- a/internal/templates/pages/list_templ.go
+++ b/internal/templates/pages/list_templ.go
@ -35,6 +35,10 @@ func ListPage() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		return nil
 	})
 }
--- a/internal/templates/pages/notFound.templ
+++ b/internal/templates/pages/notFound.templ
@ -0,0 +1,32 @@
+package templates
+
+import "github.com/haydenhargreaves/Potion/internal/templates/components"
+import "github.com/haydenhargreaves/Potion/internal/domain/server"
+
+templ NotFoundPage() {
+	@components.Navbar("")
+	<div class="w-full h-screen flex justify-center">
+		<div
+			class="mx-2 md:mx-0 w-full md:w-1/2 flex items-center justify-center h-full border-l border-r border-gray-300 bg-white"
+		>
+			<div class="flex flex-col items-center justify-center gap-y-4">
+				<div class="flex flex-col items-center justify-center">
+					<svg
+						class="h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 448 512"
+						fill="currentColor"
+					>
+						<path
+							d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z"
+						></path>
+					</svg>
+					<div class="bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50"></div>
+				</div>
+				<h1 class="text-gray-500 text-6xl md:text-8xl font-sans">404</h1>
+				<p class="text-sm md:text-base text-gray-700">This page could not be found!</p>
+				<a class="underline text-sm md:text-base text-blue-700" href={ domain.WEB_HOME }>Back Home</a>
+			</div>
+		</div>
+	</div>
+}
--- a/internal/templates/pages/notFound_templ.go
+++ b/internal/templates/pages/notFound_templ.go
@ -0,0 +1,56 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.865
+package templates
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import "github.com/haydenhargreaves/Potion/internal/templates/components"
+import "github.com/haydenhargreaves/Potion/internal/domain/server"
+
+func NotFoundPage() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = components.Navbar("").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 flex items-center justify-center h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center gap-y-4\"><div class=\"flex flex-col items-center justify-center\"><svg class=\"h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" fill=\"currentColor\"><path d=\"M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z\"></path></svg><div class=\"bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50\"></div></div><h1 class=\"text-gray-500 text-6xl md:text-8xl font-sans\">404</h1><p class=\"text-sm md:text-base text-gray-700\">This page could not be found!</p><a class=\"underline text-sm md:text-base text-blue-700\" href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL = domain.WEB_HOME
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\">Back Home</a></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
--- a/web/static/css/tailwind.css
+++ b/web/static/css/tailwind.css
@ -9,8 +9,6 @@
    monospace;
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
@ -19,6 +17,7 @@
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-gray-50: oklch(98.5% 0.002 247.839);
@ -50,6 +49,12 @@
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
@ -62,6 +67,7 @@
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-bounce: bounce 1s infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
@ -264,9 +270,6 @@
  .mx-auto {
    margin-inline: auto;
  }
-  .my-0 {
-    margin-block: calc(var(--spacing) * 0);
-  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
@ -279,6 +282,9 @@
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
+  .-mt-1 {
+    margin-top: calc(var(--spacing) * -1);
+  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
@ -383,6 +389,9 @@
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
  .h-96 {
    height: calc(var(--spacing) * 96);
  }
@ -451,6 +460,14 @@
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
+  .scale-x-150 {
+    --tw-scale-x: 150%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-y-50 {
+    --tw-scale-y: 50%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
  .cursor-pointer {
    cursor: pointer;
  }
@ -514,9 +531,15 @@
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
+  .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
+  .gap-y-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
  .overflow-hidden {
    overflow: hidden;
  }
@ -595,6 +618,9 @@
  .bg-\[\#f8f8f8\] {
    background-color: #f8f8f8;
  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
@ -720,6 +746,9 @@
  .text-center {
    text-align: center;
  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
@ -728,6 +757,14 @@
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
@ -821,6 +858,12 @@
  .uppercase {
    text-transform: uppercase;
  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@ -865,6 +908,10 @@
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
@ -1097,6 +1144,11 @@
      opacity: 50%;
    }
  }
+  .motion-safe\:animate-bounce {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: var(--animate-bounce);
+    }
+  }
  .sm\:w-3\/4 {
    @media (width >= 40rem) {
      width: calc(3/4 * 100%);
@ -1132,9 +1184,9 @@
      margin-block: calc(var(--spacing) * 0);
    }
  }
-  .md\:my-2 {
+  .md\:-mt-2 {
    @media (width >= 48rem) {
-      margin-block: calc(var(--spacing) * 2);
+      margin-top: calc(var(--spacing) * -2);
    }
  }
  .md\:flex {
@ -1147,6 +1199,12 @@
      display: none;
    }
  }
+  .md\:size-12 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 12);
+      height: calc(var(--spacing) * 12);
+    }
+  }
  .md\:size-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
@ -1165,6 +1223,11 @@
      height: calc(var(--spacing) * 64);
    }
  }
+  .md\:h-24 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 24);
+    }
+  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
@ -1252,11 +1315,6 @@
      padding-block: calc(var(--spacing) * 12);
    }
  }
-  .md\:pt-2 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 2);
-    }
-  }
  .md\:pt-14 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 14);
@ -1285,6 +1343,12 @@
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
+  .md\:text-8xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
+    }
+  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
@ -1329,6 +1393,21 @@
  inherits: false;
  initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
@ -1519,12 +1598,25 @@
  syntax: "*";
  inherits: false;
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;