chore: linting

Author: KodingDev

.eslintrc.cjs

@@ -1,24 +1,18 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: [
-    'plugin:svelte/recommended',
-    'plugin:svelte/prettier',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier'
-  ],
+  extends: ['plugin:svelte/recommended', 'plugin:svelte/prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
   plugins: ['@typescript-eslint', 'prettier'],
   ignorePatterns: ['*.cjs'],
   rules: {
     'prettier/prettier': 'error',
     '@typescript-eslint/no-non-null-assertion': 'off',
     'svelte/no-at-html-tags': 'off',
-    'svelte/html-self-closing': 'off'
+    'svelte/html-self-closing': 'off',
   },
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   overrides: [
     {
@@ -27,13 +21,13 @@ module.exports = {
 
       // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
       parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
+        parser: '@typescript-eslint/parser',
+      },
+    },
   ],
   env: {
     browser: true,
     es2017: true,
-    node: true
-  }
+    node: true,
+  },
 };

mdsvex.config.js

@@ -5,18 +5,18 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 const config = defineMDSveXConfig({
   extensions: ['.md', '.svx'],
   smartypants: {
-    dashes: 'oldschool'
+    dashes: 'oldschool',
   },
 
   rehypePlugins: [
     rehypeSlug,
     [
       rehypeAutolinkHeadings,
       {
-        behavior: 'wrap'
-      }
-    ]
-  ]
+        behavior: 'wrap',
+      },
+    ],
+  ],
 });
 
 export default config;

postcss.config.cjs

@@ -6,8 +6,8 @@ const config = {
     //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
     tailwindcss(),
     //But others, like autoprefixer, need to run after,
-    autoprefixer
-  ]
+    autoprefixer,
+  ],
 };
 
 module.exports = config;

src/components/art/CommissionCard.svelte

@@ -8,11 +8,7 @@
   <div
     class="flex flex-col overflow-clip rounded-lg border-[1px] border-neutral-300 bg-neutral-100 bg-opacity-70 transition-all hover:scale-[101%] dark:border-neutral-700 dark:bg-neutral-800"
   >
-    <img
-      src={getURL(commission.images[0])}
-      alt={commission.title}
-      class="aspect-square object-cover object-top"
-    />
+    <img src={getURL(commission.images[0])} alt={commission.title} class="aspect-square object-cover object-top" />
 
     <div class="p-4">
       <h2 class="font-medium text-blue-400">{commission.title}</h2>

src/components/art/CommissionImage.svelte

@@ -13,10 +13,7 @@
   href={src}
   target="_blank"
   rel="noopener noreferrer"
-  class={clsx(
-    'relative overflow-clip rounded-3xl transition-all hover:scale-[101%] hover:shadow-2xl',
-    className
-  )}
+  class={clsx('relative overflow-clip rounded-3xl transition-all hover:scale-[101%] hover:shadow-2xl', className)}
 >
   <img {src} alt={title} class="aspect-auto h-full w-full object-cover" />
 

src/components/art/CommissionPage.svelte

@@ -6,31 +6,17 @@
   export let commission: CommissionData;
 </script>
 
-<div
-  class={clsx(
-    'flex flex-col content-between gap-6',
-    commission.layout === 'horizontal' ? 'lg:flex-row' : ''
-  )}
->
+<div class={clsx('flex flex-col content-between gap-6', commission.layout === 'horizontal' ? 'lg:flex-row' : '')}>
   <div class="flex flex-col gap-6">
     <h1 class="text-4xl font-bold">{commission.title}</h1>
 
     <div class="flex flex-row gap-4">
       {#if commission.artist.icon}
-        <img
-          src={commission.artist.icon}
-          alt={commission.artist.name}
-          class="h-12 w-12 rounded-full object-cover"
-        />
+        <img src={commission.artist.icon} alt={commission.artist.name} class="h-12 w-12 rounded-full object-cover" />
       {/if}
 
       {#if commission.artist.link}
-        <a
-          href={commission.artist.link}
-          class="group flex flex-col"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <a href={commission.artist.link} class="group flex flex-col" target="_blank" rel="noopener noreferrer">
           <span>By {commission.artist.name}</span>
           <IconLink href={commission.artist.link} />
         </a>
@@ -53,12 +39,7 @@
         <ul class="flex flex-col gap-4 sm:flex-row">
           {#each commission.links as link}
             <li>
-              <a
-                href={link.href}
-                class="group flex flex-col"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href={link.href} class="group flex flex-col" target="_blank" rel="noopener noreferrer">
                 <span>{link.text}</span>
                 <IconLink href={link.href} />
               </a>

src/components/base/GradientCanvas.svelte

@@ -14,18 +14,12 @@
       ctx.fillRect(x, y, 1, 1);
     };
 
-    const calcR = (x: number, y: number, t: number) =>
-      Math.floor(192 + 64 * Math.cos((x * x - y * y) / 300 + t));
+    const calcR = (x: number, y: number, t: number) => Math.floor(192 + 64 * Math.cos((x * x - y * y) / 300 + t));
 
-    const calcG = (x: number, y: number, t: number) =>
-      Math.floor(70 + (64 * (x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3))) / 300);
+    const calcG = (x: number, y: number, t: number) => Math.floor(70 + (64 * (x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3))) / 300);
 
     const calcB = (x: number, y: number, t: number) =>
-      Math.floor(
-        192 +
-          64 *
-            Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)
-      );
+      Math.floor(192 + 64 * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100));
 
     const draw = () => {
       for (let x = 0; x <= 35; x++) {
@@ -46,9 +40,4 @@
   });
 </script>
 
-<canvas
-  bind:this={canvas}
-  width="32"
-  height="32"
-  class="h-full w-full opacity-0 transition-all duration-500"
-/>
+<canvas bind:this={canvas} width="32" height="32" class="h-full w-full opacity-0 transition-all duration-500" />

src/components/base/NavBar.svelte

@@ -11,17 +11,13 @@
   }[] = [
     { label: 'Home', to: '/', mode: 'exact' },
     { label: 'Art', to: '/art' },
-    { label: 'Blog', to: '/blog' }
+    { label: 'Blog', to: '/blog' },
   ];
 </script>
 
 <div class="flex flex-row justify-between">
   <div class="flex flex-row items-center gap-6">
-    <img
-      src="https://avatars.githubusercontent.com/u/23714764?v=4"
-      alt="Stella"
-      class="h-10 w-10 rounded-full"
-    />
+    <img src="https://avatars.githubusercontent.com/u/23714764?v=4" alt="Stella" class="h-10 w-10 rounded-full" />
 
     {#each links as { label, to, mode }}
       <NavLink {to} {mode}>{label}</NavLink>

src/components/generic/IconLink.svelte

@@ -6,14 +6,8 @@
   export let suffix: string | undefined = `${domain} →`;
 </script>
 
-<div
-  class="flex flex-row items-center gap-1 text-neutral-400 transition-all group-hover:text-neutral-200"
->
+<div class="flex flex-row items-center gap-1 text-neutral-400 transition-all group-hover:text-neutral-200">
   {#if prefix}<span>{prefix}</span>{/if}
-  <img
-    src={`https://www.google.com/s2/favicons?domain=${domain}&sz=64`}
-    alt={domain}
-    class="h-4 w-4 object-cover"
-  />
+  <img src={`https://www.google.com/s2/favicons?domain=${domain}&sz=64`} alt={domain} class="h-4 w-4 object-cover" />
   {#if suffix}<span>{suffix}</span>{/if}
 </div>

src/components/home/Client.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-  import type {
-    DateProperty,
-    NotionPage,
-    RichTextProperty,
-    TitleProperty,
-    UrlProperty
-  } from '$lib/notion';
+  import type { DateProperty, NotionPage, RichTextProperty, TitleProperty, UrlProperty } from '$lib/notion';
   import NotionRichText from '$lib/notion/blocks/NotionRichText.svelte';
 
   export let client: NotionPage;
@@ -21,7 +15,7 @@
   const formatDate = (date: Date) =>
     date.toLocaleDateString('en-US', {
       month: 'long',
-      year: 'numeric'
+      year: 'numeric',
     });
 
   const start = formatDate(new Date(date.date.start));
@@ -34,11 +28,7 @@
   >
     {#if client.cover}
       <div class="relative">
-        <img
-          src={client.cover[client.cover.type].url}
-          class="h-40 w-full object-cover"
-          alt="Company cover"
-        />
+        <img src={client.cover[client.cover.type].url} class="h-40 w-full object-cover" alt="Company cover" />
 
         {#if client.icon}
           <img