Merge pull request #58 from hackerspace-ntnu/lighthouse-fixes

Fix lighthouse rules for selected pages

.github/workflows/deploy-script.yml

@@ -25,7 +25,7 @@ on:
 jobs:
   script:
     name: Script
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     environment: ${{ inputs.environment }}
     steps:
       - uses: appleboy/[email protected]

biome.json

@@ -11,6 +11,9 @@
     "enabled": true,
     "rules": {
       "recommended": true,
+      "a11y": {
+        "useSemanticElements": "off"
+      },
       "nursery": {
         "useSortedClasses": {
           "level": "warn",

global.d.ts

@@ -1,5 +1,3 @@
 // Use type safe message keys with `next-intl`
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 type Messages = typeof import('./messages/en.json');
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 declare interface IntlMessages extends Messages {}

lefthook.yml

@@ -1,6 +1,6 @@
 pre-commit:
   commands:
     check:
-      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      glob: "*.{js,ts,tsx,json}"
       stage_fixed: true
       run: bunx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}

lighthouserc.cjs

@@ -0,0 +1,66 @@
+const PAGES_EXCLUDED = ['news', 'storage'];
+
+// Do not convert into an ES6 export.
+// lighthouse-ci (as of 0.14.0) uses require() to import, and this is not supported with ES6 modules.
+module.exports = {
+  ci: {
+    collect: {
+      url: [
+        'http://localhost:3000/en/', // Trailing slash required, else the regex for default lighthouse rules won't catch this one
+        'http://localhost:3000/en/about',
+        'http://localhost:3000/en/events',
+        'http://localhost:3000/en/news',
+        'http://localhost:3000/en/news/1',
+        'http://localhost:3000/en/storage',
+        'http://localhost:3000/en/storage/shopping-cart',
+      ],
+      startServerCommand: 'bun run start',
+    },
+    upload: {
+      target: 'lhci',
+      serverBaseUrl: 'https://lhci.hackerspace-ntnu.no', // build token is set by the GH Action
+    },
+    assert: {
+      assertMatrix: [
+        {
+          matchingUrlPattern: `http://.*/en/(?!${PAGES_EXCLUDED.join('|')}).*`, // match all routes, except for pages with special rules. See https://github.com/GoogleChrome/lighthouse-ci/issues/511 and https://github.com/GoogleChrome/lighthouse-ci/issues/208#issuecomment-784501105
+          preset: 'lighthouse:recommended',
+          assertions: {
+            'bf-cache': 'off',
+            'color-contrast': 'off',
+            'heading-order': 'off',
+            'largest-contentful-paint': 'off',
+            'render-blocking-resources': 'off',
+          },
+        },
+        {
+          matchingUrlPattern: 'http://.*/en/news.*',
+          preset: 'lighthouse:recommended',
+          assertions: {
+            'bf-cache': 'off',
+            'color-contrast': 'off',
+            'heading-order': 'off',
+            'largest-contentful-paint': 'off',
+            'render-blocking-resources': 'off',
+            interactive: 'off',
+            'uses-responsive-images': 'off', // Should be removed when we obtain images from backend
+          },
+        },
+        {
+          matchingUrlPattern: 'http://.*/en/storage.*',
+          preset: 'lighthouse:recommended',
+          assertions: {
+            'bf-cache': 'off',
+            'color-contrast': 'off',
+            'heading-order': 'off',
+            'largest-contentful-paint': 'off',
+            'render-blocking-resources': 'off',
+            'unused-javascript': 'off',
+            'cumulative-layout-shift': 'off', // We don't always know how many items are in the cart, which can lead to layout shifts when loading completes
+            'max-potential-fid': 'off',
+          },
+        },
+      ],
+    },
+  },
+};

next.config.js

@@ -1,11 +1,7 @@
 import nextIntl from 'next-intl/plugin';
-
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
 await import('./src/env.js');
-const withNextIntl = nextIntl('./src/lib/locale/i18n.ts');
+
+const withNextIntl = nextIntl('./src/lib/locale/request.ts');
 
 /** @type {import("next").NextConfig} */
 const config = {

package.json

@@ -36,8 +36,6 @@
     "@trpc/client": "^11.0.0-rc.490",
     "@trpc/react-query": "^11.0.0-rc.490",
     "@trpc/server": "^11.0.0-rc.490",
-    "autoprefixer": "^10.4.19",
-    "client-only": "^0.0.1",
     "cmdk": "1.0.0",
     "country-flag-icons": "^1.5.12",
     "cva": "^1.0.0-beta.1",
@@ -47,7 +45,6 @@
     "lucide-react": "^0.396.0",
     "next": "^14.2.10",
     "next-intl": "^3.18.1",
-    "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "nuqs": "^1.17.4",
     "postgres": "^3.4.4",
@@ -56,25 +53,29 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "reading-time": "^1.5.0",
-    "server-only": "^0.0.1",
     "sharp": "^0.33.4",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "^1.9.1",
     "@fluid-tailwind/tailwind-merge": "^0.0.2",
     "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "client-only": "^0.0.1",
     "drizzle-kit": "^0.24.1",
     "fluid-tailwind": "^1.0.3",
     "lefthook": "^1.7.14",
+    "next-sitemap": "^4.2.3",
     "postcss": "^8.4.38",
+    "server-only": "^0.0.1",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-radix": "^3.0.5",
     "typescript": "^5.5.0"
   },
   "packageManager": "[email protected]"

postcss.config.cjs → postcss.config.js

@@ -1,8 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
 
-module.exports = config;
+export default config;

src/app/not-found.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import { routing } from '@/lib/locale';
 import NextError from 'next/error';
 
 export default function NotFoundPage() {
   return (
-    <html lang='en'>
+    <html lang={routing.defaultLocale}>
       <body>
         <NextError statusCode={404} />
       </body>

src/components/layout/Footer.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/components/assets/icons';
 import { IDILogo, NexusLogo } from '@/components/assets/sponsors';
 import { LogoLink } from '@/components/layout/LogoLink';
-import { Nav } from '@/components/layout/Nav';
+import { Nav } from '@/components/layout/header/Nav';
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/locale/navigation';
 import { BugIcon, MailIcon } from 'lucide-react';

src/components/layout/Header.tsx

@@ -1,8 +1,8 @@
 import { LogoLink } from '@/components/layout/LogoLink';
-import { MobileSheet } from '@/components/layout/MobileSheet';
-import { Nav } from '@/components/layout/Nav';
 import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu';
 import { LocaleMenu } from '@/components/layout/header/LocaleMenu';
+import { MobileSheet } from '@/components/layout/header/MobileSheet';
+import { Nav } from '@/components/layout/header/Nav';
 import { ProfileMenu } from '@/components/layout/header/ProfileMenu';
 import { useTranslations } from 'next-intl';
 

src/components/layout/MobileSheet.tsx → src/components/layout/header/MobileSheet.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { LogoLink } from '@/components/layout/LogoLink';
-import { Nav } from '@/components/layout/Nav';
+import { Nav } from '@/components/layout/header/Nav';
 import { Button } from '@/components/ui/Button';
 import {
   Sheet,

src/components/news/ArticleCard.tsx

@@ -49,7 +49,10 @@ function ArticleCard({
             fill
           />
           <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
-            <CardTitle className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'>
+            <CardTitle
+              className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'
+              level='h2'
+            >
               {title}
             </CardTitle>
             <CardDescription className='line-clamp-1 text-xs sm:text-sm'>

src/components/storage/ItemCard.tsx

@@ -33,7 +33,7 @@ function ItemCard({
             priority={true}
           />
         </div>
-        <CardTitle className='mt-2 truncate leading-tight'>
+        <CardTitle className='mt-2 truncate leading-tight' level='h2'>
           {item.name}
         </CardTitle>
         <CardDescription>{item.location}</CardDescription>

src/components/ui/Card.tsx

@@ -1,6 +1,10 @@
 import { cx } from '@/lib/utils';
 import * as React from 'react';
 
+type CardTitleProps = {
+  level?: 'h2' | 'h3' | 'h4';
+} & React.HTMLAttributes<HTMLHeadingElement>;
+
 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
@@ -28,19 +32,22 @@ const CardHeader = React.forwardRef<
 ));
 CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cx(
-      'font-semibold text-2xl leading-none tracking-tight',
-      className,
-    )}
-    {...props}
-  />
-));
+const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
+  ({ level = 'h3', className, ...props }, ref) => {
+    const Component = level;
+
+    return (
+      <Component
+        ref={ref}
+        className={cx(
+          'font-semibold text-2xl leading-none tracking-tight',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<

src/components/ui/Combobox.tsx

@@ -50,7 +50,7 @@ function Combobox({
       <PopoverTrigger asChild>
         <Button
           variant='outline'
-          role='combobox' // biome-ignore lint: Button is styled, so we're not using the select element
+          role='combobox'
           aria-expanded={open}
           aria-label={ariaLabel}
           className={cx('w-[200px] justify-between', buttonClassName)}

src/lib/locale/i18n.ts → src/lib/locale/request.ts

@@ -3,8 +3,7 @@ import { getRequestConfig } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
 export default getRequestConfig(async ({ locale }) => {
-  // @ts-ignore
-  if (!routing.locales.includes(locale)) notFound();
+  if (!routing.locales.includes(locale as 'en')) notFound();
   return {
     messages: (await import(`../../../messages/${locale}.json`))
       .default as Messages,

tailwind.config.ts

@@ -2,6 +2,7 @@ import tailwindFluid, { extract, screens, fontSize } from 'fluid-tailwind';
 import tailwindScrollbar from 'tailwind-scrollbar';
 import type { Config } from 'tailwindcss';
 import tailwindAnimate from 'tailwindcss-animate';
+import tailwindRadix from 'tailwindcss-radix';
 import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
@@ -78,6 +79,9 @@ const config = {
     },
   },
   plugins: [
+    tailwindRadix({
+      variantPrefix: false,
+    }),
     tailwindFluid,
     tailwindAnimate,
     tailwindScrollbar({ nocompatible: true }),

tsconfig.json

@@ -31,10 +31,10 @@
   },
   "include": [
     ".eslintrc.js",
+    "postcss.config.js",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "**/*.cjs",
     "**/*.js",
     ".next/types/**/*.ts"
   ],