From 9eba143e06dda3b81c65dc845e6571859986d5ba Mon Sep 17 00:00:00 2001
From: Moh Ravi Dwi Putra <ravidwiputra@gmail.com>
Date: Fri, 20 Oct 2023 13:16:27 +0700
Subject: [PATCH] Update layout and meta data

---
 src/app/layout.tsx                 |  2 +-
 src/app/manifest.tsx               |  3 ++-
 src/app/portfolio/[slug]/page.tsx  | 29 +++++++++++++++++++++++++++++
 src/components/layouts/section.tsx |  2 +-
 4 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 82b105f..c445fe5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -77,7 +77,7 @@ export const metadata: Metadata = {
 const RootLayout: React.FC<LayoutProps> = ({children}) => {
     return (
         <>
-            <html className={robotoMono.className}>
+            <html className={robotoMono.className} lang="en">
             <head>
                 {/* eslint-disable-next-line @next/next/no-page-custom-font */}
                 <link
diff --git a/src/app/manifest.tsx b/src/app/manifest.tsx
index b584b6c..f4a6237 100644
--- a/src/app/manifest.tsx
+++ b/src/app/manifest.tsx
@@ -40,7 +40,8 @@ export default function Manifest(): MetadataRoute.Manifest {
             {
                 src: iconAssets.icon192,
                 sizes: '192x192',
-                type: 'image/png'
+                type: 'image/png',
+                purpose: 'maskable',
             }
         ],
     }
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
index fde1503..bd0a124 100644
--- a/src/app/portfolio/[slug]/page.tsx
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import {portfolioData} from "@/data/portfolio";
 import Section from "@/components/layouts/section";
 import {notFound} from "next/navigation";
+import {WEBSITE_DESCRIPTION, WEBSITE_KEYWORDS} from "@/data/constant/meta-data";
+import {WEBSITE_NAME} from "@/data/constant/summary";
+import defaultImage from "@/assets/image/avatar.png";
 
 type PageProps = {
     params: { slug: string },
@@ -21,9 +24,35 @@ export async function generateMetadata({params}: PageProps) {
         return {
             title: portfolio.title + ' | Portfolio',
             description: portfolio.title,
+            keywords: WEBSITE_KEYWORDS,
             alternates: {
                 canonical: `portfolio/${params.slug}`
             },
+            openGraph: {
+                type: 'article',
+                authors: WEBSITE_NAME,
+                section: 'portfolio',
+                tags: portfolio.category,
+                siteName: WEBSITE_NAME,
+                title: portfolio.title,
+                description: portfolio.title,
+                url: `portfolio/${params.slug}`,
+                images: portfolio.image.src,
+            },
+            twitter: {
+                card: 'summary_large_image',
+                title: portfolio.title,
+                description: portfolio.title,
+                images: [portfolio.image.src],
+            },
+            robots: {
+                follow: true,
+                index: true,
+                googleBot: {
+                    follow: true,
+                    index: true,
+                }
+            }
         }
     } catch (error) {
         console.error(error);
diff --git a/src/components/layouts/section.tsx b/src/components/layouts/section.tsx
index c54a56e..8b16015 100644
--- a/src/components/layouts/section.tsx
+++ b/src/components/layouts/section.tsx
@@ -80,7 +80,7 @@ const Section: React.FC<ContentBoxProps> = (
                     </div>
                 </div>
                 {withBreadcrumbs && showMouseBtn && (
-                    <a role="button" className="mouse-btn" onClick={handleMouseBtnClick}>
+                    <a role="button" className="mouse-btn" onClick={handleMouseBtnClick} aria-label="Scroll Down">
                         <FontAwesomeIcon className={"ion"} icon={faAngleDoubleDown} size={"xs"}/>
                     </a>
                 )}
