Test/add cypress

.eslintrc.js

@@ -91,8 +91,10 @@ module.exports = {
     // Must use default export
     {
       files: [
+        'cypress.config.mjs',
         'next.config.mjs',
         'prettier.config.mjs',
+        'unlighthouse.config.ts',
         'app/**/page.tsx',
         'app/**/layout.tsx',
         'app/**/not-found.tsx',
@@ -112,5 +114,9 @@ module.exports = {
       files: ['**/*.d.ts'],
       rules: { 'import/no-default-export': 'off' },
     },
+    {
+      files: ['cypress/**'],
+      extends: ['plugin:cypress/recommended'],
+    },
   ],
 };

.github/workflows/e2e.yml

@@ -0,0 +1,31 @@
+name: E2E
+on: deployment_status
+
+jobs:
+  e2e:
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: [chrome, edge, firefox, webkit]
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          # cache: 'npm' # currently npm cache doesn't work in deployment_status
+      - run: npm ci
+      - run: npx playwright install-deps webkit
+        if: matrix.browser == 'webkit'
+      - uses: cypress-io/github-action@v6
+        with:
+          install: false
+          browser: ${{ matrix.browser }}
+        env:
+          CYPRESS_BASE_URL: ${{ github.event.deployment_status.environment_url }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
+          CYPRESS_CONTENTFUL_ACCESS_TOKEN: ${{ github.event.deployment_status.environment == 'Production' && secrets.CONTENTFUL_ACCESS_TOKEN_PROD || secrets.CONTENTFUL_ACCESS_TOKEN_DEVELOP }}
+          CYPRESS_ENVIRONMENT: ${{ github.event.deployment_status.environment }}

.github/workflows/lint.yml

@@ -1,14 +1,15 @@
 name: Lint Code
-on: [pull_request, push]
+on: push
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 20
           cache: 'npm'
       - run: npm ci
       - run: npx next lint

.github/workflows/prettify.yml

@@ -1,14 +1,15 @@
 name: Prettify Code
-on: [pull_request, push]
+on: push
 
 jobs:
   prettier:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 20
           cache: 'npm'
       - run: npm ci
       - run: npx prettier . --check

.github/workflows/unlighthouse.yml

@@ -0,0 +1,20 @@
+name: Unlighthouse
+on: deployment_status
+
+jobs:
+  unlighthouse:
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm install -g @unlighthouse/cli puppeteer
+      # FIXME: --samples is currently bugged, set it to 3 when unlighthouse is using lighthouse v10+
+      # FIXME: --throttle is not recognized when specified in config file, specifying it with CLI option instead
+      - run: |
+          unlighthouse-ci \
+          --site ${{ github.event.deployment_status.environment_url }} \
+          --throttle
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          path: ./.unlighthouse

.gitignore

@@ -33,3 +33,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cypress
+cypress/downloads/
+cypress/screenshots/
+cypress/videos/
+cypress.env.json

app/(main)/blog/[slug]/page.tsx

@@ -8,7 +8,6 @@ import {
   Grid,
   IconButton,
   Stack,
-  Tooltip,
   Typography,
 } from '@mui/joy';
 import { Metadata } from 'next';
@@ -157,31 +156,27 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
                   {platformProfiles.map(
                     ({ platform, url }) =>
                       platform && (
-                        <Tooltip
+                        <IconButton
+                          aria-label={`${platform.name} profile`}
+                          component="a"
+                          href={url}
                           key={platform.id}
-                          title={`${platform.name} profile`}
+                          size="sm"
+                          target="_blank"
                         >
-                          <IconButton
-                            component="a"
-                            href={url}
-                            size="sm"
-                            target="_blank"
-                          >
-                            <Icon contentfulId={platform.id} />
-                          </IconButton>
-                        </Tooltip>
+                          <Icon contentfulId={platform.id} />
+                        </IconButton>
                       ),
                   )}
-                  <Tooltip title="RSS Feed">
-                    <IconButton
-                      component="a"
-                      href={blogRssFeed.pathname}
-                      size="sm"
-                      target="_blank"
-                    >
-                      <SiRss viewBox="-2 -2 28 28" />
-                    </IconButton>
-                  </Tooltip>
+                  <IconButton
+                    aria-label="RSS Feed"
+                    component="a"
+                    href={blogRssFeed.pathname}
+                    size="sm"
+                    target="_blank"
+                  >
+                    <SiRss viewBox="-2 -2 28 28" />
+                  </IconButton>
                 </Stack>
               </Stack>
               <Stack

app/layout.tsx

@@ -14,7 +14,8 @@ import { baseUrl } from '@/constants/site-config';
 import { Providers } from './providers';
 
 const RootLayout: FC<PropsWithChildren> = ({ children }) => (
-  <html lang="en">
+  // data-joy-color-scheme is dynamically injected, suppressing the hydration warning in this case
+  <html lang="en" suppressHydrationWarning>
     <body>
       <Providers>{children}</Providers>
       <Analytics />

app/robots.ts

@@ -6,7 +6,7 @@ const robots = () =>
   ({
     rules: {
       userAgent: '*',
-      allow: '/',
+      disallow: process.env.VERCEL_ENV === 'production' ? undefined : '/',
     },
     sitemap: `${baseUrl}/sitemap.xml`,
   }) satisfies MetadataRoute.Robots;

components/blog/copy-url-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { IconButton, IconButtonProps, Tooltip } from '@mui/joy';
+import { IconButton, IconButtonProps } from '@mui/joy';
 import { Check, Copy } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { FC, useEffect, useRef, useState } from 'react';
@@ -24,28 +24,17 @@ export const CopyUrlButton: FC<Omit<IconButtonProps, 'children'>> = (props) => {
   useEffect(() => () => clearTimeout(timeout.current), []);
 
   return (
-    <Tooltip title="Copy blog url">
-      <IconButton
-        aria-pressed={copied}
-        color={copied ? 'success' : undefined}
-        onClick={async () => {
-          await navigator.clipboard.writeText(url);
-          setCopied(true);
-          timeout.current = setTimeout(() => setCopied(false), 1000);
-        }}
-        sx={{
-          '&[aria-pressed="true"]:not(:active)': {
-            bgcolor: 'transparent',
-            '&:hover': {
-              bgcolor: (theme) =>
-                theme.vars.palette[copied ? 'success' : 'neutral'].plainHoverBg,
-            },
-          },
-        }}
-        {...props}
-      >
-        {copied ? <Check /> : <Copy />}
-      </IconButton>
-    </Tooltip>
+    <IconButton
+      aria-label="Copy blog url"
+      color={copied ? 'success' : undefined}
+      onClick={async () => {
+        await navigator.clipboard.writeText(url);
+        setCopied(true);
+        timeout.current = setTimeout(() => setCopied(false), 1000);
+      }}
+      {...props}
+    >
+      {copied ? <Check /> : <Copy />}
+    </IconButton>
   );
 };

components/blog/share-dropdown.tsx

@@ -15,7 +15,6 @@ import {
   Menu,
   MenuButton,
   MenuItem,
-  Tooltip,
 } from '@mui/joy';
 import { Share2 } from 'lucide-react';
 import { usePathname } from 'next/navigation';
@@ -66,11 +65,12 @@ export const ShareDropdown: FC<ShareDropdownProps> = ({ blog, ...props }) => {
 
   return (
     <Dropdown {...props}>
-      <Tooltip title="Share this blog">
-        <MenuButton slots={{ root: IconButton }}>
-          <Share2 />
-        </MenuButton>
-      </Tooltip>
+      <MenuButton
+        slotProps={{ root: { 'aria-label': 'Share this blog' } }}
+        slots={{ root: IconButton }}
+      >
+        <Share2 />
+      </MenuButton>
       <Menu>
         {socialMediaOptions.map(({ Icon, name, url }) => (
           <MenuItem component="a" href={url} key={name} target="_blank">

components/contentful.tsx

@@ -31,6 +31,7 @@ import { LiteralUnion } from 'type-fest';
 
 import * as contentfulIds from '@/constants/contentful-ids';
 import ContentfulLight from '@/logos/contentful-light.svg';
+import CypressLight from '@/logos/cypress-light.svg';
 import EmailJs from '@/logos/emailjs.svg';
 import ImprovMx from '@/logos/improvmx.svg';
 import Mui from '@/logos/mui.svg';
@@ -112,6 +113,7 @@ const Logos = {
     light: PrismaLight,
     dark: PrismaDark,
   },
+  [contentfulIds.cypress]: { light: CypressLight, dark: undefined },
 };
 
 export interface LogoProps extends SVGProps<SVGSVGElement> {

components/footer.tsx

@@ -9,7 +9,6 @@ import {
   ListItem,
   ListItemButton,
   Stack,
-  Tooltip,
   Typography,
 } from '@mui/joy';
 import NextLink from 'next/link';
@@ -35,28 +34,27 @@ export const Footer: FC<FooterProps> = async (props) => {
           {platformProfiles.map(
             ({ platform, url }) =>
               platform && (
-                <Tooltip key={platform.id} title={`${platform.name} profile`}>
-                  <IconButton
-                    component="a"
-                    href={url}
-                    size="sm"
-                    target="_blank"
-                  >
-                    <Icon contentfulId={platform.id} />
-                  </IconButton>
-                </Tooltip>
+                <IconButton
+                  aria-label={`${platform.name} profile`}
+                  component="a"
+                  href={url}
+                  key={platform.id}
+                  size="sm"
+                  target="_blank"
+                >
+                  <Icon contentfulId={platform.id} />
+                </IconButton>
               ),
           )}
-          <Tooltip title="RSS Feed">
-            <IconButton
-              component="a"
-              href={blogRssFeed.pathname}
-              size="sm"
-              target="_blank"
-            >
-              <SiRss viewBox="-2 -2 28 28" />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            aria-label="RSS Feed"
+            component="a"
+            href={blogRssFeed.pathname}
+            size="sm"
+            target="_blank"
+          >
+            <SiRss viewBox="-2 -2 28 28" />
+          </IconButton>
         </Stack>
 
         <Typography level="body-sm" mt={2}>

components/header.tsx

@@ -8,7 +8,6 @@ import {
   ListItem,
   ListItemButton,
   Stack,
-  Tooltip,
 } from '@mui/joy';
 import NextLink from 'next/link';
 import { FC } from 'react';
@@ -52,11 +51,13 @@ export const Header: FC<HeaderProps> = async (props) => {
             <Link
               aria-label="Go to home page"
               component={NextLink}
+              data-cy="logo"
               href={{ pathname: home.pathname, hash: home.id }}
             >
               <Logo width={30} />
             </Link>
             <List
+              data-cy="nav-list-md"
               orientation="horizontal"
               sx={{
                 '--List-radius': 'var(--joy-radius-sm)',
@@ -83,17 +84,17 @@ export const Header: FC<HeaderProps> = async (props) => {
             {platformProfiles.map(
               ({ platform, url }) =>
                 platform && (
-                  <Tooltip key={platform.id} title={`${platform.name} profile`}>
-                    <IconButton
-                      component="a"
-                      href={url}
-                      size="sm"
-                      target="_blank"
-                      variant="outlined"
-                    >
-                      <Icon contentfulId={platform.id} />
-                    </IconButton>
-                  </Tooltip>
+                  <IconButton
+                    aria-label={`${platform.name} profile`}
+                    component="a"
+                    href={url}
+                    key={platform.id}
+                    size="sm"
+                    target="_blank"
+                    variant="outlined"
+                  >
+                    <Icon contentfulId={platform.id} />
+                  </IconButton>
                 ),
             )}
             <ModeToggleButton size="sm" variant="outlined" />