add schema.org events to head (#3385)

* add schema.org events to head * fix lint * lint fix * [WIP] events from schemaorgs * move schemaOrg to composable * add list of events * move events schema to events/index * remove qiskit schema composable * add eventschema to all event pages * add schema.org events to head * fix lint * lint fix * [WIP] events from schemaorgs * move schemaOrg to composable * add list of events * move events schema to events/index * remove qiskit schema composable * add eventschema to all event pages * fix import * [WIP] * move reusable code to utils/ * add schema.org events to head * fix lint * lint fix * [WIP] events from schemaorgs * move schemaOrg to composable * add list of events * move events schema to events/index * remove qiskit schema composable * add eventschema to all event pages * add schema.org events to head * fix lint * [WIP] events from schemaorgs * move schemaOrg to composable * add list of events * move events schema to events/index * remove qiskit schema composable * fix import * [WIP] * move reusable code to utils/ * fix lint * Apply suggestions from code review Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com> * [WIP] fixing PR requests * fix: add EventSchemaOrg type * chore: DRY sort events * fix: useSchemaOrg fix * resolve PR conversations * chore: remove unused layout --------- Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com>
Qiskit · Aug 1, 2023 · 76b2080 · 76b2080
1 parent 0dca4d2
commit 76b2080
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 3 deletions.
diff --git a/components/EventsFallFest/EventsFallFestUniversityDirectory.vue b/components/EventsFallFest/EventsFallFestUniversityDirectory.vue
@@ -421,6 +421,27 @@ const universities: University[] = [
     },
   },
 ];
+
+const config = useRuntimeConfig();
+
+const sortedEvents = sortEvents(universities);
+
+useSchemaOrg([
+  defineItemList({
+    itemListElement: sortedEvents.map((event) =>
+      createEventSchemaOrg({
+        startDate: new Date(event.startDate),
+        location: event.title,
+        mode: event.detail === "In Person" ? "Offline" : "Online",
+        url: `${config.public.siteUrl}/fall-fest`,
+        name: event.title,
+        image: event.image,
+      })
+    ),
+    itemListOrder: "Ascending",
+    numberOfItems: sortedEvents.length,
+  }),
+]);
 </script>
 
 <style lang="scss" scoped>

diff --git a/constants/summerSchool2022Content.ts b/constants/summerSchool2022Content.ts
@@ -1,4 +1,4 @@
-import { MosaicElement } from "~/types/uiComponents";
+import { DescriptionCard, MosaicElement } from "~/types/uiComponents";
 
 const header = {
   titleLine1: "Qiskit Global Summer School 2022:",

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,3 +1,4 @@
+import { defineNuxtConfig } from "nuxt/config";
 import fetchEvents from "./hooks/update-events";
 import fetchAdvocates from "./hooks/update-advocates";
 import fetchEcosystemMembers from "./hooks/update-ecosystem";
@@ -6,13 +7,14 @@ import { generateMocks } from "./hooks/mock/mock-service";
 const { AIRTABLE_API_KEY, GENERATE_CONTENT, NODE_ENV, SITE_URL, MOCK_CONTENT } =
   process.env;
 const IS_PRODUCTION = NODE_ENV === "production";
+const siteUrl = SITE_URL || "https://qiskit.org";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: ["@nuxt/content", "@nuxt/image-edge", "nuxt-schema-org"],
 
   schemaOrg: {
-    host: "https://qiskit.org",
+    host: siteUrl,
   },
 
   runtimeConfig: {
@@ -26,7 +28,7 @@ export default defineNuxtConfig({
       IBM_ANALYTICS_SEGMENT_PRODUCT_TITLE: "",
       IBM_ANALYTICS_SEGMENT_SCRIPT_SRC: "",
       IBM_ANALYTICS_SEGMENT_UT30: "",
-      siteUrl: SITE_URL || "https://qiskit.org",
+      siteUrl,
     },
   },
 

diff --git a/pages/events/index.vue b/pages/events/index.vue
@@ -279,6 +279,29 @@ const selectTab = (selectedTab: string) => {
 
   tabsIsDirty.value = true;
 };
+
+const sortedEvents = sortEvents(upcomingEvents);
+
+useSchemaOrg([
+  defineItemList({
+    itemListElement: sortedEvents.map((event) =>
+      createEventSchemaOrg({
+        startDate: new Date(event.startDate),
+        mode: ["YouTube", "Virtual"].includes(event.location)
+          ? "Online"
+          : "Offline",
+        location: event.location,
+        url: event.to,
+        name: event.title,
+        image: event.image,
+        performer: event.speaker,
+        endDate: event.endDate ? new Date(event.endDate) : undefined,
+      })
+    ),
+    itemListOrder: "Ascending",
+    numberOfItems: sortedEvents.length,
+  }),
+]);
 </script>
 
 <style lang="scss" scoped>

diff --git a/pages/events/seminar-series.vue b/pages/events/seminar-series.vue
@@ -322,6 +322,27 @@ function dataPerRow(
     },
   ]);
 }
+
+const sortedEvents = sortEvents(upcomingSeminarSerieEvents);
+
+useSchemaOrg([
+  defineItemList({
+    itemListElement: sortedEvents.map((event) =>
+      createEventSchemaOrg({
+        startDate: new Date(event.startDate),
+        mode: "Online",
+        location: event.location,
+        url: event.to,
+        name: event.title,
+        image: event.image,
+        performer: event.speaker,
+        endDate: event.endDate ? new Date(event.endDate) : undefined,
+      })
+    ),
+    itemListOrder: "Ascending",
+    numberOfItems: sortedEvents.length,
+  }),
+]);
 </script>
 
 <style lang="scss" scoped>

diff --git a/pages/events/summer-school-2022.vue b/pages/events/summer-school-2022.vue
@@ -140,6 +140,18 @@ const headerData = header;
 const mosaicData = mosaic;
 const agendaData = agenda;
 const helpfulResourcesData = helpfulResources;
+
+useSchemaOrg([
+  createEventSchemaOrg({
+    startDate: new Date("2022-07-18"),
+    mode: "Online",
+    location: "",
+    url: `${config.public.siteUrl}/events/summer-school-2022/`,
+    name: headerData.card.title,
+    image: `${config.public.siteUrl}${headerData.card.image}`,
+    endDate: new Date("2022-07-29"),
+  }),
+]);
 </script>
 
 <style lang="scss" scoped>

diff --git a/pages/events/summer-school-2023.vue b/pages/events/summer-school-2023.vue
@@ -149,6 +149,18 @@ const headerCta = headerData.cta;
 const mosaicData = mosaic;
 const agendaData = agenda;
 const helpfulResourcesData = helpfulResources;
+
+useSchemaOrg([
+  createEventSchemaOrg({
+    startDate: new Date("2023-07-17"),
+    mode: "Online",
+    location: "",
+    url: `${config.public.siteUrl}/events/summer-school-2023/`,
+    name: headerData.card.title,
+    image: `${config.public.siteUrl}${headerData.card.image}`,
+    endDate: new Date("2023-07-28"),
+  }),
+]);
 </script>
 
 <style lang="scss" scoped>

diff --git a/utils/event-schema-org.ts b/utils/event-schema-org.ts
@@ -0,0 +1,85 @@
+type EventAttendanceModeTypes =
+  | "OfflineEventAttendanceMode"
+  | "OnlineEventAttendanceMode"
+  | "MixedEventAttendanceMode";
+
+interface VirtualLocation {
+  "@type"?: "VirtualLocation";
+  url: string;
+}
+interface Place {
+  name: string;
+  address: string;
+  url: string;
+}
+
+interface EventSchemaOrg {
+  name: string;
+  eventAttendanceMode: EventAttendanceModeTypes;
+  image: string;
+  location: VirtualLocation | Place;
+  startDate: string;
+  organizer: {
+    name: string;
+    url: string;
+  };
+  performer?: {
+    name: string;
+  };
+  endDate?: string;
+}
+
+interface Event {
+  startDate: Date;
+  mode: "Online" | "Offline";
+  location: string;
+  url: string;
+  name: string;
+  image: string;
+  performer?: string;
+  endDate?: Date;
+}
+
+export function createEventSchemaOrg(event: Event) {
+  let location;
+  if (event.mode === "Online") {
+    location = {
+      url: event.url,
+    };
+  } else {
+    location = {
+      name: event.location,
+      address: event.location,
+      url: event.url,
+    };
+  }
+
+  const eventAttendanceMode =
+    event.mode === "Online"
+      ? "OnlineEventAttendanceMode"
+      : "OfflineEventAttendanceMode";
+
+  const schemaEvent: EventSchemaOrg = {
+    name: event.name,
+    eventAttendanceMode,
+    image: event.image,
+    location,
+    startDate: new Date(event.startDate).toISOString(),
+    organizer: {
+      name: "IBM Quantum",
+      url: "https://ibm.com/quantum",
+    },
+  };
+
+  if (event.performer) {
+    schemaEvent.performer = {
+      name: event.performer,
+    };
+  }
+
+  if (event.endDate) {
+    schemaEvent.endDate = event.endDate.toISOString();
+  }
+
+  return defineEvent(schemaEvent);
+}
diff --git a/utils/sort-events.ts b/utils/sort-events.ts
@@ -0,0 +1,10 @@
+export function sortEvents<T extends { startDate: string }>(events: T[]): T[] {
+  return events
+    .filter((event) => event.startDate)
+    .sort((a, b) => {
+      const dateA = new Date(a.startDate);
+      const dateB = new Date(b.startDate);
+
+      return dateA > dateB ? 1 : dateA < dateB ? -1 : 0;
+    });
+}
diff --git a/utils/urlHasProtocol.ts → utils/url-has-protocol.ts b/utils/urlHasProtocol.ts → utils/url-has-protocol.ts