Madmin
/
old-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add my stuff up top main page and tweak a lot, changed some behavior reloading page and scrolling to top

This commit is contained in:
matthieu42morin 2024-04-29 05:07:20 +02:00
parent 94d5a3e3e3
commit db5ffe3ea8
1 changed files with 110 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/routes/+page.svelte
View File

@ -1,4 +1,7 @@
<script lang="ts"> <script lang="ts">
import SkillContainer from '$lib/components/skills/SkillContainer.svelte'
import HeroSection from '$lib/components/home/HeroSection.svelte'
import QuickCards from '$lib/components/home/QuickCards.svelte'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fly } from 'svelte/transition' import { fly } from 'svelte/transition'
import { page } from '$app/stores' import { page } from '$app/stores'
@ -6,9 +9,9 @@
import { goto } from '$app/navigation' import { goto } from '$app/navigation'
import { posts as storedPosts, tags as storedTags } from '$lib/stores/posts' import { posts as storedPosts, tags as storedTags } from '$lib/stores/posts'
import { title as storedTitle } from '$lib/stores/title' import { title as storedTitle } from '$lib/stores/title'
import Head from '$lib/components/head.svelte' import Head from '$lib/components/main/head.svelte'
import Footer from '$lib/components/footer.svelte' import Footer from '$lib/components/main/footer.svelte'
import Post from '$lib/components/post_card.svelte' import Post from '$lib/components/blog/post_card.svelte'
import Profile from '$lib/components/index_profile.svelte' import Profile from '$lib/components/index_profile.svelte'
let allPosts: Urara.Post[] let allPosts: Urara.Post[]
@ -26,8 +29,14 @@
$: if (tags) { $: if (tags) {
posts = !tags ? allPosts : allPosts.filter(post => tags.every(tag => post.tags?.includes(tag))) posts = !tags ? allPosts : allPosts.filter(post => tags.every(tag => post.tags?.includes(tag)))
if (browser && window.location.pathname === '/') if (browser) {
goto(tags.length > 0 ? `?tags=${tags.toString()}` : `/`, { replaceState: true }) const newUrl = tags.length > 0 ? `/?tags=${tags.toString()}#recent-feed` : '/#recent-feed';
history.pushState(null, '', newUrl);
const recentFeedSection = document.getElementById('recent-feed');
if (recentFeedSection) {
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
}
}
} }
onMount(() => { onMount(() => {
@ -40,85 +49,109 @@
<Head /> <Head />
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap h-feed"> <section id="hero" class="mt-24 mb-24 container h-full mx-auto flex-col justify-center items-center md:w-3/4 space-y-8">
<div <HeroSection />
in:fly={{ x: 25, duration: 300, delay: 500 }}
out:fly={{ x: 25, duration: 300 }} <QuickCards />
class="flex-1 w-full max-w-screen-md order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
<Profile /> <SkillContainer />
</div> </section>
<div
in:fly={{ x: -25, duration: 300, delay: 500 }} <section id="recent-feed">
out:fly={{ x: -25, duration: 300 }} <div class="text-center align-middle w-full"><h2 class="text-5xl underline underline-offset-2 mb-6">Recent Posts</h2></div>
class="flex-1 w-full max-w-screen-md xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md"> <div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap h-feed">
{#if allTags && Object.keys(allTags).length > 0} <div
<div in:fly={{ x: 25, duration: 300, delay: 500 }}
class="flex xl:flex-wrap gap-2 overflow-x-auto xl:overflow-x-hidden overflow-y-hidden max-h-24 my-auto xl:max-h-fit max-w-fit xl:max-w-full pl-8 md:px-0 xl:pl-8 xl:pt-8"> out:fly={{ x: 25, duration: 300 }}
{#each allTags as tag} class="flex-1 w-full max-w-screen-md order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
<button <Profile />
id={tag} </div>
on:click={() => (tags.includes(tag) ? (tags = tags.filter(tagName => tagName != tag)) : (tags = [...tags, tag]))} <div
class:!btn-secondary={tags.includes(tag)} in:fly={{ x: -25, duration: 300, delay: 500 }}
class:shadow-lg={tags.includes(tag)} out:fly={{ x: -25, duration: 300 }}
class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 mt-4 mb-8 xl:m-0"> class="flex-1 w-full max-w-screen-md xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md">
#{tag} <div class="text-center w-fullalign-middle">
</button> <h3 class="text-3xl align-middle underline underline-offset-1 mb-6">Filter by tags</h3>
{/each}
</div> </div>
{/if} {#if allTags && Object.keys(allTags).length > 0}
</div>
<div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0">
{#key posts}
<!-- {:else} is not used because there is a problem with the transition -->
{#if loaded && posts.length === 0}
<div <div
in:fly={{ x: 100, duration: 300, delay: 500 }} class="flex flex-wrap gap-2 overflow-x-auto xl:overflow-x-hidden max-h-24 my-auto xl:max-h-fit max-w-fit xl:max-w-full px-4 md:px-0 xl:px-8 xl:pt-8">
out:fly={{ x: -100, duration: 300 }} {#each allTags as tag}
class="bg-base-300 text-base-content shadow-inner text-center md:rounded-box p-10 -mb-2 md:mb-0 relative z-10"> <button
<div class="prose items-center"> id={tag}
<h2> on:click|preventDefault={() => {
Not found: [{#each tags as tag, i} if (tags.includes(tag)) {
'{tag}'{#if i + 1 < tags.length},{/if} tags = tags.filter(tagName => tagName != tag);
{/each}] } else {
</h2> tags = [...tags, tag];
<button on:click={() => (tags = [])} class="btn btn-secondary"> }
<span class="i-heroicons-outline-trash mr-2" /> const recentFeedSection = document.getElementById('recent-feed');
tags = [] if (recentFeedSection) {
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
}
}}
class:!btn-secondary={tags.includes(tag)}
class:shadow-lg={tags.includes(tag)}
class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 mt-4 mb-8 xl:m-0 whitespace-nowrap">
#{tag}
</button> </button>
</div> {/each}
</div> </div>
{/if} {/if}
<main </div>
class="flex flex-col relative bg-base-100 md:bg-transparent md:gap-8 z-10" <div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0">
itemprop="mainEntityOfPage" {#key posts}
itemscope <!-- {:else} is not used because there is a problem with the transition -->
itemtype="https://schema.org/Blog"> {#if loaded && posts.length === 0}
{#each posts as post, index} <div
{@const year = new Date(post.published ?? post.created).getFullYear()} in:fly={{ x: 100, duration: 300, delay: 500 }}
{#if !years.includes(year)} out:fly={{ x: -100, duration: 300 }}
class="bg-base-300 text-base-content shadow-inner text-center md:rounded-box p-10 -mb-2 md:mb-0 relative z-10">
<div class="prose items-center">
<h2>
Not found: [{#each tags as tag, i}
'{tag}'{#if i + 1 < tags.length},{/if}
{/each}]
</h2>
<button on:click={() => (tags = [])} class="btn btn-secondary">
<span class="i-heroicons-outline-trash mr-2" />
tags = []
</button>
</div>
</div>
{/if}
<main
class="flex flex-col relative bg-base-100 md:bg-transparent md:gap-8 z-10"
itemprop="mainEntityOfPage"
itemscope
itemtype="https://schema.org/Blog">
{#each posts as post, index}
{@const year = new Date(post.published ?? post.created).getFullYear()}
{#if !years.includes(year)}
<div
in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }}
out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }}
class="divider my-4 md:my-0">
{years.push(year) && year}
</div>
{/if}
<div <div
in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }} in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }}
out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }} out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }}
class="divider my-4 md:my-0"> class="rounded-box transition-all duration-500 ease-in-out hover:z-30 hover:shadow-lg md:shadow-xl md:hover:shadow-2xl md:hover:-translate-y-0.5">
{years.push(year) && year} <Post {post} preview={true} loading={index < 5 ? 'eager' : 'lazy'} decoding={index < 5 ? 'auto' : 'async'} />
</div> </div>
{/if} {/each}
<div </main>
in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }} <div
out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }} class:hidden={!loaded}
class="rounded-box transition-all duration-500 ease-in-out hover:z-30 hover:shadow-lg md:shadow-xl md:hover:shadow-2xl md:hover:-translate-y-0.5"> class="sticky bottom-0 md:static md:mt-8"
<Post {post} preview={true} loading={index < 5 ? 'eager' : 'lazy'} decoding={index < 5 ? 'auto' : 'async'} /> in:fly={{ x: posts.length + (1 % 2) ? 100 : -100, duration: 300, delay: 500 }}
</div> out:fly={{ x: posts.length + (1 % 2) ? -100 : 100, duration: 300 }}>
{/each} <div class="divider mt-0 mb-8 hidden lg:flex" />
</main> <Footer />
<div </div>
class:hidden={!loaded} {/key}
class="sticky bottom-0 md:static md:mt-8" </div>
in:fly={{ x: posts.length + (1 % 2) ? 100 : -100, duration: 300, delay: 500 }}
out:fly={{ x: posts.length + (1 % 2) ? -100 : 100, duration: 300 }}>
<div class="divider mt-0 mb-8 hidden lg:flex" />
<Footer />
</div>
{/key}
</div> </div>
</div> </section>