Update deps, use biome

app/(home)/components/header/index.tsx

@@ -8,7 +8,7 @@ import { Globe, MapPin, User } from "react-feather";
 
 import { HStack, VStack } from "~/components/stack";
 
-import { HeaderItem, ItemProps } from "./components/item";
+import { HeaderItem, type ItemProps } from "./components/item";
 import styles from "./styles.module.scss";
 
 const profile: ItemProps[] = [
@@ -45,7 +45,7 @@ const links: ItemProps[] = [
   {
     icon: IconBrandDiscord,
     label: "Discord",
-    value: "nzws#0001",
+    value: "nzws",
   },
 ];
 
@@ -73,13 +73,13 @@ export function Header() {
 
         <HStack gap="12px" alignItems="center" wrap className={styles.items}>
           {profile.map((props, index) => (
-            <HeaderItem key={index} {...props} />
+            <HeaderItem key={props.href ?? index} {...props} />
           ))}
         </HStack>
 
         <HStack gap="12px" alignItems="center" wrap className={styles.items}>
           {links.map((props, index) => (
-            <HeaderItem key={index} {...props} />
+            <HeaderItem key={props.href ?? index} {...props} />
           ))}
         </HStack>
       </VStack>

app/api/internal/search-raw/route.ts

@@ -4,7 +4,7 @@ import RemoveMarkdown from "remove-markdown";
 import { ArticleFinderService } from "~/lib/article-finder-service";
 import { CacheService } from "~/lib/cache-service";
 import { ArticleType } from "~/utils/constants";
-import { ArticleDetails, ArticleSearchExport } from "~/utils/type";
+import type { ArticleDetails, ArticleSearchExport } from "~/utils/type";
 
 const items = Object.values(ArticleType).map((type) =>
   new CacheService<ArticleDetails[]>("article-list", type).sync(() =>
@@ -14,7 +14,7 @@ const items = Object.values(ArticleType).map((type) =>
 
 export async function GET() {
   const data = (await Promise.all(items))
-    .flatMap((item) => item)
+    .flat()
     .filter((item) => !item.isHidden);
 
   const flatted: ArticleSearchExport[] = data.map((item) => ({

app/api/web/og/[hash]/[base64]/route.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "@vercel/og";
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 
 import { signature } from "~/lib/crypto/browser";
 import { decode } from "~/lib/encoder";
@@ -80,12 +80,11 @@ export async function GET(
         },
       ],
     });
-  } else {
-    return NextResponse.json(
-      {
-        error: "Invalid type",
-      },
-      { status: 400 },
-    );
   }
+  return NextResponse.json(
+    {
+      error: "Invalid type",
+    },
+    { status: 400 },
+  );
 }

app/api/web/search/route.ts

@@ -1,7 +1,7 @@
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 
 import { BASE_URL } from "~/utils/constants";
-import { ArticleSearchExport } from "~/utils/type";
+import type { ArticleSearchExport } from "~/utils/type";
 
 export const runtime = "edge";
 

app/blog/[id]/page.tsx

@@ -6,7 +6,7 @@ import { Image } from "~/components/image";
 import { MDXLoader } from "~/components/mdx-loader";
 import { HStack, VStack } from "~/components/stack";
 import { getArticle } from "~/lib/file-io";
-import { ArticleType, dateOptions, PUBLIC_URL } from "~/utils/constants";
+import { ArticleType, PUBLIC_URL, dateOptions } from "~/utils/constants";
 
 import styles from "./styles.module.scss";
 
@@ -66,9 +66,9 @@ export default async function Page({ params: { id } }: { params: Params }) {
         <MDXLoader content={article.markdown} />
       </div>
 
-      {article.scripts?.map((script, key) => (
+      {article.scripts?.map((script) => (
         <Script
-          key={key}
+          key={scriptUrls[script] || script}
           src={scriptUrls[script] || script}
           strategy="lazyOnload"
         />
@@ -101,7 +101,7 @@ export async function generateMetadata({
     description,
     openGraph: {
       title: `${article.title} - Blog - nzws.me`,
-      url: PUBLIC_URL ? PUBLIC_URL + "/blog/" + article.slug : undefined,
+      url: PUBLIC_URL ? `${PUBLIC_URL}/blog/${article.slug}` : undefined,
       description,
       images: [
         {

app/blog/components/item/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { FC } from "react";
+import type { FC } from "react";
 
 import { Image } from "~/components/image";
 import { HStack, VStack } from "~/components/stack";

app/blog/layout.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 import { Footer } from "~/components/footer";
 import { Navigation } from "~/components/navigation";

app/layout.tsx

@@ -3,7 +3,7 @@ import "~/styles/global.scss";
 import "react-loading-skeleton/dist/skeleton.css";
 
 import { Analytics } from "@vercel/analytics/react";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 import { Mincho, Sans } from "~/styles/font";
 

app/product/layout.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export default function Layout({ children }: PropsWithChildren) {
   return children;

biome.json

@@ -2,11 +2,12 @@
   "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
   "formatter": {
     "enabled": true,
-    "indentStyle": "space",
-    "ignore": ["packages/publicapi-client/src/api"]
+    "indentStyle": "space"
   },
   "linter": {
-    "enabled": false
+    "rules": {
+      "recommended": true
+    }
   },
   "organizeImports": {
     "enabled": true

components/image/index.tsx

@@ -29,7 +29,7 @@ async function RealComponent({ src, ...props }: Props) {
   });
   if (!metadata) {
     // @ts-expect-error: fallback
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    // biome-ignore lint/a11y/useAltText: <explanation>
     return <img src={src} {...props} />;
   }
 

components/mdx-loader/components/image-with-note/index.tsx

@@ -1,6 +1,5 @@
-import { PropsWithChildren } from "react";
-
-import { Image, ImageProps } from "~/components/image";
+import type { PropsWithChildren } from "react";
+import { Image, type ImageProps } from "~/components/image";
 import { VStack } from "~/components/stack";
 
 import styles from "./styles.module.scss";
@@ -13,7 +12,6 @@ export function ImageWithNote({
 }: PropsWithChildren<Props>) {
   return (
     <VStack>
-      {/* eslint-disable-next-line jsx-a11y/alt-text */}
       <Image {...props} />
 
       <div className={styles.note}>{children}</div>

components/mdx-loader/components/index.tsx

@@ -1,4 +1,4 @@
-import { MDXRemoteProps } from "next-mdx-remote/rsc";
+import type { MDXRemoteProps } from "next-mdx-remote/rsc";
 
 import { Image } from "~/components/image";
 

components/mdx-loader/components/link.tsx

@@ -1,5 +1,5 @@
 import NextLink from "next/link";
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 
 type Props = HTMLAttributes<HTMLAnchorElement> & {
   href?: string;

components/mdx-loader/components/mastodon-embed.tsx

@@ -13,6 +13,7 @@ export function MastodonEmbed({ url }: Props) {
         border: "none",
       }}
       allowFullScreen
+      title="Mastodon embed"
     />
   );
 }

components/navigation/components/command/index.tsx

@@ -5,17 +5,17 @@ import "./global.scss";
 import { Command } from "cmdk";
 import { useRouter } from "next/navigation";
 import {
-  FC,
+  type FC,
   Fragment,
-  KeyboardEvent,
+  type KeyboardEvent,
   useCallback,
   useDeferredValue,
   useEffect,
   useRef,
   useState,
 } from "react";
 
-import { ArticleSearch } from "~/utils/type";
+import type { ArticleSearch } from "~/utils/type";
 
 import styles from "./styles.module.scss";
 

components/navigation/components/link/index.tsx

@@ -1,5 +1,5 @@
 import NextLink from "next/link";
-import { FC, PropsWithChildren } from "react";
+import type { FC, PropsWithChildren } from "react";
 
 import styles from "./styles.module.scss";
 

components/navigation/hooks/use-cmdk.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
+import { type Dispatch, type SetStateAction, useEffect } from "react";
 
 type Action = Dispatch<SetStateAction<boolean>>;
 

components/navigation/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import NextLink from "next/link";
-import { FC, Fragment, useCallback, useState } from "react";
+import { type FC, Fragment, useCallback, useState } from "react";
 import { Command } from "react-feather";
 
 import { HStack } from "~/components/stack";
@@ -89,6 +89,7 @@ export const Navigation: FC<Props> = ({ currentPage }) => {
             className={styles.command_button}
             onClick={() => setIsCmdOpened((prev) => !prev)}
             aria-label="Command"
+            type="button"
           >
             <Command size={22} />
           </button>

components/stack/index.tsx

@@ -1,5 +1,5 @@
 import type { Property } from "csstype";
-import { FC, HTMLAttributes, PropsWithChildren } from "react";
+import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 
 import styles from "./styles.module.scss";
 

lib/article-finder-service.ts

@@ -1,8 +1,8 @@
-import { readdir } from "fs/promises";
-import path from "path";
+import { readdir } from "node:fs/promises";
+import path from "node:path";
 
-import { ArticleType } from "~/utils/constants";
-import { ArticleDetails } from "~/utils/type";
+import type { ArticleType } from "~/utils/constants";
+import type { ArticleDetails } from "~/utils/type";
 
 import { ArticleServiceV2 } from "./article-service-v2";
 

lib/article-service-v2.ts

@@ -1,10 +1,10 @@
-import { readFile } from "fs/promises";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
 import matter from "gray-matter";
-import path from "path";
 import RemoveMarkdown from "remove-markdown";
 
-import { ArticleType } from "~/utils/constants";
-import { ArticleDetails, OGImageDataArticle } from "~/utils/type";
+import type { ArticleType } from "~/utils/constants";
+import type { ArticleDetails, OGImageDataArticle } from "~/utils/type";
 
 import { signature } from "./crypto/node";
 import { encode } from "./encoder";
@@ -89,9 +89,8 @@ export class ArticleServiceV2 {
     const trimmed = text.trim();
     if (!length || trimmed.length < length) {
       return trimmed;
-    } else {
-      return trimmed.slice(0, length).trim() + "...";
     }
+    return `${trimmed.slice(0, length).trim()}...`;
   }
 
   private async getFallbackCoverImageUrl(data: OGImageDataArticle) {

lib/cache-service.ts

@@ -1,5 +1,5 @@
-import { mkdir, readFile, writeFile } from "fs/promises";
-import path from "path";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
 import sanitize from "sanitize-filename";
 
 const cacheDir = path.resolve(process.cwd(), ".nzws-cache");

lib/crypto/browser.ts

@@ -10,10 +10,6 @@ const key = crypto.subtle.importKey(
 );
 
 export const signature = async (data: string): Promise<string> =>
-  (
-    crypto.subtle.sign(
-      "HMAC",
-      await key,
-      new TextEncoder().encode(data),
-    ) as Promise<Uint8Array>
-  ).then(binaryToString);
+  crypto.subtle
+    .sign("HMAC", await key, new TextEncoder().encode(data))
+    .then(binaryToString);

lib/crypto/node.ts

@@ -1,4 +1,4 @@
-import crypto from "crypto";
+import crypto from "node:crypto";
 
 import { binaryToString } from "../encoder";
 import { secret } from "./secret";
@@ -12,10 +12,6 @@ const key = crypto.webcrypto.subtle.importKey(
 );
 
 export const signature = async (data: string): Promise<string> =>
-  (
-    crypto.webcrypto.subtle.sign(
-      "HMAC",
-      await key,
-      new TextEncoder().encode(data),
-    ) as Promise<Uint8Array>
-  ).then(binaryToString);
+  crypto.webcrypto.subtle
+    .sign("HMAC", await key, new TextEncoder().encode(data))
+    .then(binaryToString);

lib/encoder.ts

@@ -7,7 +7,7 @@ import {
   encode as encodeBase64,
 } from "universal-base64url";
 
-export const binaryToString = (data: Uint8Array) => {
+export const binaryToString = (data: ArrayBuffer | Uint8Array) => {
   const arr = new Uint8Array(data);
   const result = [];
   for (let i = 0; i < arr.length; i++) {
@@ -20,7 +20,7 @@ export const binaryToString = (data: Uint8Array) => {
 export const stringToBinary = (data: string) => {
   const arr = new Uint8Array(data.length / 2);
   for (let i = 0; i < arr.length; i++) {
-    arr[i] = parseInt(data.slice(i * 2, i * 2 + 2), 16);
+    arr[i] = Number.parseInt(data.slice(i * 2, i * 2 + 2), 16);
   }
 
   return arr;

lib/file-io.ts

@@ -1,11 +1,11 @@
 import "server-only";
 
-import path from "path";
+import path from "node:path";
 import { getPlaiceholder } from "plaiceholder";
 import { cache } from "react";
 
-import { ArticleType } from "~/utils/constants";
-import { ImageDetails } from "~/utils/type";
+import type { ArticleType } from "~/utils/constants";
+import type { ImageDetails } from "~/utils/type";
 
 import { ArticleFinderService } from "./article-finder-service";
 import { ArticleServiceV2 } from "./article-service-v2";

middleware.ts

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 
 const blocklist: string[] = ["got (https://github.com/sindresorhus/got)"];
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.