Initial commit

src/routes/rezepte/+page.server.ts

@@ -0,0 +1,12 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch }) {
+    const res_season = await fetch(`/api/items/in_season`);
+    const res_all_brief = await fetch(`/api/items/all_brief`);
+    const item_season = await res_season.json();
+    const item_all_brief = await res_all_brief.json();
+    return {
+	    season: item_season,
+	    all_brief: item_all_brief,
+    };
+};

src/routes/rezepte/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import './card.css';
+    export let data: PageData;
+    import Card from './Card.svelte'
+    export let current_month = new Date().getMonth() + 1
+</script>
+<style>
+.accordion{
+	display:flex;
+	background-color: #111111;
+	flex-direction: row;
+	margin-inline: auto;
+	padding-inline: 1rem;
+	padding-block: 3rem;
+	margin-block: 3rem;
+	align-items:center;
+	justify-content: center;
+	gap: 1rem;
+}
+</style>
+<h1>Rezepte</h1>
+<h2>In Saison</h2>
+<section>
+<div class=accordion>
+{#each data.season as recipe}
+	<Card {recipe} {current_month}></Card>
+{/each}
+</div>
+</section>
+<h2>Alle Rezepte</h2>
+<div class=accordion>
+{#each data.all_brief as recipe}
+<Card {recipe} {current_month}></Card>
+{/each}
+</div>

src/routes/rezepte/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/Card.svelte

@@ -0,0 +1,29 @@
+<script>
+export let recipe
+export let current_month
+
+import alragu from '$lib/assets/al_ragu.webp'
+export let src
+import './card.css'
+// Winter: ❄️
+// Weihnachten: 🎄
+// Ostern: 🐇
+// Fastenzeit: ✝️
+// Herbst: 🍂
+// Sommer: ☀️
+</script>
+
+<a class=card href="/rezepte/{recipe.short_name}">
+	<img {src} alt="">
+	<div class=title>
+		{#if recipe.season.includes(current_month)}
+			<div class=icon>{recipe.icon}</div>
+		{/if}
+		<div class=name>{recipe.name}</div>
+		<div class=tags>
+		{#each recipe.tags as tag}
+			<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
+		{/each}
+		</div>
+	</div>
+</a>

src/routes/rezepte/[name]/+page.server.ts

@@ -0,0 +1,11 @@
+// import { error } from '@sveltejs/kit';
+import type { PageLoad } from "./$types";
+//import { Recipe } from '../../../models/Recipe';
+//import { dbConnect, dbDisconnect } from '../../../utils/db';
+
+export async function load({ fetch, params }) {
+    const res = await fetch(`/api/items/${params.name}`);
+    const item = await res.json();
+
+    return item;
+};

src/routes/rezepte/[name]/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import MultiImgWrapper from './MultiImgWrapper.svelte'
+    export let data: PageData;
+</script>
+
+<h1>{data.name}</h1>
+
+<MultiImgWrapper wrap={data.images.length>1} class=double>
+{#each data.images as img}
+	<figure>
+	{#if img.caption}
+		<caption>{img.caption}</caption>
+	{/if}
+	</figure>
+{/each}
+</MultiImgWrapper>
+
+{#if data.ingredients}
+<h2>Zutaten</h2>
+{#each data.ingredients as list}
+{#if list.name}
+	<h3>{list.name}</h3>
+{/if}
+<ul>
+	{#each list.list as item}
+		<li>{item.amount} {item.unit} {item.name}</li>
+	{/each}
+</ul>
+{/each}
+{/if}
+
+
+{#if data.instructions}
+<h2>Zubereitung</h2>
+{#each data.instructions as list}
+{#if list.name}
+	<h3>{list.name}</h3>
+{/if}
+<ol>
+	{#each list.steps as step}
+		<li>{step}</li>
+	{/each}
+</ol>
+{/each}
+{/if}

src/routes/rezepte/[name]/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/[name]/MultiImgWrapper.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let wrap = false
+</script>
+{#if wrap}
+  <div {...$$restProps}>
+    <slot />
+  </div>
+{:else}
+  <slot />
+{/if}

src/routes/rezepte/card.css

@@ -0,0 +1,110 @@
+.card{
+	text-decoration: none;
+	position: relative;
+	box-sizing: border-box;
+	font-family: sans-serif;
+	cursor: pointer;
+	width: 300px;
+	aspect-ratio: 4/7;
+	border-radius: 20px;
+	background-size: contain;
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+	transition: 200ms;
+}
+.card:hover,
+.card:focus-visible{
+	transform: scale(1.02,1.02)
+}
+
+.card img{
+	height: 50%;
+	object-fit: cover;
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	background-color:  #5E81AC;
+}
+.card .title {
+	box-sizing: border-box;
+	padding-top: 0.5em;
+	height: 50%;
+	width: 100% ;
+	padding-inline: 1em;
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+	background-color: #5E81AC;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	transition: 100ms;
+}
+.card:hover .title{
+	background-color:#BF616A;
+}
+.card .name{
+	font-size: 2em;
+	color: white;
+	margin-bottom: 0.5em;
+}
+
+.card .tags{
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	column-gap: 0.25em;
+	margin-bottom:0.5em;
+	flex-grow: 0;
+}
+.card .tag{
+	cursor: pointer;
+	text-decoration: unset;
+	background-color: #D8DEE9;
+	color: #2E3440;
+	border-radius: 100px;
+	padding-inline: 1em;
+	line-height: 1.5em;
+	margin-bottom: 0.5em;
+	transition: 100ms;
+}
+.card .tag:hover{
+	transform: scale(1.04, 1.04);
+	background-color: #D08770;
+}
+
+.card .title .icon{
+	position: absolute;
+	font-size: 1.5rem;
+	top:-0.5em;
+	right:-0.5em;
+	padding: 0.25em;
+	background-color: white;
+	border-radius:1000px;
+}
+.card:hover .title .icon{
+	animation:  shake 0.6s
+}
+
+  @keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+      transform: rotate(30deg)
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+      transform: rotate(-30deg)
+      		scale(1.2,1.2);
+    }
+    74%{
+  transform: rotate(30deg)
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1,1);
+    }
+  }

src/routes/rezepte/tag/+page.server.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch }) {
+    const res_tag = await fetch(`/api/tags`);
+    const items_tag = await res_tag.json();
+    return {
+	    tags: item.tags
+    }
+};

src/routes/rezepte/tag/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '../../card.css';
+    import Card from '../../Card.svelte';
+    export let data: PageData;
+    export let current_month = new Date().getMonth() + 1;
+</script>
+<style>
+.accordion{
+	display:flex;
+	background-color: #111111;
+	flex-direction: row;
+	margin-inline: auto;
+	padding-inline: 1rem;
+	padding-block: 3rem;
+	margin-block: 3rem;
+	align-items:center;
+	justify-content: center;
+	gap: 1rem;
+}
+</style>
+<h1>Rezepte</h1>
+<h2>In Tag {data.tag}</h2>
+<section>
+<div class=accordion>
+{#each data.recipes as recipe}
+	<Card {recipe} {current_month}></Card>
+{/each}
+</div>
+</section>

src/routes/rezepte/tag/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/tag/[tag]/+page.server.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params }) {
+    const res_tag = await fetch(`/api/items/tag/${params.tag}`);
+    const items_tag = await res_tag.json();
+    return {
+	    tag: params.tag,
+	    recipes: items_tag
+    }
+};

src/routes/rezepte/tag/[tag]/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '../../card.css';
+    export let data: PageData;
+    export let current_month = new Date().getMonth() + 1;
+    import Card from '../../Card.svelte'
+</script>
+<style>
+.accordion{
+	display:flex;
+	background-color: #111111;
+	flex-direction: row;
+	margin-inline: auto;
+	padding-inline: 1rem;
+	padding-block: 3rem;
+	margin-block: 3rem;
+	align-items:center;
+	justify-content: center;
+	gap: 1rem;
+}
+</style>
+<h1>Rezepte</h1>
+<h2>In Tag {data.tag}</h2>
+<section>
+<div class=accordion>
+{#each data.recipes as recipe}
+	<Card {recipe} {current_month}></Card>
+{/each}
+</div>
+</section>

src/routes/rezepte/tag/[tag]/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}