feat: 🚧 experimental JSON+LD support

this allows for rich results

src/app/(regular)/page.js

@@ -13,7 +13,7 @@ import {
   TECHNICAL_PAPERS_SUBPAGE_DEADLINES,
   WORKSHOP_PROPOSAL_DATES,
 } from "@/app/lib/config/importantdates.config";
-import { createMetadata } from "@/app/lib/utils/createMetadata";
+import { createJSON_LD, createMetadata } from "@/app/lib/utils/createMetadata";
 import Alert from "@/app/lib/components/Alert";
 import { mergeDates } from "@/app/lib/utils/mergeDates";
 
@@ -30,6 +30,24 @@ export default function Home() {
 
   return (
     <>
+      {createJSON_LD({
+        type: "Event",
+        name: "ASSETS '24",
+        alternateName:
+          "The 26th International ACM SIGACCESS Conference on Computers and Accessibility",
+        image: "https://assets24.sigaccess.org/ogp/opengraph2.jpg",
+        url: "https://assets24.sigaccess.org/",
+        typeSpecific: {
+          location: {
+            name: "Sheraton Hotel Newfoundland",
+            streetAddress: "115 Cavendish Square",
+            locality: "St. John's",
+            region: "Newfoundland and Labrador",
+            country: "Canada",
+            postalCode: "A1C 3K2",
+          },
+        },
+      })}
       <main id="">
         <Hero />
         <Container id="content">
@@ -55,38 +73,38 @@ export default function Home() {
               heading={"Hotel booking is Live"}
             >
               {/* <div className=""> */}
-                <p className="text-white break-words">
-                  {`The hotel is offering ASSETS attendees a group rate of CAD$199 per night. Please use the `}
-                  <Link
-                    href="https://www.marriott.com/events/start.mi?id=1716409363485&key=GRP"
-                    target="_blank"
-                    colour={"secondary"}
-                    className={"text-white"}
-                  >
-                    {`ASSETS'24 Sheraton Hotel Newfoundland booking link`}
-                  </Link>
-                  {` to make your reservation.`}
-                </p>
-                <p className="text-white mt-4">
-                  {` If you find that the booking link says there is no availability
+              <p className="text-white break-words">
+                {`The hotel is offering ASSETS attendees a group rate of CAD$199 per night. Please use the `}
+                <Link
+                  href="https://www.marriott.com/events/start.mi?id=1716409363485&key=GRP"
+                  target="_blank"
+                  colour={"secondary"}
+                  className={"text-white"}
+                >
+                  {`ASSETS'24 Sheraton Hotel Newfoundland booking link`}
+                </Link>
+                {` to make your reservation.`}
+              </p>
+              <p className="text-white mt-4">
+                {` If you find that the booking link says there is no availability
                 for your desired dates, we recommend emailing `}
-                  <Link
-                    className={'break-words'}
-                    href={"mailto:[email protected]"}
-                  >
-                    [email protected]
-                  </Link>
-                  {` to ask their help with checking availability and assisting with
+                <Link
+                  className={"break-words"}
+                  href={"mailto:[email protected]"}
+                >
+                  [email protected]
+                </Link>
+                {` to ask their help with checking availability and assisting with
                 the booking. Please tell them that you are booking for
                 ASSETS'24.`}
-                </p>
-                <p className="text-white mt-4">
-                  {`For more information, please see the `}
-                  <Link
-                    href={"/attending/overview/"}
-                  >{`Attending Overview`}</Link>
-                  {` page.`}
-                </p>
+              </p>
+              <p className="text-white mt-4">
+                {`For more information, please see the `}
+                <Link
+                  href={"/attending/overview/"}
+                >{`Attending Overview`}</Link>
+                {` page.`}
+              </p>
               {/* </div> */}
             </Alert>
           </div>

src/app/lib/utils/createMetadata.js

@@ -3,7 +3,6 @@
  * @returns {import('next').Metadata} Metadata to be used by `page.js` elements.
  */
 const createMetadata = ({ title }) => {
-
   /** @type {import('next').Metadata} */
   let md = {
     title: `ASSETS '24 | ${title}`,
@@ -46,4 +45,45 @@ const createMetadata = ({ title }) => {
   return md;
 };
 
-export { createMetadata };
+/**
+ * Generate validated schemas for rich search results.
+ * @param {Object} params The configuration parameters
+ * @param {'Event'} params.type The type of JSON+LD type.
+ * @see https://schema.org/
+ */
+const createJSON_LD = ({ type, name, alternateName, image, url, typeSpecific }) => {
+  let JSONLD = {};
+
+  if (type === "Event") {
+    JSONLD = {
+      "@context": "http://schema.org",
+      "@type": "Event",
+      name: name,
+      alternateName: alternateName,
+      startDate: typeSpecific.startDate,
+      location: {
+        "@type": "Place",
+        name: typeSpecific.location.name,
+        address: {
+          "@type": "PostalAddress",
+          streetAddress: typeSpecific.location.streetAddress,
+          addressLocality: typeSpecific.location.locality,
+          addressRegion: typeSpecific.location.region,
+          addressCountry: typeSpecific.location.country,
+          postalCode: typeSpecific.location.postalCode,
+        },
+      },
+      image: image,
+      url: url,
+    };
+  }
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(JSONLD) }}
+    />
+  );
+};
+
+export { createMetadata, createJSON_LD };