Fixing svelte check errors that I can, adding explicit TypeScript ignore comments for those I need to look into later, and fixing warnings.

package.json

@@ -36,7 +36,7 @@
 		"eslint-plugin-svelte": "^2.35.1",
 		"iconify-icon": "^1.0.8",
 		"just-intersect": "^4.3.0",
-		"mdsvex": "^0.10.6",
+		"mdsvex": "^0.11.0",
 		"mdsvex-relative-images": "^1.0.3",
 		"postcss": "^8.4.33",
 		"postcss-import": "^15.1.0",

pnpm-lock.yaml

@@ -86,8 +86,8 @@ devDependencies:
     specifier: ^4.3.0
     version: 4.3.0
   mdsvex:
-    specifier: ^0.10.6
+    specifier: ^0.11.0
-    version: 0.10.6(svelte@4.2.9)
+    version: 0.11.0(svelte@4.2.9)
   mdsvex-relative-images:
     specifier: ^1.0.3
     version: 1.0.3
@@ -3465,10 +3465,10 @@ packages:
       unist-util-visit: 3.1.0
     dev: true
 
-  /mdsvex@0.10.6(svelte@4.2.9):
+  /mdsvex@0.11.0(svelte@4.2.9):
-    resolution: {integrity: sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==}
+    resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==}
     peerDependencies:
-      svelte: 3.x
+      svelte: '>=3 <5'
     dependencies:
       '@types/unist': 2.0.6
       prism-svelte: 0.4.7

src/lib/components/Articles.svelte

@@ -103,10 +103,6 @@
       font-size: 2rem;
     }
 
-    & a + svg {
-      text-decoration: none;
-    }
-
     @media (max-width: 1000px) {
       font-size: 1.5rem;
     }

src/lib/components/contactHub/index.svelte

@@ -4,6 +4,7 @@
 	import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
 	import twitter from '@iconify-icons/radix-icons/twitter-logo';
 
+	export let showGithub: boolean = false;
 	export let showTwitter: boolean = false;
 	export let showLinkedIn: boolean = false;
 	export let showEmail: boolean = false;
@@ -42,7 +43,7 @@
 			</a>
 		</span>
   {/if}
-	{#if github && userNames?.github}
+	{#if showGithub && userNames?.github}
 		<span>
 			<a
 				href={`https://www.github.com/${userNames.github}`}

src/lib/components/footer/index.svelte

@@ -39,19 +39,6 @@
 		}
 	}
 
-  hr {
-    display: block;
-    max-width: 100%;
-    height: 0;
-    max-height: 0;
-    border: solid;
-    width: 100%;
-    border-width: thin 0 0 0;
-    transition: inherit;
-    border-color: var(--lightShade);
-    color: var(--lightShade);
-  }
-
   p {
     margin: 0;
     padding: 0.2rem;
@@ -60,10 +47,6 @@
     color: var(--lightShade);
   }
 
-  ul {
-    margin: 0.5rem;
-  }
-
 	.footer-list {
 		display: flex;
 		flex-wrap: wrap;

src/lib/components/logo/index.svelte

@@ -2,19 +2,26 @@
 	import beeIcon from '$lib/assets/images/bee.svg';
 	import shellIcon from '$lib/assets/images/shell.svg';
 	import nutIcon from '$lib/assets/images/hazelnut.svg';
+
+	// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
+	const bee: string = beeIcon;
+	// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
+	const shell: string = shellIcon;
+	// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
+	const nut: string = nutIcon;
 </script>
 
 <div>
 	<a href="/" class="center">
-		<img src={beeIcon} alt="Bee Icon" width="30" height="30"/>
+		<img src={bee} alt="Bee Icon" width="30" height="30"/>
 		<p>Bradley</p>
 	</a>
 	<a href="/" class="center">
-		<img src={shellIcon} alt="Shell Icon" width="30" height="30"/>
+		<img src={shell} alt="Shell Icon" width="30" height="30"/>
 		<p>Shell</p>
 	</a>
 	<a href="/" class="center">
-		<img src={nutIcon} alt="Nut Icon" width="30" height="30"/>
+		<img src={nut} alt="Nut Icon" width="30" height="30"/>
 		<p>Nut</p>
 	</a>
 </div>

src/lib/components/pagination/index.svelte

@@ -3,7 +3,6 @@
   export let pageSize: number;
   export let totalCount: number;
   export let currentPage: number;
-  export let skip: number;
   export let base: string;
 
   // make some variables

src/lib/content/portfolio/personal-website-gatsby.ts

@@ -17,11 +17,10 @@ type Sources = {
 	height: string;
 };
 
-const { height, src, width }: ImageMeta = meta;
+const { height, src, width } = meta as ImageMeta;
 
 const sources: Sources[] = [];
-const imageFormatsMetadata: ImageMeta[] = JSON.parse(formatMeta);
+const imageFormatsMetadata: ImageMeta[] = JSON.parse(`${formatMeta}`);
-console.log(`Image format metadata: ${JSON.parse(imageFormatsMetadata)}`);
 for (const metadata of imageFormatsMetadata) {
 	sources.push({
 		srcset: new URL(metadata.src),

src/lib/renderImage.ts

@@ -6,10 +6,11 @@ import { read } from '$app/server';
 
 // we use a Vite plugin to turn this import into the result of fs.readFileSync during build
 import firaSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
+import type { SvelteComponent } from 'svelte';
 
 const fontData = read(firaSansSemiBold).arrayBuffer();
 
-export async function componentToPng(component,
+export async function componentToPng(component: SvelteComponent,
 																		 props: Record<string, string | undefined>,
 																		 height: number, width: number) {
 	const result = component.render(props);

src/lib/types/album.ts

@@ -7,6 +7,7 @@ export type Album = {
 	artwork: string;
 	title: string;
 	artist: string;
+	src: Record<string, any> | ExternalImageSource[] | undefined
 };
 
 export type ExternalImageSource = {

src/lib/util/cookieUtils.ts

@@ -1,17 +0,0 @@
-export function getCookieLookup() {
-	if (typeof document !== 'object') {
-		return {};
-	}
-
-	return document.cookie.split('; ').reduce((lookup, v) => {
-		const parts = v.split('=');
-		lookup[parts[0]] = parts[1];
-
-		return lookup;
-	}, {});
-}
-
-export const getCurrentCookieValue = (name) => {
-	const cookies = getCookieLookup();
-	return cookies[name] ?? '';
-};

src/routes/articles/[page]/+page.svelte

@@ -7,117 +7,26 @@
 	export let data: PageData;
 	let articles: Article[];
 	let currentPage: number;
-	let totalPages: number;
 	let totalArticles: number;
 	let limit: number;
 	$: ({ articles, currentPage, totalPages, totalArticles, limit } = data);
-	$: seoTitle = `Tech Articles - Page ${currentPage} | Bradley Shellnut`;
 </script>
 
-<div class="pageStyles">
+<div>
 	<h1 style="margin-bottom: 2rem">Favorite Tech Articles</h1>
 	<Pagination
 		additionalClasses="top-pagination"
 		pageSize={limit}
 		totalCount={totalArticles}
 		currentPage={currentPage || 1}
-		skip={currentPage}
 		base="/articles"
 	/>
 	<Articles {articles} {totalArticles} classes={['columns']} />
-	<!-- <div class="articlesStyles">
-		{#each articles as article (article.hashed_url)}
-			<div class="articleStyles card">
-				<section>
-					<h3>
-						<a
-							target="_blank"
-							aria-label={`Link to ${article.title}`}
-							href={article.url.toString()}
-							rel="noreferrer"
-						>
-							{article.title}
-						</a>
-					</h3>
-				</section>
-				<section>
-					<p>Reading time: {article.reading_time} minutes</p>
-					<div class="tagStyles">
-						<p>Tags:</p>
-						{#each article.tags as tag}
-							<p>{tag}</p>
-						{/each}
-					</div>
-				</section>
-			</div>
-		{/each}
-	</div> -->
 	<Pagination
 		additionalClasses="bottom-pagination"
 		pageSize={limit}
 		totalCount={totalArticles}
 		currentPage={currentPage || 1}
-		skip={currentPage}
 		base="/articles"
 	/>
 </div>
-
-<style lang="postcss">
-	.pageStyles {
-		.bottom-pagination {
-			display: none;
-		}
-
-		@media (max-width: 650px) {
-			.bottom-pagination {
-				display: flex;
-			}
-		}
-	}
-
-	.articlesStyles {
-		display: grid;
-		grid-template-columns: repeat(2, minmax(250px, 1fr));
-		min-height: 800px;
-
-		@media (max-width: 1000px) {
-			grid-template-columns: repeat(2, minmax(250px, 1fr));
-		}
-
-		@media (max-width: 650px) {
-			grid-template-columns: minmax(250px, 1fr);
-		}
-
-		gap: 2.5rem;
-	}
-
-	.articleStyles {
-		display: grid;
-		grid-template-rows: 1fr auto;
-		align-items: start;
-		& a {
-			cursor: pointer;
-		}
-
-		/* p {
-			margin: 0.4rem 0.25rem;
-		} */
-	}
-
-	.tagStyles {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: row;
-		justify-content: left;
-		align-items: center;
-
-		& p + p {
-			background-color: var(--linkHover);
-			color: var(--buttonTextColor);
-			padding: 0.25rem 0.5rem;
-			margin: 0.5rem;
-			border-radius: 2px;
-			font-size: 1.2rem;
-		}
-	}
-</style>

src/routes/og/+server.ts

@@ -13,6 +13,7 @@ export async function GET({ url }) {
 		const page = url.searchParams.get('page') ?? undefined;
 		const content = url.searchParams.get('content') ?? '';
 
+		// @ts-expect-error: Argument of type 'typeof SocialImageCard__SvelteComponent_' is not assignable to parameter of type 'SvelteComponent<any, any, any>'
 		return componentToPng(SocialImageCard, {
 			header,
 			page,

src/routes/portfolio/+page.svelte

@@ -6,9 +6,13 @@
   import weddingWebsite from "$lib/assets/images/portfolio/Wedding_Website.png?as=run";
 	import oldSite from '$lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?as=run';
 	import shellnutArchitectWebsite from "$lib/assets/images/portfolio/Mark_Shellnut_Architect.png?as=run";
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md';
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 

src/routes/uses/+page.svelte

@@ -2,8 +2,11 @@
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 	import LazyImage from '$lib/components/LazyImage.svelte';
 	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?as=run';
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import Development from '$lib/content/uses/development.md';
+	// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
 	import PrivacyHardwareSoftware from '$lib/content/uses/privacy-hardware-software.md';
 </script>