feat(events): Fall fest 2023 (#3530)

* feat(fall-fest): archive 2022 page (#3524) * [Fall-fest]: prepare fall fest page 2023 (#3525) * feat(fall-fest): add fall fest 2023 page and content file * feat(fall-fest): add fall fest 2023 directory file, event img, and intro copy * feat(fall-fest): remove directory and agenda for 2023 * Update pages/events/fall-fest.vue Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> * Update pages/events/fall-fest.vue Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> * Update pages/events/fall-fest.vue Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> * feat(fall-fest): add description to content file * feat(fall-fest): fix lint error * feat(fall-fest): fix errors --------- Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> * Update constants/fallFest2023Content.ts Co-authored-by: Yaiza <yaiza.garcia.mm@gmail.com> * feat(fall-fest): update blog segment info * feat(fall-fest): update event img * feat(fall-fest): add event img alt description --------- Co-authored-by: Randy <randytolentino@ibm.com>
2023-09-05 18:11:49 +02:00 · 2023-09-05 18:11:49 +02:00 · 7464d94c54
parent 274ad7b39e
commit 7464d94c54
6 changed files with 277 additions and 87 deletions
--- a/constants/fallFest2022Content.ts
+++ b/constants/fallFest2022Content.ts
@ -1,7 +1,9 @@
 import { DescriptionCard } from "~/types/uiComponents";

 const header = {
-  titleLine1: "Qiskit Fall Fest 2022:",
+  titleLine1: "Qiskit Fall Fest 2022",
+  description:
+    "The Qiskit Fall Fest is a collection of quantum computing events on college campuses around the world. Every Fall Fest event is organized and run by the students on each campus, with support from the entire IBM Quantum team. Student leaders work alongside IBM throughout the month of September to design and plan their event, which are then run in October. The events vary from technical hackathons to beginner-friendly challenges, all with the goal of helping to grow the local community’s skill set.",
  cta: {
    label: "Read the blog",
    url: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
@ -12,7 +14,7 @@ const header = {
  },
  cardSectionHeading: "About the event:",
  card: {
-    image: "/images/events/fall-fest/fall-fest-logo.png",
+    image: "/images/events/fall-fest/fall-fest-logo-2022.png",
    title: "Qiskit Fall Fest 2022",
    description:
      "The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",
--- a/constants/fallFest2023Content.ts
+++ b/constants/fallFest2023Content.ts
@ -0,0 +1,97 @@
+import { DescriptionCard } from "~/types/uiComponents";
+
+const header = {
+  titleLine1: "Qiskit Fall Fest 2023",
+  description:
+    "The Qiskit Fall Fest is a collection of quantum computing events on college campuses around the world. Every Fall Fest event is organized and run by the students on each campus, with support from IBM Quantum. Student leaders work alongside IBM to design and plan their event, which are run in October and November. Each event is standalone - only made for the students on that particular campus. The events vary from technical hackathons to beginner-friendly challenges, all with the goal of helping to grow the local community’s skill set.",
+  cta: {
+    label: "2022 Fall Fest events",
+    url: "/events/fall-fest-2022",
+    segment: {
+      cta: "qiskit-fall-fest-blog",
+      location: "header",
+    },
+  },
+  cardSectionHeading: "About the event:",
+  card: {
+    image: "/images/events/fall-fest/fall-fest-logo-2023.png",
+    altText:
+      "The Qiskit logo centered with a playful background of colorful, gradient shapes",
+    title: "Qiskit Fall Fest 2023",
+    description:
+      "The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",
+    location: "",
+    time: "",
+    to: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
+    ctaLabel: "Learn about the Fall Fest",
+    segment: {
+      cta: "qiskit-fall-fest-blog",
+      location: "card-header",
+    },
+  },
+};
+
+interface HelpfulResourcesSection {
+  title: string;
+  resources: DescriptionCard[];
+}
+
+const helpfulResources: HelpfulResourcesSection = {
+  title: "Resources",
+  resources: [
+    {
+      title: "Let us know if you have any questions!",
+      description:
+        "If your questions aren't answered by the FAQ above or our blog post, please use this form to submit your enquiries direct to the team.",
+      cta: {
+        url: "mailto:qiskit.events@us.ibm.com",
+        label: "Enquire now",
+        segment: {
+          cta: "qiskt-fall-fest-email",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Learn about and install Qiskit",
+      description:
+        "Prepare for the Fall Fest by reviewing the documentation and installing Qiskit.",
+      cta: {
+        url: "https://qiskit.org/documentation/getting_started.html#installation",
+        label: "Install here",
+        segment: {
+          cta: "qiskit-install",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Qiskit Medium",
+      description:
+        "This blog provides a nice overview of Qiskit and its direction as we explore what applications can be done on today's quantum devices.",
+      cta: {
+        url: "https://medium.com/@qiskit",
+        label: "Read the blog",
+        segment: {
+          cta: "qiskit-medium",
+          location: "helpful-resources",
+        },
+      },
+    },
+    {
+      title: "Code of conduct",
+      description:
+        "Qiskit is dedicated to providing an enjoyable and safe experience for all participants. We have a code of conduct that all events adhere to.",
+      cta: {
+        url: "https://github.com/Qiskit/qiskit/blob/master/CODE_OF_CONDUCT.md",
+        label: "See code of conduct",
+        segment: {
+          cta: "code-of-conduct",
+          location: "helpful-resources",
+        },
+      },
+    },
+  ],
+};
+
+export { header, helpfulResources };
--- a/pages/events/fall-fest-2022.vue
+++ b/pages/events/fall-fest-2022.vue
@ -0,0 +1,164 @@
+<template>
+  <article class="fall-fest-page">
+    <LayoutLeadSpaceWithCard
+      :cta="headerData.cta"
+      :card-title="headerData.cardSectionHeading"
+    >
+      <template #title>
+        {{ headerData.titleLine1 }}
+      </template>
+      <template #description>
+        <p>
+          {{ headerData.description }}
+        </p>
+      </template>
+      <template #card>
+        <EventsCard
+          :cta-label="headerData.card.ctaLabel"
+          :image="headerData.card.image"
+          :location="headerData.card.location"
+          :segment="headerData.card.segment"
+          :time="headerData.card.time"
+          :title="headerData.card.title"
+          :to="headerData.card.to"
+          vertical-layout
+        >
+          {{ headerData.card.description }}
+        </EventsCard>
+      </template>
+    </LayoutLeadSpaceWithCard>
+
+    <div class="cds--grid fall-fest-page__content">
+      <section class="fall-fest-page__section">
+        <EventsFallFestUniversityDirectory />
+      </section>
+    </div>
+
+    <div class="cds--grid fall-fest-page__content">
+      <section class="fall-fest-page__section">
+        <h2 v-text="agendaData.title" />
+        <p v-text="agendaData.subtitle" />
+        <bx-tabs value="Wave 1">
+          <bx-tab
+            v-for="week in agendaData.weeks"
+            :key="week.tabName"
+            :target="week.tabName"
+            :value="week.tabName"
+          >
+            {{ week.tabName }}
+          </bx-tab>
+        </bx-tabs>
+        <div
+          v-for="week in agendaData.weeks"
+          :id="week.tabName"
+          :key="week.tabName"
+          :aria-labelledby="week.tabName"
+          role="tabpanel"
+          hidden
+        >
+          <UiDataTable
+            class="fall-fest-page__section"
+            :columns="agendaColumnsDataTable"
+          >
+            <bx-table-row
+              v-for="(row, rowIndex) in week.tableData"
+              :key="`${rowIndex}`"
+            >
+              <bx-table-cell
+                v-for="({ styles, data, link }, elementIndex) in row"
+                :key="`${elementIndex}`"
+              >
+                <UiLinkText
+                  v-if="link"
+                  class="fall-fest-page__table-link"
+                  :style="styles"
+                  :url="link"
+                >
+                  Link to event
+                </UiLinkText>
+                <span v-else :style="styles">{{ data }}</span>
+              </bx-table-cell>
+            </bx-table-row>
+          </UiDataTable>
+        </div>
+      </section>
+
+      <UiHelpfulResources
+        class="fall-fest-page__section"
+        :title="helpfulResourcesData.title"
+        :resources="helpfulResourcesData.resources"
+      />
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import {
+  header,
+  agenda,
+  helpfulResources,
+} from "~/constants/fallFest2022Content";
+
+definePageMeta({
+  pageTitle: header.titleLine1,
+  routeName: "fall-fest",
+});
+
+const config = useRuntimeConfig();
+
+const title = header.titleLine1;
+const description =
+  "The Qiskit Fall Fest is a collection of quantum computing events from universities around the world, organized by students and supported by the IBM Quantum community.";
+const image = `${config.public.siteUrl}/images/events/fall-fest/fall-fest-logo-2022.png`;
+const pageUrl = `${config.public.siteUrl}/events/summer-school-2023`;
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  ogImage: image,
+  ogImageAlt: title,
+  ogUrl: pageUrl,
+  ogType: "website",
+  twitterCard: "summary_large_image",
+  twitterDescription: description,
+});
+
+const agendaData = agenda;
+const agendaColumnsDataTable: string[] = [
+  "University",
+  "Start Date",
+  "End Date",
+  "Detail",
+  "Type of Event",
+  "Link",
+];
+const headerData = header;
+const helpfulResourcesData = helpfulResources;
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+@use "~/assets/scss/helpers/index.scss" as qiskit;
+
+.fall-fest-page {
+  display: flex;
+  flex-direction: column;
+
+  &__section {
+    margin-top: carbon.$spacing-10;
+    margin-bottom: carbon.$spacing-07;
+
+    @include carbon.breakpoint-down(lg) {
+      margin-bottom: carbon.$spacing-05;
+    }
+  }
+
+  &__content {
+    @include carbon.breakpoint-down(lg) {
+      max-width: 100%;
+    }
+  }
+}
+</style>
--- a/pages/events/fall-fest.vue
+++ b/pages/events/fall-fest.vue
@ -8,16 +8,7 @@
        {{ headerData.titleLine1 }}
      </template>
      <template #description>
-        <p>
-          The Qiskit Fall Fest is a collection of quantum computing events on
-          college campuses around the world. Every Fall Fest event is organized
-          and run by the students on each campus, with support from the entire
-          IBM Quantum team. Student leaders work alongside IBM throughout the
-          month of September to design and plan their event, which are then run
-          in October. The events vary from technical hackathons to
-          beginner-friendly challenges, all with the goal of helping to grow the
-          local community’s skill set.
-        </p>
+        <p>{{ headerData.description }}</p>
      </template>
      <template #card>
        <EventsCard
@ -26,6 +17,7 @@
          :location="headerData.card.location"
          :segment="headerData.card.segment"
          :time="headerData.card.time"
+          :alt-text="headerData.card.altText"
          :title="headerData.card.title"
          :to="headerData.card.to"
          vertical-layout
@ -37,87 +29,31 @@

    <div class="cds--grid fall-fest-page__content">
      <section class="fall-fest-page__section">
-        <EventsFallFestUniversityDirectory />
+        <UiHelpfulResources
+          class="fall-fest-page__section"
+          :title="helpfulResourcesData.title"
+          :resources="helpfulResourcesData.resources"
+        />
      </section>
    </div>
-
-    <div class="cds--grid fall-fest-page__content">
-      <section class="fall-fest-page__section">
-        <h2 v-text="agendaData.title" />
-        <p v-text="agendaData.subtitle" />
-        <bx-tabs value="Wave 1">
-          <bx-tab
-            v-for="week in agendaData.weeks"
-            :key="week.tabName"
-            :target="week.tabName"
-            :value="week.tabName"
-          >
-            {{ week.tabName }}
-          </bx-tab>
-        </bx-tabs>
-        <div
-          v-for="week in agendaData.weeks"
-          :id="week.tabName"
-          :key="week.tabName"
-          :aria-labelledby="week.tabName"
-          role="tabpanel"
-          hidden
-        >
-          <UiDataTable
-            class="fall-fest-page__section"
-            :columns="agendaColumnsDataTable"
-          >
-            <bx-table-row
-              v-for="(row, rowIndex) in week.tableData"
-              :key="`${rowIndex}`"
-            >
-              <bx-table-cell
-                v-for="({ styles, data, link }, elementIndex) in row"
-                :key="`${elementIndex}`"
-              >
-                <UiLinkText
-                  v-if="link"
-                  class="fall-fest-page__table-link"
-                  :style="styles"
-                  :url="link"
-                >
-                  Link to event
-                </UiLinkText>
-                <span v-else :style="styles">{{ data }}</span>
-              </bx-table-cell>
-            </bx-table-row>
-          </UiDataTable>
-        </div>
-      </section>
-
-      <UiHelpfulResources
-        class="fall-fest-page__section"
-        :title="helpfulResourcesData.title"
-        :resources="helpfulResourcesData.resources"
-      />
-    </div>
  </article>
 </template>

 <script setup lang="ts">
-import {
-  header,
-  agenda,
-  helpfulResources,
-} from "~/constants/fallFest2022Content";
+import { header, helpfulResources } from "~/constants/fallFest2023Content";

 definePageMeta({
-  pageTitle: "Qiskit Fall Fest 2022",
+  pageTitle: header.titleLine1,
  routeName: "fall-fest",
 });

 const config = useRuntimeConfig();

-const title = "Qiskit Fall Fest 2022";
+const title = header.titleLine1;
 const description =
  "The Qiskit Fall Fest is a collection of quantum computing events from universities around the world, organized by students and supported by the IBM Quantum community.";
-const image = `${config.public.siteUrl}/images/events/fall-fest/fall-fest.png`;
-const pageUrl = `${config.public.siteUrl}/events/summer-school-2023`;
+const image = `${config.public.siteUrl}/images/events/fall-fest/fall-fest-logo-2023.png`;
+const pageUrl = `${config.public.siteUrl}/events/fall-fest`;

 useSeoMeta({
  title,
@ -132,15 +68,6 @@ useSeoMeta({
  twitterDescription: description,
 });

-const agendaData = agenda;
-const agendaColumnsDataTable: string[] = [
-  "University",
-  "Start Date",
-  "End Date",
-  "Detail",
-  "Type of Event",
-  "Link",
-];
 const headerData = header;
 const helpfulResourcesData = helpfulResources;
 </script>
--- a/public/images/events/fall-fest/fall-fest-logo-2022.png
+++ b/public/images/events/fall-fest/fall-fest-logo-2022.png
--- a/public/images/events/fall-fest/fall-fest-logo-2023.png
+++ b/public/images/events/fall-fest/fall-fest-logo-2023.png