Fix formatting issues and add nprogress bar at top of page

package.json

@@ -16,6 +16,7 @@
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.22.1",
 		"@types/marked": "^5.0.0",
+		"@types/nprogress": "^0.2.0",
 		"@unocss/extractor-svelte": "^0.53.5",
 		"@unocss/transformer-directives": "^0.53.5",
 		"marked": "^5.1.1",
@@ -32,5 +33,8 @@
 		"unocss": "^0.53.5",
 		"vite": "^4.4.2"
 	},
-	"packageManager": "pnpm@8.6.6"
+	"packageManager": "pnpm@8.6.6",
+	"dependencies": {
+		"nprogress": "^0.2.0"
+	}
 }

pnpm-lock.yaml

@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  nprogress:
+    specifier: ^0.2.0
+    version: 0.2.0
+
 devDependencies:
   '@sveltejs/adapter-static':
     specifier: ^2.0.2
@@ -14,6 +19,9 @@ devDependencies:
   '@types/marked':
     specifier: ^5.0.0
     version: 5.0.0
+  '@types/nprogress':
+    specifier: ^0.2.0
+    version: 0.2.0
   '@unocss/extractor-svelte':
     specifier: ^0.53.5
     version: 0.53.5
@@ -460,6 +468,10 @@ packages:
     resolution: {integrity: sha512-YcZe50jhltsCq7rc9MNZC/4QB/OnA2Pd6hrOSTOFajtabN+38slqgDDCeE/0F83SjkKBQcsZUj7VLWR0H5cKRA==}
     dev: true
 
+  /@types/nprogress@0.2.0:
+    resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
+    dev: true
+
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
@@ -1201,6 +1213,10 @@ packages:
       path-key: 3.1.1
     dev: true
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /ofetch@1.1.1:
     resolution: {integrity: sha512-SSMoktrp9SNLi20BWfB/BnnKcL0RDigXThD/mZBeQxkIRv1xrd9183MtLdsqRYLYSqW0eTr5t8w8MqjNhvoOQQ==}
     dependencies:

src/nprogress.sass

@@ -0,0 +1,29 @@
+// Modified nprogress.css file
+
+#nprogress
+	// Make clicks pass-through
+	pointer-events: none
+	.bar
+		background: rgb(249 115 22) // bg-orange-500
+
+		position: fixed
+		z-index: 1031
+		top: 0
+		left: 0
+
+		width: 100%
+		height: 2px
+
+	// Fancy blur effect
+	.peg
+		display: block
+		position: absolute
+		right: 0px
+		width: 100px
+		height: 100%
+		box-shadow: 0 0 10px rgb(249 115 22), 0 0 5px rgb(249 115 22)
+		opacity: 1.0
+
+		-webkit-transform: rotate(3deg) translate(0px, -4px)
+		-ms-transform: rotate(3deg) translate(0px, -4px)
+		transform: rotate(3deg) translate(0px, -4px)

src/routes/+layout.svelte

@@ -1,6 +1,24 @@
 <script lang="ts">
+	import { navigating } from "$app/stores"
+	import nprogress from "nprogress"
+
+	import "/src/nprogress.sass"
 	import "/src/global.sass"
 	import "uno.css"
+
+	// Settings for nprogress, the loading bar shown
+	// at the top of the page when navigating
+	nprogress.configure({ showSpinner: false })
+
+	let timeout: any
+	// 100ms is the minimum time the loading bar will be shown
+	$: if ($navigating && !timeout) timeout = setTimeout(nprogress.start, 100)
+	else {
+		clearTimeout(timeout)
+		timeout = null
+
+		nprogress.done()
+	}
 </script>
 
 <div class="flex flex-col lg:flex-row">

src/routes/revivals/+page.svelte

@@ -8,7 +8,7 @@
 		2013: "bg-lime-500 text-black",
 		2014: "bg-emerald-600 text-black",
 		2015: "bg-cyan-600 text-black",
-		2016: "bg-blue-600 ",
+		2016: "bg-blue-600",
 		2017: "bg-indigo-600",
 		2018: "bg-violet-400 text-black",
 		2019: "bg-purple-600",