chore: static analysis audit

.github/workflows/analysis.yml

@@ -0,0 +1,50 @@
+name: Analysis
+
+# permissions:
+#   contents: read
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize, reopened]
+
+jobs:
+  analysis:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@c6295a65d1254861815972266d5933fd6e532bdf # v2.11.1
+        with:
+          disable-sudo-and-containers: true
+          egress-policy: audit
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      # TODO: Move to the trunk action once Eslint@9 is supported
+      - name: Run Trunk check
+        run: |
+          curl -fsSLO --retry 3 https://trunk.io/releases/trunk
+          chmod +x trunk
+          ./trunk check --ci
+      # TODO: Integrate with Trunk once Eslint@9 is supported
+      #       https://github.com/trunk-io/plugins/issues/962
+      - name: Run ESLint
+        run: npx next lint
+      # NOTE: Playwright seems to not recommend caching the browsers
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      # NOTE: Playwright will run `next build` and catch any issues
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.trunk/configs/svgo.config.mjs

@@ -0,0 +1,14 @@
+export default {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false, // https://github.com/svg/svgo/issues/1128
+          sortAttrs: true,
+          removeOffCanvasPaths: true,
+        },
+      },
+    },
+  ],
+};

.trunk/trunk.yaml

@@ -2,32 +2,37 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.10
+  version: 1.22.15
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
     - id: trunk
-      ref: v1.6.7
+      ref: v1.6.8
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
   enabled:
+    - node@22.15.1
     - python@3.10.8
   definitions:
     - type: node
       system_version: allowed
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - checkov@3.2.365
-    - eslint@8.57.0
+    - actionlint@1.7.7
+    - oxipng@9.1.5
+    - svgo@3.3.2
+    - checkov@3.2.424
+    # TODO renable once https://github.com/trunk-io/plugins/issues/962 is resolved
+    # - eslint@9.26.0
     - git-diff-check
     - markdownlint@0.44.0
-    - osv-scanner@1.9.2
-    - prettier@3.4.2
-    - trivy@0.59.1
-    - trufflehog@3.88.4
-    - yamllint@1.35.1
+    - osv-scanner@2.0.2
+    - prettier@3.5.3
+    - trivy@0.62.1
+    - trufflehog@3.88.29
+    - yamllint@1.37.1
 actions:
   enabled:
     - trunk-announce

app/layout.module.css

@@ -1,8 +1,9 @@
 .body {
   min-height: 100vh;
   background-color: hsl(var(--background));
-  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

app/page.tsx

@@ -89,13 +89,17 @@ export default function IndexPage() {
                 title="Deploy with Vercel"
                 target="_blank"
               >
+                {/* next/image is unnecessary for this svg */}
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img src="https://vercel.com/button" alt="Deploy with Vercel" />
               </a>
               <a
                 href="https://app.netlify.com/start/deploy?repository=https://github.com/arcjet/example-nextjs"
                 title="Deploy to Netlify"
                 target="_blank"
               >
+                {/* next/image is unnecessary for this svg */}
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img
                   src="https://www.netlify.com/img/deploy/button.svg"
                   alt="Deploy to Netlify"

app/sensitive-info/submitted/page.tsx

@@ -1,9 +1,6 @@
-import { SupportForm } from "@/components/SuppportForm";
-import VisitDashboard from "@/components/compositions/VisitDashboard";
 import WhatNext from "@/components/compositions/WhatNext";
 import useSiteKey from "@/components/effects/useSiteKey";
 import Divider from "@/components/elements/Divider";
-import Link from "next/link";
 
 import pageStyles from "@/components/elements/PageShared.module.scss";
 import styles from "./page.module.css";

components/brand/LogoMarkSpark.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const darkVisualData = {
   sparkD:
@@ -17,7 +17,7 @@ interface Props {
   className?: string;
 }
 
-const LogoMarkSpark = forwardRef((props: Props, ref) => {
+function LogoMarkSpark(props: Props) {
   const theme = useTheme();
 
   const [visualData, setVisualData] = useState<
@@ -43,7 +43,6 @@ const LogoMarkSpark = forwardRef((props: Props, ref) => {
       />
     </svg>
   );
-});
-LogoMarkSpark.displayName = "LogoMarkSpark";
+}
 
 export default LogoMarkSpark;

components/effects/useSiteKey.ts

@@ -1,9 +1,7 @@
-interface Props {}
-
 /**
  * Use Site Key
  * Returns the Arcjet site key for the active deployment if available.
  */
-export default function useSiteKey(props?: Props) {
+export default function useSiteKey() {
   return { siteKey: process.env.ARCJET_SITE ? process.env.ARCJET_SITE : null };
 }

components/elements/Block.tsx

@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { memo } from "react";
-import styled from "styled-components";
+import styled, { type WebTarget } from "styled-components";
 
 import styles from "./Block.module.scss";
 
@@ -26,8 +26,8 @@ export const variants = cva(styles.Block, {
   },
 });
 
-const styledComp = (type: { comp: any; name: string }) =>
-  styled(type.comp)<Props>(({ theme, ...props }) => {
+const styledComp = (type: { comp: WebTarget; name: string }) =>
+  styled(type.comp)<Props>((props) => {
     const padX = Array.isArray(props.pad)
       ? props.pad[0]
       : props.pad != undefined

components/ui/input.tsx

@@ -3,21 +3,19 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import styles from "./input.module.css";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(styles.input, className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(styles.input, className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Input.displayName = "Input";
 
 export { Input };

components/ui/textarea.tsx

@@ -3,20 +3,14 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import styles from "./textarea.module.css";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(styles.textarea, className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea className={cn(styles.textarea, className)} ref={ref} {...props} />
+  );
+});
 Textarea.displayName = "Textarea";
 
 export { Textarea };

eslint.config.mjs

@@ -0,0 +1,15 @@
+import { defineConfig } from "eslint/config";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default defineConfig([
+  compat.config({
+    extends: ["next/core-web-vitals", "next/typescript"],
+  }),
+  {
+    ignores: ["dist/*", ".cache", "public", "node_modules", "*.esm.js"],
+  },
+]);