Add blog posts opengraph images

kirillkurko · Mar 14, 2024 · 9b520ec · 9b520ec
1 parent ea20ef4
commit 9b520ec
Show file tree

Hide file tree

Showing 22 changed files with 29 additions and 16 deletions.
diff --git a/public/images/direct-messages-should-be-dead/opengraph-image.png b/public/images/direct-messages-should-be-dead/opengraph-image.png
diff --git a/public/images/fastest-flutter-vs-react-native-comparison/opengraph-image.png b/public/images/fastest-flutter-vs-react-native-comparison/opengraph-image.png
diff --git a/public/images/how-to-keep-your-inbox-under-control/opengraph-image.png b/public/images/how-to-keep-your-inbox-under-control/opengraph-image.png
diff --git a/public/images/how-to-use-amplitude-with-react-native/opengraph-image.png b/public/images/how-to-use-amplitude-with-react-native/opengraph-image.png
diff --git a/...ic/images/improve-your-imports-with-typescript-path-aliases/opengraph-image.png b/...ic/images/improve-your-imports-with-typescript-path-aliases/opengraph-image.png
diff --git a/public/images/one-more-article-about-use-effect-hook/opengraph-image.png b/public/images/one-more-article-about-use-effect-hook/opengraph-image.png
diff --git a/public/images/penguin-mentality-employee/opengraph-image.png b/public/images/penguin-mentality-employee/opengraph-image.png
diff --git a/public/images/slack-communication-tips/opengraph-image.png b/public/images/slack-communication-tips/opengraph-image.png
diff --git a/public/images/stay-up-to-date-with-dependabot-on-gitlab/opengraph-image.png b/public/images/stay-up-to-date-with-dependabot-on-gitlab/opengraph-image.png
diff --git a/public/images/the-shortcut-that-revolutionized-my-workflow/opengraph-image.png b/public/images/the-shortcut-that-revolutionized-my-workflow/opengraph-image.png
diff --git a/public/images/values-abilities-skills/opengraph-image.png b/public/images/values-abilities-skills/opengraph-image.png
diff --git a/public/images/why-i-started-my-blog/opengraph-image.png b/public/images/why-i-started-my-blog/opengraph-image.png
diff --git a/src/app/about/page.tsx b/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;

diff --git a/src/app/blog/[slug]/page.tsx b/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)],
     },
   };
 }

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -3,7 +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';
+import { OG_IMAGE } from '../../utils/ogImages';
 
 export const metadata: Metadata = {
   title: 'Blog',

diff --git a/src/app/emoji/page.tsx b/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;
 

diff --git a/src/app/gallery/page.tsx b/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',

diff --git a/src/app/newsletter/page.tsx b/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',

diff --git a/src/app/page.tsx b/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',

diff --git a/src/app/snippets/page.tsx b/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',

diff --git a/src/utils/ogImage.ts b/src/utils/ogImage.ts
diff --git a/src/utils/ogImages.ts b/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,
+  };
+}