Add biome to code format

Author: kamiazya

README.md

@@ -5,37 +5,29 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati
 ### Installation
 
 ```
-$ yarn
+$ pnpm install
 ```
 
 ### Local Development
 
 ```
-$ yarn start
+$ pnpm start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Build
 
 ```
-$ yarn build
+$ pnpm build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Deployment
+### Format
 
 Using SSH:
 
 ```
-$ USE_SSH=true yarn deploy
+$ pnpm format
 ```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

biome.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noShadowRestrictedNames": "off"
+      },
+      "style": {
+        "noUnusedTemplateLiteral": "off",
+        "noNonNullAssertion": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      }
+    }
+  }
+}

docusaurus.config.ts

@@ -3,7 +3,6 @@ import npm2yarn from '@docusaurus/remark-plugin-npm2yarn';
 import type { Config } from '@docusaurus/types';
 import { themes as prismThemes } from 'prism-react-renderer';
 
-
 const config: Config = {
   title: 'ts-graphviz',
   tagline: 'Graphviz libraries for TypeScript',
@@ -54,7 +53,8 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: 'https://socialify.git.ci/ts-graphviz/ts-graphviz/image?description=1&font=Jost&forks=1&logo=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F63964583%3Fv%3D4&name=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Auto',
+    image:
+      'https://socialify.git.ci/ts-graphviz/ts-graphviz/image?description=1&font=Jost&forks=1&logo=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F63964583%3Fv%3D4&name=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Auto',
     navbar: {
       title: 'ts-graphviz',
       logo: {
@@ -68,13 +68,13 @@ const config: Config = {
           position: 'left',
           label: 'Guides',
         },
-        {to: '/playground', label: 'Playground', position: 'left'},
+        { to: '/playground', label: 'Playground', position: 'left' },
         {
           href: 'https://ts-graphviz.github.io/ts-graphviz/',
           label: 'API Reference',
           position: 'left',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        { to: '/blog', label: 'Blog', position: 'left' },
         {
           type: 'localeDropdown',
           position: 'right',

examples/preview/main.ts

@@ -1,11 +1,11 @@
-import { Graphviz } from "@hpcc-js/wasm-graphviz";
+import { Graphviz } from '@hpcc-js/wasm-graphviz';
 import { highlightElement } from 'prismjs';
-import "prismjs/components/prism-dot";
+import 'prismjs/components/prism-dot';
 import 'prismjs/themes/prism-okaidia.css';
 import { RootGraph, toDot } from 'ts-graphviz';
 
-const graphElement = document.getElementById("graph")!;
-const codeElement = document.getElementById("code")!;
+const graphElement = document.getElementById('graph')!;
+const codeElement = document.getElementById('code')!;
 
 import('./diagram.js').then(async (module) => {
   const graphviz = await Graphviz.load();
@@ -26,5 +26,4 @@ import('./diagram.js').then(async (module) => {
       break;
     }
   }
-
 });

examples/preview/tsconfig.json

@@ -1,10 +1,14 @@
 {
-  "include": ["**/*.ts"],
+  "include": [
+    "**/*.ts"
+  ],
   "compilerOptions": {
     "target": "ES2020",
     "module": "ES2020",
     "moduleResolution": "Bundler",
-    "lib": ["DOM"],
+    "lib": [
+      "DOM"
+    ],
     "strict": true,
     "esModuleInterop": true
   }

package.json

@@ -12,7 +12,8 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "format": "biome check --write ."
   },
   "dependencies": {
     "@docusaurus/core": "3.5.2",
@@ -26,6 +27,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@docusaurus/module-type-aliases": "3.5.2",
     "@docusaurus/tsconfig": "3.5.2",
     "@docusaurus/types": "3.5.2",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 /**
  * Creating a sidebar enables you to:
@@ -12,7 +12,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  */
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
 
   // But you can create a sidebar manually
   /*

sidebars.ts

@@ -14,8 +14,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/undraw_code_typing.svg').default,
     description: (
       <>
-        It provides models in the DOT language.
-        TypeScript type definitions are also provided for attributes and even attribute types.
+        It provides models in the DOT language. TypeScript type definitions are
+        also provided for attributes and even attribute types.
       </>
     ),
   },
@@ -24,8 +24,9 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/undraw_omega.svg').default,
     description: (
       <>
-        Designed to be object-oriented, it provides APIs that can be adapted to both imperative and declarative APIs.
-        You can choose the paradigm that best fits your project.
+        Designed to be object-oriented, it provides APIs that can be adapted to
+        both imperative and declarative APIs. You can choose the paradigm that
+        best fits your project.
       </>
     ),
   },
@@ -34,14 +35,16 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/undraw_bookshelves.svg').default,
     description: (
       <>
-        The library is split into multiple packages, each serving a specific purpose.
-        This modular design allows users to pick and choose the functionality they need, resulting in improved maintainability and flexibility.
+        The library is split into multiple packages, each serving a specific
+        purpose. This modular design allows users to pick and choose the
+        functionality they need, resulting in improved maintainability and
+        flexibility.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -60,8 +63,8 @@ export default function HomepageFeatures(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
         <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+          {FeatureList.map((props) => (
+            <Feature key={props.title} {...props} />
           ))}
         </div>
       </div>

src/components/HomepageFeatures/index.tsx

@@ -1,5 +1,5 @@
 import StackBlitz from '@site/src/components/StackBlitz';
-import { EmbedOptions, ProjectFiles } from "@stackblitz/sdk";
+import type { EmbedOptions, ProjectFiles } from '@stackblitz/sdk';
 
 const files: ProjectFiles = {
   'index.html': `<!DOCTYPE html>
@@ -99,8 +99,12 @@ interface PreviewProps {
   options?: EmbedOptions;
 }
 
-
-export default function PreviewTSGraphvizScript({title, description, script, options}: PreviewProps): JSX.Element {
+export default function PreviewTSGraphvizScript({
+  title,
+  description,
+  script,
+  options,
+}: PreviewProps): JSX.Element {
   return (
     <StackBlitz
       template="node"