Moving courses taken to a json file and looping. Created components for courses and tech list items. Fixed TypeScript issues.

.vscode/settings.json

@@ -2,6 +2,7 @@
 	"cSpell.words": [
 		"Bandcamp",
 		"bradleyshellnut",
+		"clazz",
 		"iconify",
 		"Mullvad",
 		"nextjs",

src/lib/components/ExternalLink.svelte

@@ -6,11 +6,12 @@
 	export let href: string;
 	export let ariaLabel: string;
 	export let showIcon: boolean = false;
+	export let clazz = "";
 	export let icon: IconifyIcon = OpenInNew;
 </script>
 
 
-<a class:show-icon={showIcon} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
+<a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
 	<slot />
 	{#if showIcon}
 		<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />

src/lib/types/article.ts

@@ -29,3 +29,12 @@ export type WallabagTag = {
 	label: string;
 	slug: string;
 };
+
+export type ArticlePageLoad = {
+	articles: Article[];
+	currentPage: number;
+	totalPages: number;
+	limit: number;
+	totalArticles: number;
+	cacheControl: string;
+};

src/lib/types/courses.ts

@@ -0,0 +1,12 @@
+export type Course = {
+	name: string,
+	externalLinks: ExternalLink[],
+	tags: string[]
+}
+
+export type ExternalLink = {
+	ariaLabel: string,
+	href: string,
+	showIcon: boolean,
+	text: string
+}

src/lib/util/fetchBandcampAlbums.ts

@@ -55,5 +55,6 @@ export async function fetchBandcampAlbums() {
 		}
 	} catch (error) {
 		console.error(error);
+		return [];
 	}
 }

src/routes/+page.server.ts

@@ -2,6 +2,8 @@ import type { MetaTagsProps } from 'svelte-meta-tags';
 import { PUBLIC_SITE_URL } from '$env/static/public';
 import type { PageServerLoad } from './$types';
 import { fetchBandcampAlbums } from '$lib/util/fetchBandcampAlbums';
+import type { Album } from '$lib/types/album';
+import type { ArticlePageLoad } from '$lib/types/article';
 
 export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 	let baseUrl = 'https://bradleyshellnut.com';
@@ -41,14 +43,11 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 		url: currentPageUrl
 	});
 
-	const [albums, articles] = await Promise.all([
+	const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([
 		await fetchBandcampAlbums(),
 	  (await fetch(`/api/articles?page=1&limit=3`)).json()
 	]);
 
-	console.log('Albums', albums);
-	console.log('Articles', articles);
-
 	setHeaders({
 		'cache-control': 'max-age=43200'
 	});

src/routes/+page.svelte

@@ -3,8 +3,7 @@
 	import Bandcamp from '$lib/components/bandcamp/index.svelte';
 	import Articles from '$lib/components/Articles.svelte';
 	import type { Album } from '$lib/types/album';
-	import type { Article } from '$lib/types/article';
-	import type { ArticlePageLoad } from './articles/[page]/+page.server';
+	import type { Article, ArticlePageLoad } from '$lib/types/article';
 
 	export let data: PageData;
 	let albums: Album[];

src/routes/about/+page.svelte

@@ -9,12 +9,16 @@
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
 	import LazyImage from '$lib/components/LazyImage.svelte';
-	import adventure from '$lib/assets/images/adventure.png?as=run:0';
+	import rural from '$lib/assets/images/rural.png?as=run:0';
 	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?as=run';
 	import orange_derp from '$lib/assets/images/orange_derp.jpg?as=run';
 	import turnip from '$lib/assets/images/turnip.svg';
-	import Tag from '$lib/components/Tag.svelte';
-	import ExternalLink from '$lib/components/ExternalLink.svelte';
+	import CourseCard from './CourseCard.svelte';
+	import courseData from './course.json';
+	import type { Course } from '$root/lib/types/courses';
+	import TechListItem from './TechListItem.svelte';
+
+	const courses: Course[] = courseData.courses;
 </script>
 
 <div class="about">
@@ -44,99 +48,70 @@
 			At home I delve into other frameworks, languages, and platforms such
 			as:
 		</p>
-		<div
-			class="tech-list"
-		>
-			<a
-				target="_blank"
-				aria-label="React"
+		<div class="tech-list">
+			<TechListItem
+				itemText="React"
+				ariaLabel="React"
 				href="https://reactjs.org/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={React} width="24" height="24" role="img" title="React" />
-				<p>React</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="TypeScript"
-				href="https://typescriptlang.org/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={TypeScript} width="24" height="24" role="img" title="TypeScript" />
-				<p>TypeScript</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="Svelte"
+				clazz="center"
+				icon={React}
+			/>
+			<TechListItem
+				itemText="TypeScript"
+				ariaLabel="TypeScript"
+				href="https://www.typescriptlang.org/"
+				clazz="center"
+				icon={TypeScript}
+			/>
+			<TechListItem
+				itemText="Svelte"
+				ariaLabel="Svelte"
 				href="https://svelte.dev"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Svelte} width="24" height="24" role="img" title="Svelte" />
-				<p>Svelte</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="NextJS"
+				clazz="center"
+				icon={Svelte}
+			/>
+			<TechListItem
+				itemText="NextJS"
+				ariaLabel="NextJS"
 				href="https://nextjs.org/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Nextdotjs} width="24" height="24" role="img" title="NextJS" />
-				<p>NextJS</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="Remix"
+				clazz="center"
+				icon={Nextdotjs}
+			/>
+			<TechListItem
+				itemText="Remix"
+				ariaLabel="Remix"
 				href="https://remix.run/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Remix} width="24" height="24" role="img" title="Remix" />
-				<p>Remix</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="GraphQL"
+				clazz="center"
+				icon={Remix}
+			/>
+			<TechListItem
+				itemText="GraphQL"
+				ariaLabel="GraphQL"
 				href="https://graphql.org/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Graphql} width="24" height="24" role="img" title="GraphQL" />
-				<p>GraphQL</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="Prisma"
+				clazz="center"
+				icon={Graphql}
+			/>
+			<TechListItem
+				itemText="Prisma"
+				ariaLabel="Prisma"
 				href="https://prisma.io/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Prisma} width="24" height="24" role="img" title="Prisma" />
-				<p>Prisma</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="GatsbyJS"
+				clazz="center"
+				icon={Prisma}
+			/>
+		  <TechListItem
+				itemText="GatsbyJS"
+				ariaLabel="GatsbyJS"
 				href="https://gatsbyjs.com/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Gatsby} width="24" height="24" role="img" title="Gatsby" />
-				<p>Gatsby</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="Docker"
+				clazz="center"
+				icon={Gatsby}
+			/>
+			<TechListItem
+				itemText="Docker"
+				ariaLabel="Docker"
 				href="https://docker.com/"
-				class="center"
-				rel="noreferrer"
-			>
-				<iconify-icon icon={Docker} width="24" height="24" role="img" title="Docker" />
-				<p>Docker</p>
-			</a>
+				clazz="center"
+				icon={Docker}
+			/>
 		</div>
 	</div>
 	<div>
@@ -146,113 +121,16 @@
 			those below:
 		</p>
 		<div class="extracurricular">
-			<div class="card">
-				<h3>
-					<ExternalLink
-						ariaLabel="Wes Bos Courses"
-						href="https://wesbos.com/courses"
-						showIcon
-					>
-						Wes Bos
-					</ExternalLink>
-				</h3>
-				<div class="tags">
-					<Tag name="React" />
-					<Tag name="GraphQL" />
-					<Tag name="Gatsby" />
-					<Tag name="JavaScript" />
-				</div>
-			</div>
-			<div class="card">
-				<h3>
-					<ExternalLink
-						ariaLabel="Scott Tolinski"
-						href="https://www.scotttolinski.com"
-						showIcon
-					>
-						Scott Tolinski
-					</ExternalLink>
-					<ExternalLink
-						ariaLabel="Levelup Tutorials"
-						href="https://levelup.video"
-						showIcon
-					>
-						Level Up Tutorials
-					</ExternalLink>
-				</h3>
-				<div class="tags">
-					<Tag name="React" />
-					<Tag name="TypeScript" />
-					<Tag name="Svelte Kit" />
-					<Tag name="Remix" />
-					<Tag name="Figma" />
-					<Tag name="Design Systems" />
-				</div>
-			</div>
-			<div class="card">
-				<h3>
-					<ExternalLink
-						ariaLabel="Amy Kapernick"
-						href="https://www.amyskapers.dev/"
-						showIcon
-					>
-						Amy Kapernick
-					</ExternalLink>
-					<ExternalLink
-						ariaLabel="Levelup Tutorials"
-						href="https://levelup.video"
-						showIcon
-					>
-						Level Up Tutorials
-					</ExternalLink>
-				</h3>
-				<div class="tags">
-					<Tag name="Accessibility for Everyone" />
-				</div>
-			</div>
-			<div class="card">
-				<h3>
-					<ExternalLink
-						ariaLabel="Andrew Mead on Udemy"
-						href="https://www.udemy.com/user/andrewmead/"
-						showIcon
-					>
-						Andrew Mead
-					</ExternalLink>
-				</h3>
-				<div class="tags">
-					<Tag name="GraphQL" />
-					<Tag name="Apollo" />
-					<Tag name="Prisma" />
-				</div>
-			</div>
-			<div class="card">
-				<h3>
-					<ExternalLink
-						ariaLabel="Steven Grider on Udemy"
-						href="https://www.udemy.com/user/sgslo/"
-						showIcon
-					>
-						Steven Grider
-					</ExternalLink>
-				</h3>
-				<div class="tags">
-					<Tag name="React" />
-					<Tag name="Redux" />
-					<Tag name="Docker" />
-					<Tag name="GraphQL" />
-					<Tag name="CSS" />
-					<Tag name="HTML" />
-					<Tag name="JavaScript" />
-				</div>
-			</div>
+			{#each courses as course}
+				<CourseCard {course} />
+			{/each}
 		</div>
 	</div>
 	<div>
 		<h2>Other fun things about me&hellip;</h2>
 		<div style="display: grid;">
 			<p>
-				Currently traveling around the world!
+				Living it up in Mountain View
 			</p>
 			<div
 				style="
@@ -262,16 +140,16 @@
 					justify-content: center;
 				"
 			>
-				<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
-				<p class="center">Traveling around</p>
+				<LazyImage src={rural} alt="Clip art of house near trees" />
+				<p class="center">Mountain View</p>
 			</div>
 		</div>
 		<div>
-			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
+			<p>Hanging out with these two cats, Turnip and Taco.</p>
 			<div class="cat-pics">
 				<figure>
 					<LazyImage src={tortie_derp} alt="Turnip Cat" />
-					<p class="center">Turnip <img class="icon" src={turnip} width="25px" height="25px" alt="Turnip" /></p>
+					<p class="center">Turnip <img class="icon" src={String(turnip)} width="25px" height="25px" alt="Turnip" /></p>
 				</figure>
 				<figure>
 					<LazyImage src={orange_derp} alt="Taco Cat" />
@@ -310,31 +188,6 @@
 		gap: 1rem;
 		margin-top: 1rem;
 		font-size: 2rem;
-
-		& a {
-			display: grid;
-			justify-items: center;
-
-			font-weight: bold;
-			margin-right: 0;
-			text-decoration: none;
-			padding: 0.3rem;
-			margin-left: 1rem;
-			color: var(--lightGrey);
-
-			& p {
-				font-size: 1.5rem;
-				padding-top: 0.3rem;
-				margin: 0;
-			}
-
-			&:hover {
-				color: var(--shellYellow);
-				& p {
-					color: var(--shellYellow);
-				}
-			}
-		}
 	}
 
 	.extracurricular {
@@ -343,10 +196,6 @@
 		place-content: center;
 		gap: 1.5rem;
 
-		.card {
-			max-width: 30rem;
-		}
-
 		@media (max-width: 1000px) {
 			grid-template-columns: repeat(2, auto);
 			--cardHeightMin: 20rem;
@@ -358,13 +207,6 @@
 		}
 	}
 
-	.tags {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: left;
-		align-items: center;
-	}
-
 	.cat-pics {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(200px, 0.3fr));

src/routes/about/CourseCard.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ExternalLink from "$lib/components/ExternalLink.svelte";
+	import Tag from "$lib/components/Tag.svelte";
+	import type { Course } from "$lib/types/courses";
+
+	export let course: Course;
+	const { externalLinks, tags } = course;
+</script>
+
+<div class="card">
+	<h3>
+		{#each externalLinks as link}
+			<ExternalLink
+				ariaLabel={link.ariaLabel}
+				href={link.href}
+				showIcon={link.showIcon}
+			>
+				{link.text}
+			</ExternalLink>
+		{/each}
+	</h3>
+	<div class="tags">
+		{#each tags as tag}
+			<Tag name={tag} />
+		{/each}
+	</div>
+</div>
+
+<style lang="postcss">
+	.card {
+		max-width: 30rem;
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: left;
+		align-items: center;
+	}
+</style>

src/routes/about/TechListItem.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { IconifyIcon } from "iconify-icon/dist/iconify-icon.js";
+
+	export let ariaLabel: string;
+	export let href: string;
+	export let clazz = "";
+	export let itemText: string;
+	export let icon: IconifyIcon;
+</script>
+
+<a
+	target="_blank"
+	rel="noreferrer"
+	aria-label={ariaLabel}
+	{href}
+	class={clazz}
+>
+	<iconify-icon {icon} width="24" height="24" role="img" title={itemText} />
+	<p>{itemText}</p>
+</a>
+
+<style lang="postcss">
+	a {
+		display: grid;
+		justify-items: center;
+
+		font-weight: bold;
+		margin-right: 0;
+		text-decoration: none;
+		padding: 0.3rem;
+		margin-left: 1rem;
+		color: var(--lightGrey);
+
+		& p {
+			font-size: 1.5rem;
+			padding-top: 0.3rem;
+			margin: 0;
+		}
+
+		&:hover {
+			color: var(--shellYellow);
+			& p {
+				color: var(--shellYellow);
+			}
+		}
+	}
+</style>

src/routes/about/course.json

@@ -0,0 +1,88 @@
+{
+	"courses": [
+		{
+			"name": "Wes Bos",
+			"externalLinks": [
+				{
+					"ariaLabel": "Wes Bos Courses",
+					"href": "https://wesbos.com/courses",
+					"showIcon": true,
+					"text": "Wes Bos"
+				}
+			],
+			"tags": ["React", "GraphQL", "Gatsby", "JavaScript"]
+		},
+		{
+			"name": "Scott Tolinski",
+			"externalLinks": [
+				{
+					"ariaLabel": "Scott Tolinski",
+					"href": "https://www.scotttolinski.com",
+					"showIcon": true,
+					"text": "Scott Tolinski"
+				},
+				{
+					"ariaLabel": "Levelup Tutorials",
+					"href": "https://levelup.video",
+					"showIcon": true,
+					"text": "Levelup Tutorials"
+				}
+			],
+			"tags": ["React", "TypeScript", "Svelte Kit", "Remix", "Figma", "Design Systems"]
+		},
+		{
+			"name": "Josh Comeau",
+			"externalLinks": [
+				{
+					"ariaLabel": "Josh Comeau",
+					"href": "https://www.joshwcomeau.com",
+					"showIcon": true,
+					"text": "Josh Comeau"
+				},
+				{
+					"ariaLabel": "The Joy of React",
+					"href": "https://www.joyofreact.com/",
+					"showIcon": true,
+					"text": "The Joy of React"
+				}
+			],
+			"tags": ["Full Stack React", "NextJS"]
+		},
+		{
+			"name": "Amy Kapernick",
+			"externalLinks": [
+				{
+					"ariaLabel": "Amy Kapernick",
+					"href": "https://www.amyskapers.dev/",
+					"showIcon": true,
+					"text": "Amy Kapernick"
+				}
+			],
+			"tags": ["Accessibility for Everyone"]
+		},
+		{
+			"name": "Andrew Mead",
+			"externalLinks": [
+				{
+					"ariaLabel": "Andrew Mead on Udemy",
+					"href": "https://www.udemy.com/user/andrewmead/",
+					"showIcon": true,
+					"text": "Andrew Mead"
+				}
+			],
+			"tags": ["GraphQL", "Apollo", "Prisma"]
+		},
+		{
+			"name": "Steven Grider",
+			"externalLinks": [
+				{
+					"ariaLabel": "Steven Grider on Udemy",
+					"href": "https://www.udemy.com/user/sgslo/",
+					"showIcon": true,
+					"text": "Steven Grider"
+				}
+			],
+			"tags": ["React", "Redux", "Docker", "GraphQL", "CSS", "HTML", "JavaScript"]
+		}
+	]
+}

src/routes/api.ts

@@ -10,7 +10,7 @@ import {
 	USE_REDIS_CACHE
 } from '$env/static/private';
 import intersect from 'just-intersect';
-import type { Article, WallabagArticle } from '$lib/types/article';
+import type { Article, ArticlePageLoad, WallabagArticle } from '$lib/types/article';
 import { ArticleTag } from '$lib/types/articleTag';
 import type { PageQuery } from '$lib/types/pageQuery';
 import { URLSearchParams } from 'url';
@@ -77,7 +77,7 @@ export async function fetchArticlesApi(
 		throw new Error(pageResponse.statusText);
 	}
 
-	const cacheControl = pageResponse.headers.get('cache-control');
+	const cacheControl = pageResponse.headers.get('cache-control') || 'no-cache';
 
 	const { _embedded, page, pages, total, limit } = await pageResponse.json();
 	const articles: Article[] = [];
@@ -101,7 +101,7 @@ export async function fetchArticlesApi(
 		}
 	});
 
-	const responseData = {
+	const responseData: ArticlePageLoad = {
 		articles,
 		currentPage: page,
 		totalPages: pages > +WALLABAG_MAX_PAGES ? +WALLABAG_MAX_PAGES : pages,

src/routes/api/articles/+server.ts

@@ -1,9 +1,8 @@
 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 ({ setHeaders, url }: RequestEvent) => {
+export async function GET({ setHeaders, url }) {
 	const page = url?.searchParams?.get('page') || '1';
 	if (+page > +WALLABAG_MAX_PAGES) {
 		error(404, 'Page does not exist');

src/routes/articles/[page]/+page.server.ts

@@ -2,18 +2,9 @@ import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { WALLABAG_MAX_PAGES } from '$env/static/private';
 import { PUBLIC_SITE_URL } from '$env/static/public';
-import type { Article } from '$lib/types/article';
+import type { ArticlePageLoad } from '$lib/types/article';
 import type { MetaTagsProps } from 'svelte-meta-tags';
 
-export type ArticlePageLoad = {
-	articles: Article[];
-	currentPage: number;
-	totalPages: number;
-	limit: number;
-	totalArticles: number;
-	cacheControl: string;
-};
-
 export const load: PageServerLoad = async ({ fetch, params, setHeaders, url }) => {
 	const { page } = params;
 	if (+page > +WALLABAG_MAX_PAGES) {