feat: add image blur loading

Author: shellbear

README.md

@@ -4,8 +4,8 @@ Source code of my personal website & blog ✨
 
 Check the live version [here](https://shellbear.me/) ⚡️
 
-[![home](./.github/img/home.webp)](https://shellbear.me/)
-[![blog](./.github/img/blog.webp)](https://shellbear.me/)
+[![home](.github/img/home.png)](https://shellbear.me/)
+[![blog](.github/img/blog.png)](https://shellbear.me/)
 
 ## ✨ Features
 

components/Separator.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Separator = styled.hr`
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+`;
+
+export default Separator;

components/index.ts

@@ -11,3 +11,4 @@ export { default as Card } from './Card';
 export { default as Image } from './Image';
 export { default as TransparentLink } from './TransparentLink';
 export { default as MDXContent } from './MDXContent';
+export { default as Separator } from './Separator';

next.config.js

@@ -12,7 +12,7 @@ module.exports = {
       config.resolve.fallback.fs = false;
     }
     config.module.rules.push({
-      test: /\.md|\.mdx$/,
+      test: /\.md|\.mdx|\.webp$/,
       use: 'raw-loader',
     });
 

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@notionhq/client": "^2.2.0",
+    "@plaiceholder/next": "^2.5.0",
     "fast-glob": "^3.2.11",
     "framer-motion": "^7.2.1",
     "gray-matter": "^4.0.3",
@@ -22,6 +23,7 @@
     "next-mdx-remote": "^4.1.0",
     "notion-client": "^6.13.8",
     "notion-utils": "^6.13.4",
+    "plaiceholder": "^2.5.0",
     "prettier": "^2.7.1",
     "prismjs": "^1.29.0",
     "raw-loader": "^4.0.2",
@@ -30,6 +32,7 @@
     "react-icons": "^4.4.0",
     "react-notion-x": "^6.13.9",
     "reactdom": "^2.0.0",
+    "sharp": "^0.31.0",
     "styled-components": "^5.3.5",
     "styled-system": "^5.1.5"
   },

pages/about/[slug].tsx

@@ -5,7 +5,7 @@ import {
   NextPage,
 } from 'next';
 import Head from 'next/head';
-import { Container, Title, Text, MDXContent } from '@components';
+import { Container, Title, Text, MDXContent, Separator } from '@components';
 import { getPosts, Post } from '@posts';
 import Image from 'next/image';
 
@@ -48,6 +48,8 @@ const About: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
           alt={experience.data.title}
           layout="fill"
           objectFit="cover"
+          placeholder="blur"
+          blurDataURL={experience.data.blurImage}
         />
       </Container>
       <Container mt="1rem" gridGap="1rem">
@@ -65,12 +67,7 @@ const About: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
         </Text>
       </Container>
     </Container>
-    <hr
-      style={{
-        width: '100%',
-        border: '1px solid rgba(0,0,0,0.1)',
-      }}
-    />
+    <Separator />
     <MDXContent {...experience.source} />
   </Container>
 );

posts/blog/go-dokku-deployment.md

@@ -4,6 +4,7 @@ import path from 'path';
 import matter from 'gray-matter';
 import { serialize } from 'next-mdx-remote/serialize';
 import { MDXRemoteSerializeResult } from 'next-mdx-remote';
+import { getPlaiceholder } from 'plaiceholder';
 
 const baseDir = path.join(process.cwd(), './posts/');
 
@@ -13,7 +14,7 @@ export interface Post {
   content: string;
 }
 
-const getPosts = (dir: string): Promise<Post[]> => {
+const getPosts = async (dir: string): Promise<Post[]> => {
   const contentGlob = path.join(path.join(baseDir, dir), '/*.mdx');
   const files = glob.sync(contentGlob);
 
@@ -25,6 +26,12 @@ const getPosts = (dir: string): Promise<Post[]> => {
       const { data, content } = matter(raw);
 
       data.slug = slug;
+
+      if (data.image) {
+        const { base64 } = await getPlaiceholder(data.image);
+        data.blurImage = base64;
+      }
+
       const source = await serialize(content, {
         scope: data,
       });