(FEAT): Implemented a route constants domain file.

This file contains route constants so they can be changed dynamically.
However, they do not support changes to the router, those are still
manual.
This commit is contained in:
Hayden Hargreaves 2025-06-25 18:23:47 -07:00
parent 693ac373a7
commit cf0e291dd9
11 changed files with 187 additions and 132 deletions

View File

@ -61,5 +61,5 @@ func GoogleCallback(ctx *gin.Context) {
func Logout(ctx *gin.Context) {
// TODO: Use same values as the GoogleCallback function
ctx.SetCookie("jwt_token", "", -1, "/", "localhost", false, true)
ctx.Redirect(http.StatusSeeOther, "/v1/web/home")
ctx.Redirect(http.StatusSeeOther, domain.WEB_HOME)
}

View File

@ -40,7 +40,7 @@ func CreatePage(ctx *gin.Context) {
func ProfilePage(ctx *gin.Context) {
// If not logged in, direct to the login page
if !domain.IsLoggedIn(ctx) {
ctx.Redirect(http.StatusSeeOther, "/v1/web/login")
ctx.Redirect(http.StatusSeeOther, domain.WEB_LOGIN)
return
}

View File

@ -124,14 +124,14 @@ func (s *Server) Setup() *Server {
s.Router.Use(JwtAuthMiddleWare(jwtSecret))
// Redirect index to home page: Update this as needed
s.Router.GET("/", func(ctx *gin.Context) { ctx.Redirect(http.StatusSeeOther, "/v1/web/home") })
s.Router.GET("/", func(ctx *gin.Context) { ctx.Redirect(http.StatusSeeOther, domain.WEB_HOME) })
// Wrap all routes with a version
router_v1 := s.Router.Group("/v1")
router_v1 := s.Router.Group(domain.VERSION)
// Domain specific routers
router_web := router_v1.Group("/web")
router_api := router_v1.Group("/api")
router_web := router_v1.Group(domain.WEB)
router_api := router_v1.Group(domain.API)
// Static routes
router_web.Static("/static", "./web/static")
@ -151,8 +151,8 @@ func (s *Server) Setup() *Server {
})
// WEB router endpoints
router_web.GET("/", func(ctx *gin.Context) { ctx.Redirect(http.StatusSeeOther, domain.WEB_HOME) })
router_web.GET("/login", handlers.LoginPage)
router_web.GET("/", func(ctx *gin.Context) { ctx.Redirect(http.StatusSeeOther, "/v1/web/home") })
router_web.GET("/home", handlers.HomePage)
router_web.GET("/favorites", handlers.FavoritesPage)
router_web.GET("/create", handlers.CreatePage)

View File

@ -0,0 +1,20 @@
package domain
// Sub-routes
const VERSION = "/v1"
const WEB = VERSION + "/web"
const API = VERSION + "/api"
// Web prefixed routes
const WEB_LOGIN = WEB + "/login"
const WEB_INDEX = WEB
const WEB_HOME = WEB + "/home"
const WEB_FAVORITES = WEB + "/favorites"
const WEB_CREATE = WEB + "/create"
const WEB_PROFIlE = WEB + "/profile"
const WEB_LIST = WEB + "/list"
// API prefixed routes
const API_AUTH_LOGIN = API + "/auth/login"
const API_AUTH_CALLBACK = API + "/auth/callback"
const API_AUTH_LOGOUT = API + "/auth/logout"

View File

@ -1,6 +1,7 @@
package components
import "strings"
import "github.com/haydenhargreaves/Potion/internal/domain/server"
templ hamburgerMenu() {
<script>
@ -26,11 +27,11 @@ templ hamburgerMenu() {
</script>
<div id="mobile-menu-content"
class="hidden w-full flex-col items-center absolute top-[100%] left-0 py-2 bg-white border-b border-gray-300 shadow-sm shadow-gray-300 z-20">
@dropdownLink("Home", "/v1/web/home")
@dropdownLink("Favorites", "/v1/web/favorites")
@dropdownLink("Create", "/v1/web/create")
@dropdownLink("Profile", "/v1/web/profile")
@dropdownLink("Shopping List", "/v1/web/list")
@dropdownLink("Home", domain.WEB_HOME)
@dropdownLink("Favorites", domain.WEB_FAVORITES)
@dropdownLink("Create", domain.WEB_CREATE)
@dropdownLink("Profile", domain.WEB_PROFIlE)
@dropdownLink("Shopping List", domain.WEB_LIST)
</div>
}
@ -67,11 +68,11 @@ templ Navbar(current string) {
<p class="select-none">Potion</p>
</div>
<div class="hidden md:flex lg:flex items-center gap-8 select-none">
@navLink(current, "Home", "/v1/web/home")
@navLink(current, "Favorites", "/v1/web/favorites")
@navLink(current, "Create", "/v1/web/create")
@navLink(current, "Profile", "/v1/web/profile")
@listIcon(current, "List", "/v1/web/list")
@navLink(current, "Home", domain.WEB_HOME)
@navLink(current, "Favorites", domain.WEB_FAVORITES)
@navLink(current, "Create", domain.WEB_CREATE)
@navLink(current, "Profile", domain.WEB_PROFIlE)
@listIcon(current, "List", domain.WEB_LIST)
</div>
<div class="md:hidden grid place-content-center">
<button onclick="toggleMenu()" class="p-2">

View File

@ -1,140 +1,171 @@
package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/server"
templ introSection() {
<section class="w-full h-fit mb-16">
<div class="relative">
<video class="" autoplay loop muted playsinline>
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4" />
</video>
<h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
text-white text-3xl w-4/5 font-bold z-10">
Discover Your Next Favorite Meal
</h1>
</div>
<p class="leading-relaxed p-4 my-8">
Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
browse our trending dishes for fresh ideas.
</p>
</section>
<section class="w-full h-fit mb-16">
<div class="relative">
<video class="" autoplay loop muted playsinline>
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4"/>
</video>
<h1
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
text-white text-3xl w-4/5 font-bold z-10"
>
Discover Your Next Favorite Meal
</h1>
</div>
<p class="leading-relaxed p-4 my-8">
Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
browse our trending dishes for fresh ideas.
</p>
</section>
}
templ searchBar() {
<div class="flex w-full gap-x-2">
<div class="relative w-full max-w-xl">
<input type="search" placeholder="Search recipes, ingredients..."
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
@filterButton()
</div>
<div class="flex w-full gap-x-2">
<div class="relative w-full max-w-xl">
<input
type="search"
placeholder="Search recipes, ingredients..."
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<svg
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
@filterButton()
</div>
}
templ filterButton() {
<button id="filter-dropdown-button" onclick="toggleDropdown()"
class="text-gray-400 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6 11.1707L6 4C6 3.44771 5.55228 3 5 3C4.44771 3 4 3.44771 4 4L4 11.1707C2.83481 11.5825 2 12.6938 2 14C2 15.3062 2.83481 16.4175 4 16.8293L4 20C4 20.5523 4.44772 21 5 21C5.55228 21 6 20.5523 6 20L6 16.8293C7.16519 16.4175 8 15.3062 8 14C8 12.6938 7.16519 11.5825 6 11.1707ZM5 13C4.44772 13 4 13.4477 4 14C4 14.5523 4.44772 15 5 15C5.55228 15 6 14.5523 6 14C6 13.4477 5.55228 13 5 13Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19 21C18.4477 21 18 20.5523 18 20L18 18C18 17.9435 18.0047 17.8881 18.0137 17.8341C16.8414 17.4262 16 16.3113 16 15C16 13.6887 16.8414 12.5738 18.0137 12.1659C18.0047 12.1119 18 12.0565 18 12L18 4C18 3.44771 18.4477 3 19 3C19.5523 3 20 3.44771 20 4L20 12C20 12.0565 19.9953 12.1119 19.9863 12.1659C21.1586 12.5738 22 13.6887 22 15C22 16.3113 21.1586 17.4262 19.9863 17.8341C19.9953 17.8881 20 17.9435 20 18V20C20 20.5523 19.5523 21 19 21ZM18 15C18 14.4477 18.4477 14 19 14C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16C18.4477 16 18 15.5523 18 15Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 9C9 7.69378 9.83481 6.58254 11 6.17071V4C11 3.44772 11.4477 3 12 3C12.5523 3 13 3.44772 13 4V6.17071C14.1652 6.58254 15 7.69378 15 9C15 10.3113 14.1586 11.4262 12.9863 11.8341C12.9953 11.8881 13 11.9435 13 12L13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20L11 12C11 11.9435 11.0047 11.8881 11.0137 11.8341C9.84135 11.4262 9 10.3113 9 9ZM11 9C11 8.44772 11.4477 8 12 8C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10C11.4477 10 11 9.55229 11 9Z"
fill="currentColor"></path>
</svg>
</button>
<button
id="filter-dropdown-button"
onclick="toggleDropdown()"
class="text-gray-400 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<svg class="h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 11.1707L6 4C6 3.44771 5.55228 3 5 3C4.44771 3 4 3.44771 4 4L4 11.1707C2.83481 11.5825 2 12.6938 2 14C2 15.3062 2.83481 16.4175 4 16.8293L4 20C4 20.5523 4.44772 21 5 21C5.55228 21 6 20.5523 6 20L6 16.8293C7.16519 16.4175 8 15.3062 8 14C8 12.6938 7.16519 11.5825 6 11.1707ZM5 13C4.44772 13 4 13.4477 4 14C4 14.5523 4.44772 15 5 15C5.55228 15 6 14.5523 6 14C6 13.4477 5.55228 13 5 13Z"
fill="currentColor"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19 21C18.4477 21 18 20.5523 18 20L18 18C18 17.9435 18.0047 17.8881 18.0137 17.8341C16.8414 17.4262 16 16.3113 16 15C16 13.6887 16.8414 12.5738 18.0137 12.1659C18.0047 12.1119 18 12.0565 18 12L18 4C18 3.44771 18.4477 3 19 3C19.5523 3 20 3.44771 20 4L20 12C20 12.0565 19.9953 12.1119 19.9863 12.1659C21.1586 12.5738 22 13.6887 22 15C22 16.3113 21.1586 17.4262 19.9863 17.8341C19.9953 17.8881 20 17.9435 20 18V20C20 20.5523 19.5523 21 19 21ZM18 15C18 14.4477 18.4477 14 19 14C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16C18.4477 16 18 15.5523 18 15Z"
fill="currentColor"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9 9C9 7.69378 9.83481 6.58254 11 6.17071V4C11 3.44772 11.4477 3 12 3C12.5523 3 13 3.44772 13 4V6.17071C14.1652 6.58254 15 7.69378 15 9C15 10.3113 14.1586 11.4262 12.9863 11.8341C12.9953 11.8881 13 11.9435 13 12L13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20L11 12C11 11.9435 11.0047 11.8881 11.0137 11.8341C9.84135 11.4262 9 10.3113 9 9ZM11 9C11 8.44772 11.4477 8 12 8C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10C11.4477 10 11 9.55229 11 9Z"
fill="currentColor"
></path>
</svg>
</button>
}
templ searchSection() {
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Craving Something Specific?")
<div class="w-full md:w-2/3 px-4 my-8">
@searchBar()
@components.FilterDropdown()
</div>
</section>
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Craving Something Specific?")
<div class="w-full md:w-2/3 px-4 my-8">
@searchBar()
@components.FilterDropdown()
</div>
</section>
}
templ highlightSection(liked bool) {
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Recipe of the Week!")
<p class="leading-relaxed p-4 my-8">
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
our community loves most. This isn't just about how many people view a recipe; it's also about
how many times it's been made, liked, reviewed, and its average rating, all combined to find
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
resonate with our users!
</p>
<div class="flex items-center justify-center w-full">
@components.RecipeCardLarge(false)
</div>
</section>
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Recipe of the Week!")
<p class="leading-relaxed p-4 my-8">
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
our community loves most. This isn't just about how many people view a recipe; it's also about
how many times it's been made, liked, reviewed, and its average rating, all combined to find
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
resonate with our users!
</p>
<div class="flex items-center justify-center w-full">
@components.RecipeCardLarge(false)
</div>
</section>
}
templ listsSection() {
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Take Another Look.")
<div class="w-full">
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div>
<h3 class="text-lg mt-8 mx-4">Make again</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div>
</div>
</section>
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Take Another Look.")
<div class="w-full">
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div>
<h3 class="text-lg mt-8 mx-4">Make again</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div>
</div>
</section>
}
templ ctaSection() {
<section
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
Unleash Your Inner Chef!
</h2>
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
It's time to bring your creations to life!
</p>
<a href="/v1/web/create" class="flex items-center justify-center
<section
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center"
>
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
Unleash Your Inner Chef!
</h2>
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
It's time to bring your creations to life!
</p>
<a
href={ domain.WEB_CREATE }
class="flex items-center justify-center
bg-gradient-to-r from-blue-400 to-blue-600 text-white
px-12 py-5 rounded-full shadow-sm hover:shadow-md
transition-all duration-300 ease-in-out shadow-blue-700
text-lg md:text-2xl font-bold uppercase tracking-wide">
Create Your Recipe!
</a>
</section>
text-lg md:text-2xl font-bold uppercase tracking-wide"
>
Create Your Recipe!
</a>
</section>
}
templ HomePage() {
@components.Navbar("home")
<div class="w-full h-fit 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">
@introSection()
@searchSection()
@highlightSection(false)
@listsSection()
@ctaSection()
</div>
</div>
@components.Navbar("home")
<div class="w-full h-fit 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">
@introSection()
@searchSection()
@highlightSection(false)
@listsSection()
@ctaSection()
</div>
</div>
}

View File

@ -1,5 +1,7 @@
package templates
import "github.com/haydenhargreaves/Potion/internal/domain/server"
templ LoginPage() {
<div class="h-screen w-full grid place-items-center bg-gray-100">
<div class="w-3/4 sm:w-3/4 md:w-1/2 lg:w-2/7 bg-white border border-gray-200 rounded-xl shadow-2xs">
@ -15,7 +17,7 @@ templ LoginPage() {
</div>
<div class="mt-5">
<a
href="/v1/api/auth/login"
href={domain.API_AUTH_LOGIN}
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none"
>
<svg class="w-4 h-auto" width="46" height="47" viewBox="0 0 46 47" fill="none">

View File

@ -1,9 +1,10 @@
package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/user"
import domain "github.com/haydenhargreaves/Potion/internal/domain/server"
import domain_user"github.com/haydenhargreaves/Potion/internal/domain/user"
templ userDetailsSection(user domain.User) {
templ userDetailsSection(user domain_user.User) {
<section class="w-full flex flex-col justify-center my-8 py-4 border-b border-gray-300">
<div class="w-full p-4 md:p-8 flex items-center gap-x-8">
<img
@ -21,7 +22,7 @@ templ userDetailsSection(user domain.User) {
templ logoutSection() {
<section class="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300">
<a
href="/v1/api/auth/logout"
href={domain.API_AUTH_LOGOUT}
class="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300"
>
Logout
@ -29,7 +30,7 @@ templ logoutSection() {
</section>
}
templ ProfilePage(user domain.User) {
templ ProfilePage(user domain_user.User) {
@components.Navbar(" profile")
<div class="w-full h-screen flex justify-center">
<div