refactor: extract constants into consts.ts, add prettier tailwind p…

…lugin for class sorting

.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

astro.config.mjs

@@ -3,9 +3,7 @@ import starlight from '@astrojs/starlight';
 import starlightBlog from 'starlight-blog';
 import tailwind from "@astrojs/tailwind";
 import starlightTypeDoc, { typeDocSidebarGroup } from 'starlight-typedoc';
-
-export const GITHUB_URL = 'https://github.com/sern-handler';
-export const DISCORD_URL = 'https://discord.gg/DwbF5H5JgQ';
+import { GITHUB_URL, DISCORD_URL } from '~/utils/consts.ts';
 
 export default defineConfig({
 	integrations: [starlight({

package.json

@@ -24,6 +24,9 @@
     "typescript": "^5.4.5"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.1"
+    "@types/bun": "^1.1.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-tailwindcss": "^0.5.14"
   }
 }

src/components/DeprecatedIcon.astro

@@ -5,7 +5,7 @@ import { Icon } from "@astrojs/starlight/components";
 <span class="group">
   <span class="group-hover:hidden">
     <div
-      class="p-1 h-8 w-8 flex items-center justify-center rounded bg-[var(--sl-color-orange-low)] border border-[var(--sl-color-orange)] text-gray-900 dark:text-white"
+      class="flex h-8 w-8 items-center justify-center rounded border border-[var(--sl-color-orange)] bg-[var(--sl-color-orange-low)] p-1 text-gray-900 dark:text-white"
     >
       <Icon name="warning" />
     </div>

src/components/Modal.astro

@@ -14,26 +14,26 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
 <div>
   <label
     for={modalId}
-    class="flex items-center justify-center px-4 py-2 text-white rounded-lg cursor-pointer bg-accent-600 dark:bg-accent-200 dark:text-gray-900"
+    class="flex cursor-pointer items-center justify-center rounded-lg bg-accent-600 px-4 py-2 text-white dark:bg-accent-200 dark:text-gray-900"
   >
     <b>{button}</b>
-    <Icon name={icon} class="w-6 h-6" />
+    <Icon name={icon} class="h-6 w-6" />
   </label>
 </div>
 
 <div>
   <input
     type="checkbox"
     id={modalId}
-    class="fixed opacity-0 appearance-none peer"
+    class="peer fixed appearance-none opacity-0"
   />
 
   <label
     for={modalId}
-    class="pointer-events-none invisible fixed inset-0 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain backdrop-blur-md bg-gray-800/90 opacity-0 transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100 z-50"
+    class="pointer-events-none invisible fixed inset-0 z-50 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain bg-white/70 opacity-0 backdrop-blur-md transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 dark:bg-gray-800/70 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100"
   >
     <div
-      class="w-5/6 p-4 bg-white border border-gray-300 shadow-lg dark:bg-gray-900 dark:border-gray-700 transform -translate-y-4 scale-95 transition-all duration-200 ease-in-out"
+      class="w-5/6 -translate-y-4 scale-95 transform border border-gray-300 bg-white p-4 shadow-lg transition-all duration-200 ease-in-out dark:border-gray-700 dark:bg-gray-900"
     >
       <h2 class="mb-4 text-xl font-bold">{title}</h2>
       <slot />

src/components/PackageManagers.astro

@@ -40,7 +40,7 @@ const packageManagerCode = (
       Yarn: `yarn create ${text}`,
       PNPM: `pnpm create ${text}`,
       Bun: `bun create ${text}`,
-    }
+    },
   };
 
   return commands[command][manager];

src/components/PluginCard.astro

@@ -17,9 +17,9 @@ const deprecated = plugin.description.includes("[DEPRECATED]");
 ---
 
 <div
-  class="relative p-4 border border-gray-300 dark:border-gray-700 not-content"
+  class="not-content relative border border-gray-300 p-4 dark:border-gray-700"
 >
-  <div class="flex items-center justify-between mb-4">
+  <div class="mb-4 flex items-center justify-between">
     <h3>{plugin.name}</h3>
     {deprecated && <DeprecatedIcon />}
   </div>

src/components/PluginModal.astro

@@ -34,7 +34,7 @@ const authors = new Intl.ListFormat("en", {
 <Modal button="View" icon="right-arrow" title={`${name} by ${authors}`}>
   {
     deprecated && (
-      <div class="mb-4 p-2 rounded-md bg-[var(--sl-color-orange-low)] border border-[var(--sl-color-orange)] text-gray-900 dark:text-white">
+      <div class="mb-4 rounded-md border border-[var(--sl-color-orange)] bg-[var(--sl-color-orange-low)] p-2 text-gray-900 dark:text-white">
         This plugin is deprecated and should not be used in new projects.
       </div>
     )

src/components/SponsorCard.astro

@@ -14,22 +14,22 @@ const {
 ---
 
 <a
-  class="relative flex flex-col items-center p-4 no-underline border border-gray-300 dark:border-gray-700 not-content text-inherit hover:bg-gray-200 dark:hover:bg-gray-800"
+  class="not-content relative flex flex-col items-center border border-gray-300 p-4 text-inherit no-underline hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
   href={`https://opencollective.com/${collectiveSlug}`}
 >
   <div class="flex flex-col items-center text-center">
-    <img class="w-16 h-16 rounded-full" src={image} alt={name} />
+    <img class="h-16 w-16 rounded-full" src={image} alt={name} />
     {
       isAdmin && (
-        <div class="px-2 py-1 mt-2 text-xs font-semibold text-white rounded-full bg-accent-600 dark:bg-accent-200 dark:text-gray-900">
+        <div class="mt-2 rounded-full bg-accent-600 px-2 py-1 text-xs font-semibold text-white dark:bg-accent-200 dark:text-gray-900">
           Admin
         </div>
       )
     }
     <p class="font-semibold">{name}</p>
   </div>
-  <p class="mb-8 text-sm text-center">{publicMessage}</p>
-  <p class="absolute font-semibold text-center bottom-2">
+  <p class="mb-8 text-center text-sm">{publicMessage}</p>
+  <p class="absolute bottom-2 text-center font-semibold">
     ${totalAmountDonated / 100}
   </p>
 </a>

src/overrides/SiteTitle.astro

@@ -33,25 +33,25 @@ const links: Link[] = [
   <StarlightSiteTitle {...Astro.props}><slot /></StarlightSiteTitle>
   <starlight-select class="md:hidden">
     <label
-      class="flex items-center align-center gap-4 ml-4 relative text-[var(--sl-color-white)]"
+      class="align-center relative ml-4 flex items-center gap-4 text-[var(--sl-color-white)]"
     >
       <select
-        class="py-2 bg-transparent cursor-pointer font-semibold appearance-none text-[var(--sl-color-white)] pe-6"
+        class="cursor-pointer appearance-none bg-transparent py-2 pe-6 font-semibold text-[var(--sl-color-white)]"
       >
         <option value="" disabled selected>Menu</option>
         {links.map((link) => <option value={link.href} set:html={link.name} />)}
       </select>
       <Icon
         name="down-caret"
-        class="absolute w-6 h-6 -translate-y-1/2 pointer-events-none end-0 top-1/2"
+        class="pointer-events-none absolute end-0 top-1/2 h-6 w-6 -translate-y-1/2"
       />
     </label>
   </starlight-select>
-  <nav class="items-center hidden gap-4 md:flex ps-4">
+  <nav class="hidden items-center gap-4 ps-4 md:flex">
     {
       links.map((link) => (
         <a
-          class="text-[var(--sl-color-text-accent)] font-semibold no-underline"
+          class="font-semibold text-[var(--sl-color-text-accent)] no-underline"
           href={link.href}
         >
           {link.name}

src/pages/discord.astro

@@ -1,5 +1,5 @@
 ---
-import { DISCORD_URL } from '../../astro.config.mjs'
+import { DISCORD_URL } from "~/utils/consts";
 ---
 
 <meta http-equiv="refresh" content={`0; url=${DISCORD_URL}`} />

src/pages/sponsors.astro

@@ -43,7 +43,7 @@ const sponsors = sponsorResponse.value.data.account.contributors.nodes.filter(
     These amazing people help us keep the project alive. A big thanks from the
     team!
   </p>
-  <div class="grid grid-cols-2 md:grid-cols-5 gap-4 not-content">
+  <div class="not-content grid grid-cols-2 gap-4 md:grid-cols-5">
     {sponsors.map((sponsor) => <SponsorCard {...sponsor} />)}
   </div>
 </StarlightPage>

src/styles/global.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/utils/consts.ts

@@ -0,0 +1,2 @@
+export const GITHUB_URL = "https://github.com/sern-handler";
+export const DISCORD_URL = "https://discord.gg/DwbF5H5JgQ";