Fixing eslint and types. Cleaning up bandcamp scrape and tests.

.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: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
+	plugins: ['@typescript-eslint'],
 	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'
+			}
+		}
+	]
+};

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/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: {

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';
@@ -300,7 +299,6 @@
 
 		& p {
 			margin: 1rem;
-			/* padding: 0.2rem; */
 		}
 	}
 
@@ -319,7 +317,6 @@
 
 			font-weight: bold;
 			margin-right: 0;
-			padding: 0;
 			text-decoration: none;
 			padding: 0.3rem;
 			margin-left: 1rem;

src/routes/articles/+page.ts

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

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

@@ -3,6 +3,7 @@ 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 { MetaTagsProps } from 'svelte-meta-tags';
 
 export type ArticlePageLoad = {
 	articles: Article[];

src/routes/og/+server.ts

@@ -1,11 +1,10 @@
-import type { RequestHandler } from '@sveltejs/kit';
 import SocialImageCard from '$lib/components/socialImageCard.svelte';
 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;
@@ -17,11 +16,11 @@ export const GET: RequestHandler = async ({ url }) => {
 			page,
 			content,
 			image: ogImage,
-			width,
-			height,
+			width: `${width}`,
+			height: `${height}`,
 			url: new URL(url.origin).href
 		}, height, width);
 	} catch (e) {
 		console.error(e);
 	}
-};
+}