Versions update; linter fixes

.vscode/settings.json

@@ -4,10 +4,7 @@
 	"editor.renderWhitespace": "all",
 	"editor.rulers": [120, 160],
 	"editor.codeActionsOnSave": {
-		"source.fixAll": "always",
-		"source.organizeImports": "never",
-		"source.organizeImports.biome": "always",
-		"quickfix.biome": "always"
+		"source.fixAll.biome": "explicit"
 	},
 	"eslint.enable": false,
 	"prettier.enable": false,

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Forge 42
+Copyright (c) 2025 Code Forge
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/backdrop.tsx

@@ -2,9 +2,10 @@ import { cn } from "~/utils/css"
 
 export const Backdrop = ({ onClose, className }: { onClose: () => void; className?: string }) => (
 	// biome-ignore lint/a11y/useKeyWithClickEvents: We don't need keyboard events for backdrop
+	// biome-ignore lint/a11y/noStaticElementInteractions: suppres for now, as we don't need interaction with backdrop except click to close
 	<div
 		className={cn(
-			"fixed inset-0 z-50 bg-[var(--color-modal-backdrop)] backdrop-blur-sm transition-opacity duration-200",
+			"fixed inset-0 z-50 bg-(--color-modal-backdrop) backdrop-blur-sm transition-opacity duration-200",
 			className
 		)}
 		onClick={(e) => {

app/components/code-block/code-block-elements.tsx

@@ -22,7 +22,7 @@ const LineElement = ({ line }: { line: string }) => {
 	return (
 		<div className="relative">
 			<div
-				className="flex min-h-[1.5rem] items-center pr-4 pl-4"
+				className="flex min-h-6 items-center pr-4 pl-4"
 				style={{
 					backgroundColor: styles.backgroundColor,
 					borderLeft: styles.borderLeft,
@@ -32,7 +32,13 @@ const LineElement = ({ line }: { line: string }) => {
 				{!isNormalDiff && <DiffIndicator indicator={styles.indicator} />}
 				<span className="block">
 					{tokens.map((token, index) => (
-						<TokenElement key={`${token.value}-${index}`} token={token} />
+						<TokenElement
+							key={`${token.value}-${
+								// biome-ignore lint/suspicious/noArrayIndexKey: lets keep this key for now
+								index
+							}`}
+							token={token}
+						/>
 					))}
 				</span>
 			</div>
@@ -43,7 +49,13 @@ const LineElement = ({ line }: { line: string }) => {
 const CodeElement = ({ lines }: { lines: string[] }) => (
 	<code className="relative block">
 		{lines.map((line, index) => (
-			<LineElement key={`${index}-${line}`} line={line} />
+			<LineElement
+				key={`${
+					// biome-ignore lint/suspicious/noArrayIndexKey: lets keep this key for now
+					index
+				}-${line}`}
+				line={line}
+			/>
 		))}
 	</code>
 )
@@ -57,7 +69,7 @@ export const PreElement = ({ lines, className = "", ...props }: PreElementProps)
 	<pre
 		{...props}
 		className={cn(
-			"scrollbar scrollbar-thin relative overflow-x-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-code-block-bg)] py-4 font-mono text-[var(--color-code-block-text)] text-sm leading-relaxed md:text-base [&::-webkit-scrollbar-thumb:hover]:cursor-pointer",
+			"scrollbar scrollbar-thin relative overflow-x-auto rounded-lg border border-(--color-border) bg-(--color-code-block-bg) py-4 font-mono text-(--color-code-block-text) text-sm leading-relaxed md:text-base [&::-webkit-scrollbar-thumb:hover]:cursor-pointer",
 			className
 		)}
 	>

app/components/code-block/code-block.tsx

@@ -12,7 +12,7 @@ export const CodeBlock = ({ children, className = "", ...props }: CodeBlockProps
 	const lines = processLines(code)
 
 	return (
-		<div className="group relative ">
+		<div className="group relative">
 			<PreElement lines={lines} className={className} {...props} />
 			<CopyButton lines={lines} />
 		</div>

app/components/command-k/components/command-k.tsx

@@ -126,6 +126,7 @@ export const CommandK = ({ placeholder, version }: CommandPaletteProps) => {
 				}}
 				placeholder={searchPlaceholder}
 			/>
+			{/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: we will keep the aria-label here for now */}
 			<div className="max-h-96 overflow-y-auto overscroll-contain" aria-label={searchPlaceholder}>
 				{renderBody()}
 			</div>

app/components/command-k/components/results-footer-note.tsx

@@ -7,7 +7,7 @@ export const ResultsFooterNote = () => {
 			{t("p.search_by")}{" "}
 			<span className="font-semibold">
 				<a href="https://www.forge42.dev/" target="_blank" rel="noopener noreferrer">
-					Forge 42
+					Code Forge
 				</a>
 			</span>
 		</span>

app/components/command-k/components/results-footer.tsx

@@ -3,13 +3,7 @@ import { cn } from "~/utils/css"
 import { KeyboardHint } from "./keyboard-hint"
 import { ResultsFooterNote } from "./results-footer-note"
 
-export const ResultsFooter = ({
-	resultsCount,
-	query,
-}: {
-	resultsCount: number
-	query: string
-}) => {
+export const ResultsFooter = ({ resultsCount, query }: { resultsCount: number; query: string }) => {
 	const { t } = useTranslation()
 	if (!query || resultsCount === 0) return null
 

app/components/command-k/components/search-history.tsx

@@ -3,6 +3,7 @@ import { Icon } from "~/ui/icon/icon"
 import { cn } from "~/utils/css"
 import type { HistoryItem } from "../search-types"
 import { SearchResultRow } from "./search-result"
+
 interface SearchHistoryProps {
 	history: HistoryItem[]
 	onSelect: (item: HistoryItem) => void
@@ -61,7 +62,7 @@ const RemoveItemButton = ({
 			onRemove(id)
 		}}
 		className={cn(
-			"-translate-y-1/2 absolute top-1/2 right-2 flex h-6 w-6 items-center justify-center rounded-full border opacity-0 transition-all duration-150 group-hover:opacity-100",
+			"absolute top-1/2 right-2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border opacity-0 transition-all duration-150 group-hover:opacity-100",
 			"border-[var(--color-history-remove-border)] bg-[var(--color-history-remove-bg)] text-[var(--color-history-remove-text)]",
 			"hover:border-[var(--color-history-remove-hover-border)] hover:text-[var(--color-history-remove-hover-text)]"
 		)}
@@ -106,7 +107,16 @@ const HistoryItemsList = ({
 }) => (
 	<div className="max-h-64 overflow-y-auto">
 		{history.map((item, index) => (
-			<HistoryItemRow key={`${item.id}-${index}`} item={item} index={index} onSelect={onSelect} onRemove={onRemove} />
+			<HistoryItemRow
+				key={`${item.id}-${
+					// biome-ignore lint/suspicious/noArrayIndexKey: safe to keep index here
+					index
+				}`}
+				item={item}
+				index={index}
+				onSelect={onSelect}
+				onRemove={onRemove}
+			/>
 		))}
 	</div>
 )

app/components/command-k/components/search-result.tsx

@@ -10,13 +10,7 @@ interface SearchResultProps {
 	matchType: MatchType
 }
 
-const ResultIcon = ({
-	isSelected,
-	matchType,
-}: {
-	isSelected: boolean
-	matchType: MatchType
-}) => {
+const ResultIcon = ({ isSelected, matchType }: { isSelected: boolean; matchType: MatchType }) => {
 	const iconName = matchType === "heading" ? "Hash" : "Pilcrow"
 
 	return (

app/components/command-k/components/trigger-button.tsx

@@ -1,13 +1,7 @@
 import { Icon } from "~/ui/icon/icon"
 import { cn } from "~/utils/css"
 
-export const TriggerButton = ({
-	onOpen,
-	placeholder,
-}: {
-	onOpen: () => void
-	placeholder: string
-}) => (
+export const TriggerButton = ({ onOpen, placeholder }: { onOpen: () => void; placeholder: string }) => (
 	<button
 		type="button"
 		onClick={onOpen}

app/components/command-k/hooks/use-fuzzy-search.ts → app/components/command-k/fuzzy-search.ts

@@ -1,4 +1,4 @@
-import type { FuzzySearchOptions, SearchRecord, SearchResult } from "../search-types"
+import type { FuzzySearchOptions, SearchRecord, SearchResult } from "./search-types"
 
 const DEFAULTS = {
 	threshold: 0.8, // results must score ≥ 0.8 to be considered relevant
@@ -37,13 +37,13 @@ const highlightSnippet = (text: string, query: string, maxLen = 120) => {
 	const safe = escapeRegExp(q)
 	const marked = snippet.replace(
 		new RegExp(`(${safe})`, "gi"),
-		`<mark class="bg-[var(--color-highlight-bg)] text-[var(--color-highlight-text)] rounded-sm px-0.5 font-medium">$1</mark>`
+		`<mark class="bg-(--color-highlight-bg) text-(--color-highlight-text) rounded-sm px-0.5 font-medium">$1</mark>`
 	)
 
 	return `${start > 0 ? "..." : ""}${marked}${end < trimmed.length ? "..." : ""}`
 }
 
-export function useFuzzySearch(items: SearchRecord[], query: string, options?: FuzzySearchOptions) {
+export function fuzzySearchRecords(items: SearchRecord[], query: string, options?: FuzzySearchOptions) {
 	const threshold = clamp(options?.threshold ?? DEFAULTS.threshold, 0, 1)
 	const minLen = Math.max(0, options?.minMatchCharLength ?? DEFAULTS.minMatchCharLength)
 

app/components/header.tsx

@@ -9,7 +9,7 @@ export const Header = ({ children, className }: HeaderProps) => {
 	return (
 		<header
 			className={cn(
-				"sticky top-0 z-50 flex w-full items-center justify-between border-[var(--color-border)] border-b bg-[var(--color-background)] px-4 py-4 lg:px-8",
+				"site-header sticky top-0 z-50 flex w-full items-center justify-between border-(--color-border) border-b bg-(--color-background) px-4 py-4 lg:px-8",
 				className
 			)}
 		>

app/components/logo.tsx

@@ -5,9 +5,10 @@ export const Logo = ({ children }: { children: ReactNode }) => {
 	const navigate = useNavigate()
 	return (
 		// biome-ignore lint/a11y/useKeyWithClickEvents: we don't need keyboard access for this
+		// biome-ignore lint/a11y/noStaticElementInteractions: we don't need interaction with this element except click to navigate
 		<div
 			onClick={() => navigate(href("/:version?/home"))}
-			className="relative block cursor-pointer font-semibold font-space text-[var(--color-text-active)] text-lg md:text-2xl xl:text-3xl"
+			className="relative block cursor-pointer font-semibold font-space text-(--color-text-active) text-lg md:text-2xl xl:text-3xl"
 		>
 			{children}
 		</div>

app/components/modal.tsx

@@ -79,12 +79,13 @@ export const Modal = ({
 				role="presentation"
 			>
 				<div className="flex min-h-full items-start justify-center p-4 pt-16 sm:pt-24">
+					{/** biome-ignore lint/a11y/useAriaPropsSupportedByRole:lets keep aria label here for now */}
 					<div
 						ref={modalRef}
 						aria-modal="true"
 						{...(ariaLabel ? { "aria-label": ariaLabel } : {})}
 						className={cn(
-							"w-full max-w-2xl transform overflow-hidden rounded-xl border-[var(--color-modal-border)] bg-[var(--color-modal-bg)] shadow-[0_25px_50px_-12px_var(--color-modal-shadow)] transition-transform duration-200",
+							"w-full max-w-2xl transform overflow-hidden rounded-xl border-(--color-modal-border) bg-(--color-modal-bg) shadow-[0_25px_50px_-12px_var(--color-modal-shadow)] transition-transform duration-200",
 							className
 						)}
 						onPointerDown={(e) => e.stopPropagation()}

app/components/page-mdx-article.tsx

@@ -5,7 +5,7 @@ import { MDXWrapper } from "./mdx-wrapper"
 export default function PageMdxArticle({ page }: { page: Page }) {
 	return (
 		<article className="prose prose-invert w-full min-w-0 max-w-4xl flex-grow px-3 py-3 prose-headings:text-[var(--color-text-active)] prose-p:text-[var(--color-text-active)] text-base leading-7 md:px-6 md:py-4 md:text-lg md:leading-8 xl:leading-9">
-			<header className=" border-[var(--color-border)] border-b">
+			<header className="border-[var(--color-border)] border-b">
 				<Title className="mt-0 font-bold text-[var(--color-text-heading)]" as="h1">
 					{page.title}
 				</Title>

app/components/sidebar/mobile-sidebar.tsx

@@ -1,8 +1,8 @@
 import { useParams } from "react-router"
 import { useDocumentationLayoutLoaderData } from "~/hooks/use-documentation-layout-loader-data"
 import { BreadcrumbItem, Breadcrumbs } from "~/ui/breadcrumbs"
-import { IconButton } from "~/ui/icon-button"
 import { Icon } from "~/ui/icon/icon"
+import { IconButton } from "~/ui/icon-button"
 import type { SidebarTree } from "~/utils/create-sidebar-tree"
 import { cn } from "~/utils/css"
 import { buildBreadcrumbs } from "./build-breadcrumbs"
@@ -46,7 +46,6 @@ export const MobileSidebarOverlay = () => {
 	const { isOpen, close } = useMobileSidebar()
 
 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: We don't need keyboard support for this overlay
 		<div
 			className={`fixed inset-0 z-40 bg-black transition-opacity duration-500 ${
 				isOpen ? "opacity-50" : "pointer-events-none opacity-0"
@@ -72,18 +71,13 @@ const MobileSidebarCloseButton = () => {
 	)
 }
 
-export const MobileSidebarPanel = ({
-	sidebarTree,
-	className,
-}: {
-	sidebarTree: SidebarTree
-	className: string
-}) => {
+export const MobileSidebarPanel = ({ sidebarTree, className }: { sidebarTree: SidebarTree; className: string }) => {
 	const { close, isOpen } = useMobileSidebar()
 	return (
+		// biome-ignore lint/a11y/useAriaPropsSupportedByRole: we will keep aria-label for now
 		<div
 			className={cn(
-				"scrollbar fixed left-0 z-50 flex h-[calc(100vh-var(--header-height))] w-72 flex-col overflow-hidden bg-[var(--color-background)] px-3 py-3 transition-transform duration-500 ease-in-out",
+				"scrollbar fixed left-0 z-50 flex h-[calc(100vh-var(--header-height))] w-72 flex-col overflow-hidden bg-(--color-background) px-3 py-3 transition-transform duration-500 ease-in-out",
 				isOpen ? "translate-x-0" : "-translate-x-full",
 				className
 			)}

app/components/sidebar/sidebar-content.tsx

@@ -5,13 +5,7 @@ import { buildStandaloneTo } from "~/utils/path-builders"
 import { useCurrentVersion } from "~/utils/version-resolvers"
 import { DocumentationNavLink, SectionItem } from "./sidebar-items"
 
-export const SidebarContent = ({
-	sidebarTree,
-	onClose,
-}: {
-	sidebarTree: SidebarTree
-	onClose?: () => void
-}) => {
+export const SidebarContent = ({ sidebarTree, onClose }: { sidebarTree: SidebarTree; onClose?: () => void }) => {
 	const { isMobile } = useMobileView()
 	const handle = isMobile ? onClose : undefined
 	const { sections, documentationPages } = sidebarTree

app/components/sidebar/sidebar-items.tsx

@@ -31,7 +31,7 @@ export function DocumentationNavLink({ title, to, depth = 0, onClick, className
 						isActive
 							? "bg-[var(--color-background-active)] font-medium text-[var(--color-text-active)]"
 							: "text-[var(--color-text-normal)] hover:text-[var(--color-text-hover)]"
-					}`
+}`
 			}
 		>
 			{title}

app/components/table-of-content.tsx

@@ -103,7 +103,7 @@ const Navigation = ({
 		<nav
 			ref={navRef}
 			aria-label="Table of contents"
-			className="-mr-4 max-h[calc(100vh-var(--header-height))] overflow-y-auto pr-4"
+			className="max-h[calc(100vh-var(--header-height))] -mr-4 overflow-y-auto pr-4"
 		>
 			<div className="space-y-1 pb-2">
 				{items.map((item) => (

app/components/versions-dropdown.tsx

@@ -48,7 +48,7 @@ export function VersionDropdown() {
 
 			<Icon
 				name="ChevronDown"
-				className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 size-3 text-[var(--color-text-muted)] transition-colors duration-200 xl:right-3 xl:size-4"
+				className="pointer-events-none absolute top-1/2 right-2 size-3 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-200 xl:right-3 xl:size-4"
 			/>
 		</div>
 	)

app/entry.server.tsx

@@ -27,7 +27,7 @@ export default async function handleRequest(
 	const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady"
 	const instance = createInstance()
 	const lng = appContext.lang
-	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	// biome-ignore lint/suspicious/noExplicitAny: lets keep any here
 	const ns = i18nextOpts.getRouteNamespaces(context as any)
 
 	await instance

app/env.server.ts

@@ -16,7 +16,7 @@ let env: ServerEnv
  * @returns Initialized env vars
  */
 function initEnv() {
-	// biome-ignore lint/nursery/noProcessEnv: This should be the only place to use process.env directly
+	// biome-ignore lint/style/noProcessEnv: keep here
 	const envData = envSchema.safeParse(process.env)
 
 	if (!envData.success) {

app/root.tsx

@@ -1,24 +1,24 @@
 import { useEffect, useLayoutEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
+import type { LinksFunction } from "react-router"
 import {
+	isRouteErrorResponse,
 	Link,
 	Links,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
-	isRouteErrorResponse,
 	useNavigate,
 	useRouteError,
 } from "react-router"
-import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
 import { ClientHintCheck, getHints } from "./services/client-hints"
 import tailwindcss from "./tailwind.css?url"
 import { fonts } from "./utils/fonts"
 import { getDomain } from "./utils/get-domain"
-import { THEME, getStorageItem, setStorageItem } from "./utils/local-storage"
+import { getStorageItem, setStorageItem, THEME } from "./utils/local-storage"
 import { getSystemTheme } from "./utils/theme"
 import { normalizeVersion } from "./utils/version-resolvers"
 
@@ -85,7 +85,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 	}, [theme])
 
 	return (
-		<html className="overflow-y-auto overflow-x-hidden " lang={i18n.language} dir={i18n.dir()} data-theme={theme}>
+		<html className="overflow-y-auto overflow-x-hidden" lang={i18n.language} dir={i18n.dir()} data-theme={theme}>
 			<head>
 				<script
 					// biome-ignore lint/security/noDangerouslySetInnerHtml: Sets correct theme on initial load
@@ -179,7 +179,7 @@ export const ErrorBoundary = () => {
 					<h1 className="mb-4 text-center font-bold text-4xl text-[var(--color-text-active)] sm:text-5xl">
 						{t(`error.${errorStatusCode}.title`)}
 					</h1>
-					<p className="mb-8 max-w-2xl text-center text-[var(--color-text-muted)] text-lg ">
+					<p className="mb-8 max-w-2xl text-center text-[var(--color-text-muted)] text-lg">
 						{t(`error.${errorStatusCode}.description`)}
 					</p>
 				</div>