Add CI workflow (#121)

I noticed this repository has no CI workflow (just Vercel preview
deploys). This adds a simple CI workflow to confirm the build works and
formatting hasn't changed, based on the one in connectrpc.com.

Ref:
https://github.com/connectrpc/connectrpc.com/blob/main/.github/workflows/ci.yaml

Author: stefanvanburen

.github/workflows/ci.yaml

@@ -0,0 +1,21 @@
+name: ci
+on:
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - run: npm clean-install
+      - run: npm run ci
+      - name: Check Diff
+        run: |
+          [[ -z $(git status --porcelain | tee /dev/stderr) ]] || exit 1

.nvmrc

@@ -0,0 +1 @@
+v24.14.0

package.json

@@ -18,7 +18,8 @@
     "check:fix": "biome check --write .",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "ci": "npm run build && npm run check:fix"
   },
   "dependencies": {
     "@docusaurus/core": "^3.9.2",

src/theme/Footer/index.tsx

@@ -15,7 +15,7 @@ import Link from "@docusaurus/Link";
 import { FooterLinkItem, useThemeConfig } from "@docusaurus/theme-common";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import clsx from "clsx";
-import React, { PropsWithChildren } from "react";
+import React, { type JSX, PropsWithChildren } from "react";
 
 import IconMail from "./icon-envelope--gray.svg";
 import IconLinkedIn from "./icon-linkedin--gray.svg";

src/theme/Navbar/Content/index.tsx

@@ -11,7 +11,7 @@ import type { Props as NavbarItemConfig } from "@theme/NavbarItem";
 import NavbarItem from "@theme/NavbarItem";
 import SearchBar from "@theme/SearchBar";
 import clsx from "clsx";
-import type React from "react";
+import type { JSX, ReactNode } from "react";
 import { MaintainedBy } from "../../components/maintained-by";
 import styles from "./styles.module.css";
 
@@ -30,7 +30,7 @@ function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element {
   return <div className={styles.linkList}>{renderedItems}</div>;
 }
 
-function NavbarContentLayout({ left, right }: { left: React.ReactNode; right: React.ReactNode }) {
+function NavbarContentLayout({ left, right }: { left: ReactNode; right: ReactNode }) {
   return (
     <div className={clsx("navbar__inner", styles.inner)}>
       <div className="navbar__items">{left}</div>

src/theme/Navbar/Layout/index.tsx

@@ -9,7 +9,7 @@ import { useIsScrolled } from "@site/src/utils/use-is-scrolled";
 import type { Props } from "@theme/Navbar/Layout";
 import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar";
 import clsx from "clsx";
-import type { ComponentProps } from "react";
+import type { ComponentProps, JSX } from "react";
 import styles from "./styles.module.css";
 
 function NavbarBackdrop(props: ComponentProps<"div">) {

src/theme/Navbar/Logo/index.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import styles from "./styles.module.css";
 
 export default function NavbarLogo(): JSX.Element {

src/theme/components/badge.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import type { JSX } from "react";
 
 import styles from "./badge.module.css";