Merge branch 'main' into dependabot/npm_and_yarn/types/react-dom-18.2.19

project-words.txt

@@ -7,4 +7,6 @@ Skauna
 hookform
 sonner
 Bootcamp
-Udemy
+Udemy
+Csvg
+Cpath

src/app/[slug]/page.tsx

@@ -1,21 +1,41 @@
 import ProjectPageChips from '@/components/project-page-chips'
 import Card from '@/components/ui/card'
-import Chips from '@/components/ui/chips/chips'
-import ChipsItem from '@/components/ui/chips/chips-item'
 import Content from '@/components/ui/content'
 import Heading from '@/components/ui/heading'
 import IconsList from '@/components/ui/icons-list/icons-list'
 import IconsListItem from '@/components/ui/icons-list/icons-list-item'
 import ImagePlaceholder from '@/components/ui/image-placeholder'
+import { LINK } from '@/types/enums/Link'
+import { SITE_URL } from '@/utils'
 import { getProject, getSlugs } from '@/utils/projects'
 import Image from 'next/image'
+import Link from 'next/link'
+import { BiArrowBack } from 'react-icons/bi'
 import { FaGithub } from 'react-icons/fa'
 import { TfiWorld } from 'react-icons/tfi'
 
 type ProjectPageProps = {
   params: { slug: string }
 }
 
+export async function generateMetadata({ params: { slug } }: ProjectPageProps) {
+  const { body, title } = await getProject(slug)
+
+  return {
+    description: body,
+    openGraph: {
+      images: {
+        alt: `${title || slug}`,
+        height: 630,
+        type: 'image/png',
+        url: `${SITE_URL}/api/og?title=${title || slug}${body && `&description=${body}`}`,
+        width: 1200,
+      },
+    },
+    title,
+  }
+}
+
 export async function generateStaticParams() {
   const slugs = await getSlugs()
   return slugs.map((slug) => ({ slug }))
@@ -28,7 +48,14 @@ export default async function Project({ params: { slug } }: ProjectPageProps) {
   return (
     <section className="pt-header">
       <Content className="pb-16 pt-12 md:pb-24 md:pt-20" size="tight">
-        <article className="flex flex-col gap-5 md:gap-7">
+        <Link
+          className="group flex items-center gap-2 text-accent transition-colors hover:text-accent-light md:text-lg"
+          href={LINK.projects}
+        >
+          <BiArrowBack className="h-5 w-5 transition-transform group-hover:-translate-x-1" />{' '}
+          Go Back to Projects
+        </Link>
+        <article className="mt-3 flex flex-col gap-5 md:mt-5 md:gap-7">
           <header>
             {website || github ? (
               <div className="flex items-center justify-between">
@@ -55,7 +82,7 @@ export default async function Project({ params: { slug } }: ProjectPageProps) {
             )}
             {body && (
               <p
-                className="mt-7 md:text-lg"
+                className="mt-5 md:mt-7 md:text-lg"
                 dangerouslySetInnerHTML={{ __html: body }}
               />
             )}