From dbe3c723dc2c7ab806063379a2a9f7306802d2ee Mon Sep 17 00:00:00 2001
From: Jacob Herper
Date: Sat, 19 Jun 2021 21:53:12 +0100
Subject: [PATCH] feat: adds blur placeholders to images
---
.../atoms/PortfolioItem/PortfolioItem.tsx | 7 ++++--
.../atoms/ThemeToggle/ThemeToggle.tsx | 3 +--
src/pages/blog/[slug].tsx | 10 ++++++++-
src/pages/portfolio/[slug].tsx | 9 +++++---
src/pages/portfolio/index.tsx | 2 +-
src/pages/uses.tsx | 10 ++++++---
src/utils/shimmer.ts | 22 +++++++++++++++++++
7 files changed, 51 insertions(+), 12 deletions(-)
create mode 100644 src/utils/shimmer.ts
diff --git a/src/components/atoms/PortfolioItem/PortfolioItem.tsx b/src/components/atoms/PortfolioItem/PortfolioItem.tsx
index dbc97910..7ffe7f28 100644
--- a/src/components/atoms/PortfolioItem/PortfolioItem.tsx
+++ b/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 = ({ item }) => {
height={1080}
objectFit="cover"
alt={title}
+ placeholder="blur"
+ blurDataURL={shimmer(1920, 1080)}
/>
diff --git a/src/components/atoms/ThemeToggle/ThemeToggle.tsx b/src/components/atoms/ThemeToggle/ThemeToggle.tsx
index 601e2183..5146c42e 100644
--- a/src/components/atoms/ThemeToggle/ThemeToggle.tsx
+++ b/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();
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index ab32c7b9..14ad2fd1 100644
--- a/src/pages/blog/[slug].tsx
+++ b/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) => (
-
+
),
ul: (props: any) =>
,
};
diff --git a/src/pages/portfolio/[slug].tsx b/src/pages/portfolio/[slug].tsx
index a49ed582..3100df2d 100644
--- a/src/pages/portfolio/[slug].tsx
+++ b/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)}
/>{' '}
{title}
{type}
diff --git a/src/pages/portfolio/index.tsx b/src/pages/portfolio/index.tsx
index eac6a8cf..02e449ce 100644
--- a/src/pages/portfolio/index.tsx
+++ b/src/pages/portfolio/index.tsx
@@ -16,7 +16,7 @@ export default function Blog({ portfolioItems }: any) {
Portfolio
{portfolioItems.map((item: any) => (
-
+
))}
>
diff --git a/src/pages/uses.tsx b/src/pages/uses.tsx
index 8e11ddb0..92391e43 100644
--- a/src/pages/uses.tsx
+++ b/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.
Computer & Hardware
diff --git a/src/utils/shimmer.ts b/src/utils/shimmer.ts
new file mode 100644
index 00000000..ad0b31a6
--- /dev/null
+++ b/src/utils/shimmer.ts
@@ -0,0 +1,22 @@
+const shimmerSvg = (width: number, height: number) => `
+ `;
+
+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))}`;
+};