mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-09-09 09:45:52 +02:00
chore: remove usage of styled-jsx
This commit is contained in:
parent
03e7e22d74
commit
c419fb3bb4
@ -1,2 +1 @@
|
||||
ARG VARIANT="16"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
|
||||
FROM mcr.microsoft.com/devcontainers/javascript-node:18
|
||||
|
@ -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",
|
||||
|
6
.github/workflows/analyze.yml
vendored
6
.github/workflows/analyze.yml
vendored
@ -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'
|
||||
|
6
.github/workflows/build.yml
vendored
6
.github/workflows/build.yml
vendored
@ -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'
|
||||
|
6
.github/workflows/lint.yml
vendored
6
.github/workflows/lint.yml
vendored
@ -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'
|
||||
|
6
.github/workflows/release.yml
vendored
6
.github/workflows/release.yml
vendored
@ -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'
|
||||
|
18
.github/workflows/test.yml
vendored
18
.github/workflows/test.yml
vendored
@ -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'
|
||||
|
2
.vscode/extensions.json
vendored
2
.vscode/extensions.json
vendored
@ -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",
|
||||
|
@ -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
|
||||
|
@ -1,53 +1,44 @@
|
||||
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 (
|
||||
<>
|
||||
<h1 className='my-6 text-4xl font-semibold'>
|
||||
{t('errors:error')}{' '}
|
||||
<span
|
||||
className='text-yellow dark:text-yellow-dark'
|
||||
data-cy='status-code'
|
||||
>
|
||||
{statusCode}
|
||||
</span>
|
||||
</h1>
|
||||
<p className='text-center text-lg'>
|
||||
{message}{' '}
|
||||
<Link href='/'>
|
||||
<a className='text-yellow hover:underline dark:text-yellow-dark'>
|
||||
{t('errors:return-to-home-page')}
|
||||
</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>
|
||||
<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
|
||||
className='text-yellow dark:text-yellow-dark'
|
||||
data-cy='status-code'
|
||||
>
|
||||
{statusCode}
|
||||
</span>
|
||||
</h1>
|
||||
<p className='text-center text-lg'>
|
||||
{message}{' '}
|
||||
<Link href='/'>
|
||||
<a className='text-yellow hover:underline dark:text-yellow-dark'>
|
||||
{t('errors:return-to-home-page')}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</main>
|
||||
<Footer version={version} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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
|
||||
data-cy='switch-theme-dark'
|
||||
className='toggle-track-check absolute'
|
||||
>
|
||||
<span className='toggle_Dark relative flex items-center justify-center'>
|
||||
🌜
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-cy='switch-theme-light'
|
||||
className='toggle-track-x absolute'
|
||||
>
|
||||
<span className='toggle_Light relative flex items-center justify-center'>
|
||||
🌞
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className='flex items-center'
|
||||
data-cy='switch-theme-click'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<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={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='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||
🌜
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-cy='switch-theme-light'
|
||||
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='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||
🌞
|
||||
</span>
|
||||
</div>
|
||||
<div className='toggle-thumb absolute' />
|
||||
<input
|
||||
data-cy='switch-theme-input'
|
||||
type='checkbox'
|
||||
aria-label='Dark mode toggle'
|
||||
className='toggle-screenreader-only absolute overflow-hidden'
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
<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='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
|
||||
defaultChecked
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -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',
|
||||
|
@ -2,5 +2,5 @@
|
||||
"return-to-home-page": "Revenir à la page d'accueil ?",
|
||||
"error": "Erreur",
|
||||
"server-error": "Erreur Interne du Serveur !",
|
||||
"not-found": "Cette page n'existe pas!"
|
||||
"not-found": "Cette page n'existe pas !"
|
||||
}
|
||||
|
@ -5,9 +5,9 @@ const nextPWA = require('next-pwa')({
|
||||
const nextTranslate = require('next-translate')
|
||||
|
||||
/** @type {import("next").NextConfig} */
|
||||
module.exports = nextTranslate(
|
||||
nextPWA({
|
||||
reactStrictMode: true,
|
||||
output: 'standalone'
|
||||
})
|
||||
)
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
output: 'standalone'
|
||||
}
|
||||
|
||||
module.exports = nextTranslate(nextPWA(nextConfig))
|
||||
|
755
package-lock.json
generated
755
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
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"
|
||||
}
|
||||
}
|
||||
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user