Skip to content

Commit 717a8b9

Browse files
maiertechmaiertech
authored
Add NoteList, PostList and VideoList and refactor (#1212)
* Add `VideoList` * Add `PostList` * Update tag pages * Add `NoteList`
1 parent c75cab7 commit 717a8b9

12 files changed

Lines changed: 101 additions & 84 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@fontsource/roboto": "^5.2.10",
2323
"@fontsource/spectral": "^5.2.8",
2424
"@lucide/svelte": "^1.7.0",
25-
"@maiertech/sveltekit-helpers": "^0.49.0",
25+
"@maiertech/sveltekit-helpers": "^0.50.1",
2626
"@playwright/test": "^1.58.2",
2727
"@stackblitz/sdk": "^1.11.0",
2828
"@sveltejs/adapter-node": "^5.5.4",

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/components/NoteList.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { NotePreview, type Note } from '@maiertech/sveltekit-helpers';
3+
import { twMerge } from 'tailwind-merge';
4+
5+
interface Props {
6+
values: Note[];
7+
level: 1 | 2 | 3 | 4 | 5 | 6;
8+
class?: string;
9+
}
10+
11+
let { values, level, class: className }: Props = $props();
12+
</script>
13+
14+
<div data-component="NoteList" class={twMerge(className, 'flex flex-wrap gap-6')}>
15+
{#each values as note (note.path)}
16+
<NotePreview value={note} {level} class="grow basis-2xs" />
17+
{/each}
18+
</div>

‎src/lib/components/PostList.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { PostPreview, type Post } from '@maiertech/sveltekit-helpers';
3+
import { twMerge } from 'tailwind-merge';
4+
5+
interface Props {
6+
values: Post[];
7+
level: 1 | 2 | 3 | 4 | 5 | 6;
8+
class?: string;
9+
}
10+
11+
let { values, level, class: className }: Props = $props();
12+
</script>
13+
14+
<div data-component="PostList" class={twMerge(className, 'flex flex-wrap gap-6')}>
15+
{#each values as post (post.path)}
16+
<PostPreview value={post} {level} class="grow basis-xs" />
17+
{/each}
18+
</div>

‎src/lib/components/VideoList.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { VideoPreview, type Video } from '@maiertech/sveltekit-helpers';
3+
import { twMerge } from 'tailwind-merge';
4+
5+
interface Props {
6+
values: Video[];
7+
level: 1 | 2 | 3 | 4 | 5 | 6;
8+
class?: string;
9+
}
10+
11+
let { values, level, class: className }: Props = $props();
12+
</script>
13+
14+
<div data-component="VideoList" class={twMerge(className, 'flex flex-wrap gap-6')}>
15+
{#each values as video (video.id)}
16+
<VideoPreview value={video} {level} showDescription={false} class="grow basis-xs" />
17+
{/each}
18+
</div>

‎src/lib/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
export { default as Favicon } from './favicon.svelte';
22
export { default as Footer } from './Footer.svelte';
3+
export { default as NoteList } from './NoteList.svelte';
4+
export { default as PostList } from './PostList.svelte';
35
export { default as StackblitzEmbed } from './stackblitz-embed.svelte';
6+
export { default as VideoList } from './VideoList.svelte';

‎src/routes/+page.svelte‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
2-
import { NotePreview, PostPreview, VideoPreview } from '@maiertech/sveltekit-helpers';
2+
import { NoteList, PostList } from '$lib/components';
3+
import { VideoPreview } from '@maiertech/sveltekit-helpers';
34
import type { PageProps } from './$types';
5+
import { Clock } from '@lucide/svelte';
46
57
let { data }: PageProps = $props();
68
</script>
@@ -12,14 +14,18 @@
1214
<div class="flex flex-wrap gap-6">
1315
<div
1416
// Not-sidebar (outer): videos & posts.
15-
class="@container grow-999 basis-0 min-inline-3/5"
17+
class="grow-999 basis-0 min-inline-3/5"
1618
>
17-
<div class="mb-8 flex flex-wrap gap-6">
18-
<h2 class="sr-only">Videos</h2>
19+
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
20+
<Clock class="size-5" />
21+
<span class="text-lg font-semibold">Latest videos</span>
22+
</h2>
1923

24+
<div class="mb-8 flex flex-wrap gap-6">
2025
<VideoPreview
2126
// Not-sidebar (videos): latest video.
2227
value={data.videos[0]}
28+
level={3}
2329
class="grow-999 min-inline-3/5"
2430
/>
2531

@@ -28,29 +34,28 @@
2834
class="flex grow basis-3xs flex-wrap gap-6"
2935
>
3036
{#each data.videos.slice(1) as video (video.id)}
31-
<VideoPreview value={video} showDescription={false} class="grow basis-80" />
37+
<VideoPreview value={video} level={3} showDescription={false} class="grow basis-80" />
3238
{/each}
3339
</div>
3440
</div>
3541

36-
<h2 class="sr-only">Posts</h2>
42+
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
43+
<Clock class="size-5" />
44+
<span class="text-lg font-semibold">Latest posts</span>
45+
</h2>
3746

38-
<div class="grid grow grid-cols-1 gap-6 @xl:grid-cols-2">
39-
{#each data.posts as post (post.path)}
40-
<PostPreview value={post} level={3} />
41-
{/each}
42-
</div>
47+
<PostList values={data.posts} level={3} />
4348
</div>
4449

4550
<div
4651
// Sidebar (outer): notes.
4752
class="@container grow basis-2xs"
4853
>
49-
<h2 class="sr-only">Notes</h2>
50-
<div class="grid h-full grid-cols-1 gap-6 @lg:grid-cols-2 @4xl:grid-cols-3">
51-
{#each data.notes as note (note.path)}
52-
<NotePreview value={note} level={3} />
53-
{/each}
54-
</div>
54+
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
55+
<Clock class="size-5" />
56+
<span class="text-lg font-semibold">Latest notes</span>
57+
</h2>
58+
59+
<NoteList values={data.notes} level={3} />
5560
</div>
5661
</div>

‎src/routes/notes/+layout.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script lang="ts">
2-
import { NoteHeader, SeoCanonicalUrl, VideoPreview } from '@maiertech/sveltekit-helpers';
3-
import type { LayoutProps } from './$types';
2+
import { VideoList } from '$lib/components';
43
import { Clock } from '@lucide/svelte';
4+
import { NoteHeader, SeoCanonicalUrl } from '@maiertech/sveltekit-helpers';
5+
import type { LayoutProps } from './$types';
56
67
let { data, children }: LayoutProps = $props();
78
</script>
@@ -24,8 +25,6 @@
2425
<Clock class="size-5" />
2526
<span class="text-lg font-semibold">My latest videos</span>
2627
</h2>
27-
{#each data.recommendedVideos as video (video.id)}
28-
<VideoPreview value={video} class="mb-4" showDescription={false} />
29-
{/each}
28+
<VideoList values={data.recommendedVideos} level={3} />
3029
</aside>
3130
</div>

‎src/routes/notes/+page@.svelte‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
<script lang="ts">
2-
import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
2+
import { NoteList } from '$lib/components';
3+
import { H1 } from '@maiertech/sveltekit-helpers';
34
import type { PageProps } from './$types';
45
56
let { data }: PageProps = $props();
6-
7-
const links = $derived.by(() =>
8-
data.notes.map((note) => ({
9-
href: note.path,
10-
title: note.title,
11-
description: note.description
12-
}))
13-
);
147
</script>
158

169
<H1 class="mb-8">{data.seo.title}</H1>
1710

18-
<div class="@container">
19-
<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
20-
{#each links as link (link.href)}
21-
<LinkPreview value={link} />
22-
{/each}
23-
</div>
24-
</div>
11+
<NoteList values={data.notes} level={2} />

‎src/routes/posts/+page@.svelte‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
<script lang="ts">
2-
import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
2+
import { PostList } from '$lib/components';
3+
import { H1 } from '@maiertech/sveltekit-helpers';
34
import type { PageProps } from './$types';
45
56
let { data }: PageProps = $props();
6-
7-
const links = $derived.by(() =>
8-
data.posts.map((post) => ({
9-
href: post.path,
10-
title: post.title,
11-
description: post.description
12-
}))
13-
);
147
</script>
158

169
<H1 class="mb-8">{data.seo.title}</H1>
1710

18-
<div class="@container">
19-
<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
20-
{#each links as link (link.href)}
21-
<LinkPreview value={link} />
22-
{/each}
23-
</div>
24-
</div>
11+
<PostList values={data.posts} level={2} />

0 commit comments

Comments
 (0)