diff --git a/.eslintrc.json b/.eslintrc similarity index 100% rename from .eslintrc.json rename to .eslintrc diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..7eab50e --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules +.next +package.json +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..83ef1ce --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "jsxSingleQuote": true, + "semi": false, + "trailingComma": "none" +} diff --git a/components/Head.tsx b/components/Head.tsx index 0ed6be0..94f76d5 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -1,42 +1,42 @@ -import NextHead from "next/head"; +import NextHead from 'next/head' const Head: React.FC = () => { const data = { title: process.env.NEXT_PUBLIC_PROJECT_NAME, description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION, - image: "/images/icons/64x64.png", - url: "https://urlwebsite.fr/", - }; + image: '/images/icons/64x64.png', + url: 'https://urlwebsite.fr/' + } return ( {data.title} - - + + {/* Meta Tag */} - - - - + + + + {/* Open Graph Metadata */} - - - - - - - + + + + + + + {/* Twitter card Metadata */} - - - - + + + + - ); -}; + ) +} -export default Head; +export default Head diff --git a/next.config.js b/next.config.js index db17b40..d4300d0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,12 +1,12 @@ -const path = require("path"); +const path = require('path') /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, sassOptions: { includePaths: [ - path.join(__dirname, "styles/abstracts"), - path.join(__dirname, "styles/base"), - ], - }, -}; + path.join(__dirname, 'styles/abstracts'), + path.join(__dirname, 'styles/base') + ] + } +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 48b481b..c8ee016 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,9 @@ -import type { AppProps } from "next/app"; +import type { AppProps } from 'next/app' -import "../styles/main.scss"; +import '../styles/main.scss' const MyApp = ({ Component, pageProps }: AppProps) => { - return ; -}; + return +} -export default MyApp; +export default MyApp diff --git a/pages/index.tsx b/pages/index.tsx index f5466e6..2064f2c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,13 @@ -import type { NextPage } from "next"; +import type { NextPage } from 'next' -import Head from "../components/Head"; +import Head from '../components/Head' const Home: NextPage = () => { return ( <> - ); -}; + ) +} -export default Home; +export default Home diff --git a/styles/abstracts/_colors.scss b/styles/abstracts/_colors.scss index 81e9bb9..ab1ea35 100644 --- a/styles/abstracts/_colors.scss +++ b/styles/abstracts/_colors.scss @@ -1,10 +1,10 @@ $colors: ( primary: ( 400: #fff, - 600: #d9d9d9, + 600: #d9d9d9 ), secondary: ( 400: #000, - 600: #272727, - ), + 600: #272727 + ) ); diff --git a/styles/abstracts/_mixins.scss b/styles/abstracts/_mixins.scss index 8b5dd73..8b7ac51 100644 --- a/styles/abstracts/_mixins.scss +++ b/styles/abstracts/_mixins.scss @@ -1,4 +1,4 @@ -@import "variables"; +@import 'variables'; @mixin display-flex($content: center, $items: center, $direction: row) { display: flex; @@ -8,7 +8,7 @@ } @mixin element-invisible($enforce: true) { - $important: if($enforce, "!important", null); + $important: if($enforce, '!important', null); max-height: 0 #{$important}; opacity: 0 #{$important}; @@ -17,7 +17,7 @@ } @mixin element-invisible-off($value-visibility: 100px, $enforce: true) { - $important: if($enforce, "!important", null); + $important: if($enforce, '!important', null); max-height: #{$value-visibility} #{$important}; opacity: 1 #{$important}; @@ -25,7 +25,7 @@ } @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { - content: ""; + content: ''; display: block; width: 0; height: 0; diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index df53156..7c4aa80 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -2,5 +2,5 @@ $default-transition: 0.3s ease; $breakpoints: ( small: 320px, medium: 768px, - large: 1024px, + large: 1024px ) !default; diff --git a/styles/base/_helpers.scss b/styles/base/_helpers.scss index 364dd23..7beb89b 100644 --- a/styles/base/_helpers.scss +++ b/styles/base/_helpers.scss @@ -1,8 +1,8 @@ -@import "variables"; +@import 'variables'; %content { position: absolute; - content: ""; + content: ''; } %container { diff --git a/styles/base/_root.scss b/styles/base/_root.scss index f5f0ccd..52c88af 100644 --- a/styles/base/_root.scss +++ b/styles/base/_root.scss @@ -1,4 +1,4 @@ -@use "../abstracts/colors" as *; +@use '../abstracts/colors' as *; :root { @each $color, $shades in $colors { diff --git a/styles/main.scss b/styles/main.scss index 182174d..6d0cc04 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1,182 +1,182 @@ -@use "base/root" as *; -@use "vendors/normalize" as *; +@use 'base/root' as *; +@use 'vendors/normalize' as *; @font-face { - font-family: Poppins-Italic; - src: url("/fonts/Poppins-Italic.woff2") format("woff2"), - url("/fonts/Poppins-Italic.woff") format("woff"), - url("/fonts/Poppins-Italic.ttf") format("truetype"); - font-weight: normal; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Light-Italic; - src: url("/fonts/Poppins-LightItalic.woff2") format("woff2"), - url("/fonts/Poppins-LightItalic.woff") format("woff"), - url("/fonts/Poppins-LightItalic.ttf") format("truetype"); - font-weight: 300; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-SemiBold; - src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"), - url("/fonts/Poppins-SemiBold.woff") format("woff"), - url("/fonts/Poppins-SemiBold.ttf") format("truetype"); - font-weight: 600; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Thin; - src: url("/fonts/Poppins-Thin.woff2") format("woff2"), - url("/fonts/Poppins-Thin.woff") format("woff"), - url("/fonts/Poppins-Thin.ttf") format("truetype"); - font-weight: 100; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Medium-Italic; - src: url("/fonts/Poppins-MediumItalic.woff2") format("woff2"), - url("/fonts/Poppins-MediumItalic.woff") format("woff"), - url("/fonts/Poppins-MediumItalic.ttf") format("truetype"); - font-weight: 500; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Regular; - src: url("/fonts/Poppins-Regular.woff2") format("woff2"), - url("/fonts/Poppins-Regular.woff") format("woff"), - url("/fonts/Poppins-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Extra-Bold-Italic; - src: url("/fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"), - url("/fonts/Poppins-ExtraBoldItalic.woff") format("woff"), - url("/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); - font-weight: bold; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Extra-Light-Italic; - src: url("/fonts/Poppins-ExtraLightItalic.woff2") format("woff2"), - url("/fonts/Poppins-ExtraLightItalic.woff") format("woff"), - url("/fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); - font-weight: 200; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Light; - src: url("/fonts/Poppins-Light.woff2") format("woff2"), - url("/fonts/Poppins-Light.woff") format("woff"), - url("/fonts/Poppins-Light.ttf") format("truetype"); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Medium; - src: url("/fonts/Poppins-Medium.woff2") format("woff2"), - url("/fonts/Poppins-Medium.woff") format("woff"), - url("/fonts/Poppins-Medium.ttf") format("truetype"); - font-weight: 500; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Semi-Bold-Italic; - src: url("/fonts/Poppins-SemiBoldItalic.woff2") format("woff2"), - url("/fonts/Poppins-SemiBoldItalic.woff") format("woff"), - url("/fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); - font-weight: 600; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Extra-Light; - src: url("/fonts/Poppins-ExtraLight.woff2") format("woff2"), - url("/fonts/Poppins-ExtraLight.woff") format("woff"), - url("/fonts/Poppins-ExtraLight.ttf") format("truetype"); - font-weight: 200; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Thin-Italic; - src: url("/fonts/Poppins-ThinItalic.woff2") format("woff2"), - url("/fonts/Poppins-ThinItalic.woff") format("woff"), - url("/fonts/Poppins-ThinItalic.ttf") format("truetype"); - font-weight: 100; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Black; - src: url("/fonts/Poppins-Black.woff2") format("woff2"), - url("/fonts/Poppins-Black.woff") format("woff"), - url("/fonts/Poppins-Black.ttf") format("truetype"); - font-weight: 900; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins; - src: url("/fonts/Poppins-BoldItalic.woff2") format("woff2"), - url("/fonts/Poppins-BoldItalic.woff") format("woff"), - url("/fonts/Poppins-BoldItalic.ttf") format("truetype"); - font-weight: bold; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Bold; - src: url("/fonts/Poppins-Bold.woff2") format("woff2"), - url("/fonts/Poppins-Bold.woff") format("woff"), - url("/fonts/Poppins-Bold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: Poppins-Black-Italic; - src: url("/fonts/Poppins-BlackItalic.woff2") format("woff2"), - url("/fonts/Poppins-BlackItalic.woff") format("woff"), - url("/fonts/Poppins-BlackItalic.ttf") format("truetype"); - font-weight: 900; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: Poppins-Extra-Bold; - src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"), - url("/fonts/Poppins-ExtraBold.woff") format("woff"), - url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; - font-display: swap; - } + font-family: Poppins-Italic; + src: url('/fonts/Poppins-Italic.woff2') format('woff2'), + url('/fonts/Poppins-Italic.woff') format('woff'), + url('/fonts/Poppins-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Light-Italic; + src: url('/fonts/Poppins-LightItalic.woff2') format('woff2'), + url('/fonts/Poppins-LightItalic.woff') format('woff'), + url('/fonts/Poppins-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-SemiBold; + src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'), + url('/fonts/Poppins-SemiBold.woff') format('woff'), + url('/fonts/Poppins-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Thin; + src: url('/fonts/Poppins-Thin.woff2') format('woff2'), + url('/fonts/Poppins-Thin.woff') format('woff'), + url('/fonts/Poppins-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Medium-Italic; + src: url('/fonts/Poppins-MediumItalic.woff2') format('woff2'), + url('/fonts/Poppins-MediumItalic.woff') format('woff'), + url('/fonts/Poppins-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Regular; + src: url('/fonts/Poppins-Regular.woff2') format('woff2'), + url('/fonts/Poppins-Regular.woff') format('woff'), + url('/fonts/Poppins-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Extra-Bold-Italic; + src: url('/fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'), + url('/fonts/Poppins-ExtraBoldItalic.woff') format('woff'), + url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Extra-Light-Italic; + src: url('/fonts/Poppins-ExtraLightItalic.woff2') format('woff2'), + url('/fonts/Poppins-ExtraLightItalic.woff') format('woff'), + url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Light; + src: url('/fonts/Poppins-Light.woff2') format('woff2'), + url('/fonts/Poppins-Light.woff') format('woff'), + url('/fonts/Poppins-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Medium; + src: url('/fonts/Poppins-Medium.woff2') format('woff2'), + url('/fonts/Poppins-Medium.woff') format('woff'), + url('/fonts/Poppins-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Semi-Bold-Italic; + src: url('/fonts/Poppins-SemiBoldItalic.woff2') format('woff2'), + url('/fonts/Poppins-SemiBoldItalic.woff') format('woff'), + url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Extra-Light; + src: url('/fonts/Poppins-ExtraLight.woff2') format('woff2'), + url('/fonts/Poppins-ExtraLight.woff') format('woff'), + url('/fonts/Poppins-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Thin-Italic; + src: url('/fonts/Poppins-ThinItalic.woff2') format('woff2'), + url('/fonts/Poppins-ThinItalic.woff') format('woff'), + url('/fonts/Poppins-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Black; + src: url('/fonts/Poppins-Black.woff2') format('woff2'), + url('/fonts/Poppins-Black.woff') format('woff'), + url('/fonts/Poppins-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins; + src: url('/fonts/Poppins-BoldItalic.woff2') format('woff2'), + url('/fonts/Poppins-BoldItalic.woff') format('woff'), + url('/fonts/Poppins-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Bold; + src: url('/fonts/Poppins-Bold.woff2') format('woff2'), + url('/fonts/Poppins-Bold.woff') format('woff'), + url('/fonts/Poppins-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Poppins-Black-Italic; + src: url('/fonts/Poppins-BlackItalic.woff2') format('woff2'), + url('/fonts/Poppins-BlackItalic.woff') format('woff'), + url('/fonts/Poppins-BlackItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: Poppins-Extra-Bold; + src: url('/fonts/Poppins-ExtraBold.woff2') format('woff2'), + url('/fonts/Poppins-ExtraBold.woff') format('woff'), + url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} diff --git a/styles/vendors/_normalize.scss b/styles/vendors/_normalize.scss index 699846e..f59d369 100644 --- a/styles/vendors/_normalize.scss +++ b/styles/vendors/_normalize.scss @@ -149,18 +149,18 @@ select { // Correct the inability to style clickable types in iOS and Safari. button, -[type="button"], -[type="reset"], -[type="submit"] { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; } // Remove the inner border and padding in Firefox. button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } @@ -168,9 +168,9 @@ button::-moz-focus-inner, // Restore the focus styles unset by the previous rule. button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } @@ -209,30 +209,30 @@ textarea { // 1. Add the correct box sizing in IE 10. // 2. Remove the padding in IE 10. -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; // 1 padding: 0; // 2 } // Correct the cursor style of increment and decrement buttons in Chrome. -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } // 1. Correct the odd appearance in Chrome and Safari. // 2. Correct the outline style in Safari. -[type="search"] { +[type='search'] { -webkit-appearance: textfield; // 1 outline-offset: -2px; // 2 } // Remove the inner padding in Chrome and Safari on macOS. -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } @@ -275,10 +275,10 @@ template { } // Disable outline when intent is clearly mouse and touch -[data-whatintent="mouse"], -[data-whatintent="touch"], -[data-whatinput="mouse"], -[data-whatinput="touch"] { +[data-whatintent='mouse'], +[data-whatintent='touch'], +[data-whatinput='mouse'], +[data-whatinput='touch'] { *, *:focus { outline: none; @@ -286,7 +286,7 @@ template { } // Disable iOS callouts when draggable is false -[draggable="false"] { +[draggable='false'] { -webkit-touch-callout: none; -webkit-user-select: none; }