add embed for leaderboard

src/app/leaderboard/[id]/[page]/page.tsx

@@ -1,4 +1,6 @@
 import Leaderboard from "@/components/leaderboard/Leaderboard";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import { formatTime } from "@/utils/timeUtils";
 import { Metadata } from "next";
 
 type Props = {
@@ -8,8 +10,29 @@ type Props = {
 export async function generateMetadata({
   params: { id },
 }: Props): Promise<Metadata> {
+  const leaderboard = await ScoreSaberAPI.fetchLeaderboardInfo(id);
+  if (!leaderboard) {
+    return {
+      title: "Leaderboard not found",
+    };
+  }
+
   return {
-    title: `Leaderboard - name`,
+    title: `${leaderboard.songName}`,
+    description: `View the leaderboard for ${leaderboard.songName}.`,
+    openGraph: {
+      siteName: "ScoreSaber",
+      title: `${leaderboard.songName}`,
+      description: `View the leaderboard for ${leaderboard.songName}.
+      Song: ${leaderboard.songName} (${leaderboard.songSubName})
+      Mapper: ${leaderboard.levelAuthorName}
+      Total plays: ${leaderboard.plays}
+      Created: ${formatTime(new Date(leaderboard.createdDate))}
+      `,
+    },
+    twitter: {
+      card: "summary",
+    },
   };
 }
 

src/utils/timeUtils.ts

@@ -59,3 +59,18 @@ export function formatMsToTime(ms: number) {
 
   return hoursStr + minutesStr + secondsStr;
 }
+
+/**
+ * Formats a date to a human readable format
+ * eg: January 1, 2021
+ *
+ * @param date the date to format
+ * @returns the formatted date
+ */
+export function formatTime(date: Date) {
+  return date.toLocaleTimeString("en-US", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}