src/app.html

@@ -81,6 +81,12 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <script
+      defer
+      src="https://umami.leomurca.xyz/script.js"
+      data-website-id="bd4c0533-36e6-402d-ac04-577993aaf43a"
+    ></script>
+
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />

src/lib/components/Analytics.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { isDevelopment } from '$lib/utils/env';
-</script>
-
-<svelte:head>
-  {#if !isDevelopment()}
-    <script
-      defer
-      src="https://umami.leomurca.xyz/script.js"
-      data-website-id="bd4c0533-36e6-402d-ac04-577993aaf43a"
-    ></script>
-  {/if}
-</svelte:head>

src/lib/components/CardList.svelte

@@ -2,30 +2,17 @@
   import { t } from '$lib/translations';
   import renderFileToCanvas from '$lib/file-renderer';
 
-  /**
-   * @type {ArrayLike<any>}
-   */
   export let files = [];
-
-  /**
-   * @type {HTMLElement}
-   */
-  let errorMessageRef;
   let canvasRefs = [];
   let colorRefs = [];
   let stitchesRefs = [];
   let sizeRefs = [];
+  let errorMessageRef;
   let localizedStrings = {
     stitches: $t('viewer.stitches'),
     dimensions: $t('viewer.dimensions'),
   };
 
-  /**
-   * Downloads a given HTMLCanvasElement as a PNG image.
-   *
-   * @param {HTMLCanvasElement} canvas - The canvas element to export as an image.
-   * @param {string} filename - The desired name of the downloaded file (extension will be replaced with `.png`).
-   */
   const downloadCanvasAsImage = (canvas, filename) => {
     const image = canvas
       .toDataURL('image/png')
@@ -37,15 +24,9 @@
     link.click();
   };
 
-  /**
-   * Cliks the button to render the files when user press enter.
-   *
-   * @param {KeyboardEvent} evt - The event that triggered the language switch.
-   */
   const onKeydown = (evt) => {
     if (evt.key === 'Enter') {
-      const button = document.getElementById('download-button');
+      document.getElementById('download-button').click();
-      if (button) button.click();
     }
   };
 </script>
@@ -63,8 +44,8 @@
           id="download-button"
           role="button"
           tabindex="0"
-          onkeydown={onKeydown}
+          on:keydown={onKeydown}
-          onclick={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
+          on:click={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
         >
           {$t('viewer.download')}
         </div>

src/lib/components/Dropzone.svelte

@@ -11,7 +11,6 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
   id="dropzone"
   tabindex={0}

src/lib/components/FileList.svelte

@@ -1,8 +1,5 @@
 <script>
   export let title;
-  /**
-   * @type {ArrayLike<any>}
-   */
   export let files = [];
   export let isError = false;
 </script>

src/lib/components/Header.svelte

@@ -1,28 +1,15 @@
 <script>
-  import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
+  import { t, locale, locales, SUPPORTED_LOCALES } from '$lib/translations';
   import logo from '$lib/assets/logo.webp';
   import MediaQuery from './MediaQuery.svelte';
 
-  /**
+  const configsFor = (/** @type {boolean} */ matches) => {
-   *
-   * Returns logo image configuration based on the screen size match.
-   *
-   * @param {boolean} matches - The event that triggered the language switch.
-   */
-  const configsFor = (matches) => {
     return matches
       ? { src: logo, width: 150, height: 70 } // mobile
       : { src: logo, width: 150, height: 100 }; // desktop
   };
 
-  /**
+  const onSwitchToOppositeLang = () => {
-   * Switches the current locale to the opposite language (EN_US <-> PT_BR).
-   * Prevents the default link behavior (e.g., page jump).
-   *
-   * @param {MouseEvent | KeyboardEvent} e - The event that triggered the language switch.
-   */
-  const onSwitchToOppositeLang = (e) => {
-    e.preventDefault();
     $locale =
       $locale === SUPPORTED_LOCALES.EN_US
         ? SUPPORTED_LOCALES.PT_BR
@@ -51,7 +38,7 @@
     <MediaQuery query="(max-width: 768px)" let:matches>
       <slot let-matches>
         {#if matches}
-          <button class="hamburger" onclick={() => (isMenuOpen = !isMenuOpen)}>
+          <button class="hamburger" on:click={() => (isMenuOpen = !isMenuOpen)}>
             {#if isMenuOpen}x{:else}☰{/if}
           </button>
         {/if}
@@ -74,22 +61,17 @@
       </ul>
     </nav>
 
-    <button
+    <a
-      type="button"
       class="common-switch {$locale === SUPPORTED_LOCALES.EN_US
         ? 'portuguese-switch'
         : 'english-switch'}"
-      onclick={onSwitchToOppositeLang}
+      href="#"
-      onkeydown={(e) => {
+      on:click|preventDefault={onSwitchToOppositeLang}
-        if (e.key === 'Enter' || e.key === ' ') {
-          onSwitchToOppositeLang(e);
-        }
-      }}
     >
       <div style="display: flex; width: fit-content;">
         <span style="font-size: 20px;">{$t('header.languageSwitch')}</span>
       </div>
-    </button>
+    </a>
   </div>
 </header>
 
@@ -148,10 +130,7 @@
   }
 
   .common-switch {
-    border: none;
-    background-color: unset;
     width: fit-content;
-    cursor: pointer;
   }
 
   .portuguese-switch {

src/lib/components/Seo.svelte

@@ -50,12 +50,12 @@
   <meta property="og:type" content={ogType} />
   <meta property="og:title" content={$t(ogTitle)} />
   <meta property="og:description" content={$t(ogDescription)} />
-  <!-- <meta property="og:image" content={$t(ogImage)} /> -->
+  <meta property="og:image" content={$t(ogImage)} />
   <meta property="og:url" content={$t(url)} />
 
   <!-- Twitter -->
   <meta name="twitter:card" content={$t(twitterCard)} />
   <meta name="twitter:title" content={$t(twitterTitle)} />
   <meta name="twitter:description" content={$t(twitterDescription)} />
-  <!-- <meta name="twitter:image" content={$t(twitterImage)} /> -->
+  <meta name="twitter:image" content={$t(twitterImage)} />
 </svelte:head>

src/lib/utils/env.js

@@ -4,8 +4,4 @@ function appVersion() {
   return APP_VERSION;
 }
 
-function isDevelopment() {
+export { appVersion };
-  return import.meta.env.MODE === 'development';
-}
-
-export { appVersion, isDevelopment };

src/routes/+layout.svelte

@@ -4,7 +4,6 @@
 
   import Header from '$lib/components/Header.svelte';
   import Footer from '$lib/components/Footer.svelte';
-  import Analytics from '$lib/components/Analytics.svelte';
 
   let mounted = false;
 
@@ -15,8 +14,6 @@
   }
 </script>
 
-<Analytics />
-
 {#if mounted}
   <Header />
   <main>

src/routes/viewer/+page.svelte

@@ -24,14 +24,7 @@
     maxSize: 1000000,
   };
 
-  /**
+  function onSubmit() {
-   * Update the flag that indicates that the files were rendered.
-   *
-   * @param {SubmitEvent} e
-   */
-  function onSubmit(e) {
-    e.preventDefault();
-    e.stopPropagation();
     areAcceptedFilesRendered = true;
   }
 
@@ -85,7 +78,11 @@
 
 <Seo {...metadata} />
 
-<form id="form" enctype="multipart/form-data" onsubmit={onSubmit}>
+<form
+  id="form"
+  enctype="multipart/form-data"
+  on:submit|preventDefault|stopPropagation={onSubmit}
+>
   <div class="title-container">
     <h2>{$t('viewer.title')}</h2>
   </div>