restore/update eslint/prettier config

src/components/Card.astro

@@ -1,56 +1,58 @@
 ---
+import type { ImageMetadata } from 'astro';
+
 interface Props {
-  title?: string;
-  image?: ImageMetadata;
-  links?: {
-    label: string;
-    href: string;
-    newWindow?: boolean;
-  }[];
+	title?: string;
+	image?: ImageMetadata;
+	links?: {
+		label: string;
+		href: string;
+		newWindow?: boolean;
+	}[];
 }
 
 const { title, image, links } = Astro.props;
 ---
 
 <div class="card">
-  {image && <img src={image.src} alt="" />}
-  <div>
-    {title && <h2>{title}</h2>}
-    <slot />
-    {
-      links &&
-        links.map((link) => (
-          <a
-            href={link.href}
-            target={link.newWindow ? "_blank" : "_self"}
-            rel="noopener noreferrer"
-          >
-            {link.label}
-          </a>
-        ))
-    }
-  </div>
+	{image && <img src={image.src} alt="" />}
+	<div>
+		{title && <h2>{title}</h2>}
+		<slot />
+		{
+			links &&
+				links.map((link) => (
+					<a
+						href={link.href}
+						target={link.newWindow ? '_blank' : '_self'}
+						rel="noopener noreferrer"
+					>
+						{link.label}
+					</a>
+				))
+		}
+	</div>
 </div>
 
 <style lang="scss">
-  @use "../styles/variables.scss" as *;
+	@use '../styles/variables.scss' as *;
 
-  .card {
-    border: var(--border);
-    border-radius: $radius;
-    overflow: hidden;
+	.card {
+		border: var(--border);
+		border-radius: $radius;
+		overflow: hidden;
 
-    & div {
-      padding: 1rem;
-    }
+		& div {
+			padding: 1rem;
+		}
 
-    & h2 {
-      margin: 0;
-    }
-  }
+		& h2 {
+			margin: 0;
+		}
+	}
 
-  img {
-    object-fit: cover;
-    max-width: 100%;
-  }
+	img {
+		object-fit: cover;
+		max-width: 100%;
+	}
 </style>

src/components/ThemeToggle.astro

@@ -1,68 +1,68 @@
 ---
-import BrushIcon from "../../assets/svg/paintbrush.svg";
+
 ---
 
 <div class="toggles">
-  <div>
-    <input id="sans-serif-toggle" type="checkbox" x-model="serifs" />
-    <label for="sans-serif-toggle">Serifs</label>
-  </div>
-  <div>
-    <input id="dark-mode-toggle" type="checkbox" x-model="darkMode" />
-    <label for="dark-mode-toggle">Dark Mode</label>
-  </div>
+	<div>
+		<input id="sans-serif-toggle" type="checkbox" x-model="serifs" />
+		<label for="sans-serif-toggle">Serifs</label>
+	</div>
+	<div>
+		<input id="dark-mode-toggle" type="checkbox" x-model="darkMode" />
+		<label for="dark-mode-toggle">Dark Mode</label>
+	</div>
 </div>
 
 <style lang="scss">
-  @use "../styles/variables.scss" as *;
+	@use '../styles/variables.scss' as *;
 
-  .toggles {
-    padding: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
+	.toggles {
+		padding: 1rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 12px;
 
-    div {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
+		div {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+	}
 
-  input {
-    position: relative;
-    appearance: none;
-    height: 24px;
-    width: 38px;
-    padding: 10px;
-    background-color: var(--orange);
-    border-radius: 120px;
+	input {
+		position: relative;
+		appearance: none;
+		height: 24px;
+		width: 38px;
+		padding: 10px;
+		background-color: var(--orange);
+		border-radius: 120px;
 
-    &:checked {
-      background-color: var(--sky);
-    }
+		&:checked {
+			background-color: var(--sky);
+		}
 
-    &:after {
-      content: "";
-      position: absolute;
-      height: 22px;
-      width: 22px;
-      border-radius: 100%;
-      background-color: var(--background);
-      left: 1px;
-      top: 1px;
-      transition: $quick-transition;
-    }
+		&:after {
+			content: '';
+			position: absolute;
+			height: 22px;
+			width: 22px;
+			border-radius: 100%;
+			background-color: var(--background);
+			left: 1px;
+			top: 1px;
+			transition: $quick-transition;
+		}
 
-    &:checked:after {
-      left: 15px;
-    }
-  }
+		&:checked:after {
+			left: 15px;
+		}
+	}
 
-  @media (max-width: 516px) {
-    .toggles {
-      flex-direction: column;
-    }
-  }
+	@media (max-width: 516px) {
+		.toggles {
+			flex-direction: column;
+		}
+	}
 </style>