config(biome): experimental html full support

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

biome.json

@@ -39,19 +39,6 @@
     "indentStyle": "space",
     "indentWidth": 2
   },
-  "overrides": [
-    {
-      "includes": ["**/*.astro"],
-      "linter": {
-        "rules": {
-          "correctness": {
-            "noUnusedImports": "off",
-            "noUnusedVariables": "off"
-          }
-        }
-      }
-    }
-  ],
   "css": {
     "formatter": {
       "enabled": true
@@ -60,6 +47,12 @@
       "tailwindDirectives": true
     }
   },
+  "html": {
+    "formatter": {
+      "enabled": true
+    },
+    "experimentalFullSupportEnabled": true
+  },
   "javascript": {
     "formatter": {
       "quoteStyle": "single"

src/components/DownloadButton.astro

@@ -10,7 +10,6 @@ export interface Props {
 
 const { item } = Astro.props;
 ---
-
 <a
   href={item.url}
   class:list={[
@@ -21,7 +20,7 @@ const { item } = Astro.props;
   ]}
 >
   <div class="flex flex-row gap-2 items-center">
-    <Icon name="line-md:cloud-alt-download-filled" size={24} />
+    <Icon name="line-md:cloud-alt-download-filled" size={24}/>
     <span>{item.name}</span>
   </div>
 </a>

src/components/Footer.astro

@@ -1,9 +1,12 @@
 ---
-import { Icon } from 'astro-icon/components';
-import { siteMetadata, URLs } from '~/constants';
+
+
+
+import { Icon } from "astro-icon/components";
+import { siteMetadata, URLs } from "~/constants";
 
 const { currentPathname } = Astro.props;
-const isHomepage = currentPathname === '/';
+const isHomepage = currentPathname === "/";
 ---
 
 <div

src/components/GitHubRepo.astro

@@ -42,7 +42,6 @@ const loadRepoStats = async (): Promise<RepoStats> => {
 
 const { forks, stars, latestReleaseName } = await loadRepoStats();
 ---
-
 <a
   href={URLs.GITHUB.REPO}
   target="_blank"
@@ -53,20 +52,20 @@ const { forks, stars, latestReleaseName } = await loadRepoStats();
   <section
     class="flex flex-row gap-2 items-center motion-preset-pop hover:motion-preset-oscillate hover:motion-duration-500"
   >
-    <Icon name="mdi:github" size={32} class="w-6 sm:w-10" />
+    <Icon name="mdi:github" size={32} class="w-6 sm:w-10"/>
     <div class="font-light max-sm:hidden">
       <div class="text-sm">{siteMetadata.repo.fullName}</div>
       <div class="flex flex-row gap-2 text-xs">
         <div class="flex flex-row gap-0.5 items-center">
-          <Icon name="mdi:tag-outline" />
+          <Icon name="mdi:tag-outline"/>
           {latestReleaseName}
         </div>
         <div class="flex flex-1 gap-0.5 items-center">
-          <Icon name="mdi:star-outline" />
+          <Icon name="mdi:star-outline"/>
           {stars}
         </div>
         <div class="flex flex-1 gap-0.5 items-center">
-          <Icon name="mdi:source-branch" />
+          <Icon name="mdi:source-branch"/>
           {forks}
         </div>
       </div>

src/components/GoogleAnalytics.astro

@@ -1,12 +1,14 @@
 <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-QXML81DEDV"
+<script
+  async
+  src="https://www.googletagmanager.com/gtag/js?id=G-QXML81DEDV"
 ></script>
 <script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag("js", new Date());
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag('js', new Date());
 
-  gtag("config", "G-QXML81DEDV");
+gtag('config', 'G-QXML81DEDV');
 </script>

src/components/Hero.astro

@@ -5,21 +5,20 @@ import LatestRelease from '~/components/LatestRelease.astro';
 import Logo from '~/components/Logo.astro';
 import { siteMetadata } from '~/constants';
 ---
-
 <div class="bg-gitify-hero">
   <div
     class="container flex flex-col md:flex-row lg:items-center max-w-5xl mx-auto px-12 py-8 lg:py-16"
   >
     <div class="flex flex-col justify-center grow">
-      <Logo className="w-16 lg:w-24 mb-4" isDark />
+      <Logo className="w-16 lg:w-24 mb-4" isDark/>
 
       <h1 class="text-2xl lg:text-4xl font-semibold">{siteMetadata.title}</h1>
 
       <h2 class="mt-2 text-xl lg:text-2xl font-light">
         {siteMetadata.description}.
       </h2>
 
-      <LatestRelease />
+      <LatestRelease/>
     </div>
 
     <div class="motion-preset-pop motion-rotate-in-[-30deg]">

src/components/LatestRelease.astro

@@ -1,15 +1,46 @@
 ---
-import { Icon } from 'astro-icon/components';
-import { format } from 'date-fns';
-import { Octokit } from 'octokit';
-import DownloadButton from '~/components/DownloadButton.astro';
-import { siteMetadata, URLs } from '~/constants';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { Icon } from "astro-icon/components";
+import { format } from "date-fns";
+import { Octokit } from "octokit";
+import DownloadButton from "~/components/DownloadButton.astro";
+import { siteMetadata, URLs } from "~/constants";
 import type {
   DownloadLink,
   DownloadLinks,
   HeroData,
   ReleaseAsset,
-} from '~/types';
+} from "~/types";
 
 const octokit = new Octokit();
 
@@ -21,41 +52,41 @@ const getDownloadLinks = (assets: ReleaseAsset[]): DownloadLinks => {
 
   const supportedOSs: DownloadLink[] = [
     {
-      os: 'macOS',
-      name: 'macOS (Universal)',
+      os: "macOS",
+      name: "macOS (Universal)",
       url: getAssetLink(/Gitify-\d+.\d+.\d+-universal.dmg/g),
       isPrimary: true,
     },
     {
-      os: 'Windows',
-      name: 'Windows',
+      os: "Windows",
+      name: "Windows",
       url: getAssetLink(/Gitify-Setup-\d+.\d+.\d+.exe/g),
       isPrimary: true,
     },
     {
-      os: 'Linux',
-      name: 'Linux (AppImage)',
+      os: "Linux",
+      name: "Linux (AppImage)",
       url: getAssetLink(/Gitify-\d+.\d+.\d+.AppImage/g),
       isPrimary: true,
     },
     {
-      os: 'Linux',
-      name: 'Linux (deb)',
+      os: "Linux",
+      name: "Linux (deb)",
       url: getAssetLink(/gitify_\d+.\d+.\d+_amd64.deb/g),
     },
     {
-      os: 'Linux',
-      name: 'Linux (rpm)',
+      os: "Linux",
+      name: "Linux (rpm)",
       url: getAssetLink(/gitify-\d+.\d+.\d+.x86_64.rpm/g),
     },
   ];
 
   const primaryDownloadLinks = supportedOSs.filter(
-    ({ isPrimary, url }) => url && isPrimary,
+    ({ isPrimary, url }) => url && isPrimary
   );
 
   const altDownloadLinks = supportedOSs.filter(
-    ({ isPrimary, url }) => url && !isPrimary,
+    ({ isPrimary, url }) => url && !isPrimary
   );
 
   return {
@@ -79,17 +110,17 @@ const loadInitialData = async (): Promise<HeroData> => {
       downloadLinks,
       version: latestRelease.data.name,
       releaseDate: latestRelease.data.published_at
-        ? format(latestRelease.data.published_at, 'dd/MM/yyyy')
-        : '',
+        ? format(latestRelease.data.published_at, "dd/MM/yyyy")
+        : "",
     };
   } catch (error) {
     return {
       downloadLinks: {
         alt: [],
         primary: [],
       },
-      version: '',
-      releaseDate: '',
+      version: "",
+      releaseDate: "",
     };
   }
 };

src/components/Logo.astro

@@ -12,7 +12,6 @@ const DARK_GRADIENT_END = '#555B6E';
 
 const { isDark = false, className = '' } = Astro.props;
 ---
-
 <svg
   class={className}
   xmlns="http://www.w3.org/2000/svg"
@@ -30,17 +29,20 @@ const { isDark = false, className = '' } = Astro.props;
     >
       <stop
         stop-color={isDark ? DARK_GRADIENT_START : LIGHT_GRADIENT_START}
-        offset="0%"></stop>
+        offset="0%"
+      ></stop>
       <stop
         stop-color={isDark ? DARK_GRADIENT_END : LIGHT_GRADIENT_END}
-        offset="100%"></stop>
+        offset="100%"
+      ></stop>
     </linearGradient>
   </defs>
   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g
       id="Logo"
       transform="translate(6.000000, 6.000000)"
-      fill={`url(${isDark ? '#linearGradient-dark' : '#linearGradient-light'})`}
+      fill={`url(${isDark ? '#linearGradient-dark' : '#linearGradient-light'}
+      )`}
       fill-rule="nonzero"
     >
       <path

src/components/Navbar.astro

@@ -1,10 +1,41 @@
 ---
-import GitHubRepo from '~/components/GitHubRepo.astro';
-import Logo from '~/components/Logo.astro';
-import { siteMetadata } from '~/constants';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import GitHubRepo from "~/components/GitHubRepo.astro";
+import Logo from "~/components/Logo.astro";
+import { siteMetadata } from "~/constants";
 
 const { currentPathname } = Astro.props;
-const isHomepage = currentPathname === '/';
+const isHomepage = currentPathname === "/";
 ---
 
 <nav class:list={["py-10 px-8", isHomepage && "bg-gitify-hero"]}>