diff --git a/public/images/direct-messages-should-be-dead/opengraph-image.png b/public/images/direct-messages-should-be-dead/opengraph-image.png new file mode 100644 index 00000000..3c78c9f8 Binary files /dev/null and b/public/images/direct-messages-should-be-dead/opengraph-image.png differ 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 new file mode 100644 index 00000000..4b3025dc Binary files /dev/null and b/public/images/fastest-flutter-vs-react-native-comparison/opengraph-image.png differ 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 new file mode 100644 index 00000000..db91b04d Binary files /dev/null and b/public/images/how-to-keep-your-inbox-under-control/opengraph-image.png differ 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 new file mode 100644 index 00000000..f81b71f1 Binary files /dev/null and b/public/images/how-to-use-amplitude-with-react-native/opengraph-image.png differ diff --git a/public/images/improve-your-imports-with-typescript-path-aliases/opengraph-image.png b/public/images/improve-your-imports-with-typescript-path-aliases/opengraph-image.png new file mode 100644 index 00000000..9bf6caaf Binary files /dev/null and b/public/images/improve-your-imports-with-typescript-path-aliases/opengraph-image.png differ 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 new file mode 100644 index 00000000..c032204b Binary files /dev/null and b/public/images/one-more-article-about-use-effect-hook/opengraph-image.png differ diff --git a/public/images/penguin-mentality-employee/opengraph-image.png b/public/images/penguin-mentality-employee/opengraph-image.png new file mode 100644 index 00000000..06d9350e Binary files /dev/null and b/public/images/penguin-mentality-employee/opengraph-image.png differ diff --git a/public/images/slack-communication-tips/opengraph-image.png b/public/images/slack-communication-tips/opengraph-image.png new file mode 100644 index 00000000..61499f79 Binary files /dev/null and b/public/images/slack-communication-tips/opengraph-image.png differ 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 new file mode 100644 index 00000000..ed8f3690 Binary files /dev/null and b/public/images/stay-up-to-date-with-dependabot-on-gitlab/opengraph-image.png differ 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 new file mode 100644 index 00000000..eeb2130d Binary files /dev/null and b/public/images/the-shortcut-that-revolutionized-my-workflow/opengraph-image.png differ diff --git a/public/images/values-abilities-skills/opengraph-image.png b/public/images/values-abilities-skills/opengraph-image.png new file mode 100644 index 00000000..f62f2a32 Binary files /dev/null and b/public/images/values-abilities-skills/opengraph-image.png differ diff --git a/public/images/why-i-started-my-blog/opengraph-image.png b/public/images/why-i-started-my-blog/opengraph-image.png new file mode 100644 index 00000000..2471d6a4 Binary files /dev/null and b/public/images/why-i-started-my-blog/opengraph-image.png differ diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 720e9a62..f548d181 100644 --- 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 index 6141898b..5b33cd1a 100644 --- 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 { const { slug } = params; @@ -15,7 +15,7 @@ export async function generateMetadata({ params }: Props): Promise { 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 index 225b4a2e..2c782628 100644 --- a/src/app/blog/page.tsx +++ b/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', diff --git a/src/app/emoji/page.tsx b/src/app/emoji/page.tsx index 7d36836c..16c41177 100644 --- 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/favicon.ico b/src/app/favicon.ico index b59679a8..dfff9d2e 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index 481d580a..8d581b43 100644 --- 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 index 692452ff..62870312 100644 --- 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 index 3e6aa125..2691c3f3 100644 --- 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 index 73a1fe8e..f5758fb0 100644 --- 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/lib/models/blog.ts b/src/lib/models/blog.ts index f8c0240e..f5934805 100644 --- a/src/lib/models/blog.ts +++ b/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])); diff --git a/src/utils/ogImage.ts b/src/utils/ogImage.ts deleted file mode 100644 index 24369803..00000000 --- a/src/utils/ogImage.ts +++ /dev/null @@ -1,7 +0,0 @@ -import ogImage from '../app/opengraph-image.png'; - -export const OG_IMAGE = { - url: ogImage.src, - width: ogImage.width, - height: ogImage.height, -}; diff --git a/src/utils/ogImages.ts b/src/utils/ogImages.ts new file mode 100644 index 00000000..7dfbef3d --- /dev/null +++ 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, + }; +}