Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first working prototype

Browse Source
This commit is contained in:
Alexander Bocken
2023-06-19 20:38:45 +02:00
parent be19e63970
commit 4e6291fa5d
287 changed files with 863 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/.jukit/.jukit_info.json Normal file
View File

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

34
src/lib/components/Card.svelte Normal file
View File

@ -0,0 +1,34 @@
<script lang="ts">
export let recipe
export let current_month
export let icon_override = false;
if(icon_override){
current_month = recipe.season[0]
}
import src from '$lib/assets/img/al_ragu.webp'
import '$lib/components/card.css'
//import src from './aelplermagronen.js'
// Winter: ❄️
// Weihnachten: 🎄
// Ostern: 🐇
// Fastenzeit: ✝️
// Herbst: 🍂
// Sommer: ☀️
</script>
<a class=card href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
{#if icon_override || recipe.season.includes(current_month)}
<a class=icon href="/rezepte/season/{current_month}">{recipe.icon}</a>
{/if}
<img src="/images/{recipe.images[0].mediapath}" alt="{recipe.alt}" />
<div class=title>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
<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>

19
src/lib/components/MediaScroller.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import "$lib/components/nordtheme.css"
</script>
<style>
.media-scroller {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
overflow-x: auto;
gap: 2rem;
padding: 3rem;
background-color: var(--nord2);
}
</style>
<div class="media-scroller snaps-inline">
<slot></slot>
</div>

13
src/lib/components/Recipes.svelte Normal file
View File

@ -0,0 +1,13 @@
<style>
.wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
justify-content: center;
}
</style>
<div class=wrapper>
<slot></slot>
</div>

105
src/lib/components/Search.svelte Normal file
View File

@ -0,0 +1,105 @@
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
document.addEventListener("DOMContentLoaded", () => {
for (e of document.getElementsByClassName("js-only")) {
e.classList.remove("js-only");
}
const recipes = document.querySelectorAll(".card");
console.log("######", recipes)
const search = document.getElementById("search");
const clearSearch = document.getElementById("clear-search");
function do_search(click_only_result=false){
// grab search input value
const searchText = search.value.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
const searchTerms = searchText.split(" ");
const hasFilter = searchText.length > 0;
// for each recipe hide all but matched
recipes.forEach(recipe => {
const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, "");
const isMatch = searchTerms.every(term => searchString.includes(term));
recipe.hidden = !isMatch;
recipe.classList.toggle("matched-recipe", hasFilter && isMatch);
})
recipes.forEach(recipe => {
if(recipe.hidden == false){
recipe.parentElement.previousElementSibling.hidden = false;}
})
if(click_only_result){
let matched_recipes = document.querySelectorAll(".matched-recipe");
if(matched_recipes.length == 1 &&
matched_recipes[0].parentElement.previousElementSibling != noch_zu_probieren_header){
matched_recipes[0].lastElementChild.click();
}
}
}
search.addEventListener("input", () => {
do_search();
})
clearSearch.addEventListener("click", () => {
search.value = "";
recipes.forEach(recipe => {
recipe.hidden = false;
recipe.classList.remove("matched-recipe");
})
})
let paramString = window.location.href.split('?')[1];
let queryString = new URLSearchParams(paramString);
for (let pair of queryString.entries()) {
if(pair[0] == 'q'){
const search = document.getElementById("search");
search.value=pair[1];
do_search(click_only_result=true);
}
}
})
// @license-end
</script>
<style>
input#search {
all: unset;
background: #222;
color: #fff;
padding: 0.7rem 1rem;
border-radius: 5px;
width: 100%;
}
.search {
width: 400px;
max-width: 85vw;
position: relative;
margin: 2.5rem auto 1.2rem;
display: flex;
align-items: center;
}
button#clear-search {
all: unset;
position: absolute;
right: 6px;
height: 30px;
width: 30px;
color: #888;
cursor: pointer;
transition: color 180ms ease-in-out;
}
button#clear-search:hover {
color: #eee;
}
</style>
<div class="search js-only">
<input type="text" id="search" placeholder="Suche nach Stichwörtern...">
<button id="clear-search">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Sucheintrag löschen</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
</button>
</div>

42
src/lib/components/SeasonLayout.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
import '$lib/components/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte';
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
let month : number;
</script>
<style>
a.month{
text-decoration: unset;
border-radius: 1000px;
background-color: var(--blue);
color: var(--nord5);
padding: 0.5em;
transition: 100ms;
min-width: 4em;
text-align: center;
}
a.month:hover{
transform: scale(1.1,1.1);
background-color: var(--red);
}
.months{
display:flex;
flex-wrap:wrap;
justify-content: center;
gap: 1rem;
margin-inline: auto;
margin-block: 2rem;
}
</style>
<slot name="test"></slot>
<div class=months>
{#each months as month, i}
<a class=month href="/rezepte/season/{i+1}">{month}</a>
{/each}
</div>
<section>
<slot name=recipes></slot>
</section>

22
src/lib/components/TagBall.svelte Normal file
View File

@ -0,0 +1,22 @@
<script lang="ts">
export let tag : string;
export let ref: string;
import '$lib/components/nordtheme.css'
</script>
<style>
a{
background-color: var(--blue);
text-decoration: none;
padding: 2rem;
border-radius: 1000000px;
transition: 100ms;
font-size: 2rem;
color: white;
}
a:hover{
transform: scale(1.1, 1.1);
background-color: var(--red);
}
</style>
<a href="{ref}/{tag}">{tag}</a>

16
src/lib/components/TagCloud.svelte Normal file
View File

@ -0,0 +1,16 @@
<style>
div{
max-width: 900px;
display:flex;
flex-direction: row;
flex-wrap: wrap;
margin-inline:auto;
gap: 1rem;
justify-content: space-evenly;
font-family: sans-serif;
}
</style>
<div>
<slot></slot>
</div>

136
src/lib/components/card.css Normal file
View File

@ -0,0 +1,136 @@
.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;
background-color: #5E81AC;
}
.card .icon:hover{
transform: scale(1.2,1.2);
}
.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 {
position: relative;
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{
background-color:#BF616A;
}
.card .name{
font-size: 2em;
color: white;
padding: 0.5em;
padding-top: 0.2em;
}
.card .tags{
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
overflow: hidden;
column-gap: 0.25em;
padding-inline: 0.5em;
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 .icon{
text-decoration: unset;
position: absolute;
font-size: 1.5rem;
top:-0.5em;
right:-0.5em;
padding: 0.25em;
background-color: #ECEFF4;
border-radius:1000px;
transition: 100ms;
}
.card .title .category{
position: absolute;
text-decoration: none;
color: #ECEFF4;
font-size: 1.5rem;
top: -0.8em;
left: -0.5em;
background-color: #2E3440;
padding-inline: 1em;
border-radius: 1000px;
transition: 100ms;
}
.card .title .category:hover{
background-color: #434C5E;
transform: scale(1.05, 1.05)
}
.card:hover .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);
}
}

25
src/lib/components/nordtheme.css Normal file
View File

@ -0,0 +1,25 @@
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord2: #434C5E;
--nord3: #4C566A;
--nord4: #D8DEE9;
--nord5: #E5E9F0;
--nord6: #ECEFF4;
--nord7: #8FBCBB;
--nord8: #88C0D0;
--nord9: #81A1C1;
--nord10: #5E81AC;
--nord11: #BF616A;
--nord12: #D08770;
--nord13: #EBCB8B;
--nord14: #A3BE8C;
--nord15: #B48EAD;
--lightblue: var(--nord9);
--blue: var(--nord10);
--red: var(--nord11);
--orange: var(--nord12);
--yellow: var(--nord13);
--green: var(--nord14);
--purple: var(--nord15);
}