fix linting errors

Author: Nick-Mazuk

.eslintignore

@@ -9,4 +9,5 @@ src/lib/lib/stork.js
 src/routes/docs
 static/stork.st
 static/stork.wasm
-.svelte-kit
+.svelte-kit
+cypress

src/lib/components/home/feature.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
-
     import Image from '../image.svelte'
+
     export let title: string
     export let description: string
     export let reversed = false
@@ -40,7 +40,7 @@
         >
             {#each images as image, index}
                 <Image
-                    src="{image}"
+                    source="{image}"
                     width="{1200}"
                     alt=""
                     class="absolute w-full h-full object-cover {transitionClasses} {index ===

src/lib/components/image.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    export let src: string
+
+    export let source: string
     let classes = ''
     export { classes as class }
     export let alt: string
     export let width: number
 
-    let source: string
+    let sourceOriginal: string
     let sourceWebp: string
     let sourceAvif: string
     onMount(async () => {
-        source = (await import(`../assets/images/${src}.png?w=${width}`)).default
-        sourceWebp = (await import(`../assets/images/${src}.png?webp&w=${width}`)).default
-        sourceAvif = (await import(`../assets/images/${src}.png?avif&w=${width}`)).default
+        sourceOriginal = (await import(`../assets/images/${source}.png?w=${width}`)).default
+        sourceWebp = (await import(`../assets/images/${source}.png?webp&w=${width}`)).default
+        sourceAvif = (await import(`../assets/images/${source}.png?avif&w=${width}`)).default
     })
 </script>
 
 <picture>
     <source srcset="{sourceAvif}" type="image/avif" />
     <source srcset="{sourceWebp}" type="image/webp" />
-    <img src="{source}" alt="{alt}" class="{classes}" loading="lazy" />
+    <img src="{sourceOriginal}" alt="{alt}" class="{classes}" loading="lazy" />
 </picture>

src/lib/components/script.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import Badge from '@nick-mazuk/ui-svelte/src/elements/badge/badge.svelte'
-    import type { ScriptData } from '$lib/types/script-data'
+    import type { ScriptData } from '../types/script-data'
     import Button from '@nick-mazuk/ui-svelte/src/elements/button/button.svelte'
-    import { download } from '$lib/lib/download-file'
+    import { download } from '../lib/download-file'
     import { sentenceCase } from '@nick-mazuk/lib/text-styling'
     import { format } from 'date-fns'
 
@@ -68,7 +68,7 @@
                 <p class="my-3">{data.notes}</p>
             {/if}
             {#if data.author.name || data.author.website || data.author.email}
-                <h4 class="h6">Author</h4>
+                <h4 class="h6 text-foreground mt-3">Author</h4>
                 {#if data.author.name}
                     <p>{data.author.name}</p>
                 {/if}
@@ -84,22 +84,22 @@
                 {/if}
             {/if}
             {#if data.categories.length > 0}
-                <h4 class="h6">Categories</h4>
+                <h4 class="h6 text-foreground mt-3">Categories</h4>
                 <div class="flex space-x-0.5 mt-1">
                     {#each data.categories as category}
                         <Badge>{category}</Badge>
                     {/each}
                 </div>
             {/if}
             {#if data.version || data.date}
-                <h4 class="h6">Version</h4>
+                <h4 class="h6 text-foreground mt-3">Version</h4>
                 <p>Version {data.version}</p>
                 {#if data.date}
                     <p>{format(new Date(data.date), 'MMMM d, YYY')}</p>
                 {/if}
             {/if}
             {#if data.requireSelection || data.requireScore}
-                <h4 class="h6">Requirements</h4>
+                <h4 class="h6 text-foreground mt-3">Requirements</h4>
                 {#if data.requireSelection}
                     <p>Requires music selection to run</p>
                 {/if}
@@ -108,15 +108,9 @@
                 {/if}
             {/if}
             {#if data.copyright}
-                <h4 class="h6">Licence</h4>
+                <h4 class="h6 text-foreground mt-3">Licence</h4>
                 <p>Copyright {data.copyright}</p>
             {/if}
         </div>
     {/if}
 </article>
-
-<style>
-    h4 {
-        @apply text-foreground mt-3;
-    }
-</style>

src/lib/lib/download-file.ts

@@ -1,6 +1,6 @@
 export const download = (filename: string, text: string) => {
-    var element = document.createElement('a')
-    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+    const element = document.createElement('a')
+    element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`)
     element.setAttribute('download', filename)
 
     element.style.display = 'none'

src/routes/index.svelte

@@ -48,7 +48,7 @@
                 class="relative rounded-xl shadow-xl -mt-64 z-10 aspect-w-2 aspect-h-1 w-full overflow-hidden"
             >
                 <Image
-                    src="indeterminate-clusters"
+                    source="indeterminate-clusters"
                     alt=""
                     width="{1600}"
                     class="absolute w-full h-full object-cover"

src/routes/scripts.svelte

@@ -9,16 +9,16 @@
     import type { TextInputChangeEvent } from '@nick-mazuk/ui-svelte/src/form/inputs/text-input'
     import Spacer from '@nick-mazuk/ui-svelte/src/utilities/spacer/spacer.svelte'
     import Script from '$lib/components/script.svelte'
-    import scriptData from '$lib/lib/script-data.json'
-    import type { ScriptData } from '$lib/types/script-data'
+    import scriptData from '../lib/lib/script-data.json'
+    import type { ScriptData } from '../lib/types/script-data'
     import Container from '@nick-mazuk/ui-svelte/src/utilities/container/container.svelte'
     import { formatNumber } from '@nick-mazuk/lib/esm/number-styling'
     import Button from '@nick-mazuk/ui-svelte/src/elements/button/button.svelte'
     import Seo from '@nick-mazuk/ui-svelte/src/utilities/seo/seo.svelte'
 
     import luaLogo from '$lib/assets/images/lua-logo.gif'
 
-    let scripts: ScriptData[] = scriptData
+    const scripts: ScriptData[] = scriptData
     const search = new Search('name')
     search.addIndex('name')
     search.addIndex('shortDescription')
@@ -27,7 +27,7 @@
 
     const allIndexes = new Set<number>()
 
-    const normalizeName = (name: string) => name.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    const normalizeName = (name: string) => name.normalize('NFD').replace(/[\u0300-\u036F]/gu, '')
     scripts.forEach((script, index) => {
         search.addDocument({
             ...script,
@@ -59,22 +59,23 @@
         if (currentSearch in searchCache) {
             displayedDocuments = searchCache[currentSearch]
         } else {
-            const results: ScriptData[] = search.search(currentSearch)
+            const results = search.search(currentSearch) as (ScriptData & { index: number })[]
             const sortedResults = results.sort((a, b) => a.name.localeCompare(b.name))
             displayedDocuments = {
-                items: new Set(results.map((script: ScriptData) => script.index)),
+                items: new Set(results.map((script) => script.index)),
                 first: sortedResults[0]?.index ?? -1,
                 last: sortedResults[sortedResults.length - 1]?.index ?? -1,
             }
             searchCache[currentSearch] = displayedDocuments
         }
     }
-    $: if (typeof window !== 'undefined')
+    $: if (typeof window !== 'undefined') {
         window.history.replaceState(
             null,
             '',
             searchValue ? `/scripts?search=${searchValue}` : '/scripts'
         )
+    }
 </script>
 
 <Seo