perf: Make /icons page a static page (calcom#23324)

* write _generateMetadataForStaticPage

* refactor /icons/page.tsx

Author: hbjORbj

apps/web/app/_utils.tsx

@@ -80,6 +80,48 @@ export const _generateMetadata = async (
   };
 };
 
+export const _generateMetadataForStaticPage = (
+  title: string,
+  description: string,
+  hideBranding?: boolean,
+  origin?: string,
+  pathname?: string
+) => {
+  const _pathname = pathname ?? "";
+  const canonical = buildCanonical({ path: _pathname, origin: origin ?? CAL_URL });
+  const titleSuffix = `| ${APP_NAME}`;
+  const displayedTitle = title.includes(titleSuffix) || hideBranding ? title : `${title} ${titleSuffix}`;
+  const metadataBase = new URL(IS_CALCOM ? getCalcomUrl() : WEBAPP_URL);
+
+  const metadata = {
+    title: title.length === 0 ? APP_NAME : displayedTitle,
+    description,
+    alternates: { canonical },
+    openGraph: {
+      description: truncateOnWord(description, 158),
+      url: canonical,
+      type: "website",
+      siteName: APP_NAME,
+      title: displayedTitle,
+    },
+    metadataBase,
+  };
+  const image =
+    SEO_IMG_OGIMG +
+    constructGenericImage({
+      title: metadata.title,
+      description: metadata.description,
+    });
+
+  return {
+    ...metadata,
+    openGraph: {
+      ...metadata.openGraph,
+      images: [image],
+    },
+  };
+};
+
 export const generateMeetingMetadata = async (
   meeting: MeetingImageProps,
   getTitle: (t: TFunction<string, undefined>) => string,

apps/web/app/icons/page.tsx

@@ -1,4 +1,5 @@
-import { _generateMetadata, getTranslate } from "app/_utils";
+import { _generateMetadataForStaticPage } from "app/_utils";
+import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 
@@ -8,6 +9,15 @@ import type { IconName } from "@calcom/ui/components/icon";
 import { lucideIconList } from "../../../../packages/ui/components/icon/icon-list.mjs";
 import { IconGrid } from "./IconGrid";
 
+export const dynamic = "force-static";
+export const metadata: Metadata = _generateMetadataForStaticPage(
+  "Icons Showcase",
+  "",
+  undefined,
+  undefined,
+  "/icons"
+);
+
 const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../../fonts/CalSans-SemiBold.woff2",
@@ -16,25 +26,16 @@ const calFont = localFont({
   display: "swap",
   weight: "600",
 });
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    (t) => t("icon_showcase"),
-    () => "",
-    undefined,
-    undefined,
-    "/icons"
-  );
-};
-export default async function IconsPage() {
+
+export default function IconsPage() {
   const icons = Array.from(lucideIconList).sort() as IconName[];
-  const t = await getTranslate();
 
   return (
     <div className={`${interFont.variable} ${calFont.variable}`}>
       <div className="bg-subtle flex h-screen">
         <IconSprites />
         <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
-          <h1 className="text-emphasis font-cal text-2xl font-medium">{t("icons_showcase")}</h1>
+          <h1 className="text-emphasis font-cal text-2xl font-medium">Icons Showcase</h1>
           <IconGrid title="Regular Icons" icons={icons} />
           <IconGrid
             title="Filled Icons"