migrate to biome (#944)

* migrate to biome

* cleanup

* fix

* use tsx

* script tweaks

* fix test runs

* path tweaks

.config/astro.config.ts

@@ -1,12 +1,13 @@
-import { defineConfig } from 'astro/config'
-import { remarkLeadParagraph } from '../src/lib/remark-lead-paragraph/remark-lead-paragraph'
-import { remarkToc } from '../src/lib/remark-toc/remark-toc'
 import react from '@astrojs/react'
 import sitemap from '@astrojs/sitemap'
+import type { RemarkPlugins } from 'astro'
 import expressiveCode from 'astro-expressive-code'
 import redirectFrom from 'astro-redirect-from'
-import config from './blog.config'
+import { defineConfig } from 'astro/config'
 import { getSlug } from '../src/lib/astro/getSlug'
+import { remarkLeadParagraph } from '../src/lib/remark-lead-paragraph/remark-lead-paragraph'
+import { remarkToc } from '../src/lib/remark-toc/remark-toc'
+import config from './blog.config'
 
 // https://astro.build/config
 export default defineConfig({
@@ -15,7 +16,7 @@ export default defineConfig({
   cacheDir: '.astro',
   trailingSlash: 'always',
   markdown: {
-    remarkPlugins: [remarkLeadParagraph, remarkToc as any],
+    remarkPlugins: [remarkLeadParagraph, remarkToc] as unknown as RemarkPlugins,
     shikiConfig: {
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md
       theme: 'nord',

.config/husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

README.md

@@ -140,7 +140,7 @@ If you want to know how, have a look at the respective components:
 
 All SVG assets under `src/images/` and from select iconset dependencies are converted to Astro & React components before building the site. Compiled components are placed under `src/images/components/` and all include the cleaned SVGs as inline HTML.
 
-All SVGs can then be imported from `@images/components` in all Astro or React components.
+All SVGs can then be imported from `@/images/components` in all Astro or React components.
 
 If you want to know how this works, have a look at the script:
 
@@ -177,18 +177,12 @@ npm start
 
 ### 🔮 Linting
 
-ESlint, Prettier, and Stylelint are setup for all linting purposes:
+[Biome](https://biomejs.dev) is setup for all linting and formatting purposes:
 
 ```bash
 npm run lint
 ```
 
-To automatically format all code files:
-
-```bash
-npm run format
-```
-
 ### 🔮 Type Checking
 
 Type checking can be invoked to check all TypeScript code, including within .astro files:

biome.json

@@ -0,0 +1,26 @@
+{
+  "extends": ["@kremalicious/config/biome"],
+  "overrides": [
+    {
+      "include": ["*.astro"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useConst": "off",
+            "useImportType": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["*.test.ts", "*.test.tsx"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noExplicitAny": "off"
+          }
+        }
+      }
+    }
+  ]
+}

content/_schemas.ts

@@ -1,4 +1,4 @@
-import { z, type ImageFunction } from 'astro:content'
+import { type ImageFunction, z } from 'astro:content'
 
 const schemaShared = {
   title: z.string(),

content/articles/2012-07-16-using-kbd-for-fun-and-profit/_post-kbd.css

@@ -21,11 +21,7 @@ article kbd {
     rgb(0 0 0 / 0%)
   );
   background-repeat: repeat-x;
-  box-shadow:
-    0 2px 0 #bbb,
-    0 3px 1px #999,
-    0 3px 0 #bbb,
-    inset 0 1px 1px #fff,
+  box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff,
     inset 0 -1px 3px #ccc;
 }
 
@@ -40,11 +36,8 @@ article kbd.dark {
     rgb(0 0 0 / 0%)
   );
   background-repeat: no-repeat;
-  box-shadow:
-    0 2px 0 #000,
-    0 3px 1px #999,
-    inset 0 1px 1px #aaa,
-    inset 0 -1px 3px #272727;
+  box-shadow: 0 2px 0 #000, 0 3px 1px #999, inset 0 1px 1px #aaa, inset 0 -1px
+    3px #272727;
 }
 
 article kbd.ios {
@@ -55,10 +48,8 @@ article kbd.ios {
   background-color: #b7b7bc;
   background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
   background-repeat: repeat-x;
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 60%),
-    0 2px 3px rgb(0 0 0 / 10%),
-    inset 0 1px 0 #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 3px rgb(0 0 0 / 10%), inset 0
+    1px 0 #fff;
 }
 
 article kbd.android {
@@ -70,24 +61,15 @@ article kbd.android {
   border-radius: 3px;
   background-clip: padding-box;
   background-color: #5e5e5e;
-  box-shadow:
-    0 2px 2px rgb(0 0 0 / 30%),
-    0 1px 0 #444,
-    inset 0 1px 0 #868686;
+  box-shadow: 0 2px 2px rgb(0 0 0 / 30%), 0 1px 0 #444, inset 0 1px 0 #868686;
 }
 
 article kbd.android.dark {
   background: #222;
-  box-shadow:
-    0 2px 2px rgb(0 0 0 / 70%),
-    0 1px 0 #444,
-    inset 0 1px 0 #505050;
+  box-shadow: 0 2px 2px rgb(0 0 0 / 70%), 0 1px 0 #444, inset 0 1px 0 #505050;
 }
 
 article kbd.android.color {
   background: #083c5b;
-  box-shadow:
-    0 2px 2px rgb(0 0 0 / 70%),
-    0 1px 0 #444,
-    inset 0 1px 0 #36647b;
+  box-shadow: 0 2px 2px rgb(0 0 0 / 70%), 0 1px 0 #444, inset 0 1px 0 #36647b;
 }