Merge pull request #23 from BradNut/development

Development

.github/workflows/node.js.yml

@@ -1,46 +0,0 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
-
-on:
-  push:
-    branches: ['master', 'development']
-  pull_request:
-    branches: ['master']
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        with:
-          version: 8
-          run_install: false
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-      - name: Install dependencies
-        run: pnpm install
-      - run: pnpm run build
-      - run: pnpm test

.github/workflows/svelte_check.yml

@@ -0,0 +1,47 @@
+name: Run_Svelte_Check_on_PRs
+
+on:
+  pull_request:
+
+env:
+  WALLABAG_MAX_ARTICLES: ${{ secrets.WALLABAG_MAX_ARTICLES }}
+  WALLABAG_MAX_PAGES: ${{ secrets.WALLABAG_MAX_PAGES }}
+  WALLABAG_CLIENT_ID: ${{ secrets.WALLABAG_CLIENT_ID }}
+  WALLABAG_CLIENT_SECRET: ${{ secrets.WALLABAG_CLIENT_SECRET }}
+  WALLABAG_USERNAME: ${{ secrets.WALLABAG_USERNAME }}
+  WALLABAG_PASSWORD: ${{ secrets.WALLABAG_PASSWORD }}
+  WALLABAG_URL: ${{ secrets.WALLABAG_URL }}
+  BANDCAMP_USERNAME: ${{ secrets.BANDCAMP_USERNAME }}
+  PUBLIC_SITE_URL: ${{ secrets.PUBLIC_SITE_URL }}
+  PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
+  PUBLIC_UMAMI_DO_NOT_TRACK: ${{ secrets.PUBLIC_UMAMI_DO_NOT_TRACK }}
+  PUBLIC_UMAMI_URL: ${{ secrets.PUBLIC_UMAMI_URL }}
+  PUBLIC_UMAMI_ID: ${{ secrets.PUBLIC_UMAMI_ID }}
+  PAGE_SIZE: ${{ secrets.PAGE_SIZE }}
+  USE_REDIS_CACHE: ${{ secrets.USE_REDIS_CACHE }}
+  REDIS_URI: ${{ secrets.REDIS_URI }}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: pnpm-setup
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Svelte Check
+        run: pnpm check

package.json

@@ -21,36 +21,35 @@
 		"@iconify-icons/radix-icons": "^1.2.9",
 		"@iconify-icons/simple-icons": "^1.2.74",
 		"@melt-ui/pp": "^0.1.4",
-		"@playwright/test": "^1.40.1",
+		"@playwright/test": "^1.41.1",
 		"@resvg/resvg-js": "^2.6.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/adapter-vercel": "^4.0.4",
 		"@sveltejs/enhanced-img": "^0.1.8",
-		"@sveltejs/kit": "^2.3.2",
+		"@sveltejs/kit": "^2.4.3",
 		"@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",
-		"autoprefixer": "^10.4.16",
+		"autoprefixer": "^10.4.17",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^8.10.0",
 		"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",
 		"postcss-load-config": "^4.0.2",
 		"postcss-preset-env": "^8.5.1",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
-		"sass": "^1.69.7",
+		"prettier": "^3.2.4",
+		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.70.0",
 		"satori": "^0.10.11",
 		"satori-html": "^0.3.2",
 		"scrape-it": "^6.1.0",
 		"sharp": "^0.32.6",
-		"svelte": "^4.2.8",
+		"svelte": "^4.2.9",
 		"svelte-check": "^3.6.3",
 		"svelte-meta-tags": "^3.1.0",
 		"svelte-preprocess": "^5.1.3",
@@ -58,9 +57,9 @@
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"vanilla-lazyload": "^17.8.5",
-		"vite": "^5.0.11",
+		"vite": "^5.0.12",
 		"vite-imagetools": "^5.1.2",
-		"vitest": "^1.2.0"
+		"vitest": "^1.2.1"
 	},
 	"type": "module",
 	"engines": {
@@ -70,6 +69,7 @@
 	"dependencies": {
 		"@melt-ui/svelte": "^0.50.1",
 		"@types/nprogress": "^0.2.3",
+		"@sveltejs/adapter-vercel": "^5.1.0",
 		"@vercel/og": "^0.5.20",
 		"ioredis": "^5.3.2",
 		"nprogress": "^0.2.0"

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);
-console.log(`Image format metadata: ${JSON.parse(imageFormatsMetadata)}`);
+const imageFormatsMetadata: ImageMeta[] = JSON.parse(`${formatMeta}`);
 for (const metadata of imageFormatsMetadata) {
 	sources.push({
 		srcset: new URL(metadata.src),

src/lib/renderImage.ts

@@ -1,12 +1,16 @@
 import satori from 'satori';
 import { Resvg } from '@resvg/resvg-js';
 import { html as toReactNode } from 'satori-html';
+import { dev } from '$app/environment';
+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 { dev } from '$app/environment';
+import type { SvelteComponent } from 'svelte';
 
-export async function componentToPng(component,
+const fontData = read(firaSansSemiBold).arrayBuffer();
+
+export async function componentToPng(component: SvelteComponent,
 																		 props: Record<string, string | undefined>,
 																		 height: number, width: number) {
 	const result = component.render(props);
@@ -16,7 +20,7 @@ export async function componentToPng(component,
 		fonts: [
 			{
 				name: 'Fira Sans',
-				data: Buffer.from(firaSansSemiBold),
+				data: await fontData,
 				style: 'normal'
 			}
 		],
@@ -31,9 +35,9 @@ export async function componentToPng(component,
 		}
 	});
 
-	const png = resvg.render();
+	const image = resvg.render();
 
-	return new Response(png.asPng(), {
+	return new Response(image.asPng(), {
 		headers: {
 			'content-type': 'image/png',
 			'cache-control': dev ? 'no-cache, no-store' : 'public, immutable, no-transform, max-age=86400'

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

@@ -4,18 +4,21 @@ import { componentToPng } from '$root/lib/renderImage';
 const height = 630;
 const width = 1200;
 
+/** @type {import('./$types').RequestHandler} */
 export async function GET({ url }) {
 	try {
-		const ogImage = `${new URL(url.origin).href}/b_shell_nut_favicon.png`;
+		const faviconImageName = 'b_shell_nut_favicon.png';
+		const image = `${new URL(url.origin).href}${faviconImageName}`;
 		const header = url.searchParams.get('header') ?? undefined;
 		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,
 			content,
-			image: ogImage,
+			image,
 			width: `${width}`,
 			height: `${height}`,
 			url: new URL(url.origin).href

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>
 

vite.config.ts

@@ -1,5 +1,4 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import fs from 'fs';
 import type { UserConfig } from 'vite';
 import { imagetools } from '@zerodevx/svelte-img/vite';
 
@@ -12,27 +11,11 @@ const config: UserConfig = {
 			profiles: {
 				run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
 			}
-		}),
-		rawFonts(['.ttf'])
+		})
 	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}
 };
 
-function rawFonts(ext) {
-	return {
-		name: 'vite-plugin-raw-fonts',
-		resolveId(id) {
-			return ext.some((e) => id.endsWith(e)) ? id : null;
-		},
-		transform(code, id) {
-			if (ext.some((e) => id.endsWith(e))) {
-				const buffer = fs.readFileSync(id);
-				return { code: `export default ${JSON.stringify(buffer)}`, map: null };
-			}
-		}
-	};
-}
-
 export default config;