Merge pull request #9 from kevinkace/feat/cleanup-base

fix linting

Author: kevinkace

eslint.config.js

@@ -17,9 +17,18 @@ export default ts.config(
         languageOptions: {
             globals: { ...globals.browser, ...globals.node }
         },
-        rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
-        // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
-        "no-undef": 'off' }
+        rules: {
+            // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+            // https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+            "no-undef": 'off',
+
+            // disable no-at-html-tags from eslint-plugin-svelte to allow @html directive in Svelte files
+            "svelte/no-at-html-tags": 'off',
+
+            // https://github.com/sveltejs/eslint-plugin-svelte/issues/1353
+            'svelte/no-navigation-without-resolve': 'off',
+
+        }
     },
     {
         files: [

src/lib/components/Carousel.svelte

@@ -10,7 +10,7 @@
 
 <div class="embla" use:emblaCarouselSvelte="{{ options, plugins }}">
     <div class="embla__container">
-        {#each imgs as img}
+        {#each imgs as img (img) }
             <div class="embla__slide">
                 <img src={img} alt="Carousel" />
             </div>

src/lib/components/Footer.svelte

@@ -32,7 +32,7 @@
                 <p>{m['common.mission.desc']()}</p>
             </div>
             <div class="ctas">
-                {#each buttons as { href, cta}}
+                {#each buttons as { href, cta} (href)}
                     <div>
                         <Button {href} type="medium">{cta}</Button>
                     </div>

src/lib/components/Header.svelte

@@ -47,8 +47,8 @@
 </script>
 
 <header data-test="site-header">
-    <a href={'/'} class="logo-link" data-test="site-logo-link">
-        <img class="logo" src={"/layout/header/logo.min.png"} alt="">
+    <a href='/' class="logo-link" data-test="site-logo-link">
+        <img class="logo" src="/layout/header/logo.min.png" alt="">
 
         {#if currentUrl === '/'}
             <h1 class="logotype">{m['common.scn']()}</h1>
@@ -62,18 +62,18 @@
 
         showNav = !showNav;
     }}>
-        <img src={"/layout/nav-hamburger.svg"} alt={m['common.toggle_nav']()}>
+        <img src="/layout/nav-hamburger.svg" alt={m['common.toggle_nav']()}>
     </button>
 </header>
 
 <nav class="nav" data-test="site-nav">
     <div class="nav-items" class:show-nav={showNav}>
-        {#each navItems as {href, label}}
+        {#each navItems as {href, label} (href)}
             <a
                 href={href}
                 class="nav-link"
                 class:active={href === currentUrl}
-                onclick={(e) => {
+                onclick={() => {
                     showNav = false; // close nav on click
                 }}
             >

src/lib/components/Partners.svelte

@@ -10,4 +10,4 @@
     {m['pages.home.partners.paragraphs.0']()}
 </p>
 
-<img src={"/pages/home/scn-partner-logos.min.png"} loading="lazy" alt={m['pages.home.partners.alt']()} />
+<img src="/pages/home/scn-partner-logos.min.png" loading="lazy" alt={m['pages.home.partners.alt']()} />

src/lib/components/Socials.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <div class={cssClass}>
-    {#each socials as { href, cta, src }}
+    {#each socials as { href, cta, src } (href)}
         <a {href} data-test={`social-${cta.toLowerCase()}`}>
             <img src={src[type]} alt={cta} />
         </a>

src/routes/+error.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/state';
-
+    import { page } from '$app/state';
     import { m }     from '$lib/paraglide/messages.js';
     import Wrapper   from '$lib/components/Wrapper.svelte';
     import PageTitle from '$lib/components/Page-Title.svelte';
@@ -19,7 +18,7 @@
         }
     };
 
-    let { status = 404 as 404 | 500 } = $props();
+    const {status = 404 as 404 | 500} = page;
 </script>
 
 <PageTitle title={errors[status].title} />
@@ -32,7 +31,7 @@
         {errors[status].description}
     </p>
     <p>
-        <a href={'/'} class="button">
+        <a href='/' class="button">
             {errors[status].cta}
         </a>
     </p>

src/routes/+page.svelte

@@ -39,7 +39,7 @@
 <PageTitle />
 
 <section class="carousel-wrapper" data-test="home-carousel">
-    <Carousel imgs={imgs} />
+    <Carousel {imgs} />
 </section>
 
 
@@ -68,7 +68,7 @@
                 {m['pages.home.overview.header']()}
             </h2>
 
-            {#each overview as over}
+            {#each overview as over (over)}
                 <p>{@html over}</p>
             {/each}
 
@@ -91,8 +91,8 @@
         </h2>
 
         <div class="button-row">
-            {#each buttons as { href, cta, dataTest } }
-                <Button href={href} arrow={true} dataTest={dataTest}>
+            {#each buttons as { href, cta, dataTest } (href)}
+                <Button {href} arrow={true} dataTest={dataTest}>
                     {cta}
                 </Button>
             {/each}

src/routes/about-us/+page.svelte

@@ -52,7 +52,7 @@
 <PageTitle title={m["pages.about.title"]()} />
 
 <Wrapper dataTest="about-page">
-    {#each sections as section, index}
+    {#each sections as section, index (section.key)}
         <section data-test={`about-us-${section.key}`}>
             <Panel type="plain">
                 {#if index === 0}
@@ -61,7 +61,7 @@
                     <h2>{section.header}</h2>
                 {/if}
 
-                {#each section.paragraphs as paragraph}
+                {#each section.paragraphs as paragraph (paragraph) }
                     <p>{@html paragraph}</p>
                 {/each}
 
@@ -77,7 +77,7 @@
             <p>{m["pages.about.values.paragraphs.0"]()}</p>
 
             <ul class="values-list">
-                {#each valuesList as value}
+                {#each valuesList as value (value)}
                     <li>{value}</li>
                 {/each}
             </ul>

src/routes/donate/+page.svelte

@@ -34,12 +34,12 @@
                     <input type="hidden" name="currency_code" value="USD" />
                     <button class="paypal-button">
                         <!--<img id = "paypal-graphic" src = "assets/paypal button.png" alt = "paypal button">-->
-                        <input type="image" src={"/layout/paypal-button.png"} name="submit" title="Paypal donations are made to lcl@seattlecommunitynetwork.org." alt="Donate with PayPal button" />
+                        <input type="image" src="/layout/paypal-button.png" name="submit" title="Paypal donations are made to lcl@seattlecommunitynetwork.org." alt="Donate with PayPal button" />
                     </button>
-                    <img alt="" src={"https://www.paypal.com/en_US/i/scr/pixel.gif"} width="1" height="1" />
+                    <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
                 </form>
 
-                {#each buttons as { href, cta }}
+                {#each buttons as { href, cta } (href)}
                     <Button {href} type="donate" dataTest={`donate-${cta.toLowerCase()}`}>{cta}</Button>
                 {/each}
             </div>