Skip to content

Add next/prev pager to post layout #1222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maiertech merged 4 commits into from
Mar 30, 2026
Merged

Add next/prev pager to post layout #1222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b70141
Initial plan
Copilot Mar 30, 2026
50efd4f
Add next/prev pager to post layout
Copilot Mar 30, 2026
9fd3c37
Remove end of post text
maiertech Mar 30, 2026
76cbaf5
Fix `Pager`
maiertech Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/lib/components/Pager.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@
>
{#if prev}
<div class="grow basis-2xs">
<a href={prev.path} class="flex items-start justify-start gap-1">
<ChevronLeft class="size-6 pt-1" />
<span class="text-xl font-semibold text-pretty max-inline-xs">{prev.title}</span>
<a href={prev.path} class="flex items-start justify-start">
<ChevronLeft class="size-6 flex-none pt-1" />
<span class="min-w-0 text-xl font-semibold text-pretty max-inline-xs">{prev.title}</span>
</a>
</div>
{/if}
{#if next}
<div class="grow basis-2xs">
<a href={next.path} class="flex items-start justify-end gap-1">
<span class="text-right text-xl font-semibold text-pretty max-inline-xs">
<a href={next.path} class="flex items-start justify-end">
<span class="min-w-0 text-right text-xl font-semibold text-pretty max-inline-xs">
{next.title}
</span>
<ChevronRight class="size-6 pt-1" />
<ChevronRight class="size-6 flex-none pt-1" />
</a>
</div>
{/if}
Expand Down
10 changes: 8 additions & 2 deletions src/routes/posts/+layout.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,23 @@ import type { LayoutServerLoad } from './$types';
export const prerender = true;

export const load: LayoutServerLoad = async ({ url }) => {
const post = posts.find((post) => post.path === url.pathname);
const index = posts.findIndex((post) => post.path === url.pathname);

if (!post) {
if (index === -1) {
error(404, 'Post not found.');
}

const post = posts[index];
const prev = index < posts.length - 1 ? posts[index + 1] : undefined; // The higher the index the older the post.
const next = index > 0 ? posts[index - 1] : undefined;

const recommendedVideos = latestVideos.slice(0, 3);

return {
origin: ORIGIN,
post,
prev,
next,
recommendedVideos,
seo: {
title: post.title,
Expand Down
4 changes: 2 additions & 2 deletions src/routes/posts/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { VideoList } from '$lib/components';
import { Pager, VideoList } from '$lib/components';
import { Clock } from '@lucide/svelte';
import { PostHeader, SeoCanonicalUrl, SeoLdPost } from '@maiertech/sveltekit-helpers';
import type { LayoutProps } from './$types';
Expand All @@ -18,7 +18,7 @@
<PostHeader value={data.post} class="mb-12" />
{@render children()}

<p aria-hidden="true" class="mt-8 text-center text-lg text-ink-muted">◆ ◆ ◆</p>
<Pager prev={data.prev} next={data.next} class="mt-8" />
</div>

<aside class="flex grow basis-2xs flex-col gap-3">
Expand Down
Loading