Merge pull request #22 from BradNut/development

Development

.eslintrc.cjs

@@ -1,20 +1,30 @@
 module.exports = {
 	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['@typescript-eslint'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true
-	}
+	},
-};
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.vscode/settings.json

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

package.json

@@ -23,10 +23,11 @@
 		"@melt-ui/pp": "^0.1.4",
 		"@playwright/test": "^1.40.1",
 		"@resvg/resvg-js": "^2.6.0",
-		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltejs/adapter-vercel": "^1.0.6",
+		"@sveltejs/adapter-vercel": "^4.0.0",
-		"@sveltejs/enhanced-img": "^0.1.5",
+		"@sveltejs/enhanced-img": "^0.1.6",
-		"@sveltejs/kit": "^1.27.7",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
 		"@zerodevx/svelte-img": "^2.1.0",
@@ -51,16 +52,15 @@
 		"sharp": "^0.32.6",
 		"svelte": "^4.2.8",
 		"svelte-check": "^3.6.2",
-		"svelte-lazy-loader": "^1.0.0",
 		"svelte-meta-tags": "^3.1.0",
-		"svelte-preprocess": "^5.1.1",
+		"svelte-preprocess": "^5.1.2",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"vanilla-lazyload": "^17.8.5",
-		"vite": "^4.5.1",
+		"vite": "^5.0.0",
 		"vite-imagetools": "^5.1.2",
-		"vitest": "^0.32.4"
+		"vitest": "^1.0.0"
 	},
 	"type": "module",
 	"engines": {
@@ -74,4 +74,4 @@
 		"ioredis": "^5.3.2",
 		"nprogress": "^0.2.0"
 	}
-}
+}

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/components/bandcamp/index.svelte

@@ -23,11 +23,6 @@
 				]
 			}
 		}
-		// [
-		// 	{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
-		// 	{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
-		// 	{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
-		// ]
 	}
 </script>
 

src/lib/renderImage.ts

@@ -6,7 +6,9 @@ import { html as toReactNode } from 'satori-html';
 import firaSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
 import { dev } from '$app/environment';
 
-export async function componentToPng(component, props, height, width) {
+export async function componentToPng(component,
+																		 props: Record<string, string | undefined>,
+																		 height: number, width: number) {
 	const result = component.render(props);
 	const markup = toReactNode(`${result.html}<style lang="css">${result.css.code}</style>`);
 

src/lib/types/album.ts

@@ -1,9 +1,12 @@
+export type BandCampResults = {
+	collectionItems: Album[];
+}
+
 export type Album = {
 	url: string;
 	artwork: string;
 	title: string;
 	artist: string;
-	src?: ExternalImageSource[];
 };
 
 export type ExternalImageSource = {

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.test.ts

@@ -4,14 +4,12 @@ import { fetchBandcampAlbums } from './fetchBandcampAlbums';
 describe('test fetchBandcampAlbums', () => {
 	it('fetches bandcamp albums', async () => {
 		const albums = await fetchBandcampAlbums();
-		console.log('albums');
 		expect(albums).not.toBeNull();
 		expect(albums).toBeTruthy();
 		expect(albums?.length).toBeGreaterThan(0);
 		for (const album of albums) {
 			expect(album?.artist).toHaveLength;
 			expect(album?.artwork).toHaveLength;
-			expect(album?.src).toHaveLength;
 			expect(album?.title).toHaveLength;
 			expect(album?.url).toHaveLength;
 		}

src/lib/util/fetchBandcampAlbums.ts

@@ -2,7 +2,7 @@ import { BANDCAMP_USERNAME, USE_REDIS_CACHE } from '$env/static/private';
 import scrapeIt from 'scrape-it';
 import type { ScrapeResult } from 'scrape-it';
 import { redis } from '$lib/server/redis';
-import type { Album } from '../types/album';
+import type { Album, BandCampResults } from '../types/album';
 
 export async function fetchBandcampAlbums() {
 	try {
@@ -18,7 +18,7 @@ export async function fetchBandcampAlbums() {
 			}
 		}
 
-		const { data }: ScrapeResult<Album[]> = await scrapeIt(
+		const { data }: ScrapeResult<BandCampResults> = await scrapeIt(
 			`https://bandcamp.com/${BANDCAMP_USERNAME}`,
 			{
 				collectionItems: {
@@ -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,8 +43,10 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 		url: currentPageUrl
 	});
 
-	const albums = async () => await fetchBandcampAlbums();
+	const [albums, articles]: [Album[], ArticlePageLoad] = await Promise.all([
-	const articles = async () => await fetch(`/api/articles?page=1&limit=3`);
+		await fetchBandcampAlbums(),
+	  (await fetch(`/api/articles?page=1&limit=3`)).json()
+	]);
 
 	setHeaders({
 		'cache-control': 'max-age=43200'
@@ -50,7 +54,7 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 	return {
 		baseUrl,
 		metaTagsChild: metaTags,
-		albums: albums(),
+		albums,
-		articlesData: (await articles()).json()
+		articlesData: articles
 	};
 };

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 { Article, ArticlePageLoad } from '$lib/types/article';
-	import type { ArticlePageLoad } from './articles/[page]/+page.server';
 
 	export let data: PageData;
 	let albums: Album[];

src/routes/about/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Img from '@zerodevx/svelte-img';
 	import Graphql from '@iconify-icons/simple-icons/graphql';
 	import Nextdotjs from '@iconify-icons/simple-icons/nextdotjs';
 	import Prisma from '@iconify-icons/simple-icons/prisma';
@@ -10,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 CourseCard from './CourseCard.svelte';
-	import ExternalLink from '$lib/components/ExternalLink.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">
@@ -45,99 +48,70 @@
 			At home I delve into other frameworks, languages, and platforms such
 			as:
 		</p>
-		<div
+		<div class="tech-list">
-			class="tech-list"
+			<TechListItem
-		>
+				itemText="React"
-			<a
+				ariaLabel="React"
-				target="_blank"
-				aria-label="React"
 				href="https://reactjs.org/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={React}
-			>
+			/>
-				<iconify-icon icon={React} width="24" height="24" role="img" title="React" />
+			<TechListItem
-				<p>React</p>
+				itemText="TypeScript"
-			</a>
+				ariaLabel="TypeScript"
-			<a
+				href="https://www.typescriptlang.org/"
-				target="_blank"
+				clazz="center"
-				aria-label="TypeScript"
+				icon={TypeScript}
-				href="https://typescriptlang.org/"
+			/>
-				class="center"
+			<TechListItem
-				rel="noreferrer"
+				itemText="Svelte"
-			>
+				ariaLabel="Svelte"
-				<iconify-icon icon={TypeScript} width="24" height="24" role="img" title="TypeScript" />
-				<p>TypeScript</p>
-			</a>
-			<a
-				target="_blank"
-				aria-label="Svelte"
 				href="https://svelte.dev"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Svelte}
-			>
+			/>
-				<iconify-icon icon={Svelte} width="24" height="24" role="img" title="Svelte" />
+			<TechListItem
-				<p>Svelte</p>
+				itemText="NextJS"
-			</a>
+				ariaLabel="NextJS"
-			<a
-				target="_blank"
-				aria-label="NextJS"
 				href="https://nextjs.org/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Nextdotjs}
-			>
+			/>
-				<iconify-icon icon={Nextdotjs} width="24" height="24" role="img" title="NextJS" />
+			<TechListItem
-				<p>NextJS</p>
+				itemText="Remix"
-			</a>
+				ariaLabel="Remix"
-			<a
-				target="_blank"
-				aria-label="Remix"
 				href="https://remix.run/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Remix}
-			>
+			/>
-				<iconify-icon icon={Remix} width="24" height="24" role="img" title="Remix" />
+			<TechListItem
-				<p>Remix</p>
+				itemText="GraphQL"
-			</a>
+				ariaLabel="GraphQL"
-			<a
-				target="_blank"
-				aria-label="GraphQL"
 				href="https://graphql.org/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Graphql}
-			>
+			/>
-				<iconify-icon icon={Graphql} width="24" height="24" role="img" title="GraphQL" />
+			<TechListItem
-				<p>GraphQL</p>
+				itemText="Prisma"
-			</a>
+				ariaLabel="Prisma"
-			<a
-				target="_blank"
-				aria-label="Prisma"
 				href="https://prisma.io/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Prisma}
-			>
+			/>
-				<iconify-icon icon={Prisma} width="24" height="24" role="img" title="Prisma" />
+		  <TechListItem
-				<p>Prisma</p>
+				itemText="GatsbyJS"
-			</a>
+				ariaLabel="GatsbyJS"
-			<a
-				target="_blank"
-				aria-label="GatsbyJS"
 				href="https://gatsbyjs.com/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Gatsby}
-			>
+			/>
-				<iconify-icon icon={Gatsby} width="24" height="24" role="img" title="Gatsby" />
+			<TechListItem
-				<p>Gatsby</p>
+				itemText="Docker"
-			</a>
+				ariaLabel="Docker"
-			<a
-				target="_blank"
-				aria-label="Docker"
 				href="https://docker.com/"
-				class="center"
+				clazz="center"
-				rel="noreferrer"
+				icon={Docker}
-			>
+			/>
-				<iconify-icon icon={Docker} width="24" height="24" role="img" title="Docker" />
-				<p>Docker</p>
-			</a>
 		</div>
 	</div>
 	<div>
@@ -147,113 +121,16 @@
 			those below:
 		</p>
 		<div class="extracurricular">
-			<div class="card">
+			{#each courses as course}
-				<h3>
+				<CourseCard {course} />
-					<ExternalLink
+			{/each}
-						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>
 		</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="
@@ -263,16 +140,16 @@
 					justify-content: center;
 				"
 			>
-				<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
+				<LazyImage src={rural} alt="Clip art of house near trees" />
-				<p class="center">Traveling around</p>
+				<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" />
@@ -300,7 +177,6 @@
 
 		& p {
 			margin: 1rem;
-			/* padding: 0.2rem; */
 		}
 	}
 
@@ -312,32 +188,6 @@
 		gap: 1rem;
 		margin-top: 1rem;
 		font-size: 2rem;
-
-		& a {
-			display: grid;
-			justify-items: center;
-
-			font-weight: bold;
-			margin-right: 0;
-			padding: 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 {
@@ -346,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;
@@ -361,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';
@@ -38,14 +38,12 @@ export async function fetchArticlesApi(
 		since: `${pageQuery.since}`,
 		page: `${pageQuery.page}`
 	});
-	// console.log(`Entries params: ${entriesQueryParams}`);
 
 	if (USE_REDIS_CACHE) {
 		const cached = await redis.get(entriesQueryParams.toString());
 
 		if (cached) {
 			const response = JSON.parse(cached);
-			// console.log('Cache hit!');
 			const ttl = await redis.ttl(entriesQueryParams.toString());
 
 			return { ...response, cacheControl: `max-age=${ttl}` };
@@ -79,19 +77,12 @@ 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[] = [];
 
-	// do {
-	// 	nbEntries += entries._embedded.items.length;
-	// console.log(`number of articles fetched: ${_embedded.items.length}`);
 	_embedded.items.forEach((article: WallabagArticle) => {
-		// if (articles?.length === +WALLABAG_MAX_ARTICLES) {
-		// 	console.log('Reached 30 articles');
-		// 	return;
-		// }
 		const rawTags = article?.tags?.map((tag) => tag.slug);
 		if (intersect(rawTags, Object.values(ArticleTag))?.length > 0) {
 			const tags = rawTags.map((rawTag) => rawTag as unknown as ArticleTag);
@@ -110,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,14 +1,14 @@
 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');
+	}
+
 	try {
-		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,
 			limit: url?.searchParams?.get('limit') || '6'
@@ -27,11 +27,10 @@ export const GET: RequestHandler = async ({ setHeaders, url }: RequestEvent) =>
 				}
 			}
 
-			// console.log(`API response ${JSON.stringify(response)}`);
 			return json(response);
 		}
 	} catch (e) {
 		console.error(e);
-		throw error(404, 'Page does not exist');
+		error(404, 'Page does not exist');
 	}
 };

src/routes/articles/+page.ts

@@ -1,6 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
 
 export const load = async () => {
-	throw redirect(302, '/articles/1');
+	redirect(302, '/articles/1');
 };

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

@@ -2,23 +2,15 @@ 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) {
-		throw error(404, {
+		error(404, {
-			message: 'Not found'
+        			message: 'Not found'
-		});
+        		});
 	}
 	const resp = await fetch(`/api/articles?page=${page}`);
 	const { articles, currentPage, totalPages, limit, totalArticles, cacheControl }: ArticlePageLoad =

src/routes/og/+server.ts

@@ -1,16 +1,10 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import satori from 'satori';
-import { Resvg } from '@resvg/resvg-js';
-import { html as toReactNode } from 'satori-html';
-import FiraSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
 import SocialImageCard from '$lib/components/socialImageCard.svelte';
-import { dev } from '$app/environment';
 import { componentToPng } from '$root/lib/renderImage';
 
 const height = 630;
 const width = 1200;
 
-export const GET: RequestHandler = async ({ url }) => {
+export async function GET({ url }) {
 	try {
 		const ogImage = `${new URL(url.origin).href}/b_shell_nut_favicon.png`;
 		const header = url.searchParams.get('header') ?? undefined;
@@ -22,11 +16,11 @@ export const GET: RequestHandler = async ({ url }) => {
 			page,
 			content,
 			image: ogImage,
-			width,
+			width: `${width}`,
-			height,
+			height: `${height}`,
 			url: new URL(url.origin).href
 		}, height, width);
 	} catch (e) {
 		console.error(e);
 	}
-};
+}

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-vercel';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { preprocessMeltUI } from '@melt-ui/pp';
 import { mdsvex } from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';