From 1c1ccbbf01a89f2423790e3e6dc359718e7ce418 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Thu, 9 Feb 2023 16:25:21 -0800 Subject: [PATCH 1/4] 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; From 1ad31a345b933d604858ed77fc86fffc55baae77 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Thu, 9 Feb 2023 16:37:42 -0800 Subject: [PATCH 2/4] Bring back layout. --- src/routes/+layout.svelte | 101 ++++++++++++++++++++++++++++++++++++++ src/routes/+layout.ts | 3 -- 2 files changed, 101 insertions(+), 3 deletions(-) create mode 100644 src/routes/+layout.svelte delete mode 100644 src/routes/+layout.ts diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..0929c1e --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,101 @@ + + +{#if !dev} + +{/if} + + + +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts deleted file mode 100644 index 0408a89..0000000 --- a/src/routes/+layout.ts +++ /dev/null @@ -1,3 +0,0 @@ -; - -export const load: PageLoad = async () => {}; From 0e1ce7cc4afbdb950cef5ea6f4907b6d860eb8cf Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Sun, 12 Feb 2023 13:15:50 -0800 Subject: [PATCH 3/4] Making pagination component variables reactive. --- src/lib/components/SEO.svelte | 4 +- src/lib/components/footer/index.svelte | 2 +- src/lib/components/pagination/index.svelte | 17 +++------ src/routes/articles/+error.svelte | 14 ------- src/routes/articles/+page.svelte | 1 + src/routes/articles/+page.ts | 6 +++ src/routes/articles/[page]/+page.server.ts | 27 ++++++++++++++ src/routes/articles/[page]/+page.svelte | 21 +++-------- src/routes/articles/[page]/+page.ts | 43 ---------------------- 9 files changed, 48 insertions(+), 87 deletions(-) delete mode 100644 src/routes/articles/+error.svelte create mode 100644 src/routes/articles/+page.svelte create mode 100644 src/routes/articles/+page.ts create mode 100644 src/routes/articles/[page]/+page.server.ts delete mode 100644 src/routes/articles/[page]/+page.ts diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte index 0c9e83f..a2c88db 100644 --- a/src/lib/components/SEO.svelte +++ b/src/lib/components/SEO.svelte @@ -9,7 +9,7 @@ siteUrl, }; - export let title = defaultMetadata.defaultTitle; + export let title: string; export let description = defaultMetadata.defaultDescription; export let image = defaultMetadata.defaultImage; export let location: string = ''; @@ -23,7 +23,7 @@ - {`${seo.title} - ${defaultMetadata.defaultTitle}`} + {`${seo.title} | ${defaultMetadata.defaultTitle}`} diff --git a/src/lib/components/footer/index.svelte b/src/lib/components/footer/index.svelte index 73f0bb3..51aadec 100644 --- a/src/lib/components/footer/index.svelte +++ b/src/lib/components/footer/index.svelte @@ -16,7 +16,7 @@ Portfolio Uses Privacy - Favorite Articles + Favorite Articles

diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte index b6cec13..29803fa 100644 --- a/src/lib/components/pagination/index.svelte +++ b/src/lib/components/pagination/index.svelte @@ -7,18 +7,11 @@ export let base: string; // make some variables - console.log(`Total count: ${totalCount}`); - console.log(`Page Size: ${pageSize}`); - const totalPages = Math.ceil(totalCount / pageSize); - console.log(`Total Pages: ${totalPages}`) - console.log(`Current Page: ${currentPage} and type: ${typeof currentPage}`) - let prevPage = currentPage - 1; - console.log(`PrevPage: ${prevPage}`) - console.log(`Pagination current Page: ${currentPage}`) - let nextPage = currentPage + 1; - let hasNextPage = nextPage <= totalPages; - let hasPrevPage = prevPage >= 1; - console.log({ nextPage, hasNextPage, hasPrevPage }) + $: totalPages = Math.ceil(totalCount / pageSize); + $: prevPage = currentPage - 1; + $: nextPage = currentPage + 1; + $: hasNextPage = nextPage <= totalPages; + $: hasPrevPage = prevPage >= 1;

diff --git a/src/routes/articles/+error.svelte b/src/routes/articles/+error.svelte deleted file mode 100644 index eb7b36c..0000000 --- a/src/routes/articles/+error.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - -{#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.svelte b/src/routes/articles/+page.svelte new file mode 100644 index 0000000..d70ffca --- /dev/null +++ b/src/routes/articles/+page.svelte @@ -0,0 +1 @@ +

Articles

\ No newline at end of file diff --git a/src/routes/articles/+page.ts b/src/routes/articles/+page.ts new file mode 100644 index 0000000..4f6aabd --- /dev/null +++ b/src/routes/articles/+page.ts @@ -0,0 +1,6 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageServerLoad } from './$types'; + +export const load = async () => { + throw redirect(302, '/articles/1'); +}; diff --git a/src/routes/articles/[page]/+page.server.ts b/src/routes/articles/[page]/+page.server.ts new file mode 100644 index 0000000..3d2724b --- /dev/null +++ b/src/routes/articles/[page]/+page.server.ts @@ -0,0 +1,27 @@ +import type { PageServerLoad } from './$types'; +import type { Article } from '$root/lib/types/article'; + +export const load: PageServerLoad = async ({ fetch, params }) => { + const { page } = params; + const resp = await fetch(`/api/articles?page=${page}`); + const { + articles, + currentPage, + totalPages, + limit, + totalArticles + }: { + articles: Article[]; + currentPage: number; + totalPages: number; + limit: number; + totalArticles: number; + } = await resp.json(); + return { + articles, + currentPage, + totalPages, + limit, + totalArticles + }; +}; diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte index 4de8677..a59ef18 100644 --- a/src/routes/articles/[page]/+page.svelte +++ b/src/routes/articles/[page]/+page.svelte @@ -10,23 +10,14 @@ export let data: PageData; let articles: Article[]; $: ({ articles, currentPage, totalPages, totalArticles, limit } = data); - // let currentPage: number; - // let perPage: number; - // let maxPages: number; - // $: ({ currentPage, perPage, maxPages } = $page?.data); - // console.log('Articles Page params', $page?.params); - // console.log('Articles Page', { currentPage, perPage, maxPages }); - // console.log(`Page data: ${JSON.stringify(data)}`) - // console.log(`Article Page Path Slug ${$page.params.page}`); - // console.log(`Article Page Current Page: ${currentPage}`) - // $: start = (currentPage - 1) * perPage; - // $: skip = currentPage * perPage; - // console.log(`Article Store size: ${$articleStore.length}`); - - // $: articles = $articleStore.slice(start, start + perPage); + console.log(`Article +page currentPage: ${currentPage}`); + console.log({ articles, currentPage, totalPages, totalArticles, limit }); - + + {`Tech Articles - Page ${currentPage} | Bradley Shellnut`} + +

Favorite Tech Articles

diff --git a/src/routes/articles/[page]/+page.ts b/src/routes/articles/[page]/+page.ts deleted file mode 100644 index 2845433..0000000 --- a/src/routes/articles/[page]/+page.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { PageLoad } from './$types'; -import type { Article } from '$root/lib/types/article'; - -export const load: PageLoad = async ({ fetch, params }) => { - const { page } = params; - const resp = await fetch(`/api/articles?page=${page}`); - const { - articles, - currentPage, - totalPages, - limit, - totalArticles - }: { - articles: Article[]; - currentPage: number; - totalPages: number; - limit: number; - totalArticles: number; - } = await resp.json(); - return { - articles, - currentPage, - totalPages, - limit, - totalArticles - }; - // console.log(`Page: ${page}`); - // try { - // if (page && +page <= 5 && +page > 0) { - // return { - // currentPage: +page, - // perPage: parentData?.perPage, - // maxPages: parentData?.totalPages - // }; - // } else { - // console.log('Page load error 404'); - // throw error(404, 'Not found'); - // } - // } catch (e) { - // console.error(e); - // throw error(500, 'Error'); - // } -}; From c322ce6b330c0115627d23f65a0c6556eb0f1f2d Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Sun, 12 Feb 2023 13:28:40 -0800 Subject: [PATCH 4/4] Make SEO reactive and remove console logs, add types for returns. --- src/lib/components/SEO.svelte | 4 ++-- src/routes/articles/[page]/+page.server.ts | 23 ++++++++++------------ src/routes/articles/[page]/+page.svelte | 18 +++++++---------- 3 files changed, 19 insertions(+), 26 deletions(-) diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte index a2c88db..74ec8a7 100644 --- a/src/lib/components/SEO.svelte +++ b/src/lib/components/SEO.svelte @@ -9,12 +9,12 @@ siteUrl, }; - export let title: string; + export let title = defaultMetadata.defaultTitle; export let description = defaultMetadata.defaultDescription; export let image = defaultMetadata.defaultImage; export let location: string = ''; - const seo = { + $: seo = { title, description, image: `${siteUrl}${image}`, diff --git a/src/routes/articles/[page]/+page.server.ts b/src/routes/articles/[page]/+page.server.ts index 3d2724b..2440a62 100644 --- a/src/routes/articles/[page]/+page.server.ts +++ b/src/routes/articles/[page]/+page.server.ts @@ -1,22 +1,19 @@ import type { PageServerLoad } from './$types'; import type { Article } from '$root/lib/types/article'; +export type ArticlePageLoad = { + articles: Article[]; + currentPage: number; + totalPages: number; + limit: number; + totalArticles: number; +}; + export const load: PageServerLoad = async ({ fetch, params }) => { const { page } = params; const resp = await fetch(`/api/articles?page=${page}`); - const { - articles, - currentPage, - totalPages, - limit, - totalArticles - }: { - articles: Article[]; - currentPage: number; - totalPages: number; - limit: number; - totalArticles: number; - } = await resp.json(); + const { articles, currentPage, totalPages, limit, totalArticles }: ArticlePageLoad = + await resp.json(); return { articles, currentPage, diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte index a59ef18..44052ad 100644 --- a/src/routes/articles/[page]/+page.svelte +++ b/src/routes/articles/[page]/+page.svelte @@ -1,7 +1,4 @@ - - {`Tech Articles - Page ${currentPage} | Bradley Shellnut`} - - +

Favorite Tech Articles

@@ -26,7 +22,7 @@ pageSize={limit} totalCount={totalArticles} currentPage={currentPage || 1} - skip={page} + skip={currentPage} base="/articles" />
@@ -61,7 +57,7 @@ pageSize={limit} totalCount={totalPages} currentPage={currentPage || 1} - skip={page} + skip={currentPage} base="/articles" />