chore: remove usage of styled-jsx

.devcontainer/Dockerfile

@@ -1,2 +1 @@
-ARG VARIANT="16"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+FROM mcr.microsoft.com/devcontainers/javascript-node:18

.devcontainer/devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "name": "divlo",
+  "name": "Divlo",
   "dockerComposeFile": "./docker-compose.yml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
@@ -10,8 +10,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

.github/workflows/analyze.yml

@@ -16,12 +16,12 @@ jobs:
         language: ['javascript']
 
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
+        uses: 'github/codeql-action/init@v2'
         with:
           languages: ${{ matrix.language }}
 
       - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
+        uses: 'github/codeql-action/analyze@v2'

.github/workflows/build.yml

@@ -10,12 +10,12 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/lint.yml

@@ -10,12 +10,12 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
   release:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -21,9 +21,9 @@ jobs:
           git_commit_gpgsign: true
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/test.yml

@@ -10,12 +10,12 @@ jobs:
   test-unit:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'
@@ -27,12 +27,12 @@ jobs:
   test-lighthouse:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'
@@ -52,12 +52,12 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.vscode/extensions.json

@@ -3,8 +3,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

Dockerfile

@@ -1,18 +1,18 @@
-FROM node:16.17.1 AS dependencies
+FROM node:18.11.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.17.1 AS builder
+FROM node:18.11.0 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.17.1 AS runner
+FROM node:18.11.0 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 COPY --from=builder /usr/src/app/.next/standalone ./
 COPY --from=builder /usr/src/app/.next/static ./.next/static
 COPY --from=builder /usr/src/app/public ./public

components/ErrorPage.tsx

@@ -1,17 +1,24 @@
 import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 
-export interface ErrorPageProps {
+import type { FooterProps } from './Footer'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export interface ErrorPageProps extends FooterProps {
   statusCode: number
   message: string
 }
 
 export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
-  const { message, statusCode } = props
+  const { message, statusCode, version } = props
   const { t } = useTranslation()
 
   return (
     <>
+      <div className='flex h-screen flex-col pt-0'>
+        <Header showLanguage />
+        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
           <h1 className='my-6 text-4xl font-semibold'>
             {t('errors:error')}{' '}
             <span
@@ -29,25 +36,9 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
               </a>
             </Link>
           </p>
-
-      <style jsx global>
-        {`
-          main {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
+        </main>
+        <Footer version={version} />
+      </div>
     </>
   )
 }

components/Header/SwitchTheme.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import classNames from 'clsx'
 import { useTheme } from 'next-themes'
 
 export const SwitchTheme: React.FC = () => {
@@ -18,109 +19,60 @@ export const SwitchTheme: React.FC = () => {
   }
 
   return (
-    <>
     <div
       className='flex items-center'
       data-cy='switch-theme-click'
       onClick={handleClick}
     >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
           <div
             data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
+            className={classNames(
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
           >
-              <span className='toggle_Dark relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌜
             </span>
           </div>
           <div
             data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
+            className={classNames(
+              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
           >
-              <span className='toggle_Light relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌞
             </span>
           </div>
         </div>
-          <div className='toggle-thumb absolute' />
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
         <input
           data-cy='switch-theme-input'
           type='checkbox'
           aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
           defaultChecked
         />
       </div>
     </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
   )
 }

cypress.config.ts

@@ -3,14 +3,11 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   fixturesFolder: false,
   video: false,
-  downloadsFolder: undefined,
   screenshotOnRunFailure: false,
-
   e2e: {
     baseUrl: 'http://localhost:3000',
     supportFile: false
   },
-
   component: {
     devServer: {
       framework: 'next',

next.config.js

@@ -5,9 +5,9 @@ const nextPWA = require('next-pwa')({
 const nextTranslate = require('next-translate')
 
 /** @type {import("next").NextConfig} */
-module.exports = nextTranslate(
-  nextPWA({
+const nextConfig = {
   reactStrictMode: true,
   output: 'standalone'
-  })
-)
+}
+
+module.exports = nextTranslate(nextPWA(nextConfig))

package.json

@@ -32,7 +32,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.12",
+    "@fontsource/montserrat": "4.5.13",
     "@fortawesome/fontawesome-svg-core": "6.2.0",
     "@fortawesome/free-brands-svg-icons": "6.2.0",
     "@fortawesome/free-solid-svg-icons": "6.2.0",
@@ -66,33 +66,33 @@
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
     "@tailwindcss/typography": "0.5.7",
-    "@types/node": "18.7.23",
+    "@types/node": "18.8.0",
     "@types/react": "18.0.21",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.38.1",
+    "@typescript-eslint/eslint-plugin": "5.39.0",
     "autoprefixer": "10.4.12",
     "cypress": "10.9.0",
     "editorconfig-checker": "4.0.2",
     "eslint": "8.24.0",
-    "eslint-config-conventions": "4.0.1",
+    "eslint-config-conventions": "5.0.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.0.1",
-    "eslint-plugin-unicorn": "43.0.2",
+    "eslint-plugin-unicorn": "44.0.0",
     "html-w3c-validator": "1.2.0",
     "husky": "8.0.1",
     "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
     "lint-staged": "13.0.3",
     "markdownlint-cli2": "0.5.1",
-    "postcss": "8.4.16",
+    "postcss": "8.4.17",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "0.1.13",
     "semantic-release": "19.0.5",
     "start-server-and-test": "1.14.0",
     "tailwindcss": "3.1.8",
     "typescript": "4.8.4",
-    "vercel": "28.4.5"
+    "vercel": "28.4.6"
   }
 }

pages/404.tsx

@@ -3,9 +3,7 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
-import { Header } from 'components/Header'
 import type { FooterProps } from 'components/Footer'
-import { Footer } from 'components/Footer'
 
 interface Error404Props extends FooterProps {}
 
@@ -16,12 +14,11 @@ const Error404: NextPage<Error404Props> = (props) => {
   return (
     <>
       <Head title='404 | Divlo' />
-
-      <Header showLanguage />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={404} message={t('errors:not-found')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={404}
+        message={t('errors:not-found')}
+        version={version}
+      />
     </>
   )
 }

pages/500.tsx

@@ -3,9 +3,7 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
-import { Header } from 'components/Header'
 import type { FooterProps } from 'components/Footer'
-import { Footer } from 'components/Footer'
 
 interface Error500Props extends FooterProps {}
 
@@ -16,12 +14,11 @@ const Error500: NextPage<Error500Props> = (props) => {
   return (
     <>
       <Head title='500 | Divlo' />
-
-      <Header showLanguage />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={500} message={t('errors:server-error')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={500}
+        message={t('errors:server-error')}
+        version={version}
+      />
     </>
   )
 }

tailwind.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const tailwindConfig = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
@@ -47,3 +48,5 @@ module.exports = {
   },
   plugins: [require('@tailwindcss/typography')]
 }
+
+module.exports = tailwindConfig