feat: add lint workflow and fix lint errors

CNSeniorious000 · Jun 30, 2024 · 70061b4 · 70061b4 · vercel · Jun 30, 2024
1 parent b66db27
commit 70061b4
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 53 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,37 @@
+name: CI
+
+on: [push, fork, pull_request, workflow_dispatch]
+
+jobs:
+
+  typos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: crate-ci/typos@master
+
+  lint:
+    strategy:
+      matrix:
+        os: [ubuntu, windows, macos]
+      fail-fast: false
+    runs-on: ${{ matrix.os }}-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
diff --git a/src/components/Themetoggle.svelte b/src/components/Themetoggle.svelte
@@ -1,56 +1,3 @@
-<div bind:this={themeToggle} id="themeToggle" class="h-10 w-10 flex items-center justify-center rounded-md transition-colors hover:bg-$c-fg-5">
-  <svg class="theme_toggle_svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" color="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">
-    <mask id="myMask">
-      <rect x="0" y="0" width="100%" height="100%" fill="white" />
-      <circle bind:this={themeCircle1} class="theme_toggle_circle1" fill="black" cx="100%" cy="0%" />
-    </mask>
-    <circle bind:this={themeCircle2} class="theme_toggle_circle2" cx="12" cy="12" fill="currentColor" mask="url(#myMask)" />
-    <g class="theme_toggle_g" stroke="currentColor" opacity="1">
-      <line x1="12" y1="1" x2="12" y2="3" />
-      <line x1="12" y1="21" x2="12" y2="23" />
-      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-      <line x1="1" y1="12" x2="3" y2="12" />
-      <line x1="21" y1="12" x2="23" y2="12" />
-      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-    </g>
-  </svg>
-</div>
-
-<style>
-  #themeToggle {
-    border: 0;
-    cursor: pointer;
-  }
-  .theme_toggle_circle1 {
-    transition: cx 0.5s, cy 0.5s;
-    cx: 100%;
-    cy: 0%;
-  }
-  .theme_toggle_circle2 {
-    transition: r 0.3s;
-  }
-  .theme_toggle_svg {
-    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    transform: rotate(90deg);
-  }
-  .theme_toggle_g {
-    transition: opacity 0.5s;
-    opacity: 1;
-  }
-  :global(html.dark) #themeToggle .theme_toggle_circle1 {
-    cx: 50%;
-    cy: 23%;
-  }
-  :global(html.dark) #themeToggle .theme_toggle_svg {
-    transform: rotate(40deg);
-  }
-  :global(html.dark) #themeToggle .theme_toggle_g {
-    opacity: 0;
-  }
-</style>
-
 <script lang="ts">
   import { onMount } from 'svelte'
   import { trackEvent } from '@/utils/track'
@@ -105,3 +52,56 @@
     themeToggle.addEventListener('click', handleToggleClick)
   })
 </script>
+
+<div bind:this={themeToggle} id="themeToggle" class="h-10 w-10 flex items-center justify-center rounded-md transition-colors hover:bg-$c-fg-5">
+  <svg class="theme_toggle_svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" color="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">
+    <mask id="myMask">
+      <rect x="0" y="0" width="100%" height="100%" fill="white" />
+      <circle bind:this={themeCircle1} class="theme_toggle_circle1" fill="black" cx="100%" cy="0%" />
+    </mask>
+    <circle bind:this={themeCircle2} class="theme_toggle_circle2" cx="12" cy="12" fill="currentColor" mask="url(#myMask)" />
+    <g class="theme_toggle_g" stroke="currentColor" opacity="1">
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </g>
+  </svg>
+</div>
+
+<style>
+  #themeToggle {
+    border: 0;
+    cursor: pointer;
+  }
+  .theme_toggle_circle1 {
+    transition: cx 0.5s, cy 0.5s;
+    cx: 100%;
+    cy: 0%;
+  }
+  .theme_toggle_circle2 {
+    transition: r 0.3s;
+  }
+  .theme_toggle_svg {
+    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    transform: rotate(90deg);
+  }
+  .theme_toggle_g {
+    transition: opacity 0.5s;
+    opacity: 1;
+  }
+  :global(html.dark) #themeToggle .theme_toggle_circle1 {
+    cx: 50%;
+    cy: 23%;
+  }
+  :global(html.dark) #themeToggle .theme_toggle_svg {
+    transform: rotate(40deg);
+  }
+  :global(html.dark) #themeToggle .theme_toggle_g {
+    opacity: 0;
+  }
+</style>