handle og images for tag and category list pages

Author: nemanjam

src/constants/metadata.ts

@@ -36,13 +36,19 @@ export const PAGE_METADATA = {
   'lists/blog/tags': {
     title: 'Tags',
   },
+  'lists/blog/tags/tag': {
+    title: 'Tag',
+  },
   // 'src/pages/blog/tags/[tag]/[...page].astro' // dynamic tag param
   'lists/blog/explore': {
     title: 'Explore',
   },
   'lists/blog/categories': {
     title: 'Categories',
   },
+  'lists/blog/categories/category': {
+    title: 'Category',
+  },
   // src/pages/blog/categories/[category]/[...page].astro
   'lists/projects': {
     title: 'Projects',

src/pages/blog/categories/[category]/[...page].astro

@@ -6,6 +6,7 @@ import Link from '@/components/Link.astro';
 import PostList from '@/components/PostList.astro';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
+import { getPageMetadata } from '@/utils/metadata';
 import { pickPaginationPropsFromPage } from '@/utils/pagination';
 import { capitalizeFirstLetter } from '@/utils/strings';
 
@@ -32,8 +33,10 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 const { page } = Astro.props;
 const { category } = Astro.params;
 
+const defaultMetadata = getPageMetadata('lists/blog/categories/category');
+
 const title = capitalizeFirstLetter(category);
-const metadata: Metadata = { title };
+const metadata: Metadata = { ...defaultMetadata, title };
 
 const paginationProps = pickPaginationPropsFromPage(page);
 const layoutProps = { metadata, paginationProps };

src/pages/blog/tags/[tag]/[...page].astro

@@ -6,6 +6,7 @@ import Link from '@/components/Link.astro';
 import PostList from '@/components/PostList.astro';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
+import { getPageMetadata } from '@/utils/metadata';
 import { pickPaginationPropsFromPage } from '@/utils/pagination';
 
 import type { Metadata } from '@/types/common';
@@ -31,9 +32,11 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 const { page } = Astro.props;
 const { tag } = Astro.params;
 
-// todo: dynamic param for metadata
 const title = `#${tag}`;
-const metadata: Metadata = { title };
+
+// dynamic param for metadata
+const defaultMetadata = getPageMetadata('lists/blog/tags/tag');
+const metadata: Metadata = { ...defaultMetadata, title };
 
 const paginationProps = pickPaginationPropsFromPage(page);
 const layoutProps = { metadata, paginationProps };