Blog Metadata, Vercel Analytics, Logo ARIA Label

app/blog/[...slug]/page.tsx

@@ -6,6 +6,7 @@ import { FaCalendar, FaChevronLeft } from "react-icons/fa";
 import Link from "next/link";
 import Image from "next/image";
 import { Mdx } from "@/components/mdx/mdx-components";
+import { absoluteUrl } from "@/lib/utils";
 
 interface PostPageProps {
   params: {
@@ -45,6 +46,30 @@ export async function generateMetadata({
   return {
     title: post.title,
     description: post.description,
+    authors: [
+      {
+        name: "Kawtar Choubari",
+        url: "https://choubari.com",
+      },
+    ],
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      url: absoluteUrl(post.slug),
+      images: [
+        {
+          url: post.image,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+      images: [post.image],
+    },
   };
 }
 

app/blog/page.tsx

@@ -4,6 +4,10 @@ import { compareDesc, format, parseISO } from "date-fns";
 import { allPosts, Post } from "contentlayer/generated";
 import { FaCalendar } from "react-icons/fa";
 
+export const metadata = {
+  title: "Blog",
+};
+
 function PostCard(post: Post) {
   return (
     <article

app/layout.tsx

@@ -3,6 +3,7 @@ import "./globals.css";
 import { Providers } from "@/lib/provider";
 import Footer from "@/components/footer";
 import { siteConfig } from "@/config/site";
+import Analytics from "@/components/analytics";
 
 export const metadata = {
   title: siteConfig.name,
@@ -68,6 +69,7 @@ export default function RootLayout({
           <Nav />
           <main className="mx-auto lg:max-w-7xl" role="main">
             {children}
+            <Analytics />
           </main>
         </Providers>
         <Footer />

components/analytics.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import React from "react";
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
+
+export default function Analytics() {
+  return <VercelAnalytics />;
+}

components/footer.tsx

@@ -18,7 +18,7 @@ export default function Footer() {
     >
       <div className="mx-auto px-8 pt-5 lg:px-8 lg:max-w-7xl grid grid-cols-1 md:grid-cols-12 gap-8">
         <div className="md:col-span-4 md:space-y-4">
-          <Link href="/" aria-label="Navigate to the Home Page">
+          <Link href="/" aria-label="Choubari's Home Page">
             <Logo />
           </Link>
           <p className="pb-3">

components/nav.tsx

@@ -19,7 +19,7 @@ export function Nav() {
     >
       <div className="justify-between px-8 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
         <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <Link href="/" aria-label="Navigate to the Home Page">
+          <Link href="/" aria-label="Choubari's Home Page">
             <Logo />
           </Link>
           <div className="md:hidden">

content/blog/welcome-to-my-blog.mdx

@@ -2,7 +2,7 @@
 title: Hello, World! Welcome to my blog!
 description: I've been proscrasting a lot making this together, let's start the journey!
 image: /blog/placeholder.jpg
-published: false
+published: true
 date: 2023-09-05
 ---
 

lib/utils.ts

@@ -70,3 +70,7 @@ export function countFormatter(n: number): string {
   const countFormat = Intl.NumberFormat("en", { notation: "compact" });
   return countFormat.format(n);
 }
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
+}

package.json

@@ -15,6 +15,7 @@
     "@types/node": "20.2.3",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
+    "@vercel/analytics": "^1.0.2",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
     "contentlayer": "^0.3.4",