Removing nprogress and replace with transition on SvelteKit navigate. Fix some postcss items.

package.json

@@ -22,12 +22,12 @@
 		"@sveltejs/enhanced-img": "^0.4.4",
 		"@sveltejs/kit": "^2.20.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@types/nprogress": "^0.2.3",
 		"@unpic/svelte": "^1.0.0",
 		"@zerodevx/svelte-img": "^2.1.2",
 		"autoprefixer": "^10.4.21",
 		"just-intersect": "^4.3.0",
 		"postcss": "^8.5.3",
+		"postcss-custom-media": "^11.0.5",
 		"postcss-import": "^16.1.0",
 		"postcss-load-config": "^6.0.1",
 		"postcss-preset-env": "^10.1.6",
@@ -53,7 +53,6 @@
 		"flexsearch": "^0.8.158",
 		"ioredis": "^5.6.1",
 		"lucide-svelte": "^0.503.0",
-		"nprogress": "^0.2.0",
 		"scrape-it": "^6.1.5",
 		"sharp": "^0.34.1",
 		"svelte-local-storage-store": "^0.6.4"

pnpm-lock.yaml

@@ -29,9 +29,6 @@ importers:
       lucide-svelte:
         specifier: ^0.503.0
         version: 0.503.0(svelte@5.28.2)
-      nprogress:
-        specifier: ^0.2.0
-        version: 0.2.0
       scrape-it:
         specifier: ^6.1.5
         version: 6.1.5
@@ -57,9 +54,6 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
         version: 5.0.3(svelte@5.28.2)(vite@6.3.3(yaml@2.7.0))
-      '@types/nprogress':
-        specifier: ^0.2.3
-        version: 0.2.3
       '@unpic/svelte':
         specifier: ^1.0.0
         version: 1.0.0(svelte@5.28.2)
@@ -75,6 +69,9 @@ importers:
       postcss:
         specifier: ^8.5.3
         version: 8.5.3
+      postcss-custom-media:
+        specifier: ^11.0.5
+        version: 11.0.5(postcss@8.5.3)
       postcss-import:
         specifier: ^16.1.0
         version: 16.1.0(postcss@8.5.3)
@@ -1215,9 +1212,6 @@ packages:
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  '@types/nprogress@0.2.3':
-    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
-
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -1779,9 +1773,6 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
-  nprogress@0.2.0:
-    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -3263,8 +3254,6 @@ snapshots:
 
   '@types/estree@1.0.7': {}
 
-  '@types/nprogress@0.2.3': {}
-
   '@types/resolve@1.20.2': {}
 
   '@unpic/core@1.0.1':
@@ -3834,8 +3823,6 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
-  nprogress@0.2.0: {}
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0

postcss.config.cjs

@@ -1,5 +1,6 @@
 const postcssPresetEnv = require('postcss-preset-env');
 const atImport = require('postcss-import');
+const postCssCustomMedia = require('postcss-custom-media');
 
 const config = {
 	plugins: [
@@ -11,6 +12,18 @@ const config = {
 				'custom-media-queries': true,
 				'media-query-ranges': true
 			}
+		}),
+		postCssCustomMedia({
+			customMedia: {
+				'--below_small': '(width < 400px)',
+				'--below_med': '(width < 700px)',
+				'--below_large': '(width < 900px)',
+				'--below_xlarge': '(width < 1200px)',
+				'--above_small': '(width > 400px)',
+				'--above_med': '(width > 700px)',
+				'--above_large': '(width > 900px)',
+				'--above_xlarge': '(width > 1200px)',
+			}
 		})
 	]
 };

src/app.d.ts

@@ -6,7 +6,14 @@ declare global {
     // interface Locals {}
     // interface PageData {}
     // interface Platform {}
+    interface Document {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      startViewTransition: (callback: never) => void; // Add your custom property/method here
+    }
   }
 }
 
+// biome-ignore lint/complexity/noUselessEmptyExport: <explanation>
+// biome-ignore lint/style/useExportType: <explanation>
 export {};

src/lib/api.ts

@@ -14,7 +14,7 @@ import type {
 	WallabagArticle,
 } from "$lib/types/article";
 import { ArticleTag } from "$lib/types/articleTag";
-import type { PageQuery } from "$lib/types/pageQuery";
+import type { PageQuery } from "./types/pageQuery";
 import { URLSearchParams } from "node:url";
 import { redis } from "$lib/server/redis";
 

src/lib/util/page_loading_indicator.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { onNavigate } from "$app/navigation";
+
+	let visible = $state(false);
+	let progress = $state(0);
+	let load_durations = $state<number[]>([]);
+	let average_load = $derived(
+		load_durations.reduce((a, b) => a + b, 0) / load_durations.length,
+	);
+
+	const increment = 1;
+
+	onNavigate((navigation) => {
+		const typical_load_time = average_load || 200; //ms
+		const frequency = typical_load_time / 100;
+		let start = performance.now();
+		// Start the progress bar
+		visible = true;
+		progress = 0;
+		const interval = setInterval(() => {
+			// Increment the progress bar
+			progress += increment;
+		}, frequency);
+		// Resolve the promise when the page is done loading
+		navigation?.complete.then(() => {
+			progress = 100; // Fill out the progress bar
+			clearInterval(interval);
+			// after 100 ms hide the progress bar
+			setTimeout(() => {
+				visible = false;
+			}, 500);
+			// Log how long that one took
+			const end = performance.now();
+			const duration = end - start;
+			load_durations = [...load_durations, duration];
+		});
+	});
+</script>
+
+{#if visible}
+	<div class="progress" style="width: {progress}%;"></div>
+{/if}
+
+<style lang="postcss">
+	.progress {
+		background: var(--lightGrey);
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 0.25rem;
+		z-index: 50;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+</style>

src/routes/+layout.svelte

@@ -1,51 +1,50 @@
 <script lang="ts">
-	import { MetaTags } from 'svelte-meta-tags';
-	import NProgress from "nprogress";
-	import { browser } from "$app/environment";
-	import { navigating, page } from "$app/stores";
-	import { PUBLIC_SITE_URL } from '$env/static/public';
-	import "nprogress/nprogress.css";
-	import '$root/styles/styles.pcss';
-	import Header from '$lib/components/header/index.svelte';
-	import Footer from '$lib/components/footer/index.svelte';
-	import Analytics from '$lib/components/analytics/index.svelte';
+	import "../styles/styles.pcss";
+	import { MetaTags } from "svelte-meta-tags";
+	import { dev } from "$app/environment";
+	import { page } from "$app/state";
+	import Header from "../lib/components/header/index.svelte";
+	import Footer from "../lib/components/footer/index.svelte";
+	import Analytics from "../lib/components/analytics/index.svelte";
+	import { onNavigate } from "$app/navigation";
+	import PageLoadingIndicator from "../lib/util/page_loading_indicator.svelte";
+
 	interface Props {
-		children?: import('svelte').Snippet;
+		children?: import("svelte").Snippet;
 	}
 
 	let { children }: Props = $props();
 
-	NProgress.configure({
-			// Full list: https://github.com/rstacruz/nprogress#configuration
-			minimum: 0.16,
+	const production = !dev || import.meta.env.NODE_ENV !== "production";
+
+	onNavigate(async (navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((oldStateCaptureResolve) => {
+			document.startViewTransition(async () => {
+				oldStateCaptureResolve();
+				await navigation.complete;
+			});
 		});
-
-	const dev = process.env.NODE_ENV !== 'production';
-
-	$effect(() => {
-		if (browser && $navigating) {
-			NProgress.start();
-		} else {
-			NProgress.done();
-		}
 	});
 
 	let metaTags = $derived({
-		titleTemplate: '%s | Bradley Shellnut',
+		titleTemplate: "%s | Bradley Shellnut",
 		additionalMetaTags: [
 			{
-				property: 'theme-color',
-				content: '#272727'
-			}
+				property: "theme-color",
+				content: "#272727",
+			},
 		],
-		...$page.data.metaTagsChild
-	})
+		...page.data.metaTagsChild,
+	});
 </script>
 
-{#if !dev}
+{#if production}
 	<Analytics />
 {/if}
 
+<PageLoadingIndicator />
 <MetaTags {...metaTags} />
 
 <div class="wrapper">
@@ -77,15 +76,6 @@
 		box-sizing: border-box;
 	}
 
-	:global(#nprogress .bar) {
-		background: var(--lightGrey);
-	}
-
-	:global(#nprogress .spinner-icon) {
-		border-top-color: var(--lightGrey);
-		border-left-color: var(--lightGrey);
-	}
-
 	:global(p) {
 		word-wrap: normal;
 		font-size: var(--bodyTextSize);

src/routes/+page.svelte

@@ -14,7 +14,7 @@ let totalArticles: number = $derived(articlesData.totalArticles);
 const userNames = {
   github: 'BradNut',
   linkedIn: 'bradley-shellnut',
-  email: 'bradleyshellnut@pm.me',
+  email: 'website@bradleyshellnut.com',
 };
 </script>
 

src/routes/api/bandcamp/albums/+server.ts

@@ -1,7 +1,7 @@
 import { json, error } from '@sveltejs/kit';
 import { BANDCAMP_USERNAME, PAGE_SIZE, USE_REDIS_CACHE } from '$env/static/private';
 import { fetchArticlesApi } from '$lib/api';
-import { redis } from '$root/lib/server/redis';
+import { redis } from '$lib/server/redis';
 import type { Album, BandCampResults } from '$lib/types/album';
 import scrapeIt, { type ScrapeResult } from 'scrape-it';
 

src/styles/styles.pcss

@@ -1,4 +1,3 @@
 @import 'reset.pcss';
 @import 'global.pcss';
-/* @import '$root/styles/theme.pcss'; */
 @import 'typeography.pcss';

svelte.config.js

@@ -14,8 +14,7 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		alias: {
-			$lib: './src/lib',
-			$root: './src'
+			$: './src',
 		}
 	},
 	compilerOptions: {

vite.config.ts

@@ -24,20 +24,5 @@ export default defineConfig({
   },
   css: {
     devSourcemap: true,
-    preprocessorOptions: {
-      postcss: {
-        additionalData: `
-				@custom-media --below_small (width < 400px);
-				@custom-media --below_med (width < 700px);
-				@custom-media --below_large (width < 900px);
-				@custom-media --below_xlarge (width < 1200px);
-
-				@custom-media --above_small (width > 400px);
-				@custom-media --above_med (width > 700px);
-				@custom-media --above_large (width > 900px);
-				@custom-media --above_xlarge (width > 1200px);
-				`,
-      },
-    },
   },
 });