Add metadata generation and refactor LearningHubPost logic (#22)

* Add metadata generation and refactor LearningHubPost logic

This update introduces metadata generation for LearningHubPost pages, enhancing SEO and social media sharing. It also refactors the component architecture by extracting reusable functions for fetching post data, improving code maintainability and readability. Localization for metadata fields is integrated using `next-intl`.

* Update sorting logic and query parameter structure

Revised `SortOptions` to use `"[key]=value"` format and adjusted filters accordingly. Introduced default sorting to 'Newest' and refined query construction for better compatibility. Added debug logs and ensured safer handling in rendering conditional components.

src/app/[locale]/learning-hub/[id]/page.tsx

@@ -1,9 +1,42 @@
-import LearningHubPost from '@/components/LearningHubPost'
+import { getTranslations } from 'next-intl/server'
+
+import LearningHubPost, {
+  getPostId,
+  LearningHubPostPageProps,
+  resolvingPost,
+} from '@/components/LearningHubPost'
+import { config } from '@/config'
+
+export async function generateMetadata({ params }: LearningHubPostPageProps) {
+  const t = await getTranslations({ locale: params.locale, namespace: '' })
+
+  const post = await resolvingPost(params.id)
+
+  return {
+    metadataBase: new URL('https://rarimo.com/'),
+    title: post.attributes.title,
+    description: post.attributes.shortDescription,
+
+    openGraph: {
+      type: 'website',
+      siteName: t('metadata.openGraph.siteName'),
+      title: post.attributes.title,
+      description: post.attributes.shortDescription,
+      url: `${config.learningHubApiUrl}/posts/${getPostId(params.id)}`,
+      images: post.attributes.coverImage,
+    },
+
+    twitter: {
+      site: t('metadata.twitter.site'),
+      title: post.attributes.title,
+      description: post.attributes.shortDescription,
+      images: post.attributes.coverImage,
+    },
+  }
+}
 
 export default async function LearningHubPostPage({
   params,
-}: {
-  params: { id: string }
-}) {
+}: LearningHubPostPageProps) {
   return <LearningHubPost params={params} />
 }

src/app/learning-hub/[id]/page.tsx

@@ -1,14 +1,45 @@
 import { NextIntlClientProvider } from 'next-intl'
-import { unstable_setRequestLocale } from 'next-intl/server'
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'
 
-import LearningHubPost from '@/components/LearningHubPost'
+import LearningHubPost, {
+  getPostId,
+  LearningHubPostPageProps,
+  resolvingPost,
+} from '@/components/LearningHubPost'
+import { config } from '@/config'
 import { locales } from '@/i18n'
 
+export async function generateMetadata({ params }: LearningHubPostPageProps) {
+  const t = await getTranslations({ locale: params.locale, namespace: '' })
+
+  const post = await resolvingPost(params.id)
+
+  return {
+    metadataBase: new URL('https://rarimo.com/'),
+    title: post.attributes.title,
+    description: post.attributes.shortDescription,
+
+    openGraph: {
+      type: 'website',
+      siteName: t('metadata.openGraph.siteName'),
+      title: post.attributes.title,
+      description: post.attributes.shortDescription,
+      url: `${config.learningHubApiUrl}/posts/${getPostId(params.id)}`,
+      images: post.attributes.coverImage,
+    },
+
+    twitter: {
+      site: t('metadata.twitter.site'),
+      title: post.attributes.title,
+      description: post.attributes.shortDescription,
+      images: post.attributes.coverImage,
+    },
+  }
+}
+
 export default async function LearningHubPostPage({
   params,
-}: {
-  params: { id: string }
-}) {
+}: LearningHubPostPageProps) {
   unstable_setRequestLocale(locales[0])
 
   const messages = await (

src/components/LearningHub/components/LearningHubPosts/components/LearningHubFilters.tsx

@@ -64,7 +64,7 @@ export default function LearningHubFilters({ className, ...rest }: Props) {
       }
 
       setSortedBy(sort)
-      if (sort !== SortOptions.Oldest) {
+      if (sort !== SortOptions.Newest) {
         params.set(QueryFilters.Sort, sort)
       } else {
         params.delete(QueryFilters.Sort)

src/components/LearningHub/components/LearningHubPosts/index.tsx

@@ -45,16 +45,25 @@ export default async function LearningHubPosts({
       )
     }
 
-    if (filters[QueryFilters.Sort]) {
-      queryFilters.append(QueryFilters.Sort, filters[QueryFilters.Sort])
-    }
+    const sortFilter = filters[QueryFilters.Sort] ?? SortOptions.Newest
+
+    const sortOption = sortFilter.split('=')
+    const sortKey = `${QueryFilters.Sort}${sortOption[0]}`
+
+    console.log(sortKey, sortOption[1])
+
+    queryFilters.append(sortKey, sortOption[1])
 
     queryFilters.append(`pagination[start]`, '0')
     queryFilters.append(
       `pagination[limit]`,
       String(filters[QueryFilters.Pagination] ?? DEFAULT_PAGINATION_LIMIT),
     )
 
+    console.log('\n\n')
+    console.log(`${config.learningHubApiUrl}/posts?${queryFilters.toString()}`)
+    console.log('\n\n')
+
     const response = await fetch(
       `${config.learningHubApiUrl}/posts?${queryFilters.toString()}`,
       { next: { revalidate: config.learningHubApiCacheInvalidateDur } },
@@ -80,7 +89,7 @@ export default async function LearningHubPosts({
           </div>
         )}
       </AnimatePresence>
-      {posts.length < meta.pagination.total && <LoadMoreButton />}
+      {posts?.length < meta?.pagination.total && <LoadMoreButton />}
     </div>
   )
 }

src/components/LearningHub/constants.ts

@@ -5,8 +5,8 @@ export enum Categories {
 }
 
 export enum SortOptions {
-  Oldest = 'date:asc',
-  Newest = 'date:desc',
+  Oldest = '[date]=asc',
+  Newest = '[date]=desc',
 }
 
 export enum QueryFilters {

src/components/LearningHubPost/index.tsx

@@ -16,24 +16,32 @@ const createMarkup = (htmlString: string) => {
   return { __html: safeHTML }
 }
 
-export default async function LearningHubPostPage({
-  params,
-}: {
-  params: { id: string }
-}) {
-  const postId = params.id.split('-').pop()
-  const response = await fetch(`${config.learningHubApiUrl}/posts/${postId}`, {
-    next: { revalidate: config.learningHubApiCacheInvalidateDur },
-  })
-
-  if (!response.ok) {
-    return <div>Error</div>
-  }
+export type LearningHubPostPageProps = {
+  params: { id: string; locale: string }
+}
+
+export const getPostId = (id: string) => id.split('-').pop()
+
+export const resolvingPost = async (id: string) => {
+  const response = await fetch(
+    `${config.learningHubApiUrl}/posts/${getPostId(id)}`,
+    {
+      next: { revalidate: config.learningHubApiCacheInvalidateDur },
+    },
+  )
 
   const { data: post } = (await response.json()) as {
     data: LearningHubPost
   }
 
+  return post
+}
+
+export default async function LearningHubPostPage({
+  params,
+}: LearningHubPostPageProps) {
+  const post = await resolvingPost(params.id)
+
   return (
     <>
       <LearningHubNavbar />