Merge pull request #91 from JosBroers/release

Release

.eslintrc.json

@@ -3,7 +3,8 @@
 		"browser": true,
 		"es2021": true
 	},
-	"extends": ["plugin:react/recommended", "airbnb", "prettier", "eslint"],
+	"extends": ["plugin:react/recommended", "airbnb", "prettier", "next"],
+	"root": true,
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
 		"ecmaFeatures": {
@@ -14,26 +15,28 @@
 		"sourceType": "module"
 	},
 	"plugins": ["react", "@typescript-eslint", "prettier"],
+	"settings": {
+		"import/resolver": { "node": { "extensions": [".js", ".ts", ".tsx"] } },
+		"react": { "version": "detect" }
+	},
 	"rules": {
 		"react/jsx-filename-extension": [1, { "extensions": [".js", ".ts", "tsx"] }],
+		"no-use-before-define": "off",
+		"prettier/prettier": "error",
+		"react/jsx-props-no-spreading": "off",
+		"no-tabs": ["error", { "allowIndentationTabs": true }],
 		"import/extensions": [
 			"error",
 			"ignorePackages",
 			{ "js": "never", "ts": "never", "tsx": "never" }
 		],
-		"no-tabs": ["error", { "allowIndentationTabs": true }],
-		"prettier/prettier": "error",
-		"no-use-before-define": "off",
-		"react/jsx-props-no-spreading": "off",
 		"jsx-a11y/anchor-is-valid": [
 			"error",
 			{
-				"components": ["Link"]
+				"components": ["Link"],
+				"specialLink": ["hrefLeft", "hrefRight"],
+				"aspects": ["invalidHref", "preferButton"]
 			}
 		]
-	},
-	"settings": {
-		"import/resolver": { "node": { "extensions": [".js", ".ts", ".tsx"] } },
-		"react": { "version": "detect" }
 	}
 }

.nvmrc

@@ -1 +1 @@
-v14.15.0
+v14.17.1

components/Button.tsx

@@ -1,37 +1,33 @@
 import React from "react"
 import Link from "next/link"
-
-/* CSS Imports */
 import styles from "../styles/components/button.module.scss"
 
 interface ButtonProps {
 	link?: string
-	title: string
+	title?: string
 	type?: "internal" | "external" | "action"
 	onClick?: any
-	style?: "primary" | "secondary"
+	styling?: "primary" | "secondary" | "none"
+	icon?: React.ReactNode
 }
 
 const ButtonInternal = Props => {
-	const { link, title } = Props
+	const { link, title, icon, styling } = Props
 
-	/* Define style variant */
-	const style = Props.style ? `button--${Props.style}` : "button--primary"
+	const style = styling ? `button--${styling}` : "button--primary"
 
 	return (
 		<Link href={link}>
 			<a className={`${styles.button} ${styles[style]}`} title={title}>
-				{title}
+				{icon || title}
 			</a>
 		</Link>
 	)
 }
 
 const ButtonExternal = Props => {
-	const { link, title } = Props
-
-	/* Define style variant */
-	const style = Props.style ? `button--${Props.style}` : "button--primary"
+	const { link, title, icon, styling } = Props
+	const style = styling ? `button--${styling}` : "button--primary"
 
 	return (
 		<a
@@ -41,30 +37,30 @@ const ButtonExternal = Props => {
 			title={title}
 			className={`${styles.button} ${styles[style]}`}
 		>
-			{title}
+			{icon || title}
 		</a>
 	)
 }
 
 const ButtonAction = Props => {
-	const { title, onClick } = Props
+	const { title, onClick, icon, styling } = Props
 
-	/* Define style variant */
-	const style = Props.style ? `button--${Props.style}` : "button--primary"
+	const style = styling ? `button--${styling}` : "button--primary"
 
 	return (
-		<button className={`${styles.button} ${styles[style]}`} onClick={onClick}>
-			{title}
+		<button className={`${styles.button} ${styles[style]}`} onClick={onClick} type="button">
+			{icon || title}
 		</button>
 	)
 }
 
 const Button = (Props: ButtonProps) => {
-	const type = Props.type ? Props.type : "internal"
+	const { type } = Props
+
+	const buttonType = type || "internal"
 	let button
 
-	/* Load defined component */
-	if (type === "internal") {
+	if (buttonType === "internal") {
 		button = <ButtonInternal {...Props} />
 	} else if (type === "external") {
 		button = <ButtonExternal {...Props} />

components/Container.tsx

@@ -1,6 +1,4 @@
 import React from "react"
-
-/* CSS imports */
 import styles from "../styles/components/container.module.scss"
 
 interface ContainerProps {

components/Header.tsx

@@ -1,17 +1,19 @@
 import React from "react"
 import Image from "next/image"
-
-/* CSS imports */
 import styles from "../styles/components/header.module.scss"
 
 const Header = () => (
 	<header className={styles.header}>
 		<Image
-			src="https://ik.imagekit.io/jobrodo/jobrodo/thumbnail_JHMOxBSr9F4.png"
+			src={`${process.env.NEXT_PUBLIC_IMAGEKIT}thumbnail_JHMOxBSr9F4.png`}
 			alt="Thumbnail"
-			layout="fill"
+			layout="responsive"
 			objectFit="cover"
 			objectPosition="center"
+			width={1020}
+			height={400}
+			placeholder="blur"
+			blurDataURL={`${process.env.NEXT_PUBLIC_IMAGEKIT_PLACEHOLDER}thumbnail_JHMOxBSr9F4.png`}
 		/>
 	</header>
 )

components/LineClamp.tsx

@@ -1,6 +1,4 @@
 import React from "react"
-
-/* CSS imports */
 import styles from "../styles/components/line-clamp.module.scss"
 
 interface LineClampProps {
@@ -11,8 +9,7 @@ interface LineClampProps {
 const LineClamp = (Props: LineClampProps) => {
 	const { children, amount } = Props
 
-	/* Define amount of lines */
-	const clampAmount = amount ? amount : 1
+	const clampAmount = amount || 1
 	const cssClass = `line-clamp--${clampAmount}`
 
 	return <div className={`${styles["line-clamp"]} ${styles[cssClass]}`}>{children}</div>

components/cookies/CookieBlock.tsx

@@ -1,7 +1,5 @@
 import React from "react"
 import { Flex } from "reflexbox/styled-components"
-
-/* CSS imports */
 import styles from "../../styles/components/cookies/cookie-block.module.scss"
 
 interface CookieBlockProps {

components/cookies/CookieNotice.tsx

@@ -3,43 +3,36 @@ import { Flex, Box } from "reflexbox/styled-components"
 import Link from "next/link"
 import Cookies from "universal-cookie"
 import Router from "next/router"
-
-/* CSS imports */
 import styles from "../../styles/components/cookies/cookie-notice.module.scss"
-
-/* Component imports */
 import Button from "../Button"
 
 const CookieNotice = () => {
 	const [HideCookieBanner, setHideCookieBanner] = useState(false)
-	const cookies = new Cookies()
-
-	/* 1 year from today */
-	const date = new Date()
-	const year = date.getFullYear()
-	const month = date.getMonth()
-	const day = date.getDate()
-	const expire = new Date(year + 1, month, day)
 
-	/* Cookie display class */
 	const cookieClass = HideCookieBanner
 		? "cookie-notice__wrapper--hidden"
 		: "cookie-notice__wrapper--active"
 
 	useEffect(() => {
-		/* Check if cookie-consent is set */
+		const cookies = new Cookies()
+
+		const date = new Date()
+		const year = date.getFullYear()
+		const month = date.getMonth()
+		const day = date.getDate()
+		const expire = new Date(year + 1, month, day)
+
 		if (cookies.get("cookie-consent") === "allowed") {
 			setHideCookieBanner(true)
 		} else {
 			setHideCookieBanner(false)
 		}
 
-		/* Set cookie-consent and reload */
 		if (cookies.get("cookie-consent") !== "allowed" && HideCookieBanner === true) {
 			cookies.set("cookie-consent", "allowed", { path: "/", expires: expire })
 			Router.reload()
 		}
-	})
+	}, [HideCookieBanner])
 
 	return (
 		<div className={`${styles["cookie-notice__wrapper"]} ${styles[cookieClass]}`}>
@@ -57,7 +50,7 @@ const CookieNotice = () => {
 					<Flex width={[1, 1, 1 / 4]} justifyContent={["flex-start", "flex-start", "flex-end"]}>
 						<Box marginTop={["20px", "20px", 0]}>
 							<Button
-								style="primary"
+								styling="primary"
 								title="Close"
 								type="action"
 								onClick={() => setHideCookieBanner(true)}

icons/github.tsx

@@ -13,7 +13,7 @@ const Icon = (Props: IconProps) => {
 		<svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} viewBox="0 0 32.58 31.77">
 			<g>
 				<path
-					fill={fill ? fill : "#191717"}
+					fill={fill || "#191717"}
 					fillRule="evenodd"
 					d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"
 				/>

icons/index.tsx

@@ -1 +1,2 @@
+/* eslint-disable import/prefer-default-export */
 export { default as GithubIcon } from "./github"

lib/gtm.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 export const GTM_ID = process.env.NEXT_PUBLIC_GTM
 
 declare global {

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 Vercel, Inc.
+Copyright (c) 2021 Jobrodo, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

next.config.js

@@ -10,6 +10,7 @@ module.exports = withBundleAnalyzer({
 		prependData: `
 			@import "./styles/common/_unit.scss";
 			@import "./styles/common/_animations.scss";
+			@import "./styles/common/_mixins.scss";
 		`,
 	},
 	async redirects() {
@@ -26,8 +27,8 @@ module.exports = withBundleAnalyzer({
 			},
 		]
 	},
-	future: {
-		webpack5: true,
+	experimental: {
+		eslint: true,
 	},
 	trailingSlash: true,
 	reactStrictMode: true,

package.json

@@ -10,7 +10,8 @@
 		"start": "next start",
 		"find:unused": "next-unused",
 		"analyze": "cross-env ANALYZE=true next build",
-		"ci": "rm -fr node_modules && rm yarn.lock && yarn"
+		"ci": "rm -fr node_modules && rm yarn.lock && yarn",
+		"depcheck": "depcheck"
 	},
 	"next-unused": {
 		"include": [
@@ -20,9 +21,9 @@
 		]
 	},
 	"dependencies": {
-		"@next/bundle-analyzer": "^10.2.3",
+		"@next/bundle-analyzer": "^11.0.0",
 		"cross-env": "^7.0.3",
-		"next": "10.2.3",
+		"next": "11.0.0",
 		"nprogress": "^0.2.0",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
@@ -33,16 +34,18 @@
 		"zlib": "^1.0.5"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.14.3",
+		"@babel/core": "^7.14.6",
 		"@types/node": "^15.12.2",
-		"@types/react": "^17.0.9",
-		"@types/react-dom": "17.0.6",
+		"@types/react": "^17.0.11",
+		"@types/react-dom": "17.0.7",
 		"@types/reflexbox": "^4.0.2",
-		"@typescript-eslint/eslint-plugin": "^4.26.1",
-		"@typescript-eslint/parser": "^4.26.1",
+		"@typescript-eslint/eslint-plugin": "^4.27.0",
+		"@typescript-eslint/parser": "^4.27.0",
 		"babel-plugin-styled-components": "^1.12.0",
+		"depcheck": "^1.4.1",
 		"eslint": "^7.28.0",
 		"eslint-config-airbnb": "^18.2.1",
+		"eslint-config-next": "^11.0.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-import": "^2.23.4",
 		"eslint-plugin-jsx-a11y": "^6.4.1",
@@ -51,14 +54,15 @@
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"next-unused": "^0.0.6",
 		"prettier": "^2.3.1",
-		"sass": "^1.34.1",
+		"sass": "^1.35.0",
 		"stylelint": "^13.13.1",
 		"stylelint-color-format": "^1.1.0",
 		"stylelint-config-prettier": "^8.0.2",
 		"stylelint-config-sass-guidelines": "^8.0.0",
 		"stylelint-config-standard": "^22.0.0",
 		"stylelint-order": "^4.1.0",
 		"stylelint-selector-bem-pattern": "^2.1.0",
-		"stylelint-selector-no-empty": "^1.0.8"
+		"stylelint-selector-no-empty": "^1.0.8",
+		"typescript": "^4.3.2"
 	}
 }