Opengraph: add description and custom title (#124)

* Opengraph: add description and custom title * Opengraph: handle null description * opengraph: title concat original title * Updated og tags, and normal site title (to be not too verbose) --------- Co-authored-by: Bhav Beri <[email protected]>
Clubs-Council-IIITH · Dec 11, 2024 · 3948acc · 3948acc
1 parent 157bdec
commit 3948acc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/src/app/events/[id]/page.jsx b/src/app/events/[id]/page.jsx
@@ -1,9 +1,11 @@
 import { getClient } from "gql/client";
 import { GET_EVENT } from "gql/queries/events";
 import { notFound } from "next/navigation";
+import dayjs from "dayjs";
 
+import { shortDescription } from "app/layout";
 import { getFile, PUBLIC_URL } from "utils/files";
-import EventDetails from "components/events/EventDetails";
+import EventDetails, { getEventLocation } from "components/events/EventDetails";
 
 export async function generateMetadata({ params }) {
   const { id } = params;
@@ -15,17 +17,25 @@ export async function generateMetadata({ params }) {
     const img = event.poster
       ? getFile(event.poster, true)
       : `${PUBLIC_URL}/og-image.png`;
+    const alt = event.poster ? event.name + " Poster" : "Common Poster";
+
+    const time = dayjs(event.datetimeperiod[0]).format("dddd h A");
 
     return {
-      title: event.name,
+      title: `${event.name} | Life @ IIITH`,
+      description: event.description ? event.description : shortDescription,
       openGraph: {
+        title: `${event.name} (Time: ${time}, Location: ${getEventLocation(
+          event
+        )}) | Life @ IIITH`,
+        siteName: "Life @ IIITH",
         images: [
           {
             url: img,
             secure_url: img,
             width: 256,
             height: 256,
-            alt: event.name,
+            alt: alt,
           },
         ],
       },

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -15,7 +15,7 @@ import { PUBLIC_URL } from "utils/files";
 
 const description =
   "Discover the vibrant campus life at IIIT Hyderabad. Explore diverse student-led clubs and bodies, and events that foster an inclusive community and enrich student experiences beyond the classroom. Stay updated on activities, events, and opportunities to engage and grow at IIIT-H.";
-const shortDescription =
+export const shortDescription =
   "Explore with the Life @ IIIT Hyderabad for diverse student-led clubs and bodies & events that enrich campus life and foster community.";
 
 export const metadata = {
@@ -44,6 +44,7 @@ export const metadata = {
     locale: "en_IN",
     title: "Life @ IIIT Hyderabad",
     description: shortDescription,
+    siteName: "Life @ IIITH",
     images: [
       {
         url: `${PUBLIC_URL}/og-image.png`,

diff --git a/src/components/events/EventDetails.jsx b/src/components/events/EventDetails.jsx
@@ -13,6 +13,16 @@ import Icon from "components/Icon";
 
 const DateTime = dynamic(() => import("components/DateTime"), { ssr: false });
 
+export const getEventLocation = (event) => {
+  if (["offline", "hybrid"].includes(event.mode)) {
+    return event.location.length > 0
+      ? event.location.map((l) => locationLabel(l).name).join(", ")
+      : event.mode.charAt(0).toUpperCase() + event.mode.slice(1);
+  } else {
+    return "Online";
+  }
+};
+
 export default function EventDetails({ event, showCode = false }) {
   return (
     <Grid container spacing={2}>
@@ -87,11 +97,7 @@ export default function EventDetails({ event, showCode = false }) {
           <Box display="flex" mt={4} alignItems="center">
             <Icon variant="location-on-outline-rounded" sx={{ mr: 2 }} />
             <Typography variant="body1">
-              {["offline", "hybrid"].includes(event.mode)
-                ? event.location.length > 0
-                  ? event.location.map((l) => locationLabel(l).name).join(", ")
-                  : event.mode.charAt(0).toUpperCase() + event.mode.slice(1)
-                : "Online"}
+              {getEventLocation(event)}
             </Typography>
           </Box>