Cleaning up old React code portions and typing albums.

src/lib/components/bandcamp/index.svelte

@@ -33,7 +33,7 @@
 					rel="noreferrer"
 				>
 					<h3>{album.title.length > 20 ? `${album.title.slice(0, 20)}...` : album.title}</h3>
-					<h3>by {album.artist}</h3>
+					<h3>{album.artist}</h3>
 				</a>
 			</div>
 		{/each}

src/lib/util/fetchBandcampAlbums.ts

@@ -1,15 +1,16 @@
 import { BANDCAMP_USERNAME, USE_REDIS_CACHE } from '$env/static/private';
 import scrapeIt from 'scrape-it';
+import type { ScrapeResult } from 'scrape-it';
 import { redis } from '../server/redis';
 import type { Album } from '../types/album';
 
 export async function fetchBandcampAlbums() {
 	try {
 		if (USE_REDIS_CACHE) {
-			const cached = await redis.get('bandcampAlbums');
+			const cached: string | null = await redis.get('bandcampAlbums');
 
 			if (cached) {
-				const response = JSON.parse(cached);
+				const response: Album[] = JSON.parse(cached);
 				console.log(`Cache hit!`);
 				const ttl = await redis.ttl('bandcampAlbums');
 
@@ -17,27 +18,30 @@ export async function fetchBandcampAlbums() {
 			}
 		}
 
-		const { data } = await scrapeIt(`https://bandcamp.com/${BANDCAMP_USERNAME}`, {
+		const { data }: ScrapeResult<Album[]> = await scrapeIt(
-			collectionItems: {
+			`https://bandcamp.com/${BANDCAMP_USERNAME}`,
-				listItem: '.collection-item-container',
+			{
-				data: {
+				collectionItems: {
-					url: {
+					listItem: '.collection-item-container',
-						selector: '.collection-title-details > a.item-link',
+					data: {
-						attr: 'href'
+						url: {
-					},
+							selector: '.collection-title-details > a.item-link',
-					artwork: {
+							attr: 'href'
-						selector: 'div.collection-item-art-container a img',
+						},
-						attr: 'src'
+						artwork: {
-					},
+							selector: 'div.collection-item-art-container a img',
-					title: {
+							attr: 'src'
-						selector: 'span.item-link-alt > div.collection-item-title'
+						},
-					},
+						title: {
-					artist: {
+							selector: 'span.item-link-alt > div.collection-item-title'
-						selector: 'span.item-link-alt > div.collection-item-artist'
+						},
+						artist: {
+							selector: 'span.item-link-alt > div.collection-item-artist'
+						}
 					}
 				}
 			}
-		});
+		);
 
 		const albums: Album[] = data?.collectionItems || [];
 		// console.log(`Albums ${JSON.stringify(albums)}`);

src/routes/+page.server.ts

@@ -1,5 +1,4 @@
 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 ({ fetch, setHeaders }) => {

src/routes/+page.svelte

@@ -77,7 +77,7 @@
 <style lang="postcss">
 	.home {
 		display: grid;
-		grid-gap: 2rem;
+		gap: 0.5rem;
 	}
 
 	.social-info {

src/routes/portfolio/+page.svelte

@@ -55,7 +55,7 @@
 								{/each}
 							</Picture>
 						</div>
-						<div>
+						<div class="portfolio-details">
 							<p>
 								My personal website written using the following
 								technologies.
@@ -332,6 +332,15 @@
 		}
 	}
 
+	:global(.portfolio-details) {
+		margin: 1rem;
+
+		ul {
+			margin: 1rem;
+			list-style: circle;
+		}
+	}
+
 	:global(.portfolioPicture) {
 		border-radius: 3px;
 		width: minmax(200px, 500px);

src/routes/uses/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Picture } from "svelte-lazy-loader";
-	import SEO from "$root/lib/components/SEO.svelte";
 	import desktop from '$lib/assets/images/Desktop_so_clean.jpg';
 	import desktopFormats from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
 	import desktopBlurred from '$lib/assets/images/Desktop_so_clean.jpg?w=100&jpg&blur=10';
@@ -14,7 +13,7 @@
 	<div>
 		<h1>/Uses</h1>
 		<p>
-			Inspired by{' '}
+			Inspired by
 			<a
 				target="_blank"
 				href="https://wesbos.com"
@@ -22,7 +21,7 @@
 				rel="noreferrer"
 			>
 				Wes Bos's
-			</a>{' '}
+			</a>
 			<a
 				target="_blank"
 				href="https://wesbos.com/uses"
@@ -30,8 +29,8 @@
 				rel="noreferrer"
 			>
 				/uses
-			</a>{' '}
+			</a>
-			page and{' '}
+			page and
 			<a
 				target="_blank"
 				href="https://uses.tech/"
@@ -39,27 +38,22 @@
 				rel="noreferrer"
 			>
 				uses.tech
-			</a>
+			</a>, this is a list of what I use everyday for my work and personal life.
-			, this is a list of what I use everyday for my work and personal life.
 		</p>
 	</div>
 	<div class="uses-block-styles">
-		<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
+		<figure>
-			<figure>
+			<Picture placeholder={desktopBlurred} src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading='eager'>
-				<div>
+				{#each desktopFormats as { src, format }}
-					<Picture placeholder={desktopBlurred} src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading='eager'>
+					<source data-srcset={src} type="image/{format}" />
-						{#each desktopFormats as { src, format }}
+				{/each}
-							<source data-srcset={src} type="image/{format}" />
+			</Picture>
-						{/each}
+		</figure>
-					</Picture>
-				</div>
-			</figure>
-		</div>
 		<h2>Hardware & Accessories</h2>
 		<ul>
 			<li>MacBook Pro 15-inch for work.</li>
 			<li>
-				Personal desktop running{' '}
+				Personal desktop running
 				<a
 					target="_blank"
 					aria-label="PopOS Linux Distro"
@@ -73,7 +67,7 @@
 			</li>
 			<li>Dell XPS 13 running PopOS.</li>
 			<li>
-				Phone 📱: Pixel 6 running{' '}
+				Phone 📱: Pixel 6 running
 				<a
 					target="_blank"
 					aria-label="GrapheneOS"
@@ -86,7 +80,7 @@
 				.
 			</li>
 			<li>
-				Keyboard ⌨️:{' '}
+				Keyboard ⌨️:
 				<a
 					target="_blank"
 					aria-label="Ducky Keyboard"
@@ -98,7 +92,7 @@
 				</a>
 			</li>
 			<li>
-				Mouse 🖱️:{' '}
+				Mouse 🖱️:
 				<a
 					target="_blank"
 					aria-label="Logitech G502 Gaming Mouse"
@@ -110,7 +104,7 @@
 				</a>
 			</li>
 			<li>
-				Chair 🪑:{' '}
+				Chair 🪑:
 				<a
 					target="_blank"
 					aria-label="Secretlab Omega 2020 Fabric"
@@ -122,7 +116,7 @@
 				</a>
 			</li>
 			<li>
-				Monitor 🖥️:{' '}
+				Monitor 🖥️:
 				<a
 					target="_blank"
 					aria-label="Samsung Odyssey G7 Gaming Monitor"
@@ -138,7 +132,7 @@
 	<div class="uses-block-styles">
 		<h2>Development</h2>
 		<p>
-			My development setup has been documented here:{' '}
+			My development setup has been documented here:
 			<a
 				target="_blank"
 				aria-label="Bradley Shellnut Computer Setup"
@@ -150,7 +144,7 @@
 			{'. '}
 		</p>
 		<p>
-			And documentation for my terminal and coding setup can be found here:{' '}
+			And documentation for my terminal and coding setup can be found here:
 			<a
 				target="_blank"
 				aria-label="Bradley Shellnut Dotfiles"
@@ -275,7 +269,7 @@
 				>
 					VSCodium
 				</a>
-				: Editor for non-Java projects. List of mostly used extensions:{' '}
+				: Editor for non-Java projects. List of mostly used extensions:
 				<a
 					target="_blank"
 					href="https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md"
@@ -445,7 +439,7 @@
 				: My go to multi-platform Posting utility
 			</li>
 			<li>
-				Browser of choice:{' '}
+				Browser of choice:
 				<a
 					target="_blank"
 					aria-label="Firefox Best Edition"
@@ -464,7 +458,7 @@
 			self-hosted systems and systems I trust to hold my data.
 		</p>
 		<p>
-			If you want to see more info about this head to my{' '}
+			If you want to see more info about this head to my
 			<a href="/privacy">Privacy</a> page.
 		</p>
 		<p>Hardware Authentication</p>
@@ -551,6 +545,13 @@
 </div>
 
 <style lang="postcss">
+	figure {
+		display: grid;
+		grid-template-columns: minmax(400px, 0.65fr);
+		place-content: center;
+		margin-bottom: 2rem;
+	}
+
 	.uses {
 		li {
 			list-style: none;