Add prettier-plugin-svelte and format everything

elfenware · Nov 22, 2024 · a3f586a · a3f586a
1 parent a22732e
commit a3f586a
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 136 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -2,7 +2,7 @@ name: Build and publish to GitHub Pages
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel='preconnect' href='https://fonts.gstatic.com'>
-	  <link rel='preload' href='/icons/remixicon.woff2?t=1607859683539'>
-    <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/icons/remixicon.css'>
-	  <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap' rel='stylesheet'>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link rel="preload" href="/icons/remixicon.woff2?t=1607859683539" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/icons/remixicon.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Obliviate</title>
   </head>

diff --git a/src/.prettierrc.json b/src/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/src/App.svelte b/src/App.svelte
@@ -112,11 +112,11 @@
       cipher,
       site.toLowerCase(),
       10000,
-      16
+      16,
     );
 
     const indices = new Uint8Array(derivedBuffer).map(
-      (byte) => byte % allowedCharacters.length
+      (byte) => byte % allowedCharacters.length,
     );
 
     derivedPassword = Array.from(indices)
@@ -133,63 +133,20 @@
   }
 
   function handleCopyWithoutSymbols() {
-    copy(derivedPassword.replaceAll(/[^0-9a-z]/ig, ""));
+    copy(derivedPassword.replaceAll(/[^0-9a-z]/gi, ""));
     copyWithoutSymbolsText = "Copied!";
     setTimeout(() => {
       copyWithoutSymbolsText = "Copy without symbols";
     }, 1000);
   }
 </script>
 
-<style>
-  main {
-    display: grid;
-    grid-template-columns:
-      minmax(1.2rem, 1fr)
-      minmax(auto, 24rem)
-      minmax(1.2rem, 1fr);
-    grid-template-rows: auto 1fr auto;
-  }
-
-  article {
-    grid-column: 2;
-    display: grid;
-    grid-template-columns: 5rem auto 2rem;
-    column-gap: 0.5rem;
-    align-items: center;
-  }
-
-  label {
-    grid-column: 1;
-    justify-self: end;
-    text-align: right;
-  }
-
-  input,
-  button:not(.toggle):not(.info) {
-    grid-column: 2;
-  }
-
-  button.toggle,
-  button.info {
-    grid-column: 3;
-  }
-
-  .derived {
-    background: transparent;
-    border: none;
-    color: var(--fg-color);
-    margin: 0;
-    padding-left: 0;
-    font-weight: bold;
-  }
-</style>
-
 <main>
   <Header
     on:info={() => {
       showInfoModal = true;
-    }} />
+    }}
+  />
 
   <article>
     <label for="site">Site:</label>
@@ -199,64 +156,72 @@
       id="site"
       placeholder="GitHub"
       bind:value={site}
-      oninput={handleDerive} />
+      oninput={handleDerive}
+    />
 
     <button class="info" tabindex="-1">
       <i
         class="ri-information-line"
         title="Site is not case-sensitive. “GitHub” equals “github”."
-        aria-label="Site is not case-sensitive. “GitHub” equals “github”."></i>
+        aria-label="Site is not case-sensitive. “GitHub” equals “github”."
+      ></i>
     </button>
 
     <label for="cipher">Cipher key:</label>
 
     <!-- Svelte won't allow bind:value when type is dynamic. -->
     <input
-      type={showCipher ? 'text' : 'password'}
+      type={showCipher ? "text" : "password"}
       id="cipher"
       placeholder="correct horse battery staple"
       value={cipher}
       oninput={(e) => {
         cipher = e.target.value;
         handleDerive();
-      }} />
+      }}
+    />
 
     <button
       class="toggle"
       disabled={!cipher}
-      onclick={() => (showCipher = !showCipher)}>
+      onclick={() => (showCipher = !showCipher)}
+    >
       <i
-        class={showCipher ? 'ri-eye-line' : 'ri-eye-off-line'}
+        class={showCipher ? "ri-eye-line" : "ri-eye-off-line"}
         title="Show/hide cipher key"
-        aria-label="Show/hide cipher key"></i>
+        aria-label="Show/hide cipher key"
+      ></i>
     </button>
 
     <label for="derived-password">Password:</label>
 
     <input
       disabled
-      type={showDerivedPassword ? 'text' : 'password'}
+      type={showDerivedPassword ? "text" : "password"}
       id="derived-password"
       value={derivedPassword}
-      class="derived" />
+      class="derived"
+    />
 
     <button
       class="toggle"
       disabled={!derivedPassword}
-      onclick={() => (showDerivedPassword = !showDerivedPassword)}>
+      onclick={() => (showDerivedPassword = !showDerivedPassword)}
+    >
       <i
-        class={showDerivedPassword ? 'ri-eye-line' : 'ri-eye-off-line'}
+        class={showDerivedPassword ? "ri-eye-line" : "ri-eye-off-line"}
         title="Show/hide password"
-        aria-label="Show/hide password"></i>
+        aria-label="Show/hide password"
+      ></i>
     </button>
 
-    <button
-      disabled={!derivedPassword}
-      onclick={handleCopy}>{copyButtonText}</button>
+    <button disabled={!derivedPassword} onclick={handleCopy}
+      >{copyButtonText}</button
+    >
 
-    <button
-      disabled={!derivedPassword}
-      onclick={handleCopyWithoutSymbols}>{copyWithoutSymbolsText}</button>
+    <button disabled={!derivedPassword} onclick={handleCopyWithoutSymbols}
+      >{copyWithoutSymbolsText}</button
+    >
   </article>
 
   <Footer />
@@ -266,4 +231,49 @@
   isOpen={showInfoModal}
   on:close={() => {
     showInfoModal = false;
-  }} />
+  }}
+/>
+
+<style>
+  main {
+    display: grid;
+    grid-template-columns:
+      minmax(1.2rem, 1fr)
+      minmax(auto, 24rem)
+      minmax(1.2rem, 1fr);
+    grid-template-rows: auto 1fr auto;
+  }
+
+  article {
+    grid-column: 2;
+    display: grid;
+    grid-template-columns: 5rem auto 2rem;
+    column-gap: 0.5rem;
+    align-items: center;
+  }
+
+  label {
+    grid-column: 1;
+    justify-self: end;
+    text-align: right;
+  }
+
+  input,
+  button:not(.toggle):not(.info) {
+    grid-column: 2;
+  }
+
+  button.toggle,
+  button.info {
+    grid-column: 3;
+  }
+
+  .derived {
+    background: transparent;
+    border: none;
+    color: var(--fg-color);
+    margin: 0;
+    padding-left: 0;
+    font-weight: bold;
+  }
+</style>
diff --git a/src/Footer.svelte b/src/Footer.svelte
@@ -1,3 +1,19 @@
+<footer>
+  <p>
+    <a
+      href="https://appcenter.elementary.io/com.github.elfenware.obliviate/"
+      target="_blank"
+      rel="noopener noreferrer">Linux app</a
+    >
+    &middot;
+    <a
+      href="https://github.com/elfenware/obliviate-web"
+      target="_blank"
+      rel="noopener noreferrer">Source code</a
+    >
+  </p>
+</footer>
+
 <style>
   footer {
     grid-column: 2;
@@ -12,17 +28,3 @@
     grid-column: 2;
   }
 </style>
-
-<footer>
-  <p>
-    <a
-      href="https://appcenter.elementary.io/com.github.elfenware.obliviate/"
-      target="_blank"
-      rel="noopener noreferrer">Linux app</a>
-    &middot;
-    <a
-      href="https://github.com/elfenware/obliviate-web"
-      target="_blank"
-      rel="noopener noreferrer">Source code</a>
-  </p>
-</footer>
diff --git a/src/Header.svelte b/src/Header.svelte
@@ -1,11 +1,24 @@
 <script>
-  import { preventDefault } from 'svelte/legacy';
+  import { preventDefault } from "svelte/legacy";
 
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 </script>
 
+<header>
+  <h1>Obliviate</h1>
+  <p class="subtitle">
+    A password manager that forgets your passwords (<a
+      href="#info"
+      onclick={preventDefault(() => {
+        dispatch("info");
+      })}>Wut?</a
+    >)
+  </p>
+  <img src="logo.svg" alt="Obliviate logo" width="48" height="48" />
+</header>
+
 <style>
   header {
     grid-column: 2;
@@ -34,15 +47,3 @@
     justify-self: end;
   }
 </style>
-
-<header>
-  <h1>Obliviate</h1>
-  <p class="subtitle">
-    A password manager that forgets your passwords (<a
-      href="#info"
-      onclick={preventDefault(() => {
-        dispatch('info');
-      })}>Wut?</a>)
-  </p>
-  <img src="logo.svg" alt="Obliviate logo" width="48" height="48" />
-</header>