(FEAT): Implemented recipe of the week! And image placeholder.

Still having the stupid ass nil dereferences, I think I might need to
migrate to using success returns instead of pointers. Because they're
fucked. And even more so now.

internal/app/handlers/page_handler.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"net/http"
 	"strconv"
+	"time"
 
 	"github.com/a-h/templ"
 	"github.com/gin-gonic/gin"
@@ -28,6 +29,7 @@ func HomePage(ctx *gin.Context) {
 
 	loggedIn := domain.IsLoggedIn(ctx)
 
+
 	var page templ.Component
 	if loggedIn {
 		userId := ctx.MustGet("userId").(int)
@@ -48,9 +50,29 @@ func HomePage(ctx *gin.Context) {
 			return
 		}
 
-		page = templates.HomePage(true, viewedRecipes, madeRecipes)
+		// Get the recipe of the week
+		recipeOfTheWeek, err := deps.RecipeService.GetRecipeOfTheWeek(&userId, time.Now())
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, gin.H{
+				"status":  http.StatusInternalServerError,
+				"message": fmt.Sprintf("Error getting made recipes. %s\n", err.Error()),
+			})
+			return
+		}
+
+		page = templates.HomePage(true, viewedRecipes, madeRecipes, recipeOfTheWeek)
 	} else {
-		page = templates.HomePage(false, nil, nil)
+		// Get the recipe of the week
+		recipeOfTheWeek, err := deps.RecipeService.GetRecipeOfTheWeek(nil, time.Now())
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, gin.H{
+				"status":  http.StatusInternalServerError,
+				"message": fmt.Sprintf("Error getting made recipes. %s\n", err.Error()),
+			})
+			return
+		}
+
+		page = templates.HomePage(false, nil, nil, recipeOfTheWeek)
 	}
 
 	title := "Potion - Home"

internal/app/service/recipe_service.go

@@ -174,6 +174,9 @@ func (s *RecipeService) GetUserFavoriteRecipes(id int) ([]domain.Recipe, error)
 	return s.recipeRepository.GetUserFavoriteRecipes(id)
 }
 
+// GetUserViewedRecipes returns a list of the most recent x (limit) recipes viewed by a user, from
+// the provided userId. This will return a list of size 'limit'. Any errors will be bubbled up to
+// the caller.
 func (s *RecipeService) GetUserViewedRecipes(userId, limit int) ([]domain.Recipe, error) {
 	engagement, err := s.engagementRepository.GetUserEngagementFiltered(userId, limit, domainEngagement.EngagementViewed)
 	if err != nil {
@@ -188,6 +191,9 @@ func (s *RecipeService) GetUserViewedRecipes(userId, limit int) ([]domain.Recipe
 	return s.recipeRepository.GetRecipes(ids, &userId)
 }
 
+// GetUserMadeRecipes returns a list of the most recent x (limit) recipes made by a user, from the
+// provided userId. This will return a list of size 'limit'. Any errors will be bubbled up to the
+// caller.
 func (s *RecipeService) GetUserMadeRecipes(userId, limit int) ([]domain.Recipe, error) {
 	engagement, err := s.engagementRepository.GetUserEngagementFiltered(userId, limit, domainEngagement.EngagementMade)
 	if err != nil {
@@ -201,3 +207,7 @@ func (s *RecipeService) GetUserMadeRecipes(userId, limit int) ([]domain.Recipe,
 
 	return s.recipeRepository.GetRecipes(ids, &userId)
 }
+
+func (s *RecipeService) GetRecipeOfTheWeek(userId *int, date time.Time) (*domain.Recipe, error) {
+	return s.recipeRepository.GetRecipeOfTheWeek(userId, date)
+}

internal/domain/recipe/repository.go

@@ -1,5 +1,7 @@
 package domain
 
+import "time"
+
 type RecipeRepository interface {
 	CreateRecipe(recipe *Recipe) error
 	GetRecipe(id int, userId *int) (*Recipe, error)
@@ -10,4 +12,5 @@ type RecipeRepository interface {
 	GetUserFavoriteRecipes(id int) ([]Recipe, error)
 	GetRecipeTags(recipe *Recipe) error
 	GetRecipeFavorite(recipe *Recipe, userId int) error
+	GetRecipeOfTheWeek(userId *int, date time.Time) (*Recipe, error)
 }

internal/domain/recipe/service.go

@@ -1,6 +1,10 @@
 package domain
 
-import "github.com/gin-gonic/gin"
+import (
+	"time"
+
+	"github.com/gin-gonic/gin"
+)
 
 type RecipeService interface {
 	CreateRecipe(ctx *gin.Context) (*Recipe, error)
@@ -10,4 +14,5 @@ type RecipeService interface {
 	GetUserFavoriteRecipes(id int) ([]Recipe, error)
 	GetUserViewedRecipes(userId, limit int) ([]Recipe, error)
 	GetUserMadeRecipes(userId, limit int) ([]Recipe, error)
+	GetRecipeOfTheWeek(userId *int, date time.Time) (*Recipe, error)
 }

internal/infrastructure/database/repository/recipe_repository.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"strings"
+	"time"
 
 	domain "github.com/haydenhargreaves/Potion/internal/domain/recipe"
 	"github.com/lib/pq"
@@ -832,3 +833,87 @@ func (r *RecipeRepository) GetRecipeFavorite(recipe *domain.Recipe, userId int)
 
 	return nil
 }
+
+func (r *RecipeRepository) GetRecipeOfTheWeek(userId *int, date time.Time) (*domain.Recipe, error) {
+	tx, err := r.db.Begin()
+	if err != nil {
+		tx.Rollback()
+		return nil, err
+	}
+
+	query := `
+		SELECT 
+			r.id, r.title, r.description, r.instructions, r.serves, r.difficulty, r.duration, r.category, 
+			r.ingredients, r.userid, r.modified, r.created
+		FROM recipes r
+		JOIN recipeoftheweek rw ON rw.recipeid = r.id
+		ORDER BY created DESC
+		LIMIT 1;
+	`
+
+	var durationBytes []byte
+	var ingredientBytes []byte
+
+	var recipe domain.Recipe
+	if err := tx.QueryRow(query).Scan(
+		&recipe.Id,
+		&recipe.Title,
+		&recipe.Description,
+		pq.Array(&recipe.Instructions),
+		&recipe.Serves,
+		&recipe.Difficulty,
+		&durationBytes,
+		&recipe.Category,
+		&ingredientBytes,
+		&recipe.UserId,
+		&recipe.Modified,
+		&recipe.Created,
+	); err != nil {
+		return nil, fmt.Errorf("Failed to location recipe in database: %s", err.Error())
+	}
+
+	// Parse duration
+	if len(durationBytes) > 0 {
+		var duration domain.RecipeDuration
+		if err := json.Unmarshal(durationBytes, &duration); err != nil {
+			return nil, fmt.Errorf("Failed to parse duration from database: %s", err.Error())
+		}
+
+		recipe.Duration = duration
+	} else {
+		recipe.Duration = domain.RecipeDuration{}
+	}
+
+	// Parse ingredient
+	if len(ingredientBytes) > 0 {
+		var ingredients []domain.RecipeIngredient
+		if err := json.Unmarshal(ingredientBytes, &ingredients); err != nil {
+			return nil, fmt.Errorf("Failed to parse ingredients from database: %s", err.Error())
+		}
+
+		recipe.Ingredients = ingredients
+	} else {
+		recipe.Ingredients = []domain.RecipeIngredient{}
+	}
+
+	// Add tags
+	if err := r.GetRecipeTags(&recipe); err != nil {
+		fmt.Printf("ERROR getting recipe tags. %s\n", err.Error())
+	}
+
+	// Get favorite status, if user id is provided
+	if userId != nil {
+		if err := r.GetRecipeFavorite(&recipe, *userId); err != nil {
+			fmt.Printf("ERROR getting recipe favorite status. %s\n", err.Error())
+		}
+	} else {
+		recipe.Favorite = false
+	}
+
+	if err := tx.Commit(); err != nil {
+		tx.Rollback()
+		return nil, err
+	}
+
+	return &recipe, nil
+}

internal/templates/components/cards.templ

@@ -5,20 +5,18 @@ import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
 import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
 
 templ likeButton() {
-	<button class="hover:cursor-pointer">
+	<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
-			<path
+			d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
-				d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
+			fill="currentColor"
-				fill="currentColor"
+		></path>
-			></path>
+	</svg>
-		</svg>
-	</button>
 }
 
 templ RecipeCardSmall(recipe domain.Recipe) {
 	<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
-		<img class="size-52 md:size-48 rounded-sm" src=""/>
+		<img class="size-52 md:size-48 rounded-sm" src="/v1/web/static/img/recipe_placeholder.png" type="image/png"/>
-		<div class="w-full mt-8">
+		<div class="w-52 md:w-48 mt-8">
 			<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
 				{ recipe.Title }
 			</h2>
@@ -55,41 +53,39 @@ templ ContentCardSmall(content, target string) {
 	</div>
 }
 
-// TODO: Implement this using a recipe type parameter!
 templ RecipeCardLarge(recipe *domain.Recipe) {
-  if recipe != nil {
+	if recipe != nil {
-	<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
+		<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
-		<img class="size-80 rounded-sm" src=""/>
+			<img class="size-80 rounded-sm" src="/v1/web/static/img/recipe_placeholder.png" type="image/png"/>
-		<div class="w-full mt-8">
+			<div class="w-full mt-8">
-			<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
+				<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
-        { recipe.Title }
+					{ recipe.Title }
-			</h2>
+				</h2>
-			<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
+				<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
-				Serves { recipe.Serves }
+					Serves { recipe.Serves }
-			</p>
-      <p class="text-sm text-wrap w-80">
-      { recipe.Description }
-      </p>
-
-			<div class="flex items-end justify-between">
-				<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
-					{ recipe.Category } - { recipe.Duration.Total }  mins
 				</p>
-				if recipe.Favorite {
+				<p class="text-sm text-wrap w-80">
-					@likeButton()
+					{ recipe.Description }
-				}
+				</p>
+				<div class="flex items-end justify-between">
+					<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
+						{ recipe.Category } - { recipe.Duration.Total } mins
+					</p>
+					if recipe.Favorite {
+						@likeButton()
+					}
+				</div>
+				<button
+					hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
+					hx-trigger="click"
+					hx-swap="none"
+					class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
+				>
+					Make Now!
+				</button>
 			</div>
-			<button
-				hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
-				hx-trigger="click"
-				hx-swap="none"
-				class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
-			>
-				Make Now!
-			</button>
 		</div>
-	</div>
+	} else {
-  } else {
+		<h2 class="text-2xl md:text-3xl text-gray-400">Coming soon!</h2>
-    <h2 class="text-2xl md:text-3xl text-gray-400">Coming soon!</h2>
+	}
-  }
 }

internal/templates/components/cards_templ.go

@@ -33,7 +33,7 @@ func likeButton() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<button class=\"hover:cursor-pointer\"><svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path></svg></button>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path></svg>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -62,14 +62,14 @@ func RecipeCardSmall(recipe domain.Recipe) templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-52 md:size-48 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-52 md:size-48 rounded-sm\" src=\"/v1/web/static/img/recipe_placeholder.png\" type=\"image/png\"><div class=\"w-52 md:w-48 mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 23, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 21, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -82,7 +82,7 @@ func RecipeCardSmall(recipe domain.Recipe) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Serves)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 26, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 24, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -95,7 +95,7 @@ func RecipeCardSmall(recipe domain.Recipe) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Category)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 30, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 28, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -108,7 +108,7 @@ func RecipeCardSmall(recipe domain.Recipe) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Duration.Total)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 30, Col: 50}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 28, Col: 50}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -131,7 +131,7 @@ func RecipeCardSmall(recipe domain.Recipe) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 37, Col: 70}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 35, Col: 70}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -182,7 +182,7 @@ func ContentCardSmall(content, target string) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(content)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 52, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 50, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -196,7 +196,6 @@ func ContentCardSmall(content, target string) templ.Component {
 	})
 }
 
-// TODO: Implement this using a recipe type parameter!
 func RecipeCardLarge(recipe *domain.Recipe) 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
@@ -219,14 +218,14 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 		}
 		ctx = templ.ClearChildren(ctx)
 		if recipe != nil {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-80 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-80 rounded-sm\" src=\"/v1/web/static/img/recipe_placeholder.png\" type=\"image/png\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 65, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 62, Col: 19}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -239,7 +238,7 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 			var templ_7745c5c3_Var13 string
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Serves)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 68, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 65, Col: 27}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
@@ -252,7 +251,7 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 			var templ_7745c5c3_Var14 string
 			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Description)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 71, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 68, Col: 25}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 			if templ_7745c5c3_Err != nil {
@@ -265,7 +264,7 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 			var templ_7745c5c3_Var15 string
 			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Category)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 76, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 72, Col: 23}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 			if templ_7745c5c3_Err != nil {
@@ -278,7 +277,7 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 			var templ_7745c5c3_Var16 string
 			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Duration.Total)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 76, Col: 50}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 72, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
@@ -301,7 +300,7 @@ func RecipeCardLarge(recipe *domain.Recipe) templ.Component {
 			var templ_7745c5c3_Var17 string
 			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 83, Col: 70}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 79, Col: 71}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 			if templ_7745c5c3_Err != nil {

internal/templates/pages/favorites.templ

@@ -25,7 +25,7 @@ templ favoriteResult(recipe domain.Recipe) {
 		hx-swap="none"
 		class="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer"
 	>
-		<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src=""/>
+		<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src="/v1/web/static/img/recipe_placeholder.png" type="image/png" />
 		<div class="text-gray-700 p-4 flex flex-col items-center md:items-start w-full">
 			<div class="flex flex-col md:flex-row items-center md:items-start justify-between w-full">
 				<div class="flex flex-col items-center md:items-start">

internal/templates/pages/favorites_templ.go

@@ -97,7 +97,7 @@ func favoriteResult(recipe domain.Recipe) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" hx-trigger=\"click\" hx-swap=\"none\" class=\"w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer\"><img class=\"bg-gray-50 size-56 md:size-40 rounded-md border-0\" src=\"\"><div class=\"text-gray-700 p-4 flex flex-col items-center md:items-start w-full\"><div class=\"flex flex-col md:flex-row items-center md:items-start justify-between w-full\"><div class=\"flex flex-col items-center md:items-start\"><h3 class=\"text-xl font-semibold text-black pb-1\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" hx-trigger=\"click\" hx-swap=\"none\" class=\"w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer\"><img class=\"bg-gray-50 size-56 md:size-40 rounded-md border-0\" src=\"/v1/web/static/img/recipe_placeholder.png\" type=\"image/png\"><div class=\"text-gray-700 p-4 flex flex-col items-center md:items-start w-full\"><div class=\"flex flex-col md:flex-row items-center md:items-start justify-between w-full\"><div class=\"flex flex-col items-center md:items-start\"><h3 class=\"text-xl font-semibold text-black pb-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

internal/templates/pages/home.templ

@@ -36,7 +36,7 @@ templ searchSection() {
 	</section>
 }
 
-templ highlightSection(liked bool) {
+templ highlightSection(recipeOfTheWeek *domainRecipe.Recipe) {
 	<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">
@@ -47,7 +47,7 @@ templ highlightSection(liked bool) {
 			resonate with our users!
 		</p>
 		<div class="flex items-center justify-center w-full">
-			@components.RecipeCardLarge(nil)
+			@components.RecipeCardLarge(recipeOfTheWeek)
 		</div>
 	</section>
 }
@@ -122,13 +122,13 @@ templ ctaSection() {
 	</section>
 }
 
-templ HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe) {
+templ HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe) {
 	@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)
+			@highlightSection(recipeOfTheWeek)
 			@listsSection(loggedIn, viewed, made)
 			@ctaSection()
 		</div>

internal/templates/pages/home_templ.go

@@ -86,7 +86,7 @@ func searchSection() templ.Component {
 	})
 }
 
-func highlightSection(liked bool) templ.Component {
+func highlightSection(recipeOfTheWeek *domainRecipe.Recipe) 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 {
@@ -119,7 +119,7 @@ func highlightSection(liked bool) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = components.RecipeCardLarge(nil).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = components.RecipeCardLarge(recipeOfTheWeek).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -304,7 +304,7 @@ func ctaSection() templ.Component {
 	})
 }
 
-func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe) templ.Component {
+func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe) 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 {
@@ -341,7 +341,7 @@ func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = highlightSection(false).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = highlightSection(recipeOfTheWeek).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

internal/templates/pages/recipe.templ

@@ -295,7 +295,7 @@ templ RecipePage(recipe domain.Recipe, user domainUser.User, loggedIn bool, doma
 	@components.Navbar("")
 	<div class="w-full 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">
-			<img class="bg-gray-100 w-full h-96 mx-auto mb-8" src="" alt=""/>
+			<img class="bg-gray-100 w-full h-96 mx-auto mb-8" src="/v1/web/static/img/recipe_placeholder_wide.jpg" type="image/jpg"/>
 			<div class="px-4 py-8 md:px-8">
 				<h1 class="text-3xl md:text-4xl font-bold text-gray-800">{ recipe.Title }</h1>
 				<p class="text-sm mt-2 mb-1 text-gray-700">Author: { user.Name }</p>

internal/templates/pages/recipe_templ.go

@@ -803,7 +803,7 @@ func RecipePage(recipe domain.Recipe, user domainUser.User, loggedIn bool, domai
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<div class=\"w-full 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\"><img class=\"bg-gray-100 w-full h-96 mx-auto mb-8\" src=\"\" alt=\"\"><div class=\"px-4 py-8 md:px-8\"><h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<div class=\"w-full 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\"><img class=\"bg-gray-100 w-full h-96 mx-auto mb-8\" src=\"/v1/web/static/img/recipe_placeholder_wide.jpg\" type=\"image/jpg\"><div class=\"px-4 py-8 md:px-8\"><h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

internal/templates/pages/search.templ

@@ -43,7 +43,7 @@ templ searchResult(recipe domain.Recipe) {
 		hx-swap="none"
 		class="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer"
 	>
-		<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src=""/>
+		<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src="/v1/web/static/img/recipe_placeholder.png" type="image/png" />
 		<div class="text-gray-700 p-4 flex flex-col items-center md:items-start w-full">
 			<div class="flex flex-col md:flex-row items-center md:items-start justify-between w-full">
 				<div class="flex flex-col items-center md:items-start">

internal/templates/pages/search_templ.go

@@ -153,7 +153,7 @@ func searchResult(recipe domain.Recipe) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\" hx-trigger=\"click\" hx-swap=\"none\" class=\"w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer\"><img class=\"bg-gray-50 size-56 md:size-40 rounded-md border-0\" src=\"\"><div class=\"text-gray-700 p-4 flex flex-col items-center md:items-start w-full\"><div class=\"flex flex-col md:flex-row items-center md:items-start justify-between w-full\"><div class=\"flex flex-col items-center md:items-start\"><h3 class=\"text-xl font-semibold text-black pb-1\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\" hx-trigger=\"click\" hx-swap=\"none\" class=\"w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer\"><img class=\"bg-gray-50 size-56 md:size-40 rounded-md border-0\" src=\"/v1/web/static/img/recipe_placeholder.png\" type=\"image/png\"><div class=\"text-gray-700 p-4 flex flex-col items-center md:items-start w-full\"><div class=\"flex flex-col md:flex-row items-center md:items-start justify-between w-full\"><div class=\"flex flex-col items-center md:items-start\"><h3 class=\"text-xl font-semibold text-black pb-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

web/static/css/tailwind.css

@@ -8,7 +8,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
     --color-red-100: oklch(93.6% 0.032 17.717);
-    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-50: oklch(97% 0.014 254.604);
@@ -335,9 +334,6 @@
   .mb-16 {
     margin-bottom: calc(var(--spacing) * 16);
   }
-  .\[display\:-webkit-box\] {
-    display: -webkit-box;
-  }
   .block {
     display: block;
   }
@@ -379,14 +375,6 @@
     width: calc(var(--spacing) * 56);
     height: calc(var(--spacing) * 56);
   }
-  .size-64 {
-    width: calc(var(--spacing) * 64);
-    height: calc(var(--spacing) * 64);
-  }
-  .size-72 {
-    width: calc(var(--spacing) * 72);
-    height: calc(var(--spacing) * 72);
-  }
   .size-80 {
     width: calc(var(--spacing) * 80);
     height: calc(var(--spacing) * 80);
@@ -424,6 +412,9 @@
   .h-screen {
     height: 100vh;
   }
+  .min-h-72 {
+    min-height: calc(var(--spacing) * 72);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -454,12 +445,6 @@
   .w-52 {
     width: calc(var(--spacing) * 52);
   }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -472,9 +457,6 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .min-w-full {
-    min-width: 100%;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -644,9 +626,6 @@
   .border-green-500 {
     border-color: var(--color-green-500);
   }
-  .border-red-200 {
-    border-color: var(--color-red-200);
-  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -994,12 +973,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[-webkit-box-orient\:vertical\] {
-    -webkit-box-orient: vertical;
-  }
-  .\[-webkit-line-clamp\:4\] {
-    -webkit-line-clamp: 4;
-  }
   .peer-checked\:border-blue-600 {
     &:is(:where(.peer):checked ~ *) {
       border-color: var(--color-blue-600);
@@ -1330,18 +1303,6 @@
       height: calc(var(--spacing) * 48);
     }
   }
-  .md\:size-64 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 64);
-      height: calc(var(--spacing) * 64);
-    }
-  }
-  .md\:size-80 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 80);
-      height: calc(var(--spacing) * 80);
-    }
-  }
   .md\:h-24 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 24);
@@ -1362,11 +1323,6 @@
       width: calc(1/4 * 100%);
     }
   }
-  .md\:w-2\/5 {
-    @media (width >= 48rem) {
-      width: calc(2/5 * 100%);
-    }
-  }
   .md\:w-3\/4 {
     @media (width >= 48rem) {
       width: calc(3/4 * 100%);