Change to use internal API for bandcamp albums

src/lib/components/Articles.svelte

@@ -8,7 +8,7 @@ const {
   totalArticles,
   compact = false,
   classes = [],
-}: { articles: Article[]; totalArticles: number; compact: boolean; classes: string[] } = $props();
+}: { articles: Article[]; totalArticles: number; compact: boolean; classes?: string[] } = $props();
 </script>
 
 <section class="articles">

src/routes/+page.server.ts

@@ -6,55 +6,55 @@ import type { MetaTagsProps } from 'svelte-meta-tags';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
-	let baseUrl;
+  let baseUrl;
-	if (url.origin.includes('prerender')) {
+  if (url.origin.includes('prerender')) {
-		baseUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
+    baseUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
-	} else {
+  } else {
-		baseUrl = new URL(url.origin).href || PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
+    baseUrl = new URL(url.origin).href || PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
-	}
+  }
-	const currentPageUrl = new URL(url.pathname, url.origin).href;
+  const currentPageUrl = new URL(url.pathname, url.origin).href;
 
-	const metaTags: MetaTagsProps = Object.freeze({
+  const metaTags: MetaTagsProps = Object.freeze({
-		title: 'Home',
+    title: 'Home',
-		description: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
+    description: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
-		openGraph: {
+    openGraph: {
-			title: 'Home',
+      title: 'Home',
-			description: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
+      description: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
-			url: currentPageUrl,
+      url: currentPageUrl,
-			siteName: 'Bradley Shellnut Personal Website',
+      siteName: 'Bradley Shellnut Personal Website',
-			type: 'website',
+      type: 'website',
-			locale: 'en_US',
+      locale: 'en_US',
-			images: [
+      images: [
-				{
+        {
-					url: `${baseUrl}og?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
+          url: `${baseUrl}og?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
-					alt: 'Bradley Shellnut Website Home Page',
+          alt: 'Bradley Shellnut Website Home Page',
-					width: 1200,
+          width: 1200,
-					height: 630
+          height: 630,
-				}
+        },
-			]
+      ],
-		},
+    },
-		twitter: {
+    twitter: {
-			title: 'Home',
+      title: 'Home',
-			description: 'Home page',
+      description: 'Home page',
-			card: 'summary_large_image',
+      card: 'summary_large_image',
-			image: `${baseUrl}og?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
+      image: `${baseUrl}og?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
-			imageAlt: 'Bradley Shellnut Website Logo'
+      imageAlt: 'Bradley Shellnut Website Logo',
-		},
+    },
-		url: currentPageUrl
+    url: currentPageUrl,
-	});
+  });
 
-	// const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([
+  const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([
-	// 	await fetchBandcampAlbums(),
+    (await fetch('/api/bandcamp/albums')).json(),
-	//   (await fetch('/api/articles?page=1&limit=3')).json()
+    (await fetch('/api/articles?page=1&limit=3')).json(),
-	// ]);
+  ]);
 
-	setHeaders({
+  setHeaders({
-		'cache-control': 'max-age=43200'
+    'cache-control': 'max-age=43200',
-	});
+  });
-	return {
+  return {
-		baseUrl,
+    baseUrl,
-		metaTagsChild: metaTags,
+    metaTagsChild: metaTags,
-		albums: await fetchBandcampAlbums(),
+    albums,
-		articlesData: await (await fetch('/api/articles?page=1&limit=3')).json()
+    articlesData: articles,
-	};
+  };
 };

src/routes/api/bandcamp/albums/+server.ts

@@ -0,0 +1,56 @@
+import { json, error } from '@sveltejs/kit';
+import { BANDCAMP_USERNAME, PAGE_SIZE, USE_REDIS_CACHE } from '$env/static/private';
+import { fetchArticlesApi } from '$lib/api';
+import { redis } from '$root/lib/server/redis';
+import type { Album, BandCampResults } from '$lib/types/album';
+import scrapeIt, { type ScrapeResult } from 'scrape-it';
+
+export async function GET({ setHeaders, url }) {
+  try {
+    if (USE_REDIS_CACHE) {
+      const cached: string | null = await redis.get('bandcampAlbums');
+
+      if (cached) {
+        const response: Album[] = JSON.parse(cached);
+        const ttl = await redis.ttl('bandcampAlbums');
+
+        return response;
+      }
+    }
+
+    const { data }: ScrapeResult<BandCampResults> = await scrapeIt(`https://bandcamp.com/${BANDCAMP_USERNAME}`, {
+      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 || [];
+
+    if (albums && albums?.length > 0) {
+      if (USE_REDIS_CACHE) {
+        redis.set('bandcampAlbums', JSON.stringify(albums), 'EX', 43200);
+      }
+      return json(albums);
+    }
+		return json([]);
+  } catch (error) {
+    console.error(error);
+    return json([]);
+  }
+}