Compare commits

..

2 Commits

Author SHA1 Message Date
a266e7fb3a Add proper titles to pages 2025-12-04 09:15:02 +13:00
85273f163c decent search page which should be everything!! 2025-11-19 21:46:33 +13:00
6 changed files with 14 additions and 26 deletions

View File

@@ -1,9 +0,0 @@
---
import "../styles/global.css"
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>

View File

@@ -1,12 +1,19 @@
--- ---
import BaseHead from '@component/BaseHead'
import Header from '@component/Header' import Header from '@component/Header'
import "../styles/global.css"; import "../styles/global.css";
const {
title
} = Astro.props
--- ---
<html lang=en> <html lang=en>
<head> <head>
<BaseHead title="Recipie" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title ? title : "Recipie"}</title>
</head> </head>
<body> <body>
<main id="main" class="flex-1"> <main id="main" class="flex-1">

View File

@@ -53,7 +53,7 @@ const recipeId = id as string
}); });
</script> </script>
<Base> <Base title="Edit Recipe">
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2"> <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col sticky"> <div class="flex md:flex-1/3 flex-col sticky">

View File

@@ -20,7 +20,7 @@ const images = await Promise.all(
) )
--- ---
<Base> <Base title=`${recipeData.metadata.title}: Recipie` >
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2"> <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky"> <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" images={images} /> <ImageCarousel class="w-full" images={images} />

View File

@@ -57,7 +57,7 @@ tags:
}); });
</script> </script>
<Base> <Base title="New Recipe">
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2"> <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col sticky"> <div class="flex md:flex-1/3 flex-col sticky">

View File

@@ -30,7 +30,7 @@ if (query) {
} }
--- ---
<Base> <Base title=`Search${ query != "" ? ": " + query : "" }`>
<div class="mb-6"> <div class="mb-6">
<!-- <h1 class="text-3xl font-bold mb-4">Search Recipes</h1> --> <!-- <h1 class="text-3xl font-bold mb-4">Search Recipes</h1> -->
@@ -60,7 +60,7 @@ if (query) {
)} )}
</div> </div>
{query && recipes.length > 0 ? ( {query && recipes.length > 0 && (
<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"> <div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{ {
recipes.map((r, i) => ( recipes.map((r, i) => (
@@ -74,15 +74,5 @@ if (query) {
)) ))
} }
</div> </div>
) : query ? (
<div class="text-center py-12 text-gray-400">
<p class="text-xl">No recipes found</p>
<p class="mt-2">Try a different search term</p>
</div>
) : (
<div class="text-center py-12 text-gray-400">
<p class="text-xl">Start searching for recipes</p>
<p class="mt-2">Enter a search term above to find your favorite recipes</p>
</div>
)} )}
</Base> </Base>