mirror of https://github.com/Qiskit/qiskit.org.git
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>
This commit is contained in:
parent
274ad7b39e
commit
7464d94c54
|
@ -1,7 +1,9 @@
|
||||||
import { DescriptionCard } from "~/types/uiComponents";
|
import { DescriptionCard } from "~/types/uiComponents";
|
||||||
|
|
||||||
const header = {
|
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: {
|
cta: {
|
||||||
label: "Read the blog",
|
label: "Read the blog",
|
||||||
url: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
|
url: "https://medium.com/qiskit/introducing-the-qiskit-fall-fest-feb8456b557",
|
||||||
|
@ -12,7 +14,7 @@ const header = {
|
||||||
},
|
},
|
||||||
cardSectionHeading: "About the event:",
|
cardSectionHeading: "About the event:",
|
||||||
card: {
|
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",
|
title: "Qiskit Fall Fest 2022",
|
||||||
description:
|
description:
|
||||||
"The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",
|
"The Qiskit Fall Fest is a collection of quantum computing events each held by a university!",
|
||||||
|
|
|
@ -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 };
|
|
@ -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>
|
|
@ -8,16 +8,7 @@
|
||||||
{{ headerData.titleLine1 }}
|
{{ headerData.titleLine1 }}
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
<template #description>
|
||||||
<p>
|
<p>{{ headerData.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>
|
|
||||||
</template>
|
</template>
|
||||||
<template #card>
|
<template #card>
|
||||||
<EventsCard
|
<EventsCard
|
||||||
|
@ -26,6 +17,7 @@
|
||||||
:location="headerData.card.location"
|
:location="headerData.card.location"
|
||||||
:segment="headerData.card.segment"
|
:segment="headerData.card.segment"
|
||||||
:time="headerData.card.time"
|
:time="headerData.card.time"
|
||||||
|
:alt-text="headerData.card.altText"
|
||||||
:title="headerData.card.title"
|
:title="headerData.card.title"
|
||||||
:to="headerData.card.to"
|
:to="headerData.card.to"
|
||||||
vertical-layout
|
vertical-layout
|
||||||
|
@ -37,87 +29,31 @@
|
||||||
|
|
||||||
<div class="cds--grid fall-fest-page__content">
|
<div class="cds--grid fall-fest-page__content">
|
||||||
<section class="fall-fest-page__section">
|
<section class="fall-fest-page__section">
|
||||||
<EventsFallFestUniversityDirectory />
|
<UiHelpfulResources
|
||||||
|
class="fall-fest-page__section"
|
||||||
|
:title="helpfulResourcesData.title"
|
||||||
|
:resources="helpfulResourcesData.resources"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</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>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import { header, helpfulResources } from "~/constants/fallFest2023Content";
|
||||||
header,
|
|
||||||
agenda,
|
|
||||||
helpfulResources,
|
|
||||||
} from "~/constants/fallFest2022Content";
|
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
pageTitle: "Qiskit Fall Fest 2022",
|
pageTitle: header.titleLine1,
|
||||||
routeName: "fall-fest",
|
routeName: "fall-fest",
|
||||||
});
|
});
|
||||||
|
|
||||||
const config = useRuntimeConfig();
|
const config = useRuntimeConfig();
|
||||||
|
|
||||||
const title = "Qiskit Fall Fest 2022";
|
const title = header.titleLine1;
|
||||||
const description =
|
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.";
|
"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 image = `${config.public.siteUrl}/images/events/fall-fest/fall-fest-logo-2023.png`;
|
||||||
const pageUrl = `${config.public.siteUrl}/events/summer-school-2023`;
|
const pageUrl = `${config.public.siteUrl}/events/fall-fest`;
|
||||||
|
|
||||||
useSeoMeta({
|
useSeoMeta({
|
||||||
title,
|
title,
|
||||||
|
@ -132,15 +68,6 @@ useSeoMeta({
|
||||||
twitterDescription: description,
|
twitterDescription: description,
|
||||||
});
|
});
|
||||||
|
|
||||||
const agendaData = agenda;
|
|
||||||
const agendaColumnsDataTable: string[] = [
|
|
||||||
"University",
|
|
||||||
"Start Date",
|
|
||||||
"End Date",
|
|
||||||
"Detail",
|
|
||||||
"Type of Event",
|
|
||||||
"Link",
|
|
||||||
];
|
|
||||||
const headerData = header;
|
const headerData = header;
|
||||||
const helpfulResourcesData = helpfulResources;
|
const helpfulResourcesData = helpfulResources;
|
||||||
</script>
|
</script>
|
||||||
|
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
Binary file not shown.
After Width: | Height: | Size: 507 KiB |
Loading…
Reference in New Issue