use rome as linter & formatter

.trunk/configs/.eslintrc

@@ -1,9 +0,0 @@
-
-
-
-{
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@docusaurus/recommended"],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@docusaurus", "@typescript-eslint"],
-  "root": true
-}

.trunk/configs/.prettierrc

@@ -1,3 +0,0 @@
-{
-  "trailingComma": "none"
-}

.trunk/configs/rome.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/rome/configuration_schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentSize": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  }
+}

.trunk/configs/svgo.config.js

@@ -6,9 +6,9 @@ module.exports = {
 				overrides: {
 					removeViewBox: false, // https://github.com/svg/svgo/issues/1128
 					sortAttrs: true,
-          removeOffCanvasPaths: true
+					removeOffCanvasPaths: true,
-        }
+				},
-      }
+			},
-    }
+		},
-  ]
+	],
 };

.trunk/trunk.yaml

@@ -7,15 +7,17 @@ plugins:
       ref: v0.0.8
       uri: https://github.com/trunk-io/plugins
 lint:
+  disabled:
+    - eslint
+    - prettier
   enabled:
+    - rome@12.0.0
     - markdownlint@0.33.0
     - actionlint@1.6.22
     - gitleaks@8.15.2
     - git-diff-check
     - shellcheck@0.9.0
-    - prettier@2.8.2
     - shfmt@3.5.0
-    - eslint@8.31.0
     - svgo@3.0.2
 runtimes:
   enabled:

docs/configuration/device-config/power.mdx

@@ -7,7 +7,7 @@ sidebar_label: Power
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import calculateADC from "@site/src/utils/calculateADC";
+import calculateADC from "/src/utils/calculateADC";
 
 The power config options are: Power Saving, Shutdown after losing power, ADC Multiplier Override Wait Bluetooth Interval, Mesh Super Deep Sleep Timeout, Super Deep Sleep Interval, Light Sleep Interval and Minimum Wake Interval. Power config uses an admin message sending a `Config.Power` protobuf.
 

docusaurus.config.js

@@ -18,12 +18,12 @@ const config = {
 		announcementBar: {
 			id: "2_0",
 			content:
-        '🎉 Meshtastic 2.0 Has Now Launched! Check it Out <a href="/2.0">Here</a> 🎉'
+				'🎉 Meshtastic 2.0 Has Now Launched! Check it Out <a href="/2.0">Here</a> 🎉',
 		},
 		docs: {
 			sidebar: {
-        autoCollapseCategories: true
+				autoCollapseCategories: true,
-      }
+			},
 		},
 		navbar: {
 			title: "Meshtastic",
@@ -31,16 +31,16 @@ const config = {
 			logo: {
 				alt: "Meshtastic Logo",
 				src: "design/logo/svg/Mesh_Logo_Black.svg",
-        srcDark: "design/logo/svg/Mesh_Logo_White.svg"
+				srcDark: "design/logo/svg/Mesh_Logo_White.svg",
 			},
 			items: [
 				{
 					label: "Docs",
-          to: "docs/introduction"
+					to: "docs/introduction",
 				},
 				{
 					label: "Downloads",
-          to: "downloads"
+					to: "downloads",
 				},
 				{
 					label: "About",
@@ -48,36 +48,36 @@ const config = {
 					items: [
 						{
 							label: "Introduction",
-              to: "docs/introduction"
+							to: "docs/introduction",
 						},
 						{
 							label: "Getting Started",
-              to: "docs/getting-started"
+							to: "docs/getting-started",
 						},
 						{
 							label: "Contributing",
-              to: "docs/contributing"
+							to: "docs/contributing",
 						},
 						{
 							label: "Legal",
-              to: "docs/legal"
+							to: "docs/legal",
 						},
 						{
 							label: "FAQs",
-              to: "docs/faq"
+							to: "docs/faq",
-            }
+						},
-          ]
+					],
 				},
 				{
 					href: "https://github.com/meshtastic",
 					position: "right",
 					className: "header-github-link",
-          "aria-label": "GitHub repository"
+					"aria-label": "GitHub repository",
-        }
+				},
-      ]
+			],
 		},
 		footer: {
-      copyright: `<a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss">Powered by ▲ Vercel</a> | Meshtastic® is a registered trademark of Meshtastic LLC. | <a href="/docs/legal">Legal Information</a>.`
+			copyright: `<a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss">Powered by ▲ Vercel</a> | Meshtastic® is a registered trademark of Meshtastic LLC. | <a href="/docs/legal">Legal Information</a>.`,
 		},
 		algolia: {
 			appId: "IG2GQB8L3V",
@@ -85,10 +85,10 @@ const config = {
 			apiKey: "2e4348812173ec7ea6f7879c7032bb21",
 			indexName: "meshtastic",
 			contextualSearch: false,
-      searchPagePath: "search"
+			searchPagePath: "search",
 		},
 		colorMode: {
-      respectPrefersColorScheme: true
+			respectPrefersColorScheme: true,
 		},
 		mermaid: {
 			theme: { light: "base", dark: "base" },
@@ -99,10 +99,10 @@ const config = {
 					primaryBorderColor: "#4D4D4D",
 					lineColor: "#EAD667",
 					secondaryColor: "#EA67BD",
-          tertiaryColor: "#677CEA"
+					tertiaryColor: "#677CEA",
-        }
+				},
-      }
+			},
-    }
+		},
 	},
 	plugins: [
 		() => {
@@ -112,9 +112,9 @@ const config = {
 					postcssOptions.plugins.push(require("tailwindcss"));
 					postcssOptions.plugins.push(require("autoprefixer"));
 					return postcssOptions;
-        }
+				},
 			};
-    }
+		},
 	],
 	presets: [
 		[
@@ -125,21 +125,21 @@ const config = {
 					sidebarPath: require.resolve("./sidebars.js"),
 					editUrl: "https://github.com/meshtastic/meshtastic/edit/master/",
 					breadcrumbs: false,
-          showLastUpdateAuthor: true
+					showLastUpdateAuthor: true,
 				},
 				theme: {
-          customCss: require.resolve("./src/css/custom.css")
+					customCss: require.resolve("./src/css/custom.css"),
-        }
+				},
-      }
+			},
-    ]
+		],
 	],
 	customFields: {
-    API_URL: process.env.API_URL
+		API_URL: process.env.API_URL,
 	},
 	markdown: {
-    mermaid: true
+		mermaid: true,
 	},
-  themes: ["@docusaurus/theme-mermaid"]
+	themes: ["@docusaurus/theme-mermaid"],
 };
 
 module.exports = config;

package.json

@@ -11,40 +11,37 @@
     "clear": "docusaurus clear"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.16.0",
+    "@algolia/client-search": "^4.17.0",
     "@docusaurus/core": "2.4.0",
     "@docusaurus/plugin-content-docs": "2.4.0",
     "@docusaurus/preset-classic": "2.4.0",
     "@docusaurus/theme-mermaid": "^2.4.0",
-    "@headlessui/react": "^1.7.13",
+    "@headlessui/react": "^1.7.14",
-    "@heroicons/react": "^2.0.17",
+    "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^1.6.22",
-    "@meshtastic/meshtasticjs": "2.1.6-0",
+    "@meshtastic/meshtasticjs": "2.1.9-0",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
     "autoprefixer": "^10.4.14",
     "base64-js": "^1.5.1",
     "dotenv": "^16.0.3",
-    "eslint": "^8.37.0",
     "framer-motion": "^6.5.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.8.0",
     "react-responsive-carousel": "^3.2.23",
-    "swr": "^2.1.1",
+    "swr": "^2.1.5",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "url-search-params-polyfill": "^8.1.1",
     "use-breakpoint": "^3.0.7"
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^2.4.0",
     "@docusaurus/module-type-aliases": "2.4.0",
     "@tailwindcss/typography": "^0.5.9",
     "@tsconfig/docusaurus": "^1.0.7",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.1.3",
-    "@types/react": "^18.0.31",
+    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.4",
-    "typescript": "^5.0.3"
+    "rome": "^12.0.0",
+    "typescript": "^5.0.4"
   }
 }

sidebars.js

@@ -5,7 +5,7 @@ module.exports = {
 	Sidebar: [
 		{
 			type: "autogenerated",
-      dirName: "."
+			dirName: ".",
-    }
+		},
-  ]
+	],
 };

src/components/BatteryCalculator.tsx

@@ -13,10 +13,12 @@ export const BatteryCalculator = (): JSX.Element => {
 					<input placeholder="Search" />
 					<input placeholder="Search" />
 				</div>
-        <div></div>
 			</div>
 			<div className="card__footer">
-        <button className="button button--secondary button--block">
+				<button
+					type="button"
+					className="button button--secondary button--block"
+				>
 					See All
 				</button>
 			</div>

src/components/Modal.tsx

@@ -36,7 +36,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
 					</span>
 					<div className="inline-block w-full transform text-left align-middle transition-all 2xl:max-w-7xl">
 						<div className="group relative">
-              <div className="animate-tilt absolute -inset-0.5 rotate-2 rounded-lg bg-accent shadow-md transition duration-1000 group-hover:opacity-100 group-hover:duration-200"></div>
+							<div className="animate-tilt absolute -inset-0.5 rotate-2 rounded-lg bg-accent shadow-md transition duration-1000 group-hover:opacity-100 group-hover:duration-200" />
 							<div className="relative flex flex-col overflow-hidden rounded-2xl bg-base shadow-md md:aspect-[2/1] md:flex-row md:bg-primary">
 								{children}
 							</div>

src/components/PageLayout.tsx

@@ -11,7 +11,7 @@ export interface PageLayoutProps {
 export const PageLayout = ({
 	title,
 	description,
-  children
+	children,
 }: PageLayoutProps): JSX.Element => {
 	return (
 		<Layout title={title} description={description}>

src/components/hardware/HardwareCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IDevice, Stability } from "@site/src/data/device";
+import { IDevice, Stability } from "../../data/device";
 
 export interface HardwareCardProps {
 	device: IDevice;
@@ -9,7 +9,7 @@ export interface HardwareCardProps {
 
 export const HardwareCard = ({
 	device,
-  setDevice
+	setDevice,
 }: HardwareCardProps): JSX.Element => {
 	return (
 		<li
@@ -17,6 +17,9 @@ export const HardwareCard = ({
 			onClick={() => {
 				setDevice();
 			}}
+			onKeyDown={() => {
+				setDevice();
+			}}
 		>
 			<div className="overflow-hidden rounded-lg">
 				<div

src/components/hardware/HardwareModal.tsx

@@ -5,7 +5,7 @@ import { FiBluetooth, FiChevronRight, FiWifi, FiX } from "react-icons/fi";
 import { useBreakpoint } from "use-breakpoint";
 
 import { Tab } from "@headlessui/react";
-import type { IDevice } from "@site/src/data/device";
+import type { IDevice } from "../../data/device";
 
 import { Button } from "../../components/Button";
 import { BREAKPOINTS } from "../../utils/breakpoints";
@@ -26,7 +26,7 @@ export interface HardwareModal {
 export const HardwareModal = ({
 	device,
 	open,
-  close
+	close,
 }: HardwareModal): JSX.Element => {
 	const [hideDetails, setHideDetails] = useState(false);
 	const { breakpoint } = useBreakpoint(BREAKPOINTS, "md");
@@ -54,10 +54,10 @@ export const HardwareModal = ({
 						hidden: { width: "100%", height: "100%" },
 						hiddenSm: { height: "100%", width: "100%" },
 						visible: { width: "20%", height: "100%" },
-            visibleSm: { height: "33%", width: "100%" }
+						visibleSm: { height: "33%", width: "100%" },
 					}}
 					transition={{
-            type: "just"
+						type: "just",
 					}}
 					className="flex flex-col md:h-full md:flex-row"
 				>
@@ -86,7 +86,7 @@ export const HardwareModal = ({
 									hidden: { rotate: 180 },
 									hiddenSm: { rotate: -90 },
 									visible: { rotate: 0 },
-                  visibleSm: { rotate: 90 }
+									visibleSm: { rotate: 90 },
 								}}
 								onClick={() => {
 									setHideDetails(!hideDetails);

src/components/hardware/Tabs/PinoutTab.tsx

@@ -14,7 +14,7 @@ export const PinoutTab = ({ device }: PinoutTabProps): JSX.Element => {
 			<div className="m-auto flex gap-4 rounded-lg bg-slate-700 px-2 py-1 shadow-md">
 				{[
 					device.pinout.slice(0, device.misc.pinoutSplit),
-          device.pinout.slice(device.misc.pinoutSplit, device.pinout.length)
+					device.pinout.slice(device.misc.pinoutSplit, device.pinout.length),
 				].map((group, index) => (
 					<div key={index}>
 						{group.map((pin, pinIndex) => (

src/components/hardware/VariantSelectButton.tsx

@@ -5,14 +5,14 @@ import { FiCheck } from "react-icons/fi";
 import { HiSelector } from "react-icons/hi";
 
 import { Listbox, Transition } from "@headlessui/react";
-import type { Variant } from "@site/src/data/device.js";
+import type { Variant } from "../../data/device";
 
 export interface VariantSelectButtonProps {
 	options: Variant[];
 }
 
 export const VariantSelectButton = ({
-  options
+	options,
 }: VariantSelectButtonProps): JSX.Element => {
 	const [selected, setSelected] = useState(options[options.length - 1]);
 

src/components/homepage/SocialCard.tsx

@@ -11,7 +11,7 @@ export interface SocialCardProps {
 export const SocialCard = ({
 	children,
 	color,
-  link
+	link,
 }: SocialCardProps): JSX.Element => {
 	return (
 		<div

src/data/device.ts

@@ -5,14 +5,14 @@ export type DeepPartial<T> = T extends object
 	: T;
 
 export enum UseCase {
-  Solar,
+	Solar = 0,
-  Router,
+	Router = 1,
-  Portable
+	Portable = 2,
 }
 
 enum PinUsage {
-  LoRa,
+	LoRa = 0,
-  GNSS
+	GNSS = 1,
 }
 
 export interface Pin {
@@ -44,10 +44,10 @@ export type LORAModule = "SX1276" | "SX1262";
 export type Variant = DeepPartial<Omit<IDevice, "variants">> & { name: string };
 
 export enum Stability {
-  Stable,
+	Stable = 0,
-  Semi,
+	Semi = 1,
-  Unstable,
+	Unstable = 2,
-  Broken
+	Broken = 3,
 }
 
 export type Module =

src/data/devices/heltec.ts

@@ -5,11 +5,11 @@ export const heltec: IDevice = {
 	misc: {
 		Stability: Stability.Unstable,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400"
+		Gradient: "bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400",
 	},
 	images: {
 		Front: "/img/hardware/heltec-v2.png",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const heltec: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const heltec: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/hydra.ts

@@ -5,11 +5,11 @@ export const hydra: IDevice = {
 	misc: {
 		Stability: Stability.Stable,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100"
+		Gradient: "bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100",
 	},
 	images: {
 		Front: "/img/hardware/Hydra-PCB.2.1.svg",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const hydra: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const hydra: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/nano_g1.ts

@@ -5,11 +5,11 @@ export const nano_g1: IDevice = {
 	misc: {
 		Stability: Stability.Unstable,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-r from-green-200 to-green-500"
+		Gradient: "bg-gradient-to-r from-green-200 to-green-500",
 	},
 	images: {
 		Front: "/img/hardware/nano_g1_front.svg",
-    Back: "/img/hardware/nano_g1_back.svg"
+		Back: "/img/hardware/nano_g1_back.svg",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const nano_g1: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const nano_g1: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/rak19001.ts

@@ -5,11 +5,11 @@ export const rak19001: IDevice = {
 	misc: {
 		Stability: Stability.Stable,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-r from-indigo-300 to-purple-400"
+		Gradient: "bg-gradient-to-r from-indigo-300 to-purple-400",
 	},
 	images: {
 		Front: "/img/hardware/rak/RAK19001.png",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const rak19001: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const rak19001: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/rak19003.ts

@@ -5,11 +5,11 @@ export const rak19003: IDevice = {
 	misc: {
 		Stability: Stability.Stable,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-b from-orange-500 to-yellow-300"
+		Gradient: "bg-gradient-to-b from-orange-500 to-yellow-300",
 	},
 	images: {
 		Front: "/img/hardware/rak/RAK19003.png",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const rak19003: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const rak19003: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/tbeam.ts

@@ -6,11 +6,11 @@ export const tbeam: IDevice = {
 		Stability: Stability.Stable,
 		SuggestedUse: [UseCase.Portable],
 		Gradient: "bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500",
-    pinoutSplit: 13
+		pinoutSplit: 13,
 	},
 	images: {
 		Front: "/img/hardware/tbeam-v1.1.svg",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -21,8 +21,8 @@ export const tbeam: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -36,33 +36,33 @@ export const tbeam: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
 	],
 	pinout: [
 		{
@@ -70,208 +70,208 @@ export const tbeam: IDevice = {
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "VN",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "RST",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "15",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "35",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "32",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "33",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "25",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "14",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "13",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "2",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "GND",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "5V",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "TX",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "RX",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "23",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "4",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "0",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "GND",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "3V3",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "GND",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "22",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "21",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "3.3V",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "LoRa2",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
 		},
 		{
 			label: "LoRa1",
 			name: "IO1",
 			offset: {
 				x: 5,
-        y: 5
+				y: 5,
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/devices/techo.ts

@@ -5,11 +5,11 @@ export const techo: IDevice = {
 	misc: {
 		Stability: Stability.Semi,
 		SuggestedUse: [UseCase.Portable],
-    Gradient: "bg-gradient-to-r from-gray-700 via-gray-900 to-black"
+		Gradient: "bg-gradient-to-r from-gray-700 via-gray-900 to-black",
 	},
 	images: {
 		Front: "/img/hardware/t-echo-lilygo.jpg",
-    Back: ""
+		Back: "",
 	},
 	features: {
 		BLE: true,
@@ -20,8 +20,8 @@ export const techo: IDevice = {
 			"rangeTest",
 			"rotaryEncoder",
 			"storeAndForward",
-      "telemetry"
+			"telemetry",
-    ]
+		],
 	},
 	specifications: {
 		BLEVersion: "4.2",
@@ -35,32 +35,32 @@ export const techo: IDevice = {
 		Frequencies: [433, 868, 915, 923],
 		LoRa: "SX1262",
 		PSRAM: 8,
-    RAM: undefined
+		RAM: undefined,
 	},
 	variants: [
 		{
 			name: "TBeam 0.7",
 			misc: {
-        Stability: Stability.Unstable
+				Stability: Stability.Unstable,
 			},
 			specifications: {
 				Driver: "CP210X",
 				GNSS: "NEO-6M",
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.0",
 			specifications: {
-        Frequencies: [868, 915]
+				Frequencies: [868, 915],
-      }
+			},
 		},
 		{
 			name: "TBeam 1.1",
 			specifications: {
 				Driver: "CP210X",
-        GNSS: "NEO-6M"
+				GNSS: "NEO-6M",
-      }
+			},
-    }
+		},
-  ]
+	],
 };

src/data/regions/anz.ts

@@ -9,5 +9,5 @@ export const ANZ: IRegion = {
 	powerLimit: 30,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/cn.ts

@@ -9,5 +9,5 @@ export const CN: IRegion = {
 	powerLimit: 19,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/eu_433.ts

@@ -9,5 +9,5 @@ export const EU_433: IRegion = {
 	powerLimit: 12,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/eu_868.ts

@@ -9,5 +9,5 @@ export const EU_868: IRegion = {
 	powerLimit: 27,
 	audioPermitted: false,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/in.ts

@@ -9,5 +9,5 @@ export const IN: IRegion = {
 	powerLimit: 30,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/jp.ts

@@ -9,5 +9,5 @@ export const JP: IRegion = {
 	powerLimit: 16,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/kr.ts

@@ -9,5 +9,5 @@ export const KR: IRegion = {
 	powerLimit: 0,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/lora_24.ts

@@ -9,5 +9,5 @@ export const LORA_24: IRegion = {
 	powerLimit: 10,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: true
+	wideLora: true,
 };

src/data/regions/nz_865.ts

@@ -9,5 +9,5 @@ export const NZ_865: IRegion = {
 	powerLimit: 36,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/ru.ts

@@ -9,5 +9,5 @@ export const RU: IRegion = {
 	powerLimit: 20,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/th.ts

@@ -9,5 +9,5 @@ export const TH: IRegion = {
 	powerLimit: 16,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/tw.ts

@@ -9,5 +9,5 @@ export const TW: IRegion = {
 	powerLimit: 0,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/ua_433.ts

@@ -9,5 +9,5 @@ export const UA_433: IRegion = {
 	powerLimit: 10,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/ua_868.ts

@@ -9,5 +9,5 @@ export const UA_868: IRegion = {
 	powerLimit: 14,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/unset.ts

@@ -9,5 +9,5 @@ export const UNSET: IRegion = {
 	powerLimit: 30,
 	audioPermitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/data/regions/us.ts

@@ -9,5 +9,5 @@ export const US: IRegion = {
 	powerLimit: 30,
 	audioPrmitted: true,
 	frequencySwitching: false,
-  wideLora: false
+	wideLora: false,
 };

src/hooks/useFilteredNetworks.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { Showcase } from "../utils/apiTypes.js";
+import { Showcase } from "../utils/apiTypes";
 import { useSelectedTags } from "./useSelectedTags";
 
 const filterNetworks = (
 	showcaseNetworks: Showcase[],
-  selectedTags: string[]
+	selectedTags: string[],
 ) => {
 	if (selectedTags.length === 0) {
 		return showcaseNetworks;
@@ -15,7 +15,7 @@ const filterNetworks = (
 			return false;
 		}
 		return selectedTags.every((queryTag) =>
-      showcaseNetwork.tags.find((searchTag) => searchTag.label === queryTag)
+			showcaseNetwork.tags.find((searchTag) => searchTag.label === queryTag),
 		);
 	});
 };
@@ -24,6 +24,6 @@ export const useFilteredNetworks = (networks: Showcase[]) => {
 	const selectedTags = useSelectedTags();
 	return React.useMemo(
 		() => filterNetworks(networks, selectedTags),
-    [selectedTags]
+		[selectedTags],
 	);
 };

src/pages/2.0/index.tsx

@@ -4,40 +4,40 @@ import { FiTwitter } from "react-icons/fi";
 
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import Layout from "@theme/Layout";
-import { Dark, Light } from "/src/components/ColorMode";
+import { Dark, Light } from "../../components/ColorMode";
 
 const TwoPointZero = (): JSX.Element => {
 	const stats = [
 		{ label: "Active Nodes", value: "A Lot!" },
 		{ label: "Community Members", value: "4000+" },
 		{ label: "Firmware Commits", value: "4900+" },
-    { label: "Community Donations", value: "$5700+" }
+		{ label: "Community Donations", value: "$5700+" },
 	];
 	const logos = [
 		{
 			name: "Vercel",
-      url: "/2.0/vercel-logotype-dark.svg"
+			url: "/2.0/vercel-logotype-dark.svg",
 		},
 		{
 			name: "Cloudflare",
-      url: "/2.0/CF_logo_horizontal_blktype.svg"
+			url: "/2.0/CF_logo_horizontal_blktype.svg",
 		},
 		{
 			name: "RAK Wireless",
-      url: "/2.0/RAK-blue-main.svg"
+			url: "/2.0/RAK-blue-main.svg",
 		},
 		{
 			name: "Open Collective",
-      url: "/2.0/opencollectivelogo.svg"
+			url: "/2.0/opencollectivelogo.svg",
 		},
 		{
 			name: "LILYGO",
-      url: "/2.0/LILYGO.png"
+			url: "/2.0/LILYGO.png",
 		},
 		{
 			name: "Discord",
-      url: "/2.0/discord.svg"
+			url: "/2.0/discord.svg",
-    }
+		},
 	];
 	return (
 		<Layout title="Meshtastic 2.0" description="Meshtastic 2.0 Landing Page">

src/pages/credits/_components/Avatar.tsx

@@ -14,7 +14,7 @@ export interface avatarLayoutProps {
 export const Avatar = ({
 	imgUrl,
 	name,
-  description
+	description,
 }: avatarProps): JSX.Element => {
 	return (
 		<div className="card m-4 border-2 border-secondary">

src/pages/credits/index.tsx

@@ -8,28 +8,28 @@ const Credits = (): JSX.Element => {
 	const partnerLogos = [
 		{
 			name: "Vercel",
-      url: "/2.0/vercel-logotype-dark.svg"
+			url: "/2.0/vercel-logotype-dark.svg",
 		},
 		{
 			name: "Cloudflare",
-      url: "/2.0/CF_logo_horizontal_blktype.svg"
+			url: "/2.0/CF_logo_horizontal_blktype.svg",
 		},
 		{
 			name: "RAK Wireless",
-      url: "/2.0/RAK-blue-main.svg"
+			url: "/2.0/RAK-blue-main.svg",
 		},
 		{
 			name: "Open Collective",
-      url: "/2.0/opencollectivelogo.svg"
+			url: "/2.0/opencollectivelogo.svg",
 		},
 		{
 			name: "LILYGO",
-      url: "/2.0/LILYGO.png"
+			url: "/2.0/LILYGO.png",
 		},
 		{
 			name: "Discord",
-      url: "/2.0/discord.svg"
+			url: "/2.0/discord.svg",
-    }
+		},
 	];
 	return (
 		<Layout

src/pages/downloads/_components/DownloadCard.tsx

@@ -17,7 +17,7 @@ export const DownloadCard = ({
 	imgUrl2,
 	url2,
 	notes,
-  buttonText
+	buttonText,
 }: downloadCardProps): JSX.Element => {
 	return (
 		<div className="card">
@@ -61,14 +61,14 @@ export const PlaceholderCard = (): JSX.Element => {
 				transform: "scale(1)",
 				display: "flex",
 				gap: "1rem",
-        padding: "1rem"
+				padding: "1rem",
 			}}
 		>
 			<div
 				style={{
 					display: "flex",
 					justifyContent: "space-between",
-          marginBottom: "1rem"
+					marginBottom: "1rem",
 				}}
 			>
 				<div
@@ -76,7 +76,7 @@ export const PlaceholderCard = (): JSX.Element => {
 						borderRadius: "0.4rem",
 						backgroundColor: "gray",
 						height: "2rem",
-            width: "8rem"
+						width: "8rem",
 					}}
 				/>
 				<div
@@ -85,7 +85,7 @@ export const PlaceholderCard = (): JSX.Element => {
 						backgroundColor: "gray",
 						marginTop: "1rem",
 						height: "1rem",
-            width: "8rem"
+						width: "8rem",
 					}}
 				/>
 			</div>
@@ -97,7 +97,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					height: "3rem",
 					display: "flex",
 					jusifyContent: "center",
-          alignItems: "center"
+					alignItems: "center",
 				}}
 			/>
 			<a className="button disabled button--primary button--block">&nbsp;</a>
@@ -106,7 +106,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "8rem",
-          height: "2rem"
+					height: "2rem",
 				}}
 			/>
 			<div
@@ -114,7 +114,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "11rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -122,7 +122,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "9rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -130,7 +130,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "13rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -138,7 +138,7 @@ export const PlaceholderCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "11rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 		</div>

src/pages/downloads/_components/FirmwareCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DeviceFirmwareResource } from "../../../utils/apiTypes.js";
+import { DeviceFirmwareResource } from "../../../utils/apiTypes";
 
 export interface releaseCardProps {
 	variant: string;
@@ -11,7 +11,7 @@ export interface releaseCardProps {
 export const FirmwareCard = ({
 	variant,
 	description,
-  release
+	release,
 }: releaseCardProps): JSX.Element => {
 	return (
 		<div className="card m-4 border-2 border-secondary">
@@ -69,14 +69,14 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 				transform: "scale(1)",
 				display: "flex",
 				gap: "1rem",
-        padding: "1rem"
+				padding: "1rem",
 			}}
 		>
 			<div
 				style={{
 					display: "flex",
 					justifyContent: "space-between",
-          marginBottom: "1rem"
+					marginBottom: "1rem",
 				}}
 			>
 				<div
@@ -84,7 +84,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 						borderRadius: "0.4rem",
 						backgroundColor: "gray",
 						height: "2rem",
-            width: "8rem"
+						width: "8rem",
 					}}
 				/>
 				<div
@@ -93,7 +93,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 						backgroundColor: "gray",
 						marginTop: "1rem",
 						height: "1rem",
-            width: "8rem"
+						width: "8rem",
 					}}
 				/>
 			</div>
@@ -102,7 +102,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 				style={{
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
-          height: "3rem"
+					height: "3rem",
 				}}
 			/>
 			<a className="button disabled button--primary button--block">&nbsp;</a>
@@ -111,7 +111,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "8rem",
-          height: "2rem"
+					height: "2rem",
 				}}
 			/>
 			<div
@@ -119,7 +119,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "11rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -127,7 +127,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "9rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -135,7 +135,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "13rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 			<div
@@ -143,7 +143,7 @@ export const PlaceholderFirmwareCard = (): JSX.Element => {
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
 					width: "11rem",
-          height: "1rem"
+					height: "1rem",
 				}}
 			/>
 		</div>

src/pages/downloads/index.tsx

@@ -8,21 +8,21 @@ import {
 	BoltIcon,
 	ComputerDesktopIcon,
 	CpuChipIcon,
-  GlobeAltIcon
+	GlobeAltIcon,
 } from "@heroicons/react/24/solid";
 import Layout from "@theme/Layout";
 
-import { FirmwareReleases } from "../../utils/apiTypes.js";
+import { FirmwareReleases } from "../../utils/apiTypes";
 import { fetcher } from "../../utils/swr";
 import {
 	FirmwareCard,
-  PlaceholderFirmwareCard
+	PlaceholderFirmwareCard,
 } from "./_components/FirmwareCard";
 
 const Firmware = (): JSX.Element => {
 	const { data, error } = useSWR<FirmwareReleases>(
 		"https://api.meshtastic.org/github/firmware/list",
-    fetcher
+		fetcher,
 	);
 
 	return (

src/pages/hardware/index.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 
 import { FiPlus } from "react-icons/fi";
 
-import { HardwareModal } from "@site/src/components/hardware/HardwareModal";
+import { HardwareModal } from "../../components/hardware/HardwareModal";
-import { IDevice } from "@site/src/data/device";
+import { IDevice } from "../../data/device";
 
 import { HardwareCard } from "../../components/hardware/HardwareCard";
 import { PageLayout } from "../../components/PageLayout";

src/pages/index.tsx

@@ -23,7 +23,7 @@ const features = [
 				Communicate kilometers/miles between nodes. Internet-connected relay
 				nodes enable the conversation to move online too.
 			</>
-    )
+		),
 	},
 	{
 		title: "Encryption",
@@ -35,7 +35,7 @@ const features = [
 				Using multichannel settings you can send encrypted messages on one
 				channel and still participate in a default Meshtastic mesh.
 			</>
-    )
+		),
 	},
 	{
 		title: "Conserve Battery",
@@ -46,7 +46,7 @@ const features = [
 				a solar cell. Power management ensures the device will last the duration
 				of your use.
 			</>
-    )
+		),
 	},
 	{
 		title: "Extensible",
@@ -58,7 +58,7 @@ const features = [
 				and produce real-time heatmaps, or maybe decentralized, encrypted
 				messaging network, your imagination is the limit.
 			</>
-    )
+		),
 	},
 	{
 		title: "Platform Agnostic",
@@ -69,7 +69,7 @@ const features = [
 				mobile platforms. Linux, Windows, Mac, Android, and iOS are all
 				supported or well on their way to being supported.
 			</>
-    )
+		),
 	},
 	{
 		title: "Open Source",
@@ -79,8 +79,8 @@ const features = [
 				All Meshtastic software is open source. If you want an improvement,
 				submit a pull request or file an issue on Github. Happy coding!
 			</>
-    )
+		),
-  }
+	},
 ];
 
 const SocialCards: SocialCardProps[] = [
@@ -93,7 +93,7 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto h-10"
 				src="/img/homepage/Discord-Logo-White.svg"
 			/>
-    )
+		),
 	},
 	{
 		color: "bg-[#ffffff]",
@@ -104,7 +104,7 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto h-10"
 				src="/img/homepage/Twitter-logo.svg"
 			/>
-    )
+		),
 	},
 	{
 		color: "bg-[#FF0000]",
@@ -115,7 +115,7 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto h-16"
 				src="/img/homepage/YouTube-Logo-White.svg"
 			/>
-    )
+		),
 	},
 	{
 		color: "bg-[#ffffff]",
@@ -126,7 +126,7 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto h-12"
 				src="/img/homepage/Discourse-Logo-White.svg"
 			/>
-    )
+		),
 	},
 	{
 		color: "bg-[#FF4500]",
@@ -137,7 +137,7 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto h-20"
 				src="/img/homepage/Reddit-Logo-White.svg"
 			/>
-    )
+		),
 	},
 	{
 		color: "bg-[#ffffff]",
@@ -148,8 +148,8 @@ const SocialCards: SocialCardProps[] = [
 				className="m-auto w-12"
 				src="/img/homepage/GitHub-Logo-White.svg"
 			/>
-    )
+		),
-  }
+	},
 ];
 
 function Home() {
@@ -193,8 +193,8 @@ function Home() {
 			</header>
 			<main className="flex flex-col gap-4">
 				<Carousel autoPlay infiniteLoop showStatus={false} showThumbs={false}>
-          {features.map((feature, index) => (
+					{features.map((feature) => (
-            <div key={index} className="flex p-12">
+						<div key={feature.title} className="flex p-12">
 							<div className="w-1/2">
 								<img
 									className="my-auto h-40"
@@ -213,8 +213,8 @@ function Home() {
 				<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
 					<h3 className="text-xl font-bold">Connect with us.</h3>
 					<div className="flex w-full overflow-x-auto">
-            {SocialCards.map((card, index) => (
+						{SocialCards.map((card) => (
-              <SocialCard key={index} color={card.color} link={card.link}>
+							<SocialCard key={card.link} color={card.color} link={card.link}>
 								{card.children}
 							</SocialCard>
 						))}
@@ -232,7 +232,7 @@ function Home() {
 							display: "grid",
 							gap: "1.5rem",
 							gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-              paddingLeft: "0"
+							paddingLeft: "0",
 						}}
 					>
 						<div className="card">

src/pages/showcase/_components/Card.tsx

@@ -37,13 +37,13 @@ export const PlaceholderCard = (): JSX.Element => (
 		className="card"
 		style={{
 			animation: "pulse 2s infinite",
-      transform: "scale(1)"
+			transform: "scale(1)",
 		}}
 	>
 		<div className="card__image">
 			<div
 				style={{
-          height: "140px"
+					height: "140px",
 				}}
 			/>
 		</div>
@@ -54,7 +54,7 @@ export const PlaceholderCard = (): JSX.Element => (
 					height: "2rem",
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
-          marginBottom: "1rem"
+					marginBottom: "1rem",
 				}}
 			/>
 			<div
@@ -63,7 +63,7 @@ export const PlaceholderCard = (): JSX.Element => (
 					height: "1rem",
 					borderRadius: "0.4rem",
 					backgroundColor: "gray",
-          marginBottom: "0.5rem"
+					marginBottom: "0.5rem",
 				}}
 			/>
 			<div
@@ -71,7 +71,7 @@ export const PlaceholderCard = (): JSX.Element => (
 					width: "100%",
 					height: "1rem",
 					borderRadius: "0.4rem",
-          backgroundColor: "gray"
+					backgroundColor: "gray",
 				}}
 			/>
 		</div>
@@ -85,7 +85,7 @@ export const PlaceholderCard = (): JSX.Element => (
 			<div
 				style={{
 					display: "flex",
-          gap: "0.5rem"
+					gap: "0.5rem",
 				}}
 			>
 				<div
@@ -93,7 +93,7 @@ export const PlaceholderCard = (): JSX.Element => (
 						width: "4rem",
 						height: "1.5rem",
 						borderRadius: "0.4rem",
-            backgroundColor: "gray"
+						backgroundColor: "gray",
 					}}
 				/>
 				<div
@@ -101,7 +101,7 @@ export const PlaceholderCard = (): JSX.Element => (
 						width: "4rem",
 						height: "1.5rem",
 						borderRadius: "0.4rem",
-            backgroundColor: "gray"
+						backgroundColor: "gray",
 					}}
 				/>
 			</div>

src/pages/showcase/_components/CardTags.tsx

@@ -17,7 +17,7 @@ export const CardTags = ({ tags }: CardTagsProps) => {
 						style={{
 							backgroundColor: color,
 							marginRight: "0.3rem",
-              userSelect: "none"
+							userSelect: "none",
 						}}
 					>
 						{label}

src/pages/showcase/_components/Filters.tsx

@@ -4,7 +4,7 @@ import { FiHeart } from "react-icons/fi";
 import useSWR from "swr";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { fetcher } from "@site/src/utils/swr";
+import { fetcher } from "../../../utils/swr";
 
 import { ShowcaseTag } from "../../../utils/apiTypes";
 // import { TagList, Tags } from '../../../utils/showcase';
@@ -15,7 +15,7 @@ export const Filters = (): JSX.Element => {
 
 	const { data, error } = useSWR<ShowcaseTag[]>(
 		`${siteConfig.customFields.API_URL}/showcase/tags`,
-    fetcher
+		fetcher,
 	);
 
 	return (
@@ -26,7 +26,7 @@ export const Filters = (): JSX.Element => {
 						padding: "0",
 						display: "flex",
 						alignItems: "center",
-            flexWrap: "wrap"
+						flexWrap: "wrap",
 					}}
 				>
 					{data.map((tag, i) => {
@@ -47,7 +47,7 @@ export const Filters = (): JSX.Element => {
 									fontSize: "0.875rem",
 									lineHeight: "1.25rem",
 									verticalAlign: "middle",
-                  userSelect: "none"
+									userSelect: "none",
 								}}
 							>
 								<TagSelect
@@ -60,7 +60,7 @@ export const Filters = (): JSX.Element => {
 												style={{
 													display: "flex",
 													marginLeft: "0.5rem",
-                          color: "rgb(190 24 93)"
+													color: "rgb(190 24 93)",
 												}}
 											>
 												<FiHeart />
@@ -72,7 +72,7 @@ export const Filters = (): JSX.Element => {
 													width: 10,
 													height: 10,
 													borderRadius: "50%",
-                          marginLeft: 8
+													marginLeft: 8,
 												}}
 											/>
 										)

src/pages/showcase/_components/Network.tsx

@@ -3,9 +3,8 @@ import React from "react";
 import useSWR from "swr";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { Showcase } from "@site/src/utils/apiTypes";
+import { Showcase } from "../../../utils/apiTypes";
-import { User } from "@site/src/utils/github";
+import { fetcher } from "../../../utils/swr";
-import { fetcher } from "@site/src/utils/swr";
 
 interface NetworkProps {
 	id: string;
@@ -16,12 +15,12 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 
 	const { data, error } = useSWR<Showcase>(
 		`${siteConfig.customFields.API_URL}/showcase/${id}`,
-    fetcher
+		fetcher,
 	);
 
-  const githubData = useSWR<User>(
+	const githubData = useSWR(
 		`https://api.github.com/users/${data?.author?.githubUsername}`,
-    fetcher
+		fetcher,
 	).data;
 
 	return (
@@ -50,13 +49,13 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 						style={{
 							marginLeft: "auto",
 							marginRight: "auto",
-              maxWidth: "900px"
+							maxWidth: "900px",
 						}}
 					>
 						<div
 							className="card__header"
 							style={{
-                margin: "8px"
+								margin: "8px",
 							}}
 						>
 							<h2>Bill of Materials</h2>
@@ -67,13 +66,13 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 									key={index}
 									style={{
 										borderTop: "2px solid gray",
-                    display: "flex"
+										display: "flex",
 									}}
 								>
 									<div
 										style={{
 											width: "4rem",
-                      display: "flex"
+											display: "flex",
 										}}
 									>
 										<img
@@ -87,7 +86,7 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 												maxWidth: "60px",
 												maxHeight: "60px",
 												width: "auto",
-                        height: "auto"
+												height: "auto",
 											}}
 										/>
 									</div>
@@ -104,7 +103,7 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 										className="button button--outline button--secondary"
 										style={{
 											marginTop: "auto",
-                      marginBottom: "auto"
+											marginBottom: "auto",
 										}}
 									>
 										View
@@ -131,12 +130,12 @@ export const PlaceholderNetwork = (): JSX.Element => {
 			style={{
 				display: "flex",
 				flexDirection: window.innerWidth > 768 ? "row" : "column",
-        gap: "2rem"
+				gap: "2rem",
 			}}
 		>
 			<div
 				style={{
-          width: window.innerWidth > 768 ? "60%" : "100%"
+					width: window.innerWidth > 768 ? "60%" : "100%",
 				}}
 			>
 				<div
@@ -148,21 +147,21 @@ export const PlaceholderNetwork = (): JSX.Element => {
 						display: "flex",
 						flexDirection: "column",
 						gap: "2rem",
-            padding: "2rem"
+						padding: "2rem",
 					}}
 				>
 					<div
 						style={{
 							borderRadius: "0.4rem",
 							backgroundColor: "gray",
-              height: "4rem"
+							height: "4rem",
 						}}
 					/>
 					<div
 						style={{
 							borderRadius: "0.4rem",
 							backgroundColor: "gray",
-              height: "12rem"
+							height: "12rem",
 						}}
 					/>
 					<div style={{ display: "flex", gap: "1rem" }}>
@@ -172,7 +171,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 								backgroundColor: "gray",
 								height: "4rem",
 								width: "4rem",
-                minWidth: "4rem"
+								minWidth: "4rem",
 							}}
 						/>
 						<div
@@ -180,7 +179,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 								display: "flex",
 								flexDirection: "column",
 								gap: "1rem",
-                width: "100%"
+								width: "100%",
 							}}
 						>
 							<div
@@ -188,7 +187,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									width: "100%",
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
-                  height: "1rem"
+									height: "1rem",
 								}}
 							/>
 							<div
@@ -196,7 +195,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									width: "100%",
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
-                  height: "2rem"
+									height: "2rem",
 								}}
 							/>
 						</div>
@@ -205,7 +204,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 			</div>
 			<div
 				style={{
-          width: window.innerWidth > 768 ? "40%" : "100%"
+					width: window.innerWidth > 768 ? "40%" : "100%",
 				}}
 			>
 				<div
@@ -217,21 +216,21 @@ export const PlaceholderNetwork = (): JSX.Element => {
 						display: "flex",
 						flexDirection: "column",
 						gap: "2rem",
-            padding: "2rem"
+						padding: "2rem",
 					}}
 				>
 					<div
 						style={{
 							borderRadius: "0.4rem",
 							backgroundColor: "gray",
-              height: "12rem"
+							height: "12rem",
 						}}
 					/>
 					<div
 						style={{
 							borderRadius: "0.4rem",
 							backgroundColor: "gray",
-              height: "2rem"
+							height: "2rem",
 						}}
 					/>
 					<div style={{ display: "flex", gap: "0.5rem" }}>
@@ -240,7 +239,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 								width: "7rem",
 								height: "1.8rem",
 								borderRadius: "0.4rem",
-                backgroundColor: "gray"
+								backgroundColor: "gray",
 							}}
 						/>
 						<div
@@ -248,7 +247,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 								width: "7rem",
 								height: "1.8rem",
 								borderRadius: "0.4rem",
-                backgroundColor: "gray"
+								backgroundColor: "gray",
 							}}
 						/>
 						<div
@@ -256,7 +255,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 								width: "7rem",
 								height: "1.8rem",
 								borderRadius: "0.4rem",
-                backgroundColor: "gray"
+								backgroundColor: "gray",
 							}}
 						/>
 					</div>
@@ -269,7 +268,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
 									height: "2.5rem",
-                  width: "20%"
+									width: "20%",
 								}}
 							/>
 							<div
@@ -277,7 +276,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
 									height: "2.5rem",
-                  width: "60%"
+									width: "60%",
 								}}
 							/>
 							<a
@@ -293,7 +292,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
 									height: "2.5rem",
-                  width: "20%"
+									width: "20%",
 								}}
 							/>
 							<div
@@ -301,7 +300,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
 									borderRadius: "0.4rem",
 									backgroundColor: "gray",
 									height: "2.5rem",
-                  width: "60%"
+									width: "60%",
 								}}
 							/>
 							<a

src/pages/showcase/_components/NetworkSection.tsx

@@ -14,7 +14,7 @@ export const NetworkSection = ({
 	title,
 	icon,
 	iconColor,
-  networks
+	networks,
 }: NetworkSectionProps): JSX.Element => {
 	return (
 		<div className="margin-top--lg container">
@@ -22,7 +22,7 @@ export const NetworkSection = ({
 				className="margin-bottom--sm"
 				style={{
 					display: "flex",
-          alignItems: "center"
+					alignItems: "center",
 				}}
 			>
 				<h2>{title}</h2>
@@ -33,7 +33,7 @@ export const NetworkSection = ({
 							marginLeft: "0.5rem",
 							fontSize: "1.25rem",
 							lineHeight: "1.75rem",
-              color: iconColor
+							color: iconColor,
 						}}
 					>
 						{icon}
@@ -46,7 +46,7 @@ export const NetworkSection = ({
 					display: "grid",
 					gap: "1.5rem",
 					gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-          paddingLeft: "0"
+					paddingLeft: "0",
 				}}
 			>
 				{networks ? (

src/pages/showcase/_components/Networks.tsx

@@ -4,7 +4,7 @@ import { FiHeart, FiSearch } from "react-icons/fi";
 import useSWR from "swr";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { useSelectedTags } from "@site/src/hooks/useSelectedTags";
+import { useSelectedTags } from "../../../hooks/useSelectedTags";
 
 import { useFilteredNetworks } from "../../../hooks/useFilteredNetworks";
 import { Showcase } from "../../../utils/apiTypes";
@@ -16,7 +16,7 @@ export const Networks = (): JSX.Element => {
 
 	const { data, error } = useSWR<Showcase[]>(
 		`${siteConfig.customFields.API_URL}/showcase`,
-    fetcher
+		fetcher,
 	);
 
 	const selectedTags = useSelectedTags();
@@ -32,7 +32,7 @@ export const Networks = (): JSX.Element => {
 							icon={<FiHeart />}
 							iconColor="rgb(190 24 93)"
 							networks={data?.filter((network) =>
-                network.tags.find((tag) => tag.label === "Favorite")
+								network.tags.find((tag) => tag.label === "Favorite"),
 							)}
 						/>
 						<NetworkSection title="All networks" networks={data} />

src/pages/showcase/_components/TagSelect.tsx

@@ -3,7 +3,7 @@ import "url-search-params-polyfill";
 import React from "react";
 
 import { useHistory, useLocation } from "@docusaurus/router";
-import { ShowcaseTag } from "@site/src/utils/apiTypes";
+import { ShowcaseTag } from "../../../utils/apiTypes";
 
 import { toggleListItem } from "../../../utils/showcase";
 
@@ -43,7 +43,7 @@ export const TagSelect = React.forwardRef<HTMLLabelElement, Props>(
 			<button
 				style={{
 					display: "flex",
-          alignItems: "center"
+					alignItems: "center",
 				}}
 				className={`button button--sm button--outline button--secondary ${
 					selected ? "button--active" : ""
@@ -56,7 +56,7 @@ export const TagSelect = React.forwardRef<HTMLLabelElement, Props>(
 				{icon}
 			</button>
 		);
-  }
+	},
 );
 
 export const PlaceholderTagSelect = (): JSX.Element => (
@@ -72,7 +72,7 @@ export const PlaceholderTagSelect = (): JSX.Element => (
 			fontSize: "0.875rem",
 			lineHeight: "1.25rem",
 			verticalAlign: "middle",
-      userSelect: "none"
+			userSelect: "none",
 		}}
 	>
 		<div
@@ -82,7 +82,7 @@ export const PlaceholderTagSelect = (): JSX.Element => (
 				borderRadius: "0.4rem",
 				backgroundColor: "gray",
 				animation: "pulse 2s infinite",
-        transform: "scale(1)"
+				transform: "scale(1)",
 			}}
 		/>
 		<div
@@ -93,7 +93,7 @@ export const PlaceholderTagSelect = (): JSX.Element => (
 				backgroundColor: "gray",
 				animation: "pulse 2s infinite",
 				transform: "scale(1)",
-        marginLeft: 8
+				marginLeft: 8,
 			}}
 		/>
 		<div
@@ -104,7 +104,7 @@ export const PlaceholderTagSelect = (): JSX.Element => (
 				backgroundColor: "gray",
 				animation: "pulse 2s infinite",
 				transform: "scale(1)",
-        marginLeft: 8
+				marginLeft: 8,
 			}}
 		/>
 	</div>

src/pages/tools/OEM.tsx

@@ -8,7 +8,7 @@ import Layout from "@theme/Layout";
 const OEM = (): JSX.Element => {
 	const [oemAesKey, setOemAesKey] = useState<Uint8Array>(new Uint8Array());
 	const [oemFont, setOemFont] = useState<Protobuf.ScreenFonts>(
-    Protobuf.ScreenFonts.FONT_MEDIUM
+		Protobuf.ScreenFonts.FONT_MEDIUM,
 	);
 	const [oemIconBits, setOemIconBits] = useState<Uint8Array>(new Uint8Array());
 	const [oemIconHeight, setOemIconHeight] = useState<number>(0);
@@ -24,14 +24,14 @@ const OEM = (): JSX.Element => {
 				oemIconBits,
 				oemIconHeight,
 				oemIconWidth,
-        oemText
+				oemText,
-      })
+			}),
 		);
 	}, [oemAesKey, oemFont, oemIconBits, oemIconHeight, oemIconWidth, oemText]);
 
 	const enumOptions = Protobuf.ScreenFonts
 		? Object.entries(Protobuf.ScreenFonts).filter(
-        (value) => typeof value[1] === "number"
+				(value) => typeof value[1] === "number",
 		  )
 		: [];
 
@@ -100,8 +100,8 @@ const OEM = (): JSX.Element => {
 						readFile(e.target.files[0]).then((data) => {
 							setOemIconBits(
 								new Uint8Array(
-                  data.split(",").map((s) => parseInt(s.trim(), 16))
+									data.split(",").map((s) => parseInt(s.trim(), 16)),
-                )
+								),
 							);
 						});
 					}}
@@ -135,7 +135,7 @@ const OEM = (): JSX.Element => {
 					download="OEM.bin"
 					onClick={() => {
 						const blob = new Blob([oemBytes], {
-              type: "application/octet-stream"
+							type: "application/octet-stream",
 						});
 						window.open(URL.createObjectURL(blob));
 					}}

src/utils/calculateADC.ts

@@ -6,10 +6,10 @@ export default function calculateADC() {
 	//variable
 	const batteryChargePercent =
 		parseFloat(
-      (<HTMLInputElement>document.getElementById("batteryChargePercent")).value
+			(<HTMLInputElement>document.getElementById("batteryChargePercent")).value,
 		) / 100;
 	const operativeAdcMultiplier = parseFloat(
-    (<HTMLInputElement>document.getElementById("operativeAdcMultiplier")).value
+		(<HTMLInputElement>document.getElementById("operativeAdcMultiplier")).value,
 	);
 	const result =
 		(operativeAdcMultiplier *

src/utils/map.ts

@@ -1,4 +1,4 @@
-import { Node } from "./apiTypes.js";
+import { Node } from "./apiTypes";
 
 export const mapUrl = (nodes: Node[]): string => {
 	const width = 900;
@@ -6,7 +6,7 @@ export const mapUrl = (nodes: Node[]): string => {
 	const access_token =
 		"pk.eyJ1Ijoic2FjaGF3IiwiYSI6ImNrNW9meXozZjBsdW0zbHBjM2FnNnV6cmsifQ.3E4n8eFGD9ZOFo-XDVeZnQ";
 	const nodeCoords = nodes.map(
-    ({ latitude, longitude }) => `pin-l+67ea94(${longitude},${latitude})`
+		({ latitude, longitude }) => `pin-l+67ea94(${longitude},${latitude})`,
 	);
 
 	return `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/${nodeCoords}/auto/${width}x${height}@2x?access_token=${access_token}`;

src/utils/showcase.ts

@@ -1,7 +1,7 @@
 export const sortBy = <T>(array: T[], getter: (item: T) => unknown): T[] => {
 	const sortedArray = [...array];
 	sortedArray.sort((a, b) =>
-    getter(a) > getter(b) ? 1 : getter(b) > getter(a) ? -1 : 0
+		getter(a) > getter(b) ? 1 : getter(b) > getter(a) ? -1 : 0,
 	);
 	return sortedArray;
 };

tailwind.config.cjs

@@ -1,22 +0,0 @@
-// trunk-ignore(eslint/no-undef)
-module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        accent: "var(--accent)",
-        base: "var(--base)",
-        primary: "var(--primary)",
-        secondary: "var(--secondary)",
-        tertiary: "var(--tertiary)",
-        mute: "var(--mute)",
-        primaryInv: "var(--primaryInv)",
-        secondaryInv: "var(--secondaryInv)",
-        tertiaryInv: "var(--tertiaryInv)"
-      }
-    }
-  },
-  // trunk-ignore(eslint/no-undef)
-  plugins: [require("@tailwindcss/typography")]
-};

tailwind.config.ts

@@ -0,0 +1,23 @@
+import type { Config } from "tailwindcss";
+import typography from "@tailwindcss/typography";
+
+export default {
+	content: ["./src/**/*.{js,jsx,ts,tsx}"],
+	darkMode: "class",
+	theme: {
+		extend: {
+			colors: {
+				accent: "var(--accent)",
+				base: "var(--base)",
+				primary: "var(--primary)",
+				secondary: "var(--secondary)",
+				tertiary: "var(--tertiary)",
+				mute: "var(--mute)",
+				primaryInv: "var(--primaryInv)",
+				secondaryInv: "var(--secondaryInv)",
+				tertiaryInv: "var(--tertiaryInv)",
+			},
+		},
+	},
+	plugins: [typography()],
+} satisfies Config;