Blog improvements

src/app/about/page.tsx

@@ -2,7 +2,7 @@ import { PageTitle, Paragraph } from '@components/typography';
 import AboutCard from './AboutCard';
 import type { Metadata } from 'next';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 interface Feedback {
   avatar: string;

src/app/blog/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { allBlogs } from '@contentlayer/generated';
 import { type Metadata } from 'next';
 import ViewTracker from './ViewTracker';
 import { BASE_URL } from '../../../utils/const';
-import { OG_IMAGE } from '../../../utils/ogImage';
+import { getBlogPostOpengraphImage } from '../../../utils/ogImages';
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = params;
@@ -15,7 +15,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     description: blogPost?.summary,
     openGraph: {
       url: new URL(`${BASE_URL}/blog/${slug}`),
-      images: [OG_IMAGE],
+      images: [getBlogPostOpengraphImage(slug)],
     },
   };
 }

src/app/blog/page.tsx

@@ -3,9 +3,7 @@ import ArticlePreview from '@components/ArticlePreview';
 import { type Metadata } from 'next';
 import { getAllBlogPosts } from '@lib/models/blog';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
-
-export const revalidate = 0;
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'Blog',

src/app/emoji/page.tsx

@@ -3,7 +3,7 @@ import { PageTitle, Paragraph } from '@components/typography';
 import { getAllEmojis } from '@lib/models/emoji';
 import { type Metadata } from 'next';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const revalidate = 0;
 

src/app/gallery/page.tsx

@@ -1,7 +1,7 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'Gallery',

src/app/newsletter/page.tsx

@@ -1,7 +1,7 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'Newsletter',

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { PageTitle, Paragraph } from '@components/typography';
 import type { Metadata } from 'next';
 import { BASE_URL } from '../utils/const';
-import { OG_IMAGE } from '../utils/ogImage';
+import { OG_IMAGE } from '../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'kkurko.dev',

src/app/snippets/page.tsx

@@ -1,7 +1,7 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
 import { BASE_URL } from '../../utils/const';
-import { OG_IMAGE } from '../../utils/ogImage';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'Snippets',

src/lib/models/blog.ts

@@ -1,5 +1,6 @@
 import prisma from '@lib/prisma';
 import { allBlogs } from '@contentlayer/generated';
+import { unstable_noStore as noStore } from 'next/cache';
 
 export function getAllBlogPosts() {
   return allBlogs.sort((a, b) => {
@@ -11,6 +12,8 @@ export function getAllBlogPosts() {
 }
 
 export async function getBlogPostViews() {
+  noStore();
+
   const views = await prisma.blog.findMany();
 
   return Object.fromEntries(views.map((view) => [view.slug, view.views]));

src/utils/ogImages.ts

@@ -0,0 +1,20 @@
+import ogImage from '../app/opengraph-image.png';
+
+export const OG_IMAGE = {
+  url: ogImage.src,
+  width: ogImage.width,
+  height: ogImage.height,
+};
+
+const DEFAULT_OG_IMAGE_SIZE = {
+  WIDTH: 1920,
+  HEIGHT: 1080,
+};
+
+export function getBlogPostOpengraphImage(slug: string) {
+  return {
+    url: `/images/${slug}/opengraph-image.png`,
+    width: DEFAULT_OG_IMAGE_SIZE.WIDTH,
+    height: DEFAULT_OG_IMAGE_SIZE.HEIGHT,
+  };
+}