From 1c1ccbbf01a89f2423790e3e6dc359718e7ce418 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Thu, 9 Feb 2023 16:25:21 -0800 Subject: [PATCH] Testing out pagination articles and fetching on each slug page. --- package.json | 1 + pnpm-lock.yaml | 10 + src/lib/components/pagination/index.svelte | 85 ++++ src/lib/stores/articleStore.ts | 1 + src/lib/types/pageQuery.ts | 7 +- src/routes/+layout.server.ts | 24 -- src/routes/+layout.svelte | 101 ----- src/routes/+layout.ts | 3 + src/routes/+page.svelte | 3 +- src/routes/about/+page.server.ts | 1 - src/routes/api.ts | 27 +- src/routes/api/articles/+server.ts | 24 +- src/routes/articles/+error.svelte | 14 + src/routes/articles/+page.ts | 17 - src/routes/articles/{ => [page]}/+page.svelte | 64 +-- src/routes/articles/[page]/+page.ts | 43 ++ src/routes/portfolio/+page.server.ts | 1 - src/routes/privacy/+page.server.ts | 1 - src/routes/privacy/+page.svelte | 401 +++++++++--------- src/routes/uses/+page.server.ts | 1 - 20 files changed, 433 insertions(+), 396 deletions(-) create mode 100644 src/lib/components/pagination/index.svelte delete mode 100644 src/routes/+layout.server.ts delete mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/+layout.ts delete mode 100644 src/routes/about/+page.server.ts create mode 100644 src/routes/articles/+error.svelte delete mode 100644 src/routes/articles/+page.ts rename src/routes/articles/{ => [page]}/+page.svelte (55%) create mode 100644 src/routes/articles/[page]/+page.ts delete mode 100644 src/routes/portfolio/+page.server.ts delete mode 100644 src/routes/privacy/+page.server.ts delete mode 100644 src/routes/uses/+page.server.ts diff --git a/package.json b/package.json index 034e38d..79ea906 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@playwright/test": "^1.28.1", "@rgossiaux/svelte-headlessui": "^1.0.2", "@sveltejs/adapter-auto": "^1.0.0", + "@sveltejs/adapter-static": "^2.0.0", "@sveltejs/adapter-vercel": "^1.0.5", "@sveltejs/kit": "^1.0.0", "@types/postcss-preset-env": "^8.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53a0e4f..cdc50fc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ specifiers: '@playwright/test': ^1.28.1 '@rgossiaux/svelte-headlessui': ^1.0.2 '@sveltejs/adapter-auto': ^1.0.0 + '@sveltejs/adapter-static': ^2.0.0 '@sveltejs/adapter-vercel': ^1.0.5 '@sveltejs/kit': ^1.0.0 '@types/postcss-preset-env': ^8.0.0 @@ -48,6 +49,7 @@ devDependencies: '@playwright/test': 1.29.2 '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1 '@sveltejs/adapter-auto': 1.0.2_@sveltejs+kit@1.2.2 + '@sveltejs/adapter-static': 2.0.0_@sveltejs+kit@1.2.2 '@sveltejs/adapter-vercel': 1.0.5_@sveltejs+kit@1.2.2 '@sveltejs/kit': 1.2.2_svelte@3.55.1+vite@4.0.4 '@types/postcss-preset-env': 8.0.0_postcss@8.4.21 @@ -696,6 +698,14 @@ packages: import-meta-resolve: 2.2.1 dev: true + /@sveltejs/adapter-static/2.0.0_@sveltejs+kit@1.2.2: + resolution: {integrity: sha512-M9F8EyCIdVcpZu0zvS7U7v+rc7elNNDUkMHLsOkJYlfQ9rDdif3fqteMqddcrq1lFPEGH1ErdTjpsXdb3k1e8w==} + peerDependencies: + '@sveltejs/kit': ^1.5.0 + dependencies: + '@sveltejs/kit': 1.2.2_svelte@3.55.1+vite@4.0.4 + dev: true + /@sveltejs/adapter-vercel/1.0.5_@sveltejs+kit@1.2.2: resolution: {integrity: sha512-TnFw+2ZwUuzguIeh013h0eiFmHylBuL1aV3jcUWbJmBLRo6YA0Ti8X8VXgFP4izP7XGuLKdpUIMg7HaZe21LbA==} peerDependencies: diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte new file mode 100644 index 0000000..b6cec13 --- /dev/null +++ b/src/lib/components/pagination/index.svelte @@ -0,0 +1,85 @@ + + +
+ + ← Prev + + {#each { length: totalPages } as _, i} + + {i + 1} + + {/each} + + Next → + +
+ + \ No newline at end of file diff --git a/src/lib/stores/articleStore.ts b/src/lib/stores/articleStore.ts index 927fa38..f782b60 100644 --- a/src/lib/stores/articleStore.ts +++ b/src/lib/stores/articleStore.ts @@ -6,6 +6,7 @@ const state = () => { const { subscribe, set, update } = writable([]); function addAll(articles: Article[]) { + // console.log(typeof articles); for (const article of articles) { add(article); } diff --git a/src/lib/types/pageQuery.ts b/src/lib/types/pageQuery.ts index f03201a..57bfb5f 100644 --- a/src/lib/types/pageQuery.ts +++ b/src/lib/types/pageQuery.ts @@ -1,5 +1,8 @@ -export type PageQuery { +export type PageQuery = { sort: string; perPage: number; since: number; -} \ No newline at end of file + page: number; + tags: string; + content: 'metadata' | 'full'; +}; diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts deleted file mode 100644 index ca7eae2..0000000 --- a/src/routes/+layout.server.ts +++ /dev/null @@ -1,24 +0,0 @@ -export const prerender = true; -import { type ServerLoad } from '@sveltejs/kit'; - -export const load: ServerLoad = async ({ isDataRequest, cookies, params, setHeaders }) => { - const queryParams = { - // ids: `${params?.id}`, - // fields: - // 'id,name,price,min_age,min_players,max_players,thumb_url,playtime,min_playtime,max_playtime,min_age,description,year_published,url,image_url' - }; - - const initialRequest = !isDataRequest; - console.log(`Is initialRequest: ${initialRequest}`); - - const cacheValue = `${initialRequest ? +new Date() : cookies.get('articles-cache')}`; - console.log(`Cache Value: ${cacheValue}`); - - if (initialRequest) { - cookies.set('articles-cache', cacheValue, { path: '/', httpOnly: false }); - } - - return { - articlesCacheBust: cacheValue - }; -}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte deleted file mode 100644 index 0929c1e..0000000 --- a/src/routes/+layout.svelte +++ /dev/null @@ -1,101 +0,0 @@ - - -{#if !dev} - -{/if} - - - -
-
-
- -
-
-
- - \ No newline at end of file diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts new file mode 100644 index 0000000..0408a89 --- /dev/null +++ b/src/routes/+layout.ts @@ -0,0 +1,3 @@ +; + +export const load: PageLoad = async () => {}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 243f824..3c58e7f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,7 @@ + +{#if $page.status === 404} +

Sorry page not found! 🤷🏼

+

You just hit a route that doesn't exist.

+{/if} + +{#if $page.status === 500} +

Sorry an unexpected error occurred! 😿

+

Please try again later.

+{/if} \ No newline at end of file diff --git a/src/routes/articles/+page.ts b/src/routes/articles/+page.ts deleted file mode 100644 index e0445d4..0000000 --- a/src/routes/articles/+page.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { getCurrentCookieValue } from '$lib/util/cookieUtils'; -import type { Article } from '$root/lib/types/article'; -import type { PageLoad } from './$types'; - -export const load: PageLoad = async ({ fetch, parent, url, setHeaders }) => { - const parentData = await parent(); - - const cacheBust = getCurrentCookieValue('articles-cache') || parentData.articlesCacheBust; - // const search = url.searchParams.get('search') || ''; - - const resp = await fetch(`/api/articles?cache=${cacheBust}`); - const articles: Article[] = await resp.json(); - - return { - articles - }; -}; diff --git a/src/routes/articles/+page.svelte b/src/routes/articles/[page]/+page.svelte similarity index 55% rename from src/routes/articles/+page.svelte rename to src/routes/articles/[page]/+page.svelte index 8755e4f..4de8677 100644 --- a/src/routes/articles/+page.svelte +++ b/src/routes/articles/[page]/+page.svelte @@ -1,30 +1,43 @@ - +

Favorite Tech Articles

- + />
{#each articles as article (article.hashed_url)}
@@ -33,7 +46,7 @@ {article.title} @@ -52,14 +65,14 @@
{/each}
- + />
\ No newline at end of file diff --git a/src/routes/uses/+page.server.ts b/src/routes/uses/+page.server.ts deleted file mode 100644 index 189f71e..0000000 --- a/src/routes/uses/+page.server.ts +++ /dev/null @@ -1 +0,0 @@ -export const prerender = true;