From d5b7b8cfd8693fa2efc7a9c758c9506a2c0569a9 Mon Sep 17 00:00:00 2001 From: Kirill Kurko Date: Wed, 13 Mar 2024 22:50:05 +0300 Subject: [PATCH] Fix OG image --- src/app/about/page.tsx | 4 +++- src/app/blog/[slug]/page.tsx | 4 +++- src/app/blog/page.tsx | 4 +++- src/app/emoji/page.tsx | 4 +++- src/app/gallery/page.tsx | 4 +++- src/app/layout.tsx | 4 ++-- src/app/newsletter/page.tsx | 4 +++- src/app/page.tsx | 4 +++- src/app/snippets/page.tsx | 4 +++- src/utils/const.ts | 1 + src/utils/conts.ts | 1 - src/utils/ogImage.ts | 7 +++++++ 12 files changed, 34 insertions(+), 11 deletions(-) create mode 100644 src/utils/const.ts delete mode 100644 src/utils/conts.ts create mode 100644 src/utils/ogImage.ts diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index c6f2b78..720e9a6 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,7 +1,8 @@ import { PageTitle, Paragraph } from '@components/typography'; import AboutCard from './AboutCard'; import type { Metadata } from 'next'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; interface Feedback { avatar: string; @@ -78,6 +79,7 @@ export const metadata: Metadata = { 'Learn more about me through the words of some of my close friends, managers and peers.', openGraph: { url: new URL(`${BASE_URL}/about`), + images: [OG_IMAGE], }, }; diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx index cb89a07..6141898 100644 --- a/src/app/blog/[slug]/page.tsx +++ b/src/app/blog/[slug]/page.tsx @@ -3,7 +3,8 @@ import { Mdx } from '@components/mdx'; import { allBlogs } from '@contentlayer/generated'; import { type Metadata } from 'next'; import ViewTracker from './ViewTracker'; -import { BASE_URL } from '../../../utils/conts'; +import { BASE_URL } from '../../../utils/const'; +import { OG_IMAGE } from '../../../utils/ogImage'; export async function generateMetadata({ params }: Props): Promise { const { slug } = params; @@ -14,6 +15,7 @@ export async function generateMetadata({ params }: Props): Promise { description: blogPost?.summary, openGraph: { url: new URL(`${BASE_URL}/blog/${slug}`), + images: [OG_IMAGE], }, }; } diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index a967e08..225b4a2 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -2,7 +2,8 @@ import { PageTitle, Paragraph, SectionTitle } from '@components/typography'; import ArticlePreview from '@components/ArticlePreview'; import { type Metadata } from 'next'; import { getAllBlogPosts } from '@lib/models/blog'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; export const revalidate = 0; @@ -12,6 +13,7 @@ export const metadata: Metadata = { 'Weekly content about software development and management. All articles are based on my own experience and real cases.', openGraph: { url: new URL(`${BASE_URL}/blog`), + images: [OG_IMAGE], }, }; diff --git a/src/app/emoji/page.tsx b/src/app/emoji/page.tsx index cbfb30d..7d36836 100644 --- a/src/app/emoji/page.tsx +++ b/src/app/emoji/page.tsx @@ -2,7 +2,8 @@ import Emoji from './Emoji'; import { PageTitle, Paragraph } from '@components/typography'; import { getAllEmojis } from '@lib/models/emoji'; import { type Metadata } from 'next'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; export const revalidate = 0; @@ -11,6 +12,7 @@ export const metadata: Metadata = { description: 'Here you can have fun and vote for your favorite emoji.', openGraph: { url: new URL(`${BASE_URL}/emoji`), + images: [OG_IMAGE], }, }; diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index 6959dda..481d580 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -1,6 +1,7 @@ import WorkInProgress from '@components/WorkInProgress'; import type { Metadata } from 'next'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; export const metadata: Metadata = { title: 'Gallery', @@ -8,6 +9,7 @@ export const metadata: Metadata = { 'I like photography and here are a couple of my favorite pictures.', openGraph: { url: new URL(`${BASE_URL}/gallery`), + images: [OG_IMAGE], }, }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 668e126..e671ce5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,7 +5,7 @@ import { Analytics } from '@vercel/analytics/react'; import type { Metadata } from 'next'; import Container from '@components/Container'; import './globals.css'; -import { BASE_URL } from '../utils/conts'; +import { BASE_URL } from '../utils/const'; const redHatText = Red_Hat_Text({ variable: '--font-red-hat-text', @@ -29,7 +29,7 @@ export const metadata: Metadata = { alternates: { canonical: './', }, - metadataBase: new URL(BASE_URL), + metadataBase: new URL(`${BASE_URL}/`), }; interface Props { diff --git a/src/app/newsletter/page.tsx b/src/app/newsletter/page.tsx index d123009..692452f 100644 --- a/src/app/newsletter/page.tsx +++ b/src/app/newsletter/page.tsx @@ -1,12 +1,14 @@ import WorkInProgress from '@components/WorkInProgress'; import type { Metadata } from 'next'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; export const metadata: Metadata = { title: 'Newsletter', description: 'Follow my newsletter on software development and management.', openGraph: { url: new URL(`${BASE_URL}/newsletter`), + images: [OG_IMAGE], }, }; diff --git a/src/app/page.tsx b/src/app/page.tsx index 0480242..3e6aa12 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,12 +1,14 @@ import { PageTitle, Paragraph } from '@components/typography'; import type { Metadata } from 'next'; -import { BASE_URL } from '../utils/conts'; +import { BASE_URL } from '../utils/const'; +import { OG_IMAGE } from '../utils/ogImage'; export const metadata: Metadata = { title: 'kkurko.dev', description: 'Frontend Developer and Penguin 🐧', openGraph: { url: new URL(BASE_URL), + images: [OG_IMAGE], }, }; diff --git a/src/app/snippets/page.tsx b/src/app/snippets/page.tsx index e6738fc..73a1fe8 100644 --- a/src/app/snippets/page.tsx +++ b/src/app/snippets/page.tsx @@ -1,6 +1,7 @@ import WorkInProgress from '@components/WorkInProgress'; import type { Metadata } from 'next'; -import { BASE_URL } from '../../utils/conts'; +import { BASE_URL } from '../../utils/const'; +import { OG_IMAGE } from '../../utils/ogImage'; export const metadata: Metadata = { title: 'Snippets', @@ -8,6 +9,7 @@ export const metadata: Metadata = { 'Short code snippets that I found useful and want to keep at hand.', openGraph: { url: new URL(`${BASE_URL}/snippets`), + images: [OG_IMAGE], }, }; diff --git a/src/utils/const.ts b/src/utils/const.ts new file mode 100644 index 0000000..7030037 --- /dev/null +++ b/src/utils/const.ts @@ -0,0 +1 @@ +export const BASE_URL = 'https://kkurko.dev'; diff --git a/src/utils/conts.ts b/src/utils/conts.ts deleted file mode 100644 index 2c8a80b..0000000 --- a/src/utils/conts.ts +++ /dev/null @@ -1 +0,0 @@ -export const BASE_URL = 'https://kkurko.dev/'; diff --git a/src/utils/ogImage.ts b/src/utils/ogImage.ts new file mode 100644 index 0000000..2436980 --- /dev/null +++ b/src/utils/ogImage.ts @@ -0,0 +1,7 @@ +import ogImage from '../app/opengraph-image.png'; + +export const OG_IMAGE = { + url: ogImage.src, + width: ogImage.width, + height: ogImage.height, +};