feat(component): add sections from jiwaszki

This component from https://github.com/jiwaszki/jiwaszki.github.io
This commit is contained in:
Hubert 2023-01-28 04:16:29 +08:00
parent 249d479384
commit da2efb2c69
Signed by: trle5
GPG Key ID: 2935B4DE0D6F7720
5 changed files with 224 additions and 7 deletions

View File

@ -0,0 +1,138 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import { page } from '$app/stores'
import { browser } from '$app/environment'
import { posts as storedPosts, tags as storedTags } from '$lib/stores/posts'
import { title as storedTitle } from '$lib/stores/title'
import Head from '$lib/components/head.svelte'
import Footer from '$lib/components/footer.svelte'
import Post from '$lib/components/post_card.svelte'
import Profile from '$lib/components/index_profile.svelte'
import type { Section } from '$lib/config/sections'
export let item: unknown
let section = item as unknown as Section
// let allTags: string[]
let allTags = section.related_tags
let allPosts: Urara.Post[]
let loaded: boolean
let [posts, tags, years]: [Urara.Post[], string[], number[]] = [[], [], []]
storedTitle.set('')
$: storedPosts.subscribe(storedPosts => (allPosts = storedPosts.filter(post => (!post.flags?.includes('unlisted')))))
// Filter all posts to get all with at least one of related tags
$: allPosts = allPosts.filter(post => allTags.some(tag => post.tags?.includes(tag)))
$: if (posts.length > 1) years = [new Date(posts[0].published ?? posts[0].created).getFullYear()]
$: if (tags) {
posts = !tags ? allPosts : allPosts.filter(post => tags.every(tag => post.tags?.includes(tag)))
if (browser && window.location.pathname === '/')
window.history.replaceState({}, '', tags.length > 0 ? `?tags=${tags.toString()}` : `/`)
}
onMount(() => {
if (browser) {
if ($page.url.searchParams.get('tags')) tags = $page.url.searchParams.get('tags')?.split(',') ?? []
loaded = true
}
})
</script>
<!-- Section -->
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap h-feed">
<div
in:fly={{ x: 25, duration: 300, delay: 500 }}
out:fly={{ x: 25, duration: 300 }}
class="flex-1 w-full max-w-screen-md order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
<Profile />
</div>
<div
in:fly={{ x: -25, duration: 300, delay: 500 }}
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">
<!-- TODO: add box with "{section.id} related tags:" -->
{#if allTags && Object.keys(allTags).length > 0}
<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">
{#each allTags as tag}
<button
id={tag}
on:click={() => (tags.includes(tag) ? (tags = tags.filter(tagName => tagName != tag)) : (tags = [...tags, tag]))}
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">
#{tag}
</button>
{/each}
</div>
{/if}
</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
in:fly={{ x: 100, duration: 300, delay: 500 }}
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>
{#if tags.length != 0}
未找到符合: <u>{#each tags as tag, i}
{tag}{#if i + 1 < tags.length},{/if}
{/each}</u>
标签的文章
{:else}
该分类下没有文章
{/if}
</h2>
{#if tags.length != 0}
<button on:click={() => (tags = [])} class="btn btn-secondary">
<span class="i-heroicons-outline-trash mr-2" />
清空标签
</button>
{/if}
</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
in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }}
out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }}
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">
<Post {post} preview={true} loading={index < 5 ? 'eager' : 'lazy'} decoding={index < 5 ? 'auto' : 'async'} />
</div>
{/each}
</main>
<div
class:hidden={!loaded}
class="sticky bottom-0 md:static md:mt-8"
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>

View File

@ -143,26 +143,39 @@ export const header: HeaderConfig = {
children: [
{
text: '建站历程',
link: '/about/history'
link: '/about/history'
},
{
text: '待办事项',
link: '/about/todolist'
},
{
text: '隐私声明',
link: '/about/privacy'
}
]
},
{
text: '闲聊',
link: '/?tags=闲聊'
text: '分类',
children: [
{
text: '闲聊',
link: '/talk'
},
{
text: '文章',
link: '/post'
}
]
},
{
text: '朋友们',
link: '/friends'
},
{
text: '📁',
link: 'https://t5d.trle5.xyz'
}
{
text: '📁',
link: 'https://t5d.trle5.xyz'
}
]
}

View File

@ -0,0 +1,36 @@
export type Section = {
id: string
// name: string
description?: string
related_tags: string[]
}
export const sections: Section[] = [
{
id: 'talk', // same as name of the section
description: '随便写点',
related_tags: [ // pages with which tags are included
'闲聊',
'年度总结',
],
},
{
id: 'post',
description: '文章',
related_tags: [
'Urara',
'拓展',
'Homekit',
'esp8266',
'技术',
'博客',
'Chrome OS',
'Linux',
'小教程',
'FarPush',
'推送服务',
'ADB',
'Hexo',
]
},
]

15
urara/post/+page.svelte Normal file
View File

@ -0,0 +1,15 @@
<script lang="ts">
import { sections as allSections } from '$lib/config/sections'
import Head from '$lib/components/head.svelte'
import SectionComponent from '$lib/components/extra/sections.svelte'
let items: { id: string }[] = [
...(allSections.filter(x => x.id.includes('post')) as { id: string }[])
]
</script>
<Head />
{#each items as item}
<SectionComponent {item} />
{/each}

15
urara/talk/+page.svelte Normal file
View File

@ -0,0 +1,15 @@
<script lang="ts">
import { sections as allSections } from '$lib/config/sections'
import Head from '$lib/components/head.svelte'
import SectionComponent from '$lib/components/extra/sections.svelte'
let items: { id: string }[] = [
...(allSections.filter(x => x.id.includes('talk')) as { id: string }[])
]
</script>
<Head />
{#each items as item}
<SectionComponent {item} />
{/each}