Walidoux/next-app-boilerplate
Walidoux/next-app-boilerplate
Template
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

refactor(prettier): add formater prettier code

Browse Source
This commit is contained in:
Walid 2022-03-17 01:11:10 +01:00
parent 5c56b266a6
commit 077845e05c
14 changed files with 261 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.eslintrc.json → .eslintrc
View File

4
.prettierignore Normal file
View File

@ -0,0 +1,4 @@
node_modules
.next
package.json
package-lock.json

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"trailingComma": "none"
}

48
components/Head.tsx
View File

@ -1,42 +1,42 @@
import NextHead from "next/head"; import NextHead from 'next/head'
const Head: React.FC = () => { const Head: React.FC = () => {
const data = { const data = {
title: process.env.NEXT_PUBLIC_PROJECT_NAME, title: process.env.NEXT_PUBLIC_PROJECT_NAME,
description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION, description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION,
image: "/images/icons/64x64.png", image: '/images/icons/64x64.png',
url: "https://urlwebsite.fr/", url: 'https://urlwebsite.fr/'
}; }
return ( return (
<NextHead> <NextHead>
<title>{data.title}</title> <title>{data.title}</title>
<link rel="icon" type="image/png" href={data.image} /> <link rel='icon' type='image/png' href={data.image} />
<link rel="apple-touch-icon" href={data.image} /> <link rel='apple-touch-icon' href={data.image} />
{/* Meta Tag */} {/* Meta Tag */}
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name="description" content={data.description} /> <meta name='description' content={data.description} />
<meta name="Language" content="fr, en" /> <meta name='Language' content='fr, en' />
<meta name="theme-color" content="#27B05E" /> <meta name='theme-color' content='#27B05E' />
{/* Open Graph Metadata */} {/* Open Graph Metadata */}
<meta property="og:title" content={data.title} /> <meta property='og:title' content={data.title} />
<meta property="og:type" content="website" /> <meta property='og:type' content='website' />
<meta property="og:url" content={data.url} /> <meta property='og:url' content={data.url} />
<meta property="og:image" content={data.image} /> <meta property='og:image' content={data.image} />
<meta property="og:description" content={data.description} /> <meta property='og:description' content={data.description} />
<meta property="og:locale" content="en_US" /> <meta property='og:locale' content='en_US' />
<meta property="og:site_name" content={data.title} /> <meta property='og:site_name' content={data.title} />
{/* Twitter card Metadata */} {/* Twitter card Metadata */}
<meta name="twitter:card" content="summary" /> <meta name='twitter:card' content='summary' />
<meta name="twitter:description" content={data.description} /> <meta name='twitter:description' content={data.description} />
<meta name="twitter:title" content={data.title} /> <meta name='twitter:title' content={data.title} />
<meta name="twitter:image:src" content={data.image} /> <meta name='twitter:image:src' content={data.image} />
</NextHead> </NextHead>
); )
}; }
export default Head; export default Head

12
next.config.js
View File

@ -1,12 +1,12 @@
const path = require("path"); const path = require('path')
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
sassOptions: { sassOptions: {
includePaths: [ includePaths: [
path.join(__dirname, "styles/abstracts"), path.join(__dirname, 'styles/abstracts'),
path.join(__dirname, "styles/base"), path.join(__dirname, 'styles/base')
], ]
}, }
}; }

10
pages/_app.tsx
View File

@ -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) => { const MyApp = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} />; return <Component {...pageProps} />
}; }
export default MyApp; export default MyApp

10
pages/index.tsx
View File

@ -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 = () => { const Home: NextPage = () => {
return ( return (
<> <>
<Head /> <Head />
</> </>
); )
}; }
export default Home; export default Home

6
styles/abstracts/_colors.scss
View File

@ -1,10 +1,10 @@
$colors: ( $colors: (
primary: ( primary: (
400: #fff, 400: #fff,
600: #d9d9d9, 600: #d9d9d9
), ),
secondary: ( secondary: (
400: #000, 400: #000,
600: #272727, 600: #272727
), )
); );

8
styles/abstracts/_mixins.scss
View File

@ -1,4 +1,4 @@
@import "variables"; @import 'variables';
@mixin display-flex($content: center, $items: center, $direction: row) { @mixin display-flex($content: center, $items: center, $direction: row) {
display: flex; display: flex;
@ -8,7 +8,7 @@
} }
@mixin element-invisible($enforce: true) { @mixin element-invisible($enforce: true) {
$important: if($enforce, "!important", null); $important: if($enforce, '!important', null);
max-height: 0 #{$important}; max-height: 0 #{$important};
opacity: 0 #{$important}; opacity: 0 #{$important};
@ -17,7 +17,7 @@
} }
@mixin element-invisible-off($value-visibility: 100px, $enforce: true) { @mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
$important: if($enforce, "!important", null); $important: if($enforce, '!important', null);
max-height: #{$value-visibility} #{$important}; max-height: #{$value-visibility} #{$important};
opacity: 1 #{$important}; opacity: 1 #{$important};
@ -25,7 +25,7 @@
} }
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
content: ""; content: '';
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;

2
styles/abstracts/_variables.scss
View File

@ -2,5 +2,5 @@ $default-transition: 0.3s ease;
$breakpoints: ( $breakpoints: (
small: 320px, small: 320px,
medium: 768px, medium: 768px,
large: 1024px, large: 1024px
) !default; ) !default;

4
styles/base/_helpers.scss
View File

@ -1,8 +1,8 @@
@import "variables"; @import 'variables';
%content { %content {
position: absolute; position: absolute;
content: ""; content: '';
} }
%container { %container {

2
styles/base/_root.scss
View File

@ -1,4 +1,4 @@
@use "../abstracts/colors" as *; @use '../abstracts/colors' as *;
:root { :root {
@each $color, $shades in $colors { @each $color, $shades in $colors {

182
styles/main.scss
View File

@ -1,182 +1,182 @@
@use "base/root" as *; @use 'base/root' as *;
@use "vendors/normalize" as *; @use 'vendors/normalize' as *;
@font-face { @font-face {
font-family: Poppins-Italic; font-family: Poppins-Italic;
src: url("/fonts/Poppins-Italic.woff2") format("woff2"), src: url('/fonts/Poppins-Italic.woff2') format('woff2'),
url("/fonts/Poppins-Italic.woff") format("woff"), url('/fonts/Poppins-Italic.woff') format('woff'),
url("/fonts/Poppins-Italic.ttf") format("truetype"); url('/fonts/Poppins-Italic.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Light-Italic; font-family: Poppins-Light-Italic;
src: url("/fonts/Poppins-LightItalic.woff2") format("woff2"), src: url('/fonts/Poppins-LightItalic.woff2') format('woff2'),
url("/fonts/Poppins-LightItalic.woff") format("woff"), url('/fonts/Poppins-LightItalic.woff') format('woff'),
url("/fonts/Poppins-LightItalic.ttf") format("truetype"); url('/fonts/Poppins-LightItalic.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-SemiBold; font-family: Poppins-SemiBold;
src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"), src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'),
url("/fonts/Poppins-SemiBold.woff") format("woff"), url('/fonts/Poppins-SemiBold.woff') format('woff'),
url("/fonts/Poppins-SemiBold.ttf") format("truetype"); url('/fonts/Poppins-SemiBold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Thin; font-family: Poppins-Thin;
src: url("/fonts/Poppins-Thin.woff2") format("woff2"), src: url('/fonts/Poppins-Thin.woff2') format('woff2'),
url("/fonts/Poppins-Thin.woff") format("woff"), url('/fonts/Poppins-Thin.woff') format('woff'),
url("/fonts/Poppins-Thin.ttf") format("truetype"); url('/fonts/Poppins-Thin.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Medium-Italic; font-family: Poppins-Medium-Italic;
src: url("/fonts/Poppins-MediumItalic.woff2") format("woff2"), src: url('/fonts/Poppins-MediumItalic.woff2') format('woff2'),
url("/fonts/Poppins-MediumItalic.woff") format("woff"), url('/fonts/Poppins-MediumItalic.woff') format('woff'),
url("/fonts/Poppins-MediumItalic.ttf") format("truetype"); url('/fonts/Poppins-MediumItalic.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Regular; font-family: Poppins-Regular;
src: url("/fonts/Poppins-Regular.woff2") format("woff2"), src: url('/fonts/Poppins-Regular.woff2') format('woff2'),
url("/fonts/Poppins-Regular.woff") format("woff"), url('/fonts/Poppins-Regular.woff') format('woff'),
url("/fonts/Poppins-Regular.ttf") format("truetype"); url('/fonts/Poppins-Regular.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Extra-Bold-Italic; font-family: Poppins-Extra-Bold-Italic;
src: url("/fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"), src: url('/fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
url("/fonts/Poppins-ExtraBoldItalic.woff") format("woff"), url('/fonts/Poppins-ExtraBoldItalic.woff') format('woff'),
url("/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Extra-Light-Italic; font-family: Poppins-Extra-Light-Italic;
src: url("/fonts/Poppins-ExtraLightItalic.woff2") format("woff2"), src: url('/fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
url("/fonts/Poppins-ExtraLightItalic.woff") format("woff"), url('/fonts/Poppins-ExtraLightItalic.woff') format('woff'),
url("/fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Light; font-family: Poppins-Light;
src: url("/fonts/Poppins-Light.woff2") format("woff2"), src: url('/fonts/Poppins-Light.woff2') format('woff2'),
url("/fonts/Poppins-Light.woff") format("woff"), url('/fonts/Poppins-Light.woff') format('woff'),
url("/fonts/Poppins-Light.ttf") format("truetype"); url('/fonts/Poppins-Light.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Medium; font-family: Poppins-Medium;
src: url("/fonts/Poppins-Medium.woff2") format("woff2"), src: url('/fonts/Poppins-Medium.woff2') format('woff2'),
url("/fonts/Poppins-Medium.woff") format("woff"), url('/fonts/Poppins-Medium.woff') format('woff'),
url("/fonts/Poppins-Medium.ttf") format("truetype"); url('/fonts/Poppins-Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Semi-Bold-Italic; font-family: Poppins-Semi-Bold-Italic;
src: url("/fonts/Poppins-SemiBoldItalic.woff2") format("woff2"), src: url('/fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
url("/fonts/Poppins-SemiBoldItalic.woff") format("woff"), url('/fonts/Poppins-SemiBoldItalic.woff') format('woff'),
url("/fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Extra-Light; font-family: Poppins-Extra-Light;
src: url("/fonts/Poppins-ExtraLight.woff2") format("woff2"), src: url('/fonts/Poppins-ExtraLight.woff2') format('woff2'),
url("/fonts/Poppins-ExtraLight.woff") format("woff"), url('/fonts/Poppins-ExtraLight.woff') format('woff'),
url("/fonts/Poppins-ExtraLight.ttf") format("truetype"); url('/fonts/Poppins-ExtraLight.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Thin-Italic; font-family: Poppins-Thin-Italic;
src: url("/fonts/Poppins-ThinItalic.woff2") format("woff2"), src: url('/fonts/Poppins-ThinItalic.woff2') format('woff2'),
url("/fonts/Poppins-ThinItalic.woff") format("woff"), url('/fonts/Poppins-ThinItalic.woff') format('woff'),
url("/fonts/Poppins-ThinItalic.ttf") format("truetype"); url('/fonts/Poppins-ThinItalic.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Black; font-family: Poppins-Black;
src: url("/fonts/Poppins-Black.woff2") format("woff2"), src: url('/fonts/Poppins-Black.woff2') format('woff2'),
url("/fonts/Poppins-Black.woff") format("woff"), url('/fonts/Poppins-Black.woff') format('woff'),
url("/fonts/Poppins-Black.ttf") format("truetype"); url('/fonts/Poppins-Black.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins; font-family: Poppins;
src: url("/fonts/Poppins-BoldItalic.woff2") format("woff2"), src: url('/fonts/Poppins-BoldItalic.woff2') format('woff2'),
url("/fonts/Poppins-BoldItalic.woff") format("woff"), url('/fonts/Poppins-BoldItalic.woff') format('woff'),
url("/fonts/Poppins-BoldItalic.ttf") format("truetype"); url('/fonts/Poppins-BoldItalic.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Bold; font-family: Poppins-Bold;
src: url("/fonts/Poppins-Bold.woff2") format("woff2"), src: url('/fonts/Poppins-Bold.woff2') format('woff2'),
url("/fonts/Poppins-Bold.woff") format("woff"), url('/fonts/Poppins-Bold.woff') format('woff'),
url("/fonts/Poppins-Bold.ttf") format("truetype"); url('/fonts/Poppins-Bold.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Black-Italic; font-family: Poppins-Black-Italic;
src: url("/fonts/Poppins-BlackItalic.woff2") format("woff2"), src: url('/fonts/Poppins-BlackItalic.woff2') format('woff2'),
url("/fonts/Poppins-BlackItalic.woff") format("woff"), url('/fonts/Poppins-BlackItalic.woff') format('woff'),
url("/fonts/Poppins-BlackItalic.ttf") format("truetype"); url('/fonts/Poppins-BlackItalic.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: Poppins-Extra-Bold; font-family: Poppins-Extra-Bold;
src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"), src: url('/fonts/Poppins-ExtraBold.woff2') format('woff2'),
url("/fonts/Poppins-ExtraBold.woff") format("woff"), url('/fonts/Poppins-ExtraBold.woff') format('woff'),
url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); url('/fonts/Poppins-ExtraBold.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }

40
styles/vendors/_normalize.scss vendored
View File

@ -149,18 +149,18 @@ select {
// Correct the inability to style clickable types in iOS and Safari. // Correct the inability to style clickable types in iOS and Safari.
button, button,
[type="button"], [type='button'],
[type="reset"], [type='reset'],
[type="submit"] { [type='submit'] {
-webkit-appearance: button; -webkit-appearance: button;
} }
// Remove the inner border and padding in Firefox. // Remove the inner border and padding in Firefox.
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type='button']::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type='reset']::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
@ -168,9 +168,9 @@ button::-moz-focus-inner,
// Restore the focus styles unset by the previous rule. // Restore the focus styles unset by the previous rule.
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type='button']:-moz-focusring,
[type="reset"]:-moz-focusring, [type='reset']:-moz-focusring,
[type="submit"]:-moz-focusring { [type='submit']:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
@ -209,30 +209,30 @@ textarea {
// 1. Add the correct box sizing in IE 10. // 1. Add the correct box sizing in IE 10.
// 2. Remove the padding in IE 10. // 2. Remove the padding in IE 10.
[type="checkbox"], [type='checkbox'],
[type="radio"] { [type='radio'] {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
padding: 0; // 2 padding: 0; // 2
} }
// Correct the cursor style of increment and decrement buttons in Chrome. // Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type='number']::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
// 1. Correct the odd appearance in Chrome and Safari. // 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari. // 2. Correct the outline style in Safari.
[type="search"] { [type='search'] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
outline-offset: -2px; // 2 outline-offset: -2px; // 2
} }
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration { [type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -275,10 +275,10 @@ template {
} }
// Disable outline when intent is clearly mouse and touch // Disable outline when intent is clearly mouse and touch
[data-whatintent="mouse"], [data-whatintent='mouse'],
[data-whatintent="touch"], [data-whatintent='touch'],
[data-whatinput="mouse"], [data-whatinput='mouse'],
[data-whatinput="touch"] { [data-whatinput='touch'] {
*, *,
*:focus { *:focus {
outline: none; outline: none;
@ -286,7 +286,7 @@ template {
} }
// Disable iOS callouts when draggable is false // Disable iOS callouts when draggable is false
[draggable="false"] { [draggable='false'] {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
} }