Skip to content

Commit 33d788b

Browse files
thedivtagguythedivtagguy
committed
feat: changelog
1 parent d2d9ac5 commit 33d788b

4 files changed

Lines changed: 128 additions & 76 deletions

File tree

‎src/lib/components/Footer.svelte‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,50 +22,57 @@
2222
</div>
2323

2424
<!-- Action buttons -->
25-
<div class="col-span-full md:col-span-2">
26-
<div class="flex gap-2 md:flex-col">
27-
<Button variant="stamp" href="/contribute" size="sm">Contribute to archive</Button>
25+
<div class="col-span-full md:col-span-3">
26+
<div class="flex flex-wrap gap-2 md:flex-col md:flex-nowrap">
27+
<Button variant="stamp" href="/contribute" size="sm" class="flex-1 md:w-full md:flex-none"
28+
>Contribute to archive</Button
29+
>
2830
<Button
2931
variant="blue"
3032
href="https://diagramchasing.fun/support"
3133
size="sm"
3234
target="_blank"
3335
rel="noopener noreferrer"
36+
class="flex-1 md:w-full md:flex-none"
3437
>
3538
Support our work
3639
</Button>
37-
<Button variant="outline" href="/rss.xml" size="sm" target="_blank" class="gap-2">
40+
<Button
41+
variant="outline"
42+
href="/rss.xml"
43+
size="sm"
44+
target="_blank"
45+
class="flex-1 gap-2 md:w-full md:flex-none"
46+
>
3847
<Rss class="h-3 w-3" />
3948
RSS Feed
4049
</Button>
4150
</div>
4251
</div>
4352

4453
<!-- Navigation links -->
45-
<div class="col-span-3 md:col-span-2">
54+
<div class="col-span-4 md:col-span-1">
4655
<nav>
47-
<ul class="font-atkinson flex gap-2 text-sm text-gray-800 md:flex-col">
48-
<li>
49-
<a href="/" class="underline underline-offset-2 transition-colors hover:text-black"
50-
>About</a
51-
>
52-
</li>
56+
<ul
57+
class="font-atkinson flex flex-wrap gap-x-3 gap-y-1 text-sm text-gray-800 md:flex-col md:gap-0"
58+
>
5359
<li>
54-
<a href="/faq" class="underline underline-offset-2 transition-colors hover:text-black"
55-
>FAQ</a
60+
<a
61+
href="/about"
62+
class="underline underline-offset-2 transition-colors hover:text-black">About</a
5663
>
5764
</li>
65+
5866
<li>
5967
<a
6068
href="/changelog"
61-
class="underline underline-offset-2 transition-colors hover:text-black"
62-
>Change Log</a
69+
class="underline underline-offset-2 transition-colors hover:text-black">Changelog</a
6370
>
6471
</li>
6572
<li>
6673
<a
6774
href="/rss.xml"
68-
class="underline underline-offset-2 transition-colors hover:text-black">RSS Feed</a
75+
class="underline underline-offset-2 transition-colors hover:text-black">RSS</a
6976
>
7077
</li>
7178
<li>

‎src/routes/api/changelog/+server.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,19 @@ export const GET: RequestHandler = async ({ platform, url }) => {
1111
const db = platform?.env?.DB;
1212

1313
if (!db) {
14-
return json({ films: [], hasNext: false }, { status: 404 });
14+
return json({ films: [], hasNext: false, totalCount: 0, pagination: null }, { status: 404 });
1515
}
1616

17+
// Get total count
18+
const countResult = await db.prepare(`
19+
SELECT COUNT(*) as count
20+
FROM films
21+
WHERE cert_date IS NOT NULL
22+
`).first();
23+
24+
const totalCount = countResult?.count || 0;
25+
const totalPages = Math.ceil(totalCount / limit);
26+
1727
// Fetch films sorted by cert_date DESC
1828
const results = await db.prepare(`
1929
SELECT
@@ -39,7 +49,14 @@ export const GET: RequestHandler = async ({ platform, url }) => {
3949
return json({
4050
films,
4151
page,
42-
hasNext
52+
hasNext,
53+
totalCount,
54+
pagination: {
55+
currentPage: page,
56+
perPage: limit,
57+
totalPages,
58+
totalCount
59+
}
4360
});
4461

4562
} catch (e) {

‎src/routes/changelog/+page.svelte‎

Lines changed: 82 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
<script lang="ts">
2-
import { Calendar, ChevronRight } from 'lucide-svelte';
3-
import Button from '$lib/components/ui/button/button.svelte';
4-
import {
5-
Pagination,
6-
PaginationContent,
7-
PaginationItem,
8-
PaginationLink,
9-
PaginationNextButton as PaginationNext,
10-
PaginationPrevButton as PaginationPrevious,
11-
PaginationEllipsis
12-
} from '$lib/components/ui/pagination';
2+
import * as Pagination from '$lib/components/ui/pagination';
3+
import { goto } from '$app/navigation';
4+
import { page } from '$app/stores';
135
146
let { data } = $props();
157
@@ -34,22 +26,21 @@
3426
return new Date(b).getTime() - new Date(a).getTime();
3527
})
3628
);
29+
30+
function handlePageChange(newPage: number) {
31+
const url = new URL($page.url);
32+
url.searchParams.set('page', newPage.toString());
33+
goto(url.toString());
34+
}
3735
</script>
3836

3937
<div class="mx-auto w-full max-w-4xl">
4038
<!-- Header Section -->
41-
<div class="grain-effect mb-6">
42-
<div class="space-y-3 py-6">
43-
<h1
44-
class="font-gothic flex items-center gap-3 text-4xl font-bold tracking-tight text-black md:text-5xl"
45-
>
46-
<Calendar class="h-8 w-8 md:h-10 md:w-10" />
47-
Certification Log
48-
</h1>
49-
<p class="font-atkinson text-base leading-relaxed text-gray-700 md:text-lg">
50-
Complete chronological history of CBFC certifications
51-
</p>
52-
</div>
39+
<div class="mb-6">
40+
<h1 class="font-gothic text-sepia-brown mb-3 text-6xl font-bold tracking-tight">
41+
Archival Log
42+
</h1>
43+
<p class="text-sepia-brown/70 text-lg font-medium">Changelog of movies added to the database</p>
5344
</div>
5445

5546
{#if data.error}
@@ -61,31 +52,47 @@
6152
<p class="font-atkinson text-sepia-brown">No records found.</p>
6253
</div>
6354
{:else}
64-
<div class="space-y-8">
55+
<div class="space-y-10">
6556
{#each sortedGroupKeys as month}
6657
<section>
67-
<!-- Simple month heading -->
68-
<h2 class="font-gothic mb-3 text-2xl font-medium tracking-tight text-black">
58+
<!-- Month heading with better visual hierarchy -->
59+
<h2
60+
class="font-gothic border-sepia-dark/80 text-sepia-brown mb-4 border-b pb-2 text-4xl font-semibold tracking-tight"
61+
>
6962
{month}
7063
</h2>
7164

72-
<!-- Simple list of films -->
73-
<ul class="space-y-2 pl-4">
65+
<!-- Film list with improved spacing and hierarchy -->
66+
<ul class="space-y-5">
7467
{#each groupedFilms[month] as film}
75-
<li class="font-atkinson text-sm leading-relaxed">
76-
<a
77-
href="/film/{film.slug}"
78-
class="text-sepia-brown inline transition-colors hover:text-black"
79-
>
80-
<span class="font-medium">{film.name}</span>
81-
<span class="text-gray-500"> ({film.year})</span>
68+
<li class="transition-colors">
69+
<a href="/film/{film.slug}" class="group block transition-colors">
70+
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
71+
<span
72+
class="font-atkinson text-sepia-brown group-hover:text-sepia-dark text-base font-semibold transition-colors"
73+
>
74+
{film.name}
75+
</span>
76+
<span class="font-atkinson text-sm text-gray-500">({film.year})</span>
77+
</div>
78+
<div
79+
class="font-atkinson mt-1 flex flex-wrap items-center gap-x-3 text-xs text-gray-600"
80+
>
81+
<span class="font-medium">{film.language}</span>
82+
{#if film.cert_date}
83+
<span class="flex items-center gap-1">
84+
<span class="text-gray-400">• </span>
85+
<span class="text-gray-500">
86+
{new Date(film.cert_date).toLocaleDateString('en-US', {
87+
month: 'short',
88+
day: 'numeric',
89+
year: 'numeric'
90+
})}
91+
</span>
92+
</span>
93+
{/if}
94+
</div>
8295
</a>
83-
<span class="text-gray-500"> · </span>
84-
<span class="text-gray-600">{film.language}</span>
85-
{#if film.rating}
86-
<span class="text-gray-500"> · </span>
87-
<span class="text-gray-600">{film.rating}</span>
88-
{/if}
8996
</li>
9097
{/each}
9198
</ul>
@@ -94,25 +101,42 @@
94101
</div>
95102

96103
<!-- Pagination -->
97-
{#if data.page > 1 || data.hasNext}
98-
<div class="border-sepia-dark mt-8 flex items-center justify-between border-t pt-6">
99-
{#if data.page > 1}
100-
<Button href="/changelog?page={data.page - 1}" variant="secondary" size="sm">
101-
← Previous
102-
</Button>
103-
{:else}
104-
<div></div>
105-
{/if}
104+
{#if data.pagination && data.pagination.totalPages > 1}
105+
<div class="mt-8 flex justify-center">
106+
<Pagination.Root
107+
count={data.totalCount}
108+
perPage={data.pagination.perPage}
109+
page={data.pagination.currentPage}
110+
onPageChange={handlePageChange}
111+
>
112+
<Pagination.Content>
113+
<Pagination.Item>
114+
<Pagination.PrevButton size="compact" variant="secondary" />
115+
</Pagination.Item>
106116

107-
<span class="font-atkinson text-sepia-brown text-sm font-medium">Page {data.page}</span>
117+
{#each Array.from({ length: data.pagination.totalPages }, (_, i) => i + 1) as pageNum}
118+
{#if pageNum === 1 || pageNum === data.pagination.totalPages || (pageNum >= data.pagination.currentPage - 2 && pageNum <= data.pagination.currentPage + 2)}
119+
<Pagination.Item>
120+
<Pagination.Link
121+
page={{ value: pageNum, type: 'page' }}
122+
isActive={pageNum === data.pagination.currentPage}
123+
inactiveVariant="secondary"
124+
>
125+
{pageNum}
126+
</Pagination.Link>
127+
</Pagination.Item>
128+
{:else if (pageNum === data.pagination.currentPage - 3 && data.pagination.currentPage > 4) || (pageNum === data.pagination.currentPage + 3 && data.pagination.currentPage < data.pagination.totalPages - 3)}
129+
<Pagination.Item>
130+
<Pagination.Ellipsis />
131+
</Pagination.Item>
132+
{/if}
133+
{/each}
108134

109-
{#if data.hasNext}
110-
<Button href="/changelog?page={data.page + 1}" variant="secondary" size="sm">
111-
Next →
112-
</Button>
113-
{:else}
114-
<div></div>
115-
{/if}
135+
<Pagination.Item>
136+
<Pagination.NextButton size="compact" variant="secondary" />
137+
</Pagination.Item>
138+
</Pagination.Content>
139+
</Pagination.Root>
116140
</div>
117141
{/if}
118142
{/if}

‎src/routes/changelog/+page.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export const load: PageLoad = async ({ fetch, url }) => {
1818
films: data.films,
1919
page: data.page,
2020
hasNext: data.hasNext,
21+
totalCount: data.totalCount,
22+
pagination: data.pagination,
2123
error: data.error
2224
};
2325
} catch (e) {
@@ -26,6 +28,8 @@ export const load: PageLoad = async ({ fetch, url }) => {
2628
films: [],
2729
page,
2830
hasNext: false,
31+
totalCount: 0,
32+
pagination: null,
2933
error: "Failed to load data"
3034
};
3135
}

0 commit comments

Comments
 (0)