diff --git a/internal/app/handlers/page_handler.go b/internal/app/handlers/page_handler.go index 3dd8975..b8b2885 100644 --- 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)) +} diff --git a/internal/app/server/server.go b/internal/app/server/server.go index 5ec329f..f46e8bd 100644 --- 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 } diff --git a/internal/domain/server/routes.go b/internal/domain/server/routes.go index 24bf0d7..194940e 100644 --- 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" diff --git a/internal/templates/pages/favorites.templ b/internal/templates/pages/favorites.templ index 0c965bc..70b1267 100644 --- 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") +
+
+
+

Page Under Construction

+

Sit tight, this page is coming soon!

+
+
+
} diff --git a/internal/templates/pages/favorites_templ.go b/internal/templates/pages/favorites_templ.go index f2d6abe..325310c 100644 --- 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, "

Page Under Construction

Sit tight, this page is coming soon!

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } return nil }) } diff --git a/internal/templates/pages/list.templ b/internal/templates/pages/list.templ index 8276bb6..9e8acfd 100644 --- 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") +
+
+
+

Page Under Construction

+

Sit tight, this page is coming soon!

+
+
+
} diff --git a/internal/templates/pages/list_templ.go b/internal/templates/pages/list_templ.go index 2d6b0ed..5f800d5 100644 --- 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, "

Page Under Construction

Sit tight, this page is coming soon!

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } return nil }) } diff --git a/internal/templates/pages/notFound.templ b/internal/templates/pages/notFound.templ new file mode 100644 index 0000000..6e96232 --- /dev/null +++ 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("") +
+
+
+
+ + + +
+
+

404

+

This page could not be found!

+ Back Home +
+
+
+} diff --git a/internal/templates/pages/notFound_templ.go b/internal/templates/pages/notFound_templ.go new file mode 100644 index 0000000..f6afbe0 --- /dev/null +++ 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, "

404

This page could not be found!

Back Home
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index c01b4bc..eb2fa10 100644 --- 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;