blogimages

components/blogimage.module.scss

@@ -0,0 +1,12 @@
+.wrapper {
+  display: block;
+  margin-right: -20px;
+  margin-bottom: 30px;
+  margin-left: -20px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+
+  @media (min-width: 489px) {
+    border-radius: 12px;
+  }
+}

components/blogimage.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import styles from './blogimage.module.scss'
+
+type BlogImageProps = {
+  src: string
+  alt: string
+}
+
+const BlogImage = ({ src, alt }: BlogImageProps): JSX.Element => (
+  <span className={styles.wrapper}>
+    <Image src={src} alt={alt} width={2024} height={1012} layout="responsive" />
+  </span>
+)
+
+export default BlogImage

data/blog/animated-music-bars.mdx

@@ -2,7 +2,8 @@
 title: 'Animated music bars with CSS'
 publishedAt: '2021-01-31'
 summary: 'How to create an animated icon perfect for visualizing music'
-image: '/blog/animated-music-bars/og.png'
+og: '/blog/animated-music-bars/og.png'
+image: '/blog/animated-music-bars/image.png'
 ---
 
 My site is a place to learn and try new tech, so after seeing Lee Robinsons post on [Using the Spotify API with Next.js](https://leerob.io/blog/spotify-api-nextjs) this was definitely something I wanted to try out. The goal was to add a "Now playing" widget to the footer showing what I'm currently listening to on Spotify.

data/blog/git-newmr.mdx

@@ -2,7 +2,8 @@
 title: 'My favorite productivity hack: git newmr'
 publishedAt: '2021-02-08'
 summary: 'Using git aliases to automate repetitive tasks'
-image: '/blog/git-newmr/og.png'
+og: '/blog/git-newmr/og.png'
+image: '/blog/git-newmr/image.png'
 ---
 
 How you tried to automate any daily tasks of your programming? You should!

data/blog/page-transition-with-framer-motion.mdx

@@ -2,7 +2,8 @@
 title: 'Page Transitions with Framer Motion'
 publishedAt: '2021-02-05'
 summary: 'Using framer motion to animate page transitions'
-image: '/blog/page-transition-with-framer-motion/og.png'
+og: '/blog/page-transition-with-framer-motion/og.png'
+image: '/blog/page-transition-with-framer-motion/image.png'
 ---
 
 Click around on this webpage and you'll notice a small transition between each page. In this post I'll show you how to create this page transition using Framer Motion.

data/blog/personal-website-with-next-and-notion.mdx

@@ -2,6 +2,7 @@
 title: 'Building my personal website with Next.js backed by Notion'
 publishedAt: '2021-01-22'
 summary: 'My experience rebuilding my personal website with Next.js & Typescript backed by Notion'
+image: '/blog/building-my-personal-website-with-nextjs-backed-by-notion/image.png'
 ---
 
 When deciding to build a website in 2021 there's a bit of a double edged sword, the choices are really endless, with new frameworks and tools getting released almost daily. For this website I wanted to try out [Next.js](https://nextjs.org), a javascript framework built on React that handles all the hard parts about server side rendering & configs. (If you've ever debugged webpack configs you'll appreciate not having to worry about that stuff anymore).

data/blog/the-evolving-personal-website.mdx

@@ -2,6 +2,7 @@
 title: 'The Evolving Personal Website'
 publishedAt: '2021-01-22'
 summary: 'A brief history of my personal website starting in the tumblr era.'
+image: '/blog/the-evolving-personal-website/image.png'
 ---
 
 My personal website has taken quite a few shapes over the years. With the rise of simple website creators like squarespace or even dribbble portfolios you could ask yourself as a frontend dev; Do you even need to build your own website today? What is a personal website for?

pages/blog.module.scss

@@ -5,7 +5,7 @@
   list-style: none;
 
   li {
-    margin-bottom: 2.5rem;
+    margin-bottom: 4rem;
   }
 }
 

pages/blog.tsx

@@ -10,6 +10,7 @@ import readingTime from 'reading-time'
 import Page from 'components/page'
 import PageHeader from 'components/pageheader'
 import Newsletter from 'components/newsletter'
+import BlogImage from 'components/blogimage'
 
 // Utils
 import { postFilePaths, POSTS_PATH } from 'utils/mdxutils'
@@ -47,16 +48,24 @@ const Blog = ({ posts }: BlogProps): JSX.Element => {
           .sort((a, b) => new Date(b.meta.publishedAt).getTime() - new Date(a.meta.publishedAt).getTime())
           .map(post => {
             const {
-              meta: { summary, title, readingTime: readTime, publishedAt },
+              meta: { summary, title, readingTime: readTime, publishedAt, image },
             } = post
             const formattedDate = new Date(publishedAt).toLocaleString('en-US', {
               month: 'short',
               day: '2-digit',
               year: 'numeric',
             })
+            const slug = post.filePath.replace(/\.mdx?$/, '')
             return (
               <li key={post.filePath}>
-                <Link as={`/blog/${post.filePath.replace(/\.mdx?$/, '')}`} href="/blog/[slug]">
+                {image && (
+                  <Link as={`/blog/${slug}`} href="/blog/[slug]">
+                    <a>
+                      <BlogImage src={image} alt={title} />
+                    </a>
+                  </Link>
+                )}
+                <Link as={`/blog/${slug}`} href="/blog/[slug]">
                   <a className={styles.title}>{title}</a>
                 </Link>
                 <p className={styles.summary}>{summary}</p>

pages/blog/[slug].tsx

@@ -20,6 +20,7 @@ import HitCounter from 'components/hitcounter'
 import LikeButton from 'components/likebutton'
 import { NowPlayingIcon } from 'components/nowplaying'
 import Newsletter from 'components/newsletter'
+import BlogImage from 'components/blogimage'
 
 // Utils
 import { postFilePaths, POSTS_PATH } from 'utils/mdxutils'
@@ -55,6 +56,7 @@ const components = {
 }
 
 export type Meta = {
+  og?: string
   image?: string
   publishedAt: string
   readingTime: {
@@ -99,8 +101,8 @@ const Post = ({ source }: PostProps): JSX.Element => {
           description: seoDesc,
           images: [
             {
-              url: meta.image
-                ? `https://samuelkraft.com${meta.image}`
+              url: meta.og
+                ? `https://samuelkraft.com${meta.og}`
                 : `https://og-image.samuelkraft.vercel.app/${encodeURIComponent(meta.title)}?desc=${encodeURIComponent(
                     seoDesc,
                   )}&theme=dark.png`,
@@ -113,6 +115,7 @@ const Post = ({ source }: PostProps): JSX.Element => {
           cardType: 'summary_large_image',
         }}
       />
+      {meta.image && <BlogImage src={meta.image} alt={meta.title} />}
       <PageHeader title={meta.title}>
         <p className={styles.meta}>
           Published on {formattedDate} <span>&middot;</span> {meta.readingTime.text}