From 0f5248bee08cc8d1da0a2c4cbd657866adc10a8f Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 13 Feb 2023 22:54:54 -0800 Subject: [PATCH 1/7] Adding fetch bandcamp albums and showing them on the main home page, also caching response. --- .vscode/settings.json | 1 + src/lib/components/bandcamp/index.svelte | 90 ++++++++++++++++++++++++ src/lib/types/album.ts | 6 ++ src/lib/util/fetchBandcampAlbums.ts | 40 +++++++++++ src/routes/+page.server.ts | 12 ++++ src/routes/+page.svelte | 12 +++- src/routes/api.ts | 2 +- src/routes/articles/[page]/+page.svelte | 2 +- src/routes/portfolio/+page.svelte | 4 +- 9 files changed, 163 insertions(+), 6 deletions(-) create mode 100644 src/lib/components/bandcamp/index.svelte create mode 100644 src/lib/types/album.ts create mode 100644 src/lib/util/fetchBandcampAlbums.ts create mode 100644 src/routes/+page.server.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 2c11cb1..1d2895a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,6 @@ { "cSpell.words": [ + "Bandcamp", "bradleyshellnut", "iconify", "Mullvad", diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte new file mode 100644 index 0000000..37921e7 --- /dev/null +++ b/src/lib/components/bandcamp/index.svelte @@ -0,0 +1,90 @@ + + +
+

Currently listening to:

+
+ {#each displayAlbums as album} +
+
+ + {`Album + +
+ +

{album.title.length > 20 ? `${album.title.slice(0, 20)}...` : album.title}

+

by {album.artist}

+ +
+ {/each} +
+
+ + \ No newline at end of file diff --git a/src/lib/types/album.ts b/src/lib/types/album.ts new file mode 100644 index 0000000..b0e2c03 --- /dev/null +++ b/src/lib/types/album.ts @@ -0,0 +1,6 @@ +export type Album = { + url: string; + artwork: string; + title: string; + artist: string; +}; diff --git a/src/lib/util/fetchBandcampAlbums.ts b/src/lib/util/fetchBandcampAlbums.ts new file mode 100644 index 0000000..3578e84 --- /dev/null +++ b/src/lib/util/fetchBandcampAlbums.ts @@ -0,0 +1,40 @@ +// import * as htmlparser2 from 'htmlparser2'; +import scrapeIt from 'scrape-it'; +import type { Album } from '../types/album'; + +export async function fetchBandcampAlbums() { + try { + const { data } = await scrapeIt('https://bandcamp.com/royvalentine', { + collectionItems: { + listItem: '.collection-item-container', + data: { + url: { + selector: '.collection-title-details > a.item-link', + attr: 'href' + }, + artwork: { + selector: 'div.collection-item-art-container a img', + attr: 'src' + }, + title: { + selector: 'span.item-link-alt > div.collection-item-title' + }, + artist: { + selector: 'span.item-link-alt > div.collection-item-artist' + } + } + } + }); + + const albums: Album[] = data?.collectionItems || []; + console.log(`Albums ${JSON.stringify(albums)}`); + + if (albums && albums?.length > 0) { + return albums; + } else { + return []; + } + } catch (error) { + console.log(error); + } +} diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts new file mode 100644 index 0000000..07ecbce --- /dev/null +++ b/src/routes/+page.server.ts @@ -0,0 +1,12 @@ +import type { PageServerLoad } from './lib/$types'; +import { fetchBandcampAlbums } from '$root/lib/util/fetchBandcampAlbums'; + +export const load: PageServerLoad = async ({ setHeaders }) => { + const albums = await fetchBandcampAlbums(); + setHeaders({ + 'cache-control': 'max-age=43200' + }); + return { + albums + }; +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3c58e7f..4300c57 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,7 +1,13 @@ - + + Portfolio | Bradley Shellnut +

Portfolio!

From a1e6b637f51b7cd6bbff96cd5cf67bc47d20e5a4 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 14 Feb 2023 17:17:48 -0800 Subject: [PATCH 2/7] Fixing analytics url. --- src/lib/components/analytics/index.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/components/analytics/index.svelte b/src/lib/components/analytics/index.svelte index c9159b0..bc71213 100644 --- a/src/lib/components/analytics/index.svelte +++ b/src/lib/components/analytics/index.svelte @@ -1,6 +1,5 @@ @@ -9,6 +8,6 @@ defer data-website-id={PUBLIC_UMAMI_ID} data-do-not-track={PUBLIC_UMAMI_DO_NOT_TRACK} - src={analyticsURL} + src={PUBLIC_UMAMI_URL} > From fc1c0a5b6243363cc5b1f12de83a7a0fc0941165 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 14 Feb 2023 17:19:54 -0800 Subject: [PATCH 3/7] Fixing TS errors and adding a WALLABAG max pages for articles. --- src/routes/api.ts | 13 +++++++++---- src/routes/api/articles/+server.ts | 15 +++++---------- src/routes/articles/[page]/+page.server.ts | 9 ++++++++- src/routes/articles/[page]/+page.svelte | 2 +- 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/routes/api.ts b/src/routes/api.ts index f76040a..62d4729 100644 --- a/src/routes/api.ts +++ b/src/routes/api.ts @@ -4,7 +4,7 @@ import { WALLABAG_USERNAME, WALLABAG_PASSWORD, WALLABAG_URL, - WALLABAG_MAX_ARTICLES, + WALLABAG_MAX_PAGES, PAGE_SIZE } from '$env/static/private'; import intersect from 'just-intersect'; @@ -47,7 +47,12 @@ export async function fetchArticlesApi( tags: 'programming', content: 'metadata' }; - const entriesQueryParams = new URLSearchParams(pageQuery); + const entriesQueryParams = new URLSearchParams({ + ...pageQuery, + perPage: `${pageQuery.perPage}`, + since: `${pageQuery.since}`, + page: `${pageQuery.page}` + }); console.log(`Entries params: ${entriesQueryParams}`); if (lastFetched) { @@ -115,9 +120,9 @@ export async function fetchArticlesApi( return { articles, currentPage: page, - totalPages: pages, + totalPages: pages <= WALLABAG_MAX_PAGES ? pages : WALLABAG_MAX_PAGES, limit, - totalArticles: total, + totalArticles: total > limit * WALLABAG_MAX_PAGES ? limit * WALLABAG_MAX_PAGES : total, cacheControl }; } diff --git a/src/routes/api/articles/+server.ts b/src/routes/api/articles/+server.ts index 4b22943..572118c 100644 --- a/src/routes/api/articles/+server.ts +++ b/src/routes/api/articles/+server.ts @@ -1,9 +1,12 @@ -import { json } from '@sveltejs/kit'; +import { json, error } from '@sveltejs/kit'; import type { RequestHandler, RequestEvent } from './$types'; import { fetchArticlesApi } from '$root/routes/api'; export const GET: RequestHandler = async ({ url, setHeaders }: RequestEvent) => { try { + if (+url?.searchParams?.get('page') > WALLABAG_MAX_PAGES) { + throw new Error('Page does not exist'); + } const response = await fetchArticlesApi('get', `fetchArticles`, { page: url?.searchParams?.get('page') || '1' }); @@ -21,18 +24,10 @@ export const GET: RequestHandler = async ({ url, setHeaders }: RequestEvent) => } } - // const articlesResponse = response.articles; - // console.log(`Found articles ${articlesResponse?.articles?.length}`); - // const articles = []; - - // for (const article of articlesResponse) { - // const { tags, title, url, hashed_url, reading_time, preview_picture } = article; - // articles.push({ tags, title, url, hashed_url, reading_time, preview_picture }); - // } - return json(response); } } catch (error) { console.error(error); + throw error(error); } }; diff --git a/src/routes/articles/[page]/+page.server.ts b/src/routes/articles/[page]/+page.server.ts index 2440a62..57bb73c 100644 --- a/src/routes/articles/[page]/+page.server.ts +++ b/src/routes/articles/[page]/+page.server.ts @@ -1,5 +1,7 @@ +import { error } from '@sveltejs/kit'; import type { PageServerLoad } from './$types'; -import type { Article } from '$root/lib/types/article'; +import { WALLABAG_MAX_PAGES } from '$env/static/private'; +import type { Article } from '$lib/types/article'; export type ArticlePageLoad = { articles: Article[]; @@ -11,6 +13,11 @@ export type ArticlePageLoad = { export const load: PageServerLoad = async ({ fetch, params }) => { const { page } = params; + if (+page > WALLABAG_MAX_PAGES) { + throw error(404, { + message: 'Not found' + }); + } const resp = await fetch(`/api/articles?page=${page}`); const { articles, currentPage, totalPages, limit, totalArticles }: ArticlePageLoad = await resp.json(); diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte index 10ee5ac..d8cac72 100644 --- a/src/routes/articles/[page]/+page.svelte +++ b/src/routes/articles/[page]/+page.svelte @@ -33,7 +33,7 @@ {article.title} From 381dd1697f1f3dbd25476d88a259ce057c377801 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 14 Feb 2023 17:20:59 -0800 Subject: [PATCH 4/7] Adding example env file. --- .env.example | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..afc0f36 --- /dev/null +++ b/.env.example @@ -0,0 +1,15 @@ +WALLABAG_MAX_ARTICLES=30 +WALLABAG_MAX_PAGES=5 +NODE_VERSION=18.12.1 +WALLABAG_CLIENT_ID='' +WALLABAG_CLIENT_SECRET='' +WALLABAG_USERNAME='' +WALLABAG_PASSWORD='' +WALLABAG_URL="" +PUBLIC_SITE_URL="" +PUBLIC_UMAMI_DO_NOT_TRACK=true +PUBLIC_UMAMI_URL="" +PUBLIC_UMAMI_ID="" +PAGE_SIZE=6 +USE_REDIS_CACHE=true +REDIS_URI= \ No newline at end of file From b92de5c112c1e63464936d6f0bcf1718544d301d Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 14 Feb 2023 17:56:07 -0800 Subject: [PATCH 5/7] Fix import max pages and error name conflict. --- src/routes/api/articles/+server.ts | 12 +++++++----- src/routes/articles/[page]/+page.server.ts | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/routes/api/articles/+server.ts b/src/routes/api/articles/+server.ts index 572118c..02ebf6a 100644 --- a/src/routes/api/articles/+server.ts +++ b/src/routes/api/articles/+server.ts @@ -1,14 +1,16 @@ import { json, error } from '@sveltejs/kit'; +import { WALLABAG_MAX_PAGES } from '$env/static/private'; import type { RequestHandler, RequestEvent } from './$types'; import { fetchArticlesApi } from '$root/routes/api'; export const GET: RequestHandler = async ({ url, setHeaders }: RequestEvent) => { try { - if (+url?.searchParams?.get('page') > WALLABAG_MAX_PAGES) { + const page = url?.searchParams?.get('page') || '1'; + if (+page > +WALLABAG_MAX_PAGES) { throw new Error('Page does not exist'); } const response = await fetchArticlesApi('get', `fetchArticles`, { - page: url?.searchParams?.get('page') || '1' + page }); if (response?.articles) { @@ -26,8 +28,8 @@ export const GET: RequestHandler = async ({ url, setHeaders }: RequestEvent) => return json(response); } - } catch (error) { - console.error(error); - throw error(error); + } catch (e) { + console.error(e); + throw error(404, 'Page does not exist'); } }; diff --git a/src/routes/articles/[page]/+page.server.ts b/src/routes/articles/[page]/+page.server.ts index 57bb73c..36b3c1a 100644 --- a/src/routes/articles/[page]/+page.server.ts +++ b/src/routes/articles/[page]/+page.server.ts @@ -13,7 +13,7 @@ export type ArticlePageLoad = { export const load: PageServerLoad = async ({ fetch, params }) => { const { page } = params; - if (+page > WALLABAG_MAX_PAGES) { + if (+page > +WALLABAG_MAX_PAGES) { throw error(404, { message: 'Not found' }); From a309229c51a8007025ae165f3659f3c864c389c9 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Wed, 15 Feb 2023 16:12:30 -0800 Subject: [PATCH 6/7] Adding articles preview to the main homepage, changing the API for articles to return with cap on max pages and max articles env variables, and formatting code text. --- package.json | 1 + pnpm-lock.yaml | 8 ++ src/lib/components/articles/index.svelte | 105 +++++++++++++++++++++ src/routes/+page.server.ts | 11 ++- src/routes/+page.svelte | 14 ++- src/routes/api.ts | 22 +---- src/routes/api/articles/+server.ts | 4 +- src/routes/articles/[page]/+page.server.ts | 1 + 8 files changed, 142 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 98502ca..c98fa55 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "devDependencies": { "@iconify-icons/material-symbols": "^1.2.27", + "@iconify-icons/mdi": "^1.2.41", "@iconify-icons/radix-icons": "^1.2.8", "@iconify-icons/simple-icons": "^1.2.42", "@leveluptuts/svelte-side-menu": "^1.0.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed38893..5c0b97f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,6 +2,7 @@ lockfileVersion: 5.4 specifiers: '@iconify-icons/material-symbols': ^1.2.27 + '@iconify-icons/mdi': ^1.2.41 '@iconify-icons/radix-icons': ^1.2.8 '@iconify-icons/simple-icons': ^1.2.42 '@leveluptuts/svelte-side-menu': ^1.0.5 @@ -42,6 +43,7 @@ specifiers: devDependencies: '@iconify-icons/material-symbols': 1.2.27 + '@iconify-icons/mdi': 1.2.41 '@iconify-icons/radix-icons': 1.2.8 '@iconify-icons/simple-icons': 1.2.42 '@leveluptuts/svelte-side-menu': 1.0.5 @@ -565,6 +567,12 @@ packages: '@iconify/types': 2.0.0 dev: true + /@iconify-icons/mdi/1.2.41: + resolution: {integrity: sha512-duqTSmY0H+e/LdSZD5B8PxnJfdfh6qdLVnrI6klHGSSykz23d1KdvoPpfFpgF8mWWDm4UlHIO+rrvsqMLEb3NQ==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify-icons/radix-icons/1.2.8: resolution: {integrity: sha512-bZqRIbeqe6yNSLPgcQOyOl86C2P/apaY9Dq/BddWxitN8olbTp2MLuDJenNF+wxbQGgKkQFfm3vb6Z+4Nbhk+g==} dependencies: diff --git a/src/lib/components/articles/index.svelte b/src/lib/components/articles/index.svelte index e69de29..ff50f1f 100644 --- a/src/lib/components/articles/index.svelte +++ b/src/lib/components/articles/index.svelte @@ -0,0 +1,105 @@ + + +
+

Favorite Articles

+
+ {#each articles as article} + + {/each} +
+
+ {`${totalArticles} more articles`} + + + +
+
+ + + \ No newline at end of file diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 07ecbce..3ec7dc8 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,12 +1,17 @@ import type { PageServerLoad } from './lib/$types'; +import { PAGE_SIZE } from '$env/static/private'; import { fetchBandcampAlbums } from '$root/lib/util/fetchBandcampAlbums'; -export const load: PageServerLoad = async ({ setHeaders }) => { - const albums = await fetchBandcampAlbums(); +export const load: PageServerLoad = async ({ fetch, setHeaders }) => { + const albums = async () => await fetchBandcampAlbums(); + const articles = async () => await fetch(`/api/articles?page=1&limit=3`); + // const art = articles. + // console.log(`Articles: ${JSON.stringify(await (await articles()).json())}`); setHeaders({ 'cache-control': 'max-age=43200' }); return { - albums + albums: albums(), + articlesData: (await articles()).json() }; }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4300c57..0c51bc9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,12 +1,20 @@