Compare commits

...

3 Commits

Author SHA1 Message Date
8481654878
less noticable shadows on tags 2023-07-21 00:21:07 +02:00
58d2643908
add Note field in recipe 2023-07-21 00:18:37 +02:00
3796642866
add TODO in readme 2023-07-20 23:41:47 +02:00
7 changed files with 94 additions and 38 deletions

View File

@ -1,38 +1,38 @@
# create-svelte
# Personal Homepage
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
My own homepage, bocken.org (new.bocken.org for now), built with svelte-kit.
## Creating a project
## TODO
### General
- [] Admin user management
- [] upload/change pfp
- [] registration only with minimal permissions
- [] logout without /logout page
- [] no DB request for every Layout change if session already got the username once
- [] preferences page
- [] change password
If you're seeing this, you've probably already done this step. Congrats!
### Rezepte
- [] nutrition facts
- [] verify randomize arrays based on day
- [] notes for next time
```bash
# create a new project in the current directory
npm create svelte@latest
### Abrechnungen
- [] DB setup
- [] create new entries
- [] delete entries
- [] edit entries
- [] upload img
# create a new project in my-app
npm create svelte@latest my-app
```
### Flims
- [] Calendar layout
- [] DB setup
- [] create new entries
- [] delete entries
- [] edit entries
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
### Glaube
- [] just keep it as MD rendering for now?
- [] DB setup
- [] Google Speech to Text API integration?
- [] Gebete

View File

@ -0,0 +1,22 @@
<script lang="ts">
</script>
<style>
div{
background-color: var(--red);
color: white;
padding: 1em;
font-size: 1.1rem;
max-width: 400px;
margin-inline: auto;
box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
margin-bottom: 1em;
}
h3{
margin-block: 0;
}
</style>
<div>
<h3>Notiz:</h3>
<slot></slot>
</div>

View File

@ -0,0 +1,23 @@
<script lang="ts">
export let note : string;
</script>
<style>
div{
background-color: var(--red);
color: white;
padding: 1em;
font-size: 1.1rem;
max-width: 400px;
margin-inline: auto;
box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
margin-bottom: 1em;
}
h3{
margin-block: 0;
}
</style>
<div {...$$restProps} >
<h3>Notiz:</h3>
{@html note}
</div>

View File

@ -44,6 +44,8 @@ label{
background-color: var(--nord0);
color: white;
padding: 0.25em 1em;
margin-inline: 0.1em;
line-height: 2em;
border-radius: 1000px;
cursor: pointer;
position: relative;
@ -81,7 +83,8 @@ input[type=checkbox]::after
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: min(1rem, 1dvh);
margin-bottom: 1em;
}
</style>

View File

@ -14,6 +14,7 @@ const RecipeSchema = new mongoose.Schema(
caption: String,
}],
description: {type: String, required: true},
note: {type: String},
tags : [String],
season : [Number],
baking: { temperature: {type:String, default: ""},

View File

@ -10,6 +10,7 @@
import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
import { afterNavigate } from '$app/navigation';
import {season} from '$lib/js/season_store';
import RecipeNote from '$lib/components/RecipeNote.svelte';
export let data: PageData;
@ -90,7 +91,7 @@ h1{
border-radius: 10000px;
padding: 0.25em 1em;
transition: 100ms;
box-shadow: 0.2em 0.2em 0.4em 0.1em rgba(0,0,0,0.3);
box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
}
.tag:hover,
.tag:focus-visible
@ -98,7 +99,7 @@ h1{
cursor: pointer;
transform: scale(1.1,1.1);
background-color: var(--orange);
box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
}
.wrapper_wrapper{
@ -226,8 +227,10 @@ h4{
<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
{/each}
</div>
</div>
{#if data.note}
<RecipeNote note={data.note}></RecipeNote>
{/if}
</div>
<div class=wrapper_wrapper>
<div class=wrapper>

View File

@ -4,11 +4,13 @@
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css'
import { redirect } from '@sveltejs/kit';
import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
export let data: PageData;
let preamble = data.recipe.preamble
let addendum = data.recipe.addendum
let image_preview_url="https://new.bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp"
let note = data.recipe.note
import { season } from '$lib/js/season_store';
import { portions } from '$lib/js/portions_store';
@ -212,7 +214,8 @@
instructions,
ingredients,
addendum,
preamble
preamble,
note,
},
old_short_name,
headers: {
@ -347,6 +350,7 @@ button.action_button{
<div class=tags>
<h4>Saison:</h4>
<SeasonSelect></SeasonSelect>
<EditRecipeNote><p contenteditable bind:innerText={note}></p></EditRecipeNote>
</div>
</div>