chore: Apply more Svelte ESlint rules

kiosion · Apr 19, 2024 · 40ee01c · 40ee01c
1 parent 2fa4558
commit 40ee01c
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 10 deletions.
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
@@ -99,6 +99,7 @@
       on:click={() => copy()}
       on:keydown={(e) => e.key === 'Enter' && copy()}
       aria-label={copied !== undefined ? $t('Copied') : $t('Copy to clipboard')}
+      type="button"
     >
       {#key copied}
         <Icon name={copied !== undefined ? 'Check' : 'Copy'}></Icon>

diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
@@ -38,6 +38,7 @@
       on:click={(e) => {
         handleClick(e, $currentLang === APP_LANGS[0] ? APP_LANGS[1] : APP_LANGS[0]);
       }}
+      type="button"
     >
       <Icon name="script" size={21}></Icon>
     </button>

diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -21,6 +21,7 @@
       on:click={() => {
         theme.set($theme === APP_THEMES.LIGHT ? APP_THEMES.DARK : APP_THEMES.LIGHT);
       }}
+      type="button"
     >
       {#key $theme}
         <Icon name={$theme === APP_THEMES.LIGHT ? 'MoonStars' : 'Sun'} size={21}></Icon>

diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte
@@ -139,6 +139,7 @@
     <button
       class="focus-outline absolute right-4 top-4 rounded-md p-2"
       on:click={running ? stopGame : startGame}
+      type="button"
     >
       {#if running}
         <svg

diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte
@@ -47,6 +47,7 @@
               role="switch"
               aria-checked={useOffset}
               style="transform: translate({offset?.[0]}px, {offset?.[1]}px)"
+              type="button"
             >
               {#if useOffset}
                 <svg
@@ -104,6 +105,7 @@
               ? ' text-accent-light dark:text-accent-dark'
               : ''}"
             tabindex="0"
+            type="button"
           >
             <div style="transform: translate({offset?.[0]}px, {offset?.[1]}px)">
               {label}

diff --git a/svelte-app/src/components/experiments/mag-cursor/cursor.svelte b/svelte-app/src/components/experiments/mag-cursor/cursor.svelte
@@ -232,6 +232,20 @@
   };
 
   $: update($cursorTargets)();
+  $: ({
+    x: cursorX,
+    y: cursorY,
+    width: cursorWidth,
+    height: cursorHeight,
+    borderRadius: cursorBorderRadius
+  } = $cursor);
+  $: ({
+    x: innerCursorX,
+    y: innerCursorY,
+    width: innerCursorWidth,
+    height: innerCursorHeight,
+    borderRadius: innerCursorBorderRadius
+  } = $innerCursor);
 </script>
 
 <svelte:window
@@ -247,13 +261,13 @@
     undefined
       ? 'bg-dark/10 shadow-dark/5 dark:bg-light/10 dark:shadow-light/5'
       : 'bg-dark/15 shadow-transparent dark:bg-light/15'} transition-colors"
-    style="transform: translate(calc({$cursor.x}px - 50%), calc({$cursor.y}px - 50%)); width: {$cursor.width}px; height: {$cursor.height}px; border-radius: {$cursor.borderRadius}px;"
+    style="transform: translate(calc({cursorX}px - 50%), calc({cursorY}px - 50%)); width: {cursorWidth}px; height: {cursorHeight}px; border-radius: {cursorBorderRadius}px;"
   ></div>
   <div
-    class="pointer-events-none fixed left-0 top-0 z-10 transition-colors {$activeTarget !==
+    class="pointer-events-none fixed left-0 top-0 z-10 backdrop-blur-sm transition-colors {$activeTarget !==
     undefined
       ? 'bg-dark/20 dark:bg-light/20'
       : 'bg-dark/40 dark:bg-light/40'}"
-    style="transform: translate(calc({$innerCursor.x}px - 50%), calc({$innerCursor.y}px - 50%)); width: {$innerCursor.width}px; height: {$innerCursor.height}px; border-radius: {$innerCursor.borderRadius}px;"
+    style="transform: translate(calc({innerCursorX}px - 50%), calc({innerCursorY}px - 50%)); width: {innerCursorWidth}px; height: {innerCursorHeight}px; border-radius: {innerCursorBorderRadius}px;"
   ></div>
 {/if}
diff --git a/svelte-app/src/components/images/image.svelte b/svelte-app/src/components/images/image.svelte
@@ -92,6 +92,7 @@
           showImageModal = true;
         }
       }}
+      type="button"
     >
       {#if showImageModal}
         <img

diff --git a/svelte-app/src/components/portable-text/image-carousel.svelte b/svelte-app/src/components/portable-text/image-carousel.svelte
@@ -65,6 +65,8 @@
       };
     })
   );
+
+  $: ({ asset } = $values[currentIndex]);
 </script>
 
 <div class="carousel">
@@ -87,6 +89,7 @@
             showImageModal = true;
           }
         }}
+        type="button"
       >
         {#if showImageModal && currentIndex === i}
           <img
@@ -112,7 +115,7 @@
 
 <ImageModal bind:dialog bind:show={showImageModal}>
   <img
-    src={$values[currentIndex].asset}
+    src={asset}
     draggable="false"
     alt={currentIndex.toString()}
     in:receive={{ key: currentIndex, duration: BASE_ANIMATION_DURATION }}

diff --git a/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte b/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
@@ -16,6 +16,7 @@
       onClick();
     }
   }}
+  type="button"
   {disabled}
 >
   <Icon name={dir === 'left' ? 'ArrowLeft' : 'ArrowRight'} size={22}></Icon>

diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
@@ -16,8 +16,10 @@
 
   let message: LocaleKey = 'errors.generic.message',
     title: LocaleKey = 'errors.generic.title',
-    showStack = false,
-    status = $page.status;
+    showStack = false;
+
+  $: ({ status, error } = $page);
+  $: stack = error?.stack?.trimStart();
 
   switch (status) {
     case 400:
@@ -78,7 +80,6 @@
     return [maybeNestedCause?.toString?.()];
   };
 
-  $: stack = $page.error?.stack?.trimStart();
   $: causes = parseCausesToFlatList($page.error?.cause, 0);
   $: heading = `${status}: ${$t(title)}`;
 </script>
@@ -92,7 +93,7 @@
   <div data-test-id="error-page">
     <HeadedBlock {heading}>
       <p class="my-4 text-base">
-        {$page.error?.message && $page.status !== 404 ? $page.error.message : $t(message)}
+        {error?.message && status !== 404 ? error.message : $t(message)}
       </p>
       <p class="my-4 text-base">
         {$t('Please')}

diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
@@ -102,6 +102,7 @@
 
   export let data;
 
+  $: ({ url } = $page);
   $: isLocalized.set(
     APP_LANGS.includes($page?.params?.lang as (typeof APP_LANGS)[number])
   );
@@ -120,9 +121,9 @@
     content={$currentLang === APP_LANGS[1] ? 'fr_CA' : 'en_CA'}
   />
   <meta property="og:site_name" content="kio.dev" />
-  <meta property="og:url" content={$page?.url?.href} />
+  <meta property="og:url" content={url?.href} />
   <meta property="og:image" content="{SELF_BASE_URL}/assets/dark-embed.png" />
-  <meta property="twitter:url" content={$page?.url?.href} />
+  <meta property="twitter:url" content={url?.href} />
   <meta property="twitter:site" content="@0xKI0" />
   <meta property="twitter:image" content="{SELF_BASE_URL}/assets/dark-embed.png" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,6 +92,7 @@ @@
               showImageModal = true;
             }
           }}
+          type="button"
         >
           {#if showImageModal}
             <img
@@ Expand Down @@