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:
parent
94d5a3e3e3
commit
db5ffe3ea8
|
@ -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,6 +49,16 @@
|
||||||
|
|
||||||
<Head />
|
<Head />
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<HeroSection />
|
||||||
|
|
||||||
|
<QuickCards />
|
||||||
|
|
||||||
|
<SkillContainer />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="recent-feed">
|
||||||
|
<div class="text-center align-middle w-full"><h2 class="text-5xl underline underline-offset-2 mb-6">Recent Posts</h2></div>
|
||||||
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap h-feed">
|
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap h-feed">
|
||||||
<div
|
<div
|
||||||
in:fly={{ x: 25, duration: 300, delay: 500 }}
|
in:fly={{ x: 25, duration: 300, delay: 500 }}
|
||||||
|
@ -51,16 +70,29 @@
|
||||||
in:fly={{ x: -25, duration: 300, delay: 500 }}
|
in:fly={{ x: -25, duration: 300, delay: 500 }}
|
||||||
out:fly={{ x: -25, duration: 300 }}
|
out:fly={{ x: -25, duration: 300 }}
|
||||||
class="flex-1 w-full max-w-screen-md xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md">
|
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="text-center w-fullalign-middle">
|
||||||
|
<h3 class="text-3xl align-middle underline underline-offset-1 mb-6">Filter by tags</h3>
|
||||||
|
</div>
|
||||||
{#if allTags && Object.keys(allTags).length > 0}
|
{#if allTags && Object.keys(allTags).length > 0}
|
||||||
<div
|
<div
|
||||||
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">
|
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">
|
||||||
{#each allTags as tag}
|
{#each allTags as tag}
|
||||||
<button
|
<button
|
||||||
id={tag}
|
id={tag}
|
||||||
on:click={() => (tags.includes(tag) ? (tags = tags.filter(tagName => tagName != tag)) : (tags = [...tags, tag]))}
|
on:click|preventDefault={() => {
|
||||||
|
if (tags.includes(tag)) {
|
||||||
|
tags = tags.filter(tagName => tagName != tag);
|
||||||
|
} else {
|
||||||
|
tags = [...tags, tag];
|
||||||
|
}
|
||||||
|
const recentFeedSection = document.getElementById('recent-feed');
|
||||||
|
if (recentFeedSection) {
|
||||||
|
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}}
|
||||||
class:!btn-secondary={tags.includes(tag)}
|
class:!btn-secondary={tags.includes(tag)}
|
||||||
class:shadow-lg={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">
|
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}
|
#{tag}
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
|
@ -122,3 +154,4 @@
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue