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 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 (
<NextHead>
<title>{data.title}</title>
<link rel="icon" type="image/png" href={data.image} />
<link rel="apple-touch-icon" href={data.image} />
<link rel='icon' type='image/png' href={data.image} />
<link rel='apple-touch-icon' href={data.image} />
{/* Meta Tag */}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={data.description} />
<meta name="Language" content="fr, en" />
<meta name="theme-color" content="#27B05E" />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='description' content={data.description} />
<meta name='Language' content='fr, en' />
<meta name='theme-color' content='#27B05E' />
{/* Open Graph Metadata */}
<meta property="og:title" content={data.title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={data.url} />
<meta property="og:image" content={data.image} />
<meta property="og:description" content={data.description} />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content={data.title} />
<meta property='og:title' content={data.title} />
<meta property='og:type' content='website' />
<meta property='og:url' content={data.url} />
<meta property='og:image' content={data.image} />
<meta property='og:description' content={data.description} />
<meta property='og:locale' content='en_US' />
<meta property='og:site_name' content={data.title} />
{/* Twitter card Metadata */}
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content={data.description} />
<meta name="twitter:title" content={data.title} />
<meta name="twitter:image:src" content={data.image} />
<meta name='twitter:card' content='summary' />
<meta name='twitter:description' content={data.description} />
<meta name='twitter:title' content={data.title} />
<meta name='twitter:image:src' content={data.image} />
</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} */
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')
]
}
}

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

6
styles/abstracts/_colors.scss
View File

@ -1,10 +1,10 @@
$colors: (
primary: (
400: #fff,
600: #d9d9d9,
600: #d9d9d9
),
secondary: (
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) {
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;

2
styles/abstracts/_variables.scss
View File

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

4
styles/base/_helpers.scss
View File

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

2
styles/base/_root.scss
View File

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

182
styles/main.scss
View File

@ -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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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-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");
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;
}
}

40
styles/vendors/_normalize.scss vendored
View File

@ -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;
}