run format script on whole project

.github/renovate.json

@@ -1,5 +1,10 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", "schedule:weekly", "group:allNonMajor", ":automergeMinor"],
+  "extends": [
+    "config:base",
+    "schedule:weekly",
+    "group:allNonMajor",
+    ":automergeMinor"
+  ],
   "rangeStrategy": "bump"
 }

.prettierrc.mjs

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

package.json

@@ -11,7 +11,8 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "test": "vitest"
+    "test": "vitest",
+    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "dependencies": {
     "@astrojs/svelte": "^5.0.0",

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ]
+  "extends": ["config:recommended"]
 }

repositories.json

@@ -150,11 +150,7 @@
     },
     "description": "GoatFlix fork of Overseerr",
     "owner": "nhitz",
-    "topics": [
-      "plex",
-      "radarr",
-      "sonarr"
-    ],
+    "topics": ["plex", "radarr", "sonarr"],
     "stars": 0,
     "forks": 0,
     "watchers": 0,
@@ -257,12 +253,7 @@
     },
     "description": "Testing out PrimeVue theming with Vue 3 and Vite. Demo deployed to Azure free tier with GitHub Actions.",
     "owner": "nhitz",
-    "topics": [
-      "primefaces",
-      "primevue",
-      "vite",
-      "vue"
-    ],
+    "topics": ["primefaces", "primevue", "vite", "vue"],
     "stars": 0,
     "forks": 0,
     "watchers": 0,

src/components/DotsButton.astro

@@ -1,5 +1,5 @@
 ---
-import {Icon} from "astro-icon/components";
+import { Icon } from "astro-icon/components";
 
 interface Props {
   size?: "md" | "lg";

src/components/HomepageCard.astro

@@ -22,7 +22,8 @@ const { extraText } = Astro.props;
 >
   <div class="w-40">
     <div class="relative group mx-auto h-40 w-full flex-none shadow-lg">
-      <img class="homepage-card-image"
+      <img
+        class="homepage-card-image"
         src={imageUrl}
         alt={title}
         class="object-cover h-full w-full rounded-md shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"

src/components/LikeButton.astro

@@ -1,5 +1,5 @@
 ---
-import {Icon} from "astro-icon/components";
+import { Icon } from "astro-icon/components";
 
 interface Props {
   size?: "md" | "lg";

src/components/PageHeader.astro

@@ -1,5 +1,5 @@
 ---
-import {Icon} from "astro-icon/components";
+import { Icon } from "astro-icon/components";
 ---
 
 <div

src/components/PlayButton.astro

@@ -1,5 +1,5 @@
 ---
-import {Icon} from "astro-icon/components";
+import { Icon } from "astro-icon/components";
 
 interface Props {
   size?: "md" | "lg";

src/components/PlaylistDetailedList.astro

@@ -1,12 +1,11 @@
 ---
 import PlaylistCard from "./PlaylistCard.astro";
-import {morePlaylists} from "../lib/musicData";
+import { morePlaylists } from "../lib/musicData";
 ---
 
 <div class="px-6 relative z-10 mt-4">
-    <h2 class="text-2xl font-bold">Made for you</h2>
-    <div class="flex flex-wrap mt-6 gap-4">
-        {morePlaylists.map((playlist) =>
-                <PlaylistCard playlist={playlist}/>)}
-    </div>
+  <h2 class="text-2xl font-bold">Made for you</h2>
+  <div class="flex flex-wrap mt-6 gap-4">
+    {morePlaylists.map((playlist) => <PlaylistCard playlist={playlist} />)}
+  </div>
 </div>

src/components/PlaylistSimpleList.astro

@@ -3,6 +3,8 @@ import { playlists } from "../lib/musicData";
 import PlaylistItemCard from "./PlaylistItemCard.astro";
 ---
 
-<div class="grid gap-y-4 gap-x-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 mt-6">
+<div
+  class="grid gap-y-4 gap-x-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 mt-6"
+>
   {playlists.map((playlist) => <PlaylistItemCard playlist={playlist} />)}
 </div>

src/components/PureInlineOwners.astro

@@ -1,6 +1,6 @@
 ---
 interface Props {
-    owner: string;
+  owner: string;
 }
 
 const { owner } = Astro.props;

src/components/RepoDetailedList.astro

@@ -1,10 +1,15 @@
 ---
 import RepositoryCard from "./RepositoryCard.astro";
-import {repositories} from "../lib/githubData";
+import { repositories } from "../lib/githubData";
 ---
+
 <div class="px-6 relative z-10 mt-4">
-    <h2 class="text-2xl font-bold">The same repos displayed differently...</h2>
-    <div class="flex flex-wrap mt-6 gap-4">
-        {repositories.map((repository) => <RepositoryCard repository={repository}/>)}
-    </div>
+  <h2 class="text-2xl font-bold">The same repos displayed differently...</h2>
+  <div class="flex flex-wrap mt-6 gap-4">
+    {
+      repositories.map((repository) => (
+        <RepositoryCard repository={repository} />
+      ))
+    }
+  </div>
 </div>

src/components/RepoSimpleList.astro

@@ -3,6 +3,12 @@ import { repositories } from "../lib/githubData";
 import RepositoryItemCard from "./RepositoryItemCard.astro";
 ---
 
-<div class="grid gap-y-4 gap-x-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 mt-6">
-  {repositories.map((repository) => (<RepositoryItemCard repository={repository} />))}
+<div
+  class="grid gap-y-4 gap-x-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 mt-6"
+>
+  {
+    repositories.map((repository) => (
+      <RepositoryItemCard repository={repository} />
+    ))
+  }
 </div>

src/components/RepositoryCard.astro

@@ -3,37 +3,37 @@ import type { Repository } from "../lib/githubData";
 import PlayButton from "./PlayButton.astro";
 import PureInlineOwners from "./PureInlineOwners.astro";
 interface Props {
-    repository: Repository;
+  repository: Repository;
 }
 
 const { repository } = Astro.props;
 ---
 
 <a
-        href={`/repositories/${repository.id}`}
-        class="playlist-card p-4 flex-col items-center group relative transition-all duration-300 overflow-hidden gap-5 rounded-md shadow-lg hover:shadow-xl outline-none bg-zinc-500/5 hover:bg-zinc-500/20 focus:bg-zinc-500/20"
-        data-color={repository.color.dark}
-        transition:name=`playlist ${repository.id} box`
+  href={`/repositories/${repository.id}`}
+  class="playlist-card p-4 flex-col items-center group relative transition-all duration-300 overflow-hidden gap-5 rounded-md shadow-lg hover:shadow-xl outline-none bg-zinc-500/5 hover:bg-zinc-500/20 focus:bg-zinc-500/20"
+  data-color={repository.color.dark}
+  transition:name=`playlist ${repository.id} box`
 >
-    <div class="w-40">
-        <div class="relative group mx-auto h-40 w-full flex-none shadow-lg">
-            <div
-                    class="absolute right-2 bottom-2 translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all"
-                    transition:name=`playlist ${repository.id} play`
-            >
-                <PlayButton />
-            </div>
-        </div>
-        <div class="pt-2">
-            <div
-                    class="font-bold block truncate"
-                    transition:name=`playlist ${repository.id} title`
-            >
-                {repository.name}
-            </div>
-            <div class="text-gray-400 text-xs">
-                <PureInlineOwners owner={repository.owner} />
-            </div>
-        </div>
+  <div class="w-40">
+    <div class="relative group mx-auto h-40 w-full flex-none shadow-lg">
+      <div
+        class="absolute right-2 bottom-2 translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all"
+        transition:name=`playlist ${repository.id} play`
+      >
+        <PlayButton />
+      </div>
     </div>
+    <div class="pt-2">
+      <div
+        class="font-bold block truncate"
+        transition:name=`playlist ${repository.id} title`
+      >
+        {repository.name}
+      </div>
+      <div class="text-gray-400 text-xs">
+        <PureInlineOwners owner={repository.owner} />
+      </div>
+    </div>
+  </div>
 </a>

src/components/RepositoryItemCard.astro

@@ -15,7 +15,9 @@ const { repository } = Astro.props;
   transition:name=`playlist ${repository.id} box`
 >
   <div
-    class="font-bold block"transition:name=`playlist ${repository.id} title`>
+    class="font-bold block"
+    transition:name=`playlist ${repository.id} title`
+  >
     {repository.name}
   </div>
   <div

src/components/RepositoryTable.astro

@@ -1,33 +1,43 @@
 ---
 import PureInlineOwners from "./PureInlineOwners.astro";
 import InlineOwners from "./InlineOwners.astro";
-import {repositories} from "../lib/githubData";
-const {id} = Astro.params;
-const repository = repositories.find((repository) => repository.id.toString() === id);
+import { repositories } from "../lib/githubData";
+const { id } = Astro.params;
+const repository = repositories.find(
+  (repository) => repository.id.toString() === id
+);
 ---
 
 <table class="table-auto text-left min-w-full divide-y-2 divide-gray-500/30">
-    <thead>
+  <thead>
     <tr class="text-gray-300">
-        <th class="font-normal px-4 py-2 whitespace-nowrap">#</th>
-        <th class="font-normal px-4 py-2 whitespace-nowrap">Title</th>
-        <th class="font-normal px-4 py-2 whitespace-nowrap">Link</th>
+      <th class="font-normal px-4 py-2 whitespace-nowrap">#</th>
+      <th class="font-normal px-4 py-2 whitespace-nowrap">Title</th>
+      <th class="font-normal px-4 py-2 whitespace-nowrap">Link</th>
     </tr>
-    </thead>
-    <tbody>
+  </thead>
+  <tbody>
     {
+      (
         <tr class="text-gray-100">
-            <!--<td class="px-4 py-2 whitespace-nowrap">{index + 1}</td>-->
-            <td class="px-4 py-2 whitespace-nowrap">
-                <a href={repository?.url} class="hover:underline">{repository?.name}</a>
-                <!--<InlineOwners owners={repo.owner} />-->
-            </td>
-            <td class="px-4 py-2 whitespace-nowrap">
-                <a href={repository?.url} class="hover:underline">{repository?.name}</a>
-                <PureInlineOwners owner={repository?.owner || ''}/>
-            </td>
-            <td class="px-4 py-2 whitespace-nowrap text-right">{repository?.updated_at}</td>
+          {/* <td class="px-4 py-2 whitespace-nowrap">{index + 1}</td> */}
+          <td class="px-4 py-2 whitespace-nowrap">
+            <a href={repository?.url} class="hover:underline">
+              {repository?.name}
+            </a>
+            {/* <InlineOwners owners={repo.owner} /> */}
+          </td>
+          <td class="px-4 py-2 whitespace-nowrap">
+            <a href={repository?.url} class="hover:underline">
+              {repository?.name}
+            </a>
+            <PureInlineOwners owner={repository?.owner || ""} />
+          </td>
+          <td class="px-4 py-2 whitespace-nowrap text-right">
+            {repository?.updated_at}
+          </td>
         </tr>
+      )
     }
-    </tbody>
+  </tbody>
 </table>

src/components/Side/SideItemMusic.astro

@@ -23,11 +23,7 @@ const { playlist } = Astro.props;
     />
   </div>
   <div class="flex flex-auto flex-col truncate">
-    <div class="font-semibold w-full flex-none truncate">
-      Music
-    </div>
-    <div class="text-gray-400 text-sm truncate flex-1">
-      Spotify
-    </div>
+    <div class="font-semibold w-full flex-none truncate">Music</div>
+    <div class="text-gray-400 text-sm truncate flex-1">Spotify</div>
   </div>
 </a>

src/components/Side/SideItemRepos.astro

@@ -21,11 +21,9 @@ const { playlist } = Astro.props;
     />
   </div>
   <div class="flex flex-auto flex-col truncate">
-    <div class="font-semibold w-full flex-none truncate">
-      Git Repos
-    </div>
+    <div class="font-semibold w-full flex-none truncate">Git Repos</div>
     <div class="text-gray-400 text-sm truncate flex-1">
-      <PureInlineOwners owner=nhitz />
+      <PureInlineOwners owner="nhitz" />
     </div>
   </div>
 </a>

src/components/Side/SideMenuItem.astro

@@ -1,5 +1,5 @@
 ---
-import {Icon} from "astro-icon/components";
+import { Icon } from "astro-icon/components";
 
 type Props = {
   href?: string;

src/layouts/Layout.astro

@@ -67,7 +67,7 @@ declare global {
       window.coloradTimeout = null;
       for (const playlist of document.querySelectorAll(".playlist-item")) {
         playlist.addEventListener("mouseover", () =>
-          onMouseOverColorad(playlist)
+          onMouseOverColorad(playlist),
         );
         playlist.addEventListener("mouseout", onMouseOutColorad);
         playlist.addEventListener("focus", () => onMouseFocusColorad(playlist));
@@ -87,7 +87,7 @@ declare global {
           if (!dataColor) return;
           window.coloradTimeout = setTimeout(
             () => setContainerColor(dataColor),
-            200
+            200,
           );
         }
       }