Merge pull request #813 from jakeherp/upgrade-dependencies

Upgrade dependencies

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 3.2.0
+
+## features
+
+- updates devDependencies
+- adds blur placeholders to images
+
+# 3.1.0
+
+## features
+
+- adds nprogress bar
+- adds read time
+
 # 3.0.0
 
 ## features

next.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-	future: {
-		webpack5: true,
-	},
 	poweredByHeader: false,
 	assetPrefix: process.env.ASSET_HOST || '',
 	productionBrowserSourceMaps: process.env.NODE_ENV === 'production',

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "portfolio",
 	"description": "A redesign of my portfolio website.",
-	"version": "3.0.0",
+	"version": "3.2.0",
 	"author": {
 		"name": "Jacob Herper",
 		"email": "jacob@herper.io",
@@ -31,7 +31,7 @@
 		"test": "jest --selectProjects test"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.14.0",
+		"@babel/runtime": "^7.14.6",
 		"@storybook/addon-actions": "^6.2.9",
 		"@storybook/addon-essentials": "^6.2.9",
 		"@storybook/addon-links": "^6.2.9",
@@ -45,10 +45,10 @@
 		"gray-matter": "^4.0.3",
 		"lodash.orderby": "^4.6.0",
 		"markdown-to-jsx": "^7.1.3",
-		"next": "10.2.3",
+		"next": "11.0.1-canary.5",
 		"next-absolute-url": "^1.2.2",
 		"next-mdx-remote": "^3.0.2",
-		"next-redux-wrapper": "^7.0.0",
+		"next-redux-wrapper": "^7.0.2",
 		"nprogress": "^0.2.0",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
@@ -58,28 +58,28 @@
 		"redux-devtools-extension": "^2.13.9",
 		"redux-thunk": "^2.3.0",
 		"styled-components": "^5.3.0",
-		"typescript": "^4.3.2",
+		"typescript": "^4.3.4",
 		"uniqid": "^5.3.0",
 		"yup": "^0.32.9"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.14.3",
+		"@babel/core": "^7.14.6",
 		"@commitlint/cli": "^12.1.4",
 		"@commitlint/config-conventional": "^12.1.4",
 		"@testing-library/dom": "^7.31.2",
-		"@testing-library/jest-dom": "^5.13.0",
+		"@testing-library/jest-dom": "^5.14.1",
 		"@testing-library/react": "^11.2.7",
 		"@types/jest": "^26.0.23",
 		"@types/lodash.orderby": "^4.6.6",
 		"@types/nprogress": "^0.2.0",
 		"@types/react-redux": "^7.1.16",
-		"@types/styled-components": "^5.1.9",
-		"@typescript-eslint/eslint-plugin": "^4.26.0",
-		"@typescript-eslint/parser": "^4.26.0",
+		"@types/styled-components": "^5.1.10",
+		"@typescript-eslint/eslint-plugin": "^4.27.0",
+		"@typescript-eslint/parser": "^4.27.0",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-styled-components": "^1.12.0",
 		"core-js": "^3.14.0",
-		"eslint": "^7.28.0",
+		"eslint": "^7.29.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-jest": "^24.3.6",
 		"eslint-plugin-jsx-a11y": "^6.4.1",
@@ -89,7 +89,7 @@
 		"husky": "^6.0.0",
 		"hygen": "^6.1.0",
 		"jest": "^27.0.4",
-		"jest-runner-eslint": "^0.10.0",
+		"jest-runner-eslint": "^0.10.1",
 		"jest-watch-select-projects": "^2.0.0",
 		"jest-watch-typeahead": "^0.6.4",
 		"lint-staged": "^11.0.0",

src/components/atoms/PortfolioItem/PortfolioItem.tsx

@@ -1,8 +1,9 @@
-import { IPortfolioItem } from '@Types';
 import { FC } from 'react';
-import { StyledPortfolioItem } from './styles';
 import Image from 'next/image';
+import { IPortfolioItem } from '@Types';
 import Link from 'next/link';
+import { StyledPortfolioItem } from './styles';
+import { shimmer } from 'Utils/shimmer';
 
 export interface PortfolioItemProps {
 	item: IPortfolioItem;
@@ -21,6 +22,8 @@ const PortfolioItem: FC<PortfolioItemProps> = ({ item }) => {
 						height={1080}
 						objectFit="cover"
 						alt={title}
+						placeholder="blur"
+						blurDataURL={shimmer(1920, 1080)}
 					/>
 				</a>
 			</Link>

src/components/atoms/ThemeToggle/ThemeToggle.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { StyledThemeToggle } from './styles';
 
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,7 +7,7 @@ import Light from 'Public/assets/light.svg';
 import Dark from 'Public/assets/dark.svg';
 import { setTheme } from 'Redux/actions/theme';
 
-const ThemeToggle: FC = () => {
+const ThemeToggle = () => {
 	const theme = useSelector(getTheme);
 	const dispatch = useDispatch();
 

src/pages/blog/[slug].tsx

@@ -8,13 +8,21 @@ import styled from 'styled-components';
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
 import { SeoHead } from 'Atoms/SeoHead';
+import { shimmer } from 'Utils/shimmer';
 
 export default function BlogPost({ post, mdxSource }: any) {
 	const { title, description, date, tags } = post;
 
 	const components = {
 		img: (props: any) => (
-			<Image {...props} width={1920} height={1080} objectFit="cover" />
+			<Image
+				{...props}
+				width={1920}
+				height={1080}
+				objectFit="cover"
+				placeholder="blur"
+				blurDataURL={shimmer(1920, 1080)}
+			/>
 		),
 		ul: (props: any) => <List {...props} />,
 	};

src/pages/portfolio/[slug].tsx

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
 import { getAllDocuments, getBySlug } from 'Utils/api';
-import { serialize } from 'next-mdx-remote/serialize';
-import { MDXRemote } from 'next-mdx-remote';
 import Image from 'next/image';
+import { MDXRemote } from 'next-mdx-remote';
+import { serialize } from 'next-mdx-remote/serialize';
+import { shimmer } from 'Utils/shimmer';
+import styled from 'styled-components';
 
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
@@ -33,6 +34,8 @@ export default function BlogPost({ item, mdxSource }: any) {
 					height={1080}
 					objectFit="cover"
 					alt={`Screenshot of ${title}`}
+					placeholder="blur"
+					blurDataURL={shimmer(1920, 1080)}
 				/>{' '}
 				<Headline>{title}</Headline>
 				<h3>{type}</h3>

src/pages/portfolio/index.tsx

@@ -16,7 +16,7 @@ export default function Blog({ portfolioItems }: any) {
 			<Container>
 				<Headline>Portfolio</Headline>
 				{portfolioItems.map((item: any) => (
-					<PortfolioItem item={item} />
+					<PortfolioItem item={item} key={item.slug} />
 				))}
 			</Container>
 		</>

src/pages/uses.tsx

@@ -1,8 +1,11 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
 import { SeoHead } from 'Atoms/SeoHead';
-import Image from 'next/image';
-import styled from 'styled-components';
+
+import desk from 'Public/assets/desk.jpg';
 
 function Home() {
 	return (
@@ -21,10 +24,11 @@ function Home() {
 					2021.
 				</p>
 				<Image
-					src="/assets/desk.jpg"
+					src={desk}
 					width={1920}
 					height={1080}
 					alt="A photo of my desk"
+					placeholder="blur"
 				/>
 				<h3>Computer & Hardware</h3>
 				<List>

src/utils/shimmer.ts

@@ -0,0 +1,22 @@
+const shimmerSvg = (width: number, height: number) => `
+  <svg width="${width}" height="${height}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="rgba(100, 100, 100, 0.2)" offset="20%" />
+        <stop stop-color="rgba(100, 100, 100, 0.5)" offset="50%" />
+        <stop stop-color="rgba(100, 100, 100, 0.2)" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${height}" fill="rgba(100, 100, 100, 0.2)" />
+    <rect id="r" width="${width}" height="${height}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${width}" to="${width}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+const toBase64 = (str: string) =>
+	typeof window === 'undefined'
+		? Buffer.from(str).toString('base64')
+		: window.btoa(str);
+
+export const shimmer = (width: number, height: number) => {
+	return `data:image/svg+xml;base64,${toBase64(shimmerSvg(width, height))}`;
+};