Add sample image and fix compiler warning

README.md

@@ -1,3 +1,13 @@
 # Spectrogram
 
-Github Pages Deployment
+A voice spectrum analyser made using Typescript and Svelte 5.
+
+Try it out here: [Github Pages Deployment](https://paul1365972.github.io/spectrogram/)
+
+## Usage
+
+![Example image showcasing the Spectrogram](assets/sample.png)
+
+All settings are configurable via the menu in the top left corner.
+
+You can also press Space to pause the spectrogram.

src/components/Spectrogram.svelte

@@ -27,13 +27,11 @@
 		window.addEventListener('mousedown', init)
 		window.addEventListener('touchstart', init)
 		window.addEventListener('keydown', handleKeydown)
-		window.addEventListener('resize', handleResize)
 
 		return () => {
 			window.removeEventListener('mousedown', init)
 			window.removeEventListener('touchstart', init)
 			window.removeEventListener('keydown', handleKeydown)
-			window.removeEventListener('resize', handleResize)
 		}
 	})
 
@@ -53,10 +51,6 @@
 		}
 	}
 
-	function handleResize() {
-		renderer!.handleResize()
-	}
-
 	function render() {
 		settings = get(settingsStore)
 		if (!paused) {

src/lib/store.ts

@@ -5,7 +5,8 @@ export const settings = persisted('settings', {
 	tickVariant: 'preset',
 	colorMap: 'grayscale',
 	interpolation: 'nearest',
-	fftSize: '4096',
+	noteGuidelines: false,
+	fftSize: 4096,
 	smoothingFactor: 0,
 	lowerFrequency: 45,
 	upperFrequency: 11000,

svelte.config.js

@@ -3,5 +3,5 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 export default {
   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess({ script: true }),
 }