Skip to content

Commit aa9875e

Browse files
Copilotmaiertech
Copilot
and
maiertech
authored
Add sidebar with recommended videos to video layout (#1216)
* Initial plan * Add sidebar with recommended videos to video layout Agent-Logs-Url: https://github.com/maiertech/website/sessions/20c23ae2-dfb3-4d44-8dac-f5cc8ce60e90 Co-authored-by: maiertech <1482402+maiertech@users.noreply.github.com> * Optimize spacing * Fine tune layouts --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: maiertech <1482402+maiertech@users.noreply.github.com> Co-authored-by: Thilo Maier <git@maier.asia>
1 parent 1b339ff commit aa9875e

5 files changed

Lines changed: 41 additions & 19 deletions

File tree

‎src/routes/+page.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// Not-sidebar (outer): videos & posts.
1717
class="grow-999 basis-0 min-inline-3/5"
1818
>
19-
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
19+
<h2 class="mb-4 flex items-center gap-2 text-ink-muted">
2020
<Clock class="size-5" />
2121
<span class="text-lg font-semibold">Latest videos</span>
2222
</h2>
@@ -39,7 +39,7 @@
3939
</div>
4040
</div>
4141

42-
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
42+
<h2 class="mb-4 flex items-center gap-2 text-ink-muted">
4343
<Clock class="size-5" />
4444
<span class="text-lg font-semibold">Latest posts</span>
4545
</h2>
@@ -51,7 +51,7 @@
5151
// Sidebar (outer): notes.
5252
class="@container grow basis-2xs"
5353
>
54-
<h2 class="mb-4 flex items-center gap-1 text-ink-muted">
54+
<h2 class="mb-4 flex items-center gap-2 text-ink-muted">
5555
<Clock class="size-5" />
5656
<span class="text-lg font-semibold">Latest notes</span>
5757
</h2>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
<NoteHeader value={data.note} class="mb-8" />
1818
{@render children()}
1919

20-
<p aria-hidden="true" class="mt-8 text-center text-xl text-ink-muted">◆◆◆</p>
20+
<p aria-hidden="true" class="mt-8 text-center text-lg text-ink-muted">◆ ◆ ◆</p>
2121
</div>
2222

2323
<aside class="flex grow basis-2xs flex-col gap-3">
24-
<h2 class="flex items-center gap-1 text-ink-muted">
24+
<h2 class="flex items-center gap-2 text-ink-muted">
2525
<Clock class="size-5" />
2626
<span class="text-lg font-semibold">Latest videos</span>
2727
</h2>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
<PostHeader value={data.post} class="mb-12" />
1919
{@render children()}
2020

21-
<p aria-hidden="true" class="mt-8 text-center text-xl text-ink-muted">◆◆◆</p>
21+
<p aria-hidden="true" class="mt-8 text-center text-lg text-ink-muted">◆ ◆ ◆</p>
2222
</div>
2323

2424
<aside class="flex grow basis-2xs flex-col gap-3">
25-
<h2 class="flex items-center gap-1 text-ink-muted">
25+
<h2 class="flex items-center gap-2 text-ink-muted">
2626
<Clock class="size-5" />
2727
<span class="text-lg font-semibold">Latest videos</span>
2828
</h2>

‎src/routes/videos/+layout.server.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ export const load: LayoutServerLoad = async ({ url }) => {
1212
error(404, 'Video not found.');
1313
}
1414

15+
const recommendedVideos = videos.filter((v) => v.path !== video.path).slice(0, 3);
16+
1517
return {
1618
origin: ORIGIN,
1719
video,
20+
recommendedVideos,
1821
seo: {
1922
title: video.title,
2023
description: video.description,

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

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import { VideoList } from '$lib/components';
3+
import { ListVideo } from '@lucide/svelte';
24
import { SeoCanonicalUrl, VideoHeader, VideoPlayer, Button } from '@maiertech/sveltekit-helpers';
35
import { siYoutube } from 'simple-icons';
46
import type { LayoutProps } from './$types';
@@ -8,18 +10,35 @@
810

911
<SeoCanonicalUrl origin={data.origin} />
1012

11-
<VideoHeader value={data.video} class="mb-12" />
13+
<div class="flex flex-wrap gap-10">
14+
<div
15+
// `basis-0` to prevent `basis-auto`, which resolves to intrinsic width of longest para.
16+
class="grow-999 basis-0 min-inline-3/5"
17+
>
18+
<VideoHeader value={data.video} class="mb-12" />
1219

13-
<VideoPlayer value={data.video} class="mb-8" />
20+
<VideoPlayer value={data.video} class="mb-8" />
1421

15-
<Button href={`https://www.youtube.com/watch?v=${data.video.id}`} class="mb-8">
16-
{#snippet icon()}
17-
<svg class="block size-4" viewBox="0 0 24 24" fill="currentColor" role="img">
18-
<path d={siYoutube.path} />
19-
<title>{siYoutube.title}</title>
20-
</svg>
21-
{/snippet}
22-
Watch on YouTube
23-
</Button>
22+
<Button href={`https://www.youtube.com/watch?v=${data.video.id}`} class="mb-8">
23+
{#snippet icon()}
24+
<svg class="block size-4" viewBox="0 0 24 24" fill="currentColor" role="img">
25+
<path d={siYoutube.path} />
26+
<title>{siYoutube.title}</title>
27+
</svg>
28+
{/snippet}
29+
Watch on YouTube
30+
</Button>
2431

25-
{@render children()}
32+
{@render children()}
33+
34+
<p aria-hidden="true" class="mt-8 text-center text-lg text-ink-muted">◆ ◆ ◆</p>
35+
</div>
36+
37+
<aside class="flex grow basis-2xs flex-col gap-3">
38+
<h2 class="flex items-center gap-2 text-ink-muted">
39+
<ListVideo class="size-5" />
40+
<span class="text-lg font-semibold">More videos</span>
41+
</h2>
42+
<VideoList values={data.recommendedVideos} level={3} />
43+
</aside>
44+
</div>

0 commit comments

Comments
 (0)