Reformat .astro files for prettier-plugin-astro v1, plus small link/markup fixes

src/components/CommonHead.astro

@@ -26,5 +26,9 @@ const title = propTitle ? `${propTitle} - sebdanielsson.dev` : "sebdanielsson.de
   title={title}
   href={new URL("rss.xml", Astro.site)}
 />
-<script is:inline src="https://app.rybbit.io/api/script.js" data-site-id="1c03f27e15ab" defer
+<script
+  is:inline
+  src="https://app.rybbit.io/api/script.js"
+  data-site-id="1c03f27e15ab"
+  defer
 ></script>

src/components/DockerHubCard.astro

@@ -35,13 +35,18 @@ const { owner, repo, github_url, hub_details } = image.data;
         <p>{shortenNumberWithK(hub_details.star_count)} stars</p>
       </div>
       <div class="inline-flex items-center gap-1">
-        <svg fill="none" aria-hidden="true" viewBox="0 0 24 24" class="size-5"
-          ><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg
-        >
+        <svg fill="none" aria-hidden="true" viewBox="0 0 24 24" class="size-5">
+          <path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
+        </svg>
         <p>{shortenNumberWithK(hub_details.pull_count)} pulls</p>
       </div>
       <div class="inline-flex items-center">
-        <span>View source on <a href={github_url} target="_blank">GitHub</a></span>
+        <span>
+          View source on{" "}
+          <a href={github_url} target="_blank" rel="noopener noreferrer">
+            GitHub
+          </a>
+        </span>
       </div>
     </div>
   </div>

src/components/Footer.astro

@@ -9,5 +9,10 @@ const year = new Date().getFullYear(); */
 
 <footer class="flex flex-col items-center py-12 text-xs text-neutral-300">
   <!-- <span>&copy; {year} {siteName}</span> -->
-  <span>Commit: <a href=`${repoUrl}/` target="_blank">{COMMIT_ID}</a></span>
+  <span>
+    Commit:{" "}
+    <a href={repoUrl} target="_blank" rel="noopener noreferrer">
+      {COMMIT_ID}
+    </a>
+  </span>
 </footer>

src/components/FormattedDate.astro

@@ -6,6 +6,4 @@ interface Props {
 const { date } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
-  {date.toISOString().slice(0, 10)}
-</time>
+<time datetime={date.toISOString()}>{date.toISOString().slice(0, 10)}</time>

src/components/GitHubRepoCard.astro

@@ -22,17 +22,16 @@ const repoData = repo.data;
       </div>
       <p class="text-sm text-gray-400">{repoData.description}</p>
       <div class="flex flex-wrap gap-x-2 py-1">
-        {
-          repoData.topics.map((topic: string) => (
-            <a
-              href={`https://github.com/topics/${topic}`}
-              target="_blank"
-              class="text-[10px] font-semibold text-gray-400 uppercase"
-            >
-              {topic}
-            </a>
-          ))
-        }
+        {repoData.topics.map((topic: string) => (
+          <a
+            href={`https://github.com/topics/${topic}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-[10px] font-semibold text-gray-400 uppercase"
+          >
+            {topic}
+          </a>
+        ))}
       </div>
     </div>
   </div>

src/components/Header.astro

@@ -26,52 +26,47 @@ const profileLinks: { label: string; href: string }[] = [
 <nav class="sticky top-0 z-50 bg-neutral-950/70 py-4 backdrop-blur-sm">
   <div class="main-width flex h-8 flex-row items-center gap-2 sm:gap-8">
     <a href="/" class="flex flex-row items-center gap-3">
-      <span
-        class="hidden text-xl font-bold text-white hover:text-[var(--accent-light)] md:block md:text-2xl"
-        >sebdanielsson.dev</span
-      >
+      <span class="hidden text-xl font-bold text-white hover:text-[var(--accent-light)] md:block md:text-2xl">
+        sebdanielsson.dev
+      </span>
     </a>
     <div class="flex flex-1 flex-row items-center gap-2 text-sm sm:gap-6 sm:text-base">
-      {
-        textLinks.map(({ label, href }) => (
-          <a
-            aria-current={Astro.url.pathname === href}
-            class:list={[
-              "passing-underline",
-              "!text-white",
-              "hover:!text-white",
-              {
-                active:
-                  Astro.url.pathname === href ||
-                  (href !== "/" && Astro.url.pathname.startsWith(href)),
-              },
-            ]}
-            href={href}
-          >
-            {label}
-          </a>
-        ))
-      }
+      {textLinks.map(({ label, href }) => (
+        <a
+          aria-current={Astro.url.pathname === href}
+          class:list={[
+            "passing-underline",
+            "!text-white",
+            "hover:!text-white",
+            {
+              active:
+                Astro.url.pathname === href ||
+                (href !== "/" && Astro.url.pathname.startsWith(href)),
+            },
+          ]}
+          href={href}
+        >
+          {label}
+        </a>
+      ))}
     </div>
     <div class="flex flex-row items-center gap-2 sm:gap-3">
       <ThemeSwitcher />
-      {
-        profileLinks.map(({ label, href }) => (
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="!text-white hover:!text-[var(--accent-light)]"
-          >
-            <span class="sr-only">Go to my {label} profile</span>
-            {href.includes("github.com") ? (
-              <GitHubSvg />
-            ) : href.includes("linkedin.com") ? (
-              <LinkedInSvg />
-            ) : null}
-          </a>
-        ))
-      }
+      {profileLinks.map(({ label, href }) => (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="!text-white hover:!text-[var(--accent-light)]"
+        >
+          <span class="sr-only">Go to my {label} profile</span>
+          {href.includes("github.com") ? (
+            <GitHubSvg />
+          ) : href.includes("linkedin.com") ? (
+            <LinkedInSvg />
+          ) : null}
+        </a>
+      ))}
     </div>
   </div>
 </nav>

src/components/ItemCard.astro

@@ -30,9 +30,7 @@ const imageSrcPromise = getImageImport(item.image)();
     class="absolute inset-0 h-full w-full object-cover transition duration-700 ease-in-out group-hover:blur-md"
   />
 
-  <div
-    class="absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 opacity-0 transition-opacity duration-700 ease-in-out group-hover:opacity-100"
-  >
+  <div class="absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 opacity-0 transition-opacity duration-700 ease-in-out group-hover:opacity-100">
     <div class="flex flex-col items-center gap-2 px-4 text-center text-slate-200">
       <h6 class="text-base font-bold">{item.name}</h6>
       <p class="text-sm" set:html={item.description} />

src/components/MDXInteractive.astro

@@ -9,24 +9,22 @@ const { variables, syntax = "double-braces" } = Astro.props;
 
 <div class="mdx-interactive-container my-6" data-syntax={syntax}>
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-    {
-      variables.map((variable) => (
-        <div>
-          <label for={variable.id} class="mb-2 block text-sm font-medium text-gray-300">
-            {variable.label}
-          </label>
-          <input
-            type="text"
-            id={variable.id}
-            name={variable.id}
-            value={variable.defaultValue}
-            placeholder={variable.placeholder || variable.defaultValue}
-            class="mdx-input w-full rounded-md border border-[var(--accent-main)] bg-[var(--accent-background)] px-3 py-2 text-white placeholder-gray-400 focus:border-transparent focus:ring-2 focus:ring-[var(--accent-main)] focus:outline-none"
-            data-variable={variable.id}
-          />
-        </div>
-      ))
-    }
+    {variables.map((variable) => (
+      <div>
+        <label for={variable.id} class="mb-2 block text-sm font-medium text-gray-300">
+          {variable.label}
+        </label>
+        <input
+          type="text"
+          id={variable.id}
+          name={variable.id}
+          value={variable.defaultValue}
+          placeholder={variable.placeholder || variable.defaultValue}
+          class="mdx-input w-full rounded-md border border-[var(--accent-main)] bg-[var(--accent-background)] px-3 py-2 text-white placeholder-gray-400 focus:border-transparent focus:ring-2 focus:ring-[var(--accent-main)] focus:outline-none"
+          data-variable={variable.id}
+        />
+      </div>
+    ))}
   </div>
 </div>
 

src/components/RaycastStoreCard.astro

@@ -31,11 +31,9 @@ const icon = extension.data.icons.light || extension.data.icons.dark;
           </a>
         </div>
         <div class="flex flex-wrap items-center gap-x-2">
-          {
-            extension.data.categories.map((category: string) => (
-              <span class="rounded-sm bg-white px-1 text-[10px] text-black">{category}</span>
-            ))
-          }
+          {extension.data.categories.map((category: string) => (
+            <span class="rounded-sm bg-white px-1 text-[10px] text-black">{category}</span>
+          ))}
         </div>
       </div>
       <div class="flex flex-col gap-2">
@@ -54,9 +52,7 @@ const icon = extension.data.icons.light || extension.data.icons.dark;
                 d="M9.996 18.204c4.499 0 8.212-3.713 8.212-8.204 0-4.491-3.72-8.205-8.22-8.205-4.49 0-8.196 3.714-8.196 8.205 0 4.49 3.713 8.204 8.204 8.204Zm0-1.634A6.54 6.54 0 0 1 3.442 10a6.53 6.53 0 0 1 6.546-6.562c3.642 0 6.57 2.92 6.578 6.562a6.547 6.547 0 0 1-6.57 6.57Zm0-10.633c-.405 0-.706.286-.706.69v3.738l.071 1.618-.714-.88-.888-.929a.651.651 0 0 0-.484-.206.632.632 0 0 0-.651.643c0 .19.055.349.19.484l2.619 2.65c.182.182.349.27.563.27.222 0 .405-.096.571-.27l2.619-2.65a.677.677 0 0 0 .19-.484.632.632 0 0 0-.65-.643.623.623 0 0 0-.484.206l-.881.92-.722.897.071-1.626V6.628c0-.405-.301-.69-.714-.69Z"
               ></path>
             </svg>
-            <p class="text-[11px]">
-              {shortenNumberWithK(extension.data.download_count)} installs
-            </p>
+            <p class="text-[11px]">{shortenNumberWithK(extension.data.download_count)} installs</p>
           </div>
         </div>
       </div>

src/components/Tags.astro

@@ -3,14 +3,12 @@ const { tags } = Astro.props;
 ---
 
 <div class="flex flex-wrap gap-2">
-  {
-    tags.map((tag: string) => (
-      <a
-        href={`/blog/tags/${tag}`}
-        class="inline-block rounded-full border-1 px-3 py-1 text-xs font-semibold text-white hover:border-white hover:text-white"
-      >
-        {tag}
-      </a>
-    ))
-  }
+  {tags.map((tag: string) => (
+    <a
+      href={`/blog/tags/${tag}`}
+      class="inline-block rounded-full border-1 px-3 py-1 text-xs font-semibold text-white hover:border-white hover:text-white"
+    >
+      {tag}
+    </a>
+  ))}
 </div>

src/components/ThemeSwitcher.astro

@@ -1,5 +1,4 @@
 ---
-
 ---
 
 <div class="theme-dropdown group relative inline-block">
@@ -11,15 +10,13 @@
       <path
         fill="currentColor"
         d="M6 21q-1.125 0-2.225-.55T2 19q.65 0 1.325-.513T4 17q0-1.25.875-2.125T7 14t2.125.875T10 17q0 1.65-1.175 2.825T6 21m5.75-6L9 12.25l8.95-8.95q.275-.275.688-.288t.712.288l1.35 1.35q.3.3.3.7t-.3.7z"
-      >
-      </path>
+      ></path>
     </svg>
   </div>
   <ul
     class="absolute top-10 -left-full z-50 hidden rounded-sm border border-[var(--accent-main)] bg-[var(--accent-background)] p-2 group-[.active]:block"
     id="theme-options"
-  >
-  </ul>
+  ></ul>
 </div>
 <script>
   interface ThemeColors {

src/layouts/BlogList.astro

@@ -18,47 +18,45 @@ const { posts, title, description } = Astro.props;
   <main class="main-width flex flex-col py-4 sm:py-8 md:py-12">
     <slot name="header" />
     <ul class="m-0 mx-auto flex w-full max-w-[800px] list-none flex-wrap justify-between gap-8 p-0">
-      {
-        posts.map((post, index) => (
-          <li
-            class={`flex w-full flex-col gap-3 transition-all duration-200 ease-in-out ${index !== 0 ? "sm:w-[calc(50%-1rem)]" : ""}`}
-          >
-            {post.data.heroImage && post.data.heroImageAlt && (
-              <a
-                href={`/${post.id}/`}
-                aria-label={`Read more about ${post.data.title}`}
-                class="group"
-              >
-                <Picture
-                  src={post.data.heroImage}
-                  alt={post.data.heroImageAlt}
-                  formats={["avif", "webp"]}
-                  fallbackFormat="webp"
-                  class="rounded-xl group-hover:shadow-[var(--box-shadow)]"
-                  loading={posts[0]?.id === post.id ? "eager" : "lazy"}
-                />
-              </a>
-            )}
-            <a href={`/${post.id}/`}>
-              <h3
-                class={`!my-0 transition-all duration-200 ease-in-out ${index === 0 ? "!text-xl sm:!text-2xl md:!text-3xl" : "!text-xl md:!text-2xl"}`}
-              >
-                {post.data.title}
-              </h3>
+      {posts.map((post, index) => (
+        <li
+          class={`flex w-full flex-col gap-3 transition-all duration-200 ease-in-out ${index !== 0 ? "sm:w-[calc(50%-1rem)]" : ""}`}
+        >
+          {post.data.heroImage && post.data.heroImageAlt && (
+            <a
+              href={`/${post.id}/`}
+              aria-label={`Read more about ${post.data.title}`}
+              class="group"
+            >
+              <Picture
+                src={post.data.heroImage}
+                alt={post.data.heroImageAlt}
+                formats={["avif", "webp"]}
+                fallbackFormat="webp"
+                class="rounded-xl group-hover:shadow-[var(--box-shadow)]"
+                loading={posts[0]?.id === post.id ? "eager" : "lazy"}
+              />
             </a>
-            <p class="text-sm transition-all duration-200 ease-in-out">
-              <FormattedDate date={post.data.pubDate} />
-              {post.data.updatedDate && (
-                <>
-                  | Updated <FormattedDate date={post.data.updatedDate} />
-                </>
-              )}
-            </p>
-            <p class="text-base transition-all duration-200 ease-in-out">{post.data.description}</p>
-            <Tags tags={post.data.tags} />
-          </li>
-        ))
-      }
+          )}
+          <a href={`/${post.id}/`}>
+            <h3
+              class={`!my-0 transition-all duration-200 ease-in-out ${index === 0 ? "!text-xl sm:!text-2xl md:!text-3xl" : "!text-xl md:!text-2xl"}`}
+            >
+              {post.data.title}
+            </h3>
+          </a>
+          <p class="text-sm transition-all duration-200 ease-in-out">
+            <FormattedDate date={post.data.pubDate} />
+            {post.data.updatedDate && (
+              <>
+                | Updated <FormattedDate date={post.data.updatedDate} />
+              </>
+            )}
+          </p>
+          <p class="text-base transition-all duration-200 ease-in-out">{post.data.description}</p>
+          <Tags tags={post.data.tags} />
+        </li>
+      ))}
     </ul>
   </main>
 </Layout>