move images around

components/post-header.js

@@ -3,7 +3,7 @@ import DateFormatter from '../components/date-formatter'
 import CoverImage from '../components/cover-image'
 import PostTitle from '../components/post-title'
 
-export default function PostHeader({ title, coverImage, date, author }) {
+export default function PostHeader({title, coverImage, date, author}) {
   return (
     <>
       <PostTitle>{title}</PostTitle>

posts/functor.md

@@ -1,13 +1,13 @@
 ---
 title: 'How to Build a Mini Functor'
 excerpt: "Functors and monads. Both of them are useful and important design patterns in functional programming. More importantly, you can't understand monads without functors. So in this post, let's talk about functors. let's start with the definition of a functor."
-coverImage: '/assets/blog/hello-world/cover.jpg'
+coverImage: '/assets/blog/functor/cover.jpg'
 date: '2021-04-12'
 author:
   name: Hao Jiang
   picture: '/assets/blog/authors/hao.png'
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: '/assets/blog/functor/cover.jpg'
 ---
 
 Functors and monads. Both of them are useful and important design patterns in functional programming. More importantly, you can't understand monads without functors. So in this post, let's talk about functors. let's start with the definition of a functor.

posts/monad.md

@@ -180,6 +180,10 @@ number
 
 The `chain` method is what makes a functor a monad. In Haskell, the `chain` method is called `bind`, but in JavaScript, to avoid the conflict between the built-in `bind` method on functions, people tend to use the name `chain` for this pattern.
 
+We can visualize a monad like this:
+
+![](/assets/blog/monad/monad.png)
+
 ## Summary
 
 In short, a monad is a functor that can unwrap its own kind and get out the value inside them.

posts/react-performance-recipes.md

@@ -1,13 +1,13 @@
 ---
 title: 'React Performance Recipes'
 excerpt: 'Performance optimization can be daunting, but there are still more solutions than problems. In this post, I talked about how to tackle common performance issues when developing with React. Get a solution for every React performance problem you might encounter.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
+coverImage: '/assets/blog/react-po/cover.jpg'
 date: '2022-01-05'
 author:
   name: Hao Jiang
   picture: '/assets/blog/authors/hao.png'
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: '/assets/blog/react-po/cover.jpg'
 ---
 
 ## Problem: Unnecessary Callback Re-Initiation

posts/react.md

@@ -1,13 +1,13 @@
 ---
 title: 'How to Build a Mini React (wip 🚧)'
 excerpt: 'Create your own version of a thing is THE way to understand it. So I decided to rewrite a simple version of React from scratch. I''m going to call the little library "Reacti" since it is just my personal little "recreation" of that mighty tool, and that name sounds natural to me.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
+coverImage: '/assets/blog/react/cover.jpg'
 date: '2021-06-30'
 author:
   name: Hao Jiang
   picture: '/assets/blog/authors/hao.png'
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: '/assets/blog/react/cover.jpg'
 ---
 
 Create your own version of a thing is THE way to understand it. So I decided to rewrite a simple version of React from scratch. I'm going to call the little library "Reacti" since it is just my personal little "reinvention" of that mighty tool, and that name sounds natural to me.