scnc
/
qiskit.org
mirror of https://github.com/Qiskit/qiskit.org.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate summer school page to Nuxt3 (#3017) 

* Renames event card and import icons

* Replaces AppCard with UiAppCard

* Replaces class name event-card with item-card

* Shows header

* Shows mosaic

* Shows tabs and agenda

* Shows summer school FAQ section

* Shows resources section

* Clean code

* Fixes segment to track pages

* feat(summer-school): style and html updates

* feat(summer-school): fix broken styles

---------

Co-authored-by: Randy Tolentino <randytolentino@ibm.com>
This commit is contained in:
Yaiza 2023-03-09 20:18:47 +01:00 committed by GitHub
parent 0b060984a1
commit a1e410f533
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 440 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/events/EventCard.vue → components/events/ItemCard.vue
View File

@ -1,6 +1,6 @@
<template>
<AppCard
class="event-card"
<UiAppCard
class="item-card"
:image="image"
:title="title"
:tags="types"
@ -9,31 +9,35 @@
:segment="segment"
:vertical-layout="verticalLayout"
>
<div class="event-card__description">
<div class="item-card__description">
<slot v-if="$slots.default" />
</div>
<div>
<div v-if="location" class="event-card__detail">
<Map20 class="event-card__icon" />
<div v-if="location" class="item-card__detail">
<Map20 class="item-card__icon" />
{{ location }}
</div>
<div v-if="date" class="event-card__detail">
<Calendar20 class="event-card__icon" />
<div v-if="date" class="item-card__detail">
<Calendar20 class="item-card__icon" />
<time>{{ date }}</time>
</div>
<div v-if="time" class="event-card__detail">
<Time20 class="event-card__icon" />
<div v-if="time" class="item-card__detail">
<Time20 class="item-card__icon" />
<time>{{ time }}</time>
</div>
<div v-if="institution" class="event-card__detail">
<Education20 class="event-card__icon" />
<div v-if="institution" class="item-card__detail">
<Education20 class="item-card__icon" />
{{ institution }}
</div>
</div>
</AppCard>
</UiAppCard>
</template>
<script setup lang="ts">
import Map20 from "@carbon/icons-vue/lib/map/20";
import Calendar20 from "@carbon/icons-vue/lib/calendar/20";
import Time20 from "@carbon/icons-vue/lib/time/20";
import Education20 from "@carbon/icons-vue/lib/education/20";
import { CtaClickedEventProp } from "~/types/segment";
interface Props {
@ -62,7 +66,7 @@ withDefaults(defineProps<Props>(), {
<style lang="scss" scoped>
@use "~/assets/scss/carbon.scss";
.event-card {
.item-card {
&__description {
margin-bottom: carbon.$spacing-06;
}

276
components/events/SummerSchoolFaq.vue Normal file
View File

@ -0,0 +1,276 @@
<template>
<section class="summer-school-faq">
<h2>Frequently asked questions</h2>
<bx-accordion>
<bx-accordion-item
title-text="What are the pre-requisites for enrolling in the Summer School?"
>
<p>
Minimal prerequisites are required for the Qiskit Global Summer
School. If you know
<UiAppLink v-bind="khanAcademy">
how to multiply two matrices
</UiAppLink>
, and have some programming experience in Python, you are ready for
the Summer School.
</p>
<p>
You can
<UiAppLink v-bind="pythonAndJupyter">
brush up on Python programming
</UiAppLink>
before attending the lectures by using the Qiskit Textbook. To make
the most out of these lectures, you may also consider looking through
the
<UiAppLink v-bind="linearAlgebra">
linear algebra prerequisites
</UiAppLink>
section of the Qiskit Textbook.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="What are the application requirements for the Summer School?"
>
<p>
There is no application or pre-registration for the Qiskit Global
Summer School 2022. Registration will be on a first come, first served
basis, with scheduled global availability. Once the Summer School
registration reaches capacity, unfortunately we will not be able to
register any additional students.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="What is the time requirement for the Summer School? Is the scheduled
fixed or flexible?"
>
<p>
The summer school is made up of a total of 20 lectures, 3 lab sessions
&amp; application exercises, in addition to the daily Live Q&amp;A
Sessions and final Commencement Celebration. Participation and
completion of all labs and lectures are required in order to receive a
certificate of completion from the Summer School, with the optional
Q&A Sessions and Commencement activities to enhance your Summer School
experience. The schedule is not fixed, aside from final lab submission
deadlines, and all students can participate on the schedule that works
best for them. Students should anticipate a minimum time commitment of
30 hours for the full Summer School, but we recommend planning on 41
hours of participation, with additional time for discussion and
collaboration with other students.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="I was a student at the Qiskit Global Summer School 2020/2021 - should
I enroll in the 2022 Summer School as well?"
>
<p>
The 2022 Summer School will cover briefly introduce quantum computing
before diving into quantum simulations and chemistry, which was not
covered in the 2020 or 2021 Summer School, so you should enroll if you
are interested!
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="Will the lectures and labs be recorded? Or will they only be
accessible live?"
>
<p>
Lectures and labs sessions will all be recorded and available for live
participation and post viewing, as well as the daily Q&A sessions.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="Do I need to download anything in order to participate?"
>
<p>Nope! Everything can be done in-browser.</p>
</bx-accordion-item>
<bx-accordion-item
title-text="What is the cost to enroll in the Summer School?"
>
<p>There is no cost to participate in the summer school!</p>
</bx-accordion-item>
<bx-accordion-item
title-text="Will I need any supplies or equipment in order to participate?"
>
<p>
You will need a computer with a reliable internet connection and
either a mobile device or webcam/microphone on your computer to
communicate with mentors and other students. You will need to be able
to view seminars and connect virtually. Other than that, you just need
to bring yourself
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="Is there an age limit to participate in the Summer School?"
>
<p>
The age limit for Qiskit Global Summer School 2022 is 14. If you are
under the age limit, but still want to be part of the community,
please check out other ways you can get connected, and other events
that may be available in your area!
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="I'm interested in hosting my own summer school or implementing Qiskit
into my coursework - Where can I learn more?"
>
<p>
Explore IBM Quantums Educators Program
<UiAppLink v-bind="qCEducators"> online here </UiAppLink>
, or email
<UiAppLink v-bind="mailtoQCEducators">
quantum.education@us.ibm.com
</UiAppLink>
to connect with the latest coursework and classroom resources for
educators and students alike.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="How do I connect more with the Quantum Community?"
>
<p>
There are several different ways you can connect with the IBM Quantum
Community - depending on your preference. You can
<UiAppLink v-bind="twitterQiskit"> follow Qiskit </UiAppLink>
and
<UiAppLink v-bind="twitterIBMResearch"> IBM Research </UiAppLink>
on Twitter for the latest updates on new events, activities, and
features on what is going on with the community. There is also a
<UiAppLink v-bind="githubQiskit"> community Github </UiAppLink>
that you can explore and contribute to, and you can read regular
<UiAppLink v-bind="mediumQiskit">
blog posts from our team and community members on Medium
</UiAppLink>
. You can also
<UiAppLink v-bind="qiskitSubscribe">
subscribe to the Qiskit YouTube
</UiAppLink>
for the latest video content and our weekly live Seminar Series.
</p>
<p>
If you want to collaborate and connect with other members of the
community, and participate in some of the ongoing conversations about
quantum computing, you will want to
<UiAppLink v-bind="joinqiskitslack">
check out our ever-growing Slack Community
</UiAppLink>
. From there you can connect with current and past interns, IBM
researchers, Qiskit advocates, and fellow community members directly.
</p>
</bx-accordion-item>
<bx-accordion-item
title-text="Are there any upcoming events in my area that I can participate in?"
>
<p>
All of our announced
<UiAppLink v-bind="qiskitEvents">
upcoming events are listed on qiskit.org
</UiAppLink>
, which is continually updated as we roll out more events throughout
the year. You can also
<UiAppLink v-bind="twitterQiskit">
follow Qiskit on Twitter
</UiAppLink>
for the latest announcements on new and upcoming events!
</p>
</bx-accordion-item>
<bx-accordion-item title-text="Still have more questions?">
<p>
For any questions about the summer school, please submit your
questions using the form below. For all other enquiries, feel free to
email us directly at
<UiAppLink v-bind="mailtoQiskit"> qiskit.events@us.ibm.com </UiAppLink
>.
</p>
</bx-accordion-item>
</bx-accordion>
</section>
</template>
<script setup lang="ts">
import "@carbon/web-components/es/components/accordion/index.js";
import { CtaClickedEventProp } from "~/types/segment";
interface TrackedLink {
url: string;
segment: CtaClickedEventProp;
}
const khanAcademy: TrackedLink = {
url: "https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices/x9e81a4f98389efdf:multiplying-matrices-by-matrices/v/matrix-multiplication-intro",
segment: { cta: "khanacademy-matrix-multiplication-intro", location: "faq" },
};
const pythonAndJupyter: TrackedLink = {
url: "https://learn.qiskit.org/course/ch-prerequisites/introduction-to-python-and-jupyter-notebooks",
segment: { cta: "textbook-python-and-jupyter-notebooks", location: "faq" },
};
const linearAlgebra: TrackedLink = {
url: "https://learn.qiskit.org/course/ch-appendix/an-introduction-to-linear-algebra-for-quantum-computing",
segment: { cta: "qiskit-linear-algebra", location: "faq" },
};
const qCEducators: TrackedLink = {
url: "https://quantum-computing.ibm.com/programs/educators",
segment: { cta: "ibm-quantum-educators-program", location: "faq" },
};
const mailtoQCEducators: TrackedLink = {
url: "mailto:quantum.education@us.ibm.com",
segment: { cta: "mailto-quantum-educators-program", location: "faq" },
};
const twitterQiskit: TrackedLink = {
url: "https://twitter.com/qiskit",
segment: { cta: "qiskit-twitter", location: "faq" },
};
const twitterIBMResearch: TrackedLink = {
url: "https://twitter.com/IBMResearch",
segment: { cta: "ibmresearch-twitter", location: "faq" },
};
const githubQiskit: TrackedLink = {
url: "https://github.com/Qiskit",
segment: { cta: "qiskit-github", location: "faq" },
};
const mediumQiskit: TrackedLink = {
url: "https://medium.com/qiskit",
segment: { cta: "qiskit-medium", location: "faq" },
};
const qiskitSubscribe: TrackedLink = {
url: "https://qisk.it/sub",
segment: { cta: "qiskit-youtube-subscribe", location: "faq" },
};
// TODO: Refactor links (https://github.com/Qiskit/qiskit.org/issues/1566)
const joinqiskitslack: TrackedLink = {
url: "https://ibm.co/joinqiskitslack",
segment: { cta: "qiskit-slack-join", location: "faq" },
};
const qiskitEvents: TrackedLink = {
url: "https://qiskit.org/events",
segment: { cta: "qiskit-org-events", location: "faq" },
};
const mailtoQiskit: TrackedLink = {
url: "mailto:qiskit.events@us.ibm.com",
segment: { cta: "mailto-qiskit-events", location: "faq" },
};
</script>

336
components/events/summer-school/FaqSection.vue
View File

@ -1,336 +0,0 @@
<template>
<section class="faq-section">
<h2>Frequently asked questions</h2>
<cv-accordion align="end">
<cv-accordion-item>
<template #title>
What are the pre-requisites for enrolling in the Summer School?
</template>
<template #content>
<p>
Minimal prerequisites are required for the Qiskit Global Summer
School. If you know
<UiAppLink v-bind="khanAcademy">
how to multiply two matrices
</UiAppLink>
, and have some programming experience in Python, you are ready for
the Summer School.
</p>
<p>
You can
<UiAppLink v-bind="pythonAndJupyter">
brush up on Python programming
</UiAppLink>
before attending the lectures by using the Qiskit Textbook. To make
the most out of these lectures, you may also consider looking
through the
<UiAppLink v-bind="linearAlgebra">
linear algebra prerequisites
</UiAppLink>
section of the Qiskit Textbook.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
What are the application requirements for the Summer School?
</template>
<template #content>
<p>
There is no application or pre-registration for the Qiskit Global
Summer School 2022. Registration will be on a first come, first
served basis, with scheduled global availability. Once the Summer
School registration reaches capacity, unfortunately we will not be
able to register any additional students.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
What is the time requirement for the Summer School? Is the scheduled
fixed or flexible?
</template>
<template #content>
<p>
The summer school is made up of a total of 20 lectures, 3 lab
sessions &amp; application exercises, in addition to the daily Live
Q&amp;A Sessions and final Commencement Celebration. Participation
and completion of all labs and lectures are required in order to
receive a certificate of completion from the Summer School, with the
optional Q&A Sessions and Commencement activities to enhance your
Summer School experience. The schedule is not fixed, aside from
final lab submission deadlines, and all students can participate on
the schedule that works best for them. Students should anticipate a
minimum time commitment of 30 hours for the full Summer School, but
we recommend planning on 41 hours of participation, with additional
time for discussion and collaboration with other students.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
I was a student at the Qiskit Global Summer School 2020/2021 - should
I enroll in the 2022 Summer School as well?
</template>
<template #content>
<p>
The 2022 Summer School will cover briefly introduce quantum
computing before diving into quantum simulations and chemistry,
which was not covered in the 2020 or 2021 Summer School, so you
should enroll if you are interested!
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
Will the lectures and labs be recorded? Or will they only be
accessible live?
</template>
<template #content>
<p>
Lectures and labs sessions will all be recorded and available for
live participation and post viewing, as well as the daily Q&A
sessions.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
Do I need to download anything in order to participate?
</template>
<template #content>
<p>Nope! Everything can be done in-browser.</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
What is the cost to enroll in the Summer School?
</template>
<template #content>
<p>There is no cost to participate in the summer school!</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
Will I need any supplies or equipment in order to participate?
</template>
<template #content>
<p>
You will need a computer with a reliable internet connection and
either a mobile device or webcam/microphone on your computer to
communicate with mentors and other students. You will need to be
able to view seminars and connect virtually. Other than that, you
just need to bring yourself
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
Is there an age limit to participate in the Summer School?
</template>
<template #content>
<p>
The age limit for Qiskit Global Summer School 2022 is 14. If you are
under the age limit, but still want to be part of the community,
please check out other ways you can get connected, and other events
that may be available in your area!
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
I'm interested in hosting my own summer school or implementing Qiskit
into my coursework - Where can I learn more?
</template>
<template #content>
<p>
Explore IBM Quantums Educators Program
<UiAppLink v-bind="qCEducators"> online here </UiAppLink>
, or email
<UiAppLink v-bind="mailtoQCEducators">
quantum.education@us.ibm.com
</UiAppLink>
to connect with the latest coursework and classroom resources for
educators and students alike.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
How do I connect more with the Quantum Community?
</template>
<template #content>
<p>
There are several different ways you can connect with the IBM
Quantum Community - depending on your preference. You can
<UiAppLink v-bind="twitterQiskit"> follow Qiskit </UiAppLink>
and
<UiAppLink v-bind="twitterIBMResearch"> IBM Research </UiAppLink>
on Twitter for the latest updates on new events, activities, and
features on what is going on with the community. There is also a
<UiAppLink v-bind="githubQiskit"> community Github </UiAppLink>
that you can explore and contribute to, and you can read regular
<UiAppLink v-bind="mediumQiskit">
blog posts from our team and community members on Medium
</UiAppLink>
. You can also
<UiAppLink v-bind="qiskitSubscribe">
subscribe to the Qiskit YouTube
</UiAppLink>
for the latest video content and our weekly live Seminar Series.
</p>
<p>
If you want to collaborate and connect with other members of the
community, and participate in some of the ongoing conversations
about quantum computing, you will want to
<UiAppLink v-bind="joinqiskitslack">
check out our ever-growing Slack Community
</UiAppLink>
. From there you can connect with current and past interns, IBM
researchers, Qiskit advocates, and fellow community members
directly.
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title>
Are there any upcoming events in my area that I can participate in?
</template>
<template #content>
<p>
All of our announced
<UiAppLink v-bind="qiskitEvents">
upcoming events are listed on qiskit.org
</UiAppLink>
, which is continually updated as we roll out more events throughout
the year. You can also
<UiAppLink v-bind="twitterQiskit">
follow Qiskit on Twitter
</UiAppLink>
for the latest announcements on new and upcoming events!
</p>
</template>
</cv-accordion-item>
<cv-accordion-item>
<template #title> Still have more questions? </template>
<template #content>
<p>
For any questions about the summer school, please submit your
questions using the form below. For all other enquiries, feel free
to email us directly at
<UiAppLink v-bind="mailtoQiskit">
qiskit.events@us.ibm.com </UiAppLink
>.
</p>
</template>
</cv-accordion-item>
</cv-accordion>
</section>
</template>
<script setup lang="ts">
import { CtaClickedEventProp } from "~/types/segment";
interface TrackedLink {
url: string;
segment: CtaClickedEventProp;
}
const khanAcademy: TrackedLink = {
url: "https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices/x9e81a4f98389efdf:multiplying-matrices-by-matrices/v/matrix-multiplication-intro",
segment: { cta: "khanacademy-matrix-multiplication-intro", location: "faq" },
};
const pythonAndJupyter: TrackedLink = {
url: "https://learn.qiskit.org/course/ch-prerequisites/introduction-to-python-and-jupyter-notebooks",
segment: { cta: "textbook-python-and-jupyter-notebooks", location: "faq" },
};
const linearAlgebra: TrackedLink = {
url: "https://learn.qiskit.org/course/ch-appendix/an-introduction-to-linear-algebra-for-quantum-computing",
segment: { cta: "qiskit-linear-algebra", location: "faq" },
};
const qCEducators: TrackedLink = {
url: "https://quantum-computing.ibm.com/programs/educators",
segment: { cta: "ibm-quantum-educators-program", location: "faq" },
};
const mailtoQCEducators: TrackedLink = {
url: "mailto:quantum.education@us.ibm.com",
segment: { cta: "mailto-quantum-educators-program", location: "faq" },
};
const twitterQiskit: TrackedLink = {
url: "https://twitter.com/qiskit",
segment: { cta: "qiskit-twitter", location: "faq" },
};
const twitterIBMResearch: TrackedLink = {
url: "https://twitter.com/IBMResearch",
segment: { cta: "ibmresearch-twitter", location: "faq" },
};
const githubQiskit: TrackedLink = {
url: "https://github.com/Qiskit",
segment: { cta: "qiskit-github", location: "faq" },
};
const mediumQiskit: TrackedLink = {
url: "https://medium.com/qiskit",
segment: { cta: "qiskit-medium", location: "faq" },
};
const qiskitSubscribe: TrackedLink = {
url: "https://qisk.it/sub",
segment: { cta: "qiskit-youtube-subscribe", location: "faq" },
};
// TODO: Refactor links (https://github.com/Qiskit/qiskit.org/issues/1566)
const joinqiskitslack: TrackedLink = {
url: "https://ibm.co/joinqiskitslack",
segment: { cta: "qiskit-slack-join", location: "faq" },
};
const qiskitEvents: TrackedLink = {
url: "https://qiskit.org/events",
segment: { cta: "qiskit-org-events", location: "faq" },
};
const mailtoQiskit: TrackedLink = {
url: "mailto:qiskit.events@us.ibm.com",
segment: { cta: "mailto-qiskit-events", location: "faq" },
};
</script>
<style lang="scss" scoped>
@use "~/assets/scss/helpers/index.scss" as qiskit;
.faq-section {
:deep(.bx--accordion__title) {
color: qiskit.$text-color;
}
:deep(.bx--accordion__heading:hover),
:deep(.bx--accordion__heading:hover::before) {
background-color: qiskit.$background-color-lighter;
}
:deep(.bx--accordion__arrow) {
fill: qiskit.$text-color;
}
}
</style>

9
components/ui/AppDataTable.vue
View File

@ -37,11 +37,6 @@ defineProps<Props>();
<style lang="scss" scoped>
@use "~/assets/scss/helpers/index.scss" as qiskit;
.app-data-table {
overflow-x: scroll;
max-width: 100%;
}
bx-table-header-cell {
--cds-ui-03: #{qiskit.$background-color-light};
}
@ -62,4 +57,8 @@ bx-table-header-cell {
list-style-type: disc;
margin-left: carbon.$spacing-06;
}
bx-table-body {
background-color: qiskit.$background-color-white;
}
</style>

6
components/ui/AppDescriptionCard.vue
View File

@ -20,12 +20,6 @@
<script setup lang="ts">
import { GeneralLink } from "~/constants/appLinks";
export type DescriptionCard = {
title: string;
description: string;
cta: GeneralLink;
};
interface Props {
cta: GeneralLink;
description: string;

4
components/ui/AppHelpfulResourcesSection.vue
View File

@ -2,7 +2,7 @@
<section class="app-helpful-resources-section">
<h2 v-text="title" />
<div class="cds--row">
<AppDescriptionCard
<UiAppDescriptionCard
v-for="resource in resources"
:key="resource.title"
class="cds--col-lg-4 cds--col-md-4 app-helpful-resources-section__card"
@ -13,7 +13,7 @@
</template>
<script setup lang="ts">
import { DescriptionCard } from "~/components/ui/AppDescriptionCard.vue";
import type { DescriptionCard } from "~/types/uiComponents";
interface Props {
resources: DescriptionCard[];

39
components/ui/AppMosaic.vue
View File

@ -29,25 +29,19 @@
</div>
<div
v-if="image"
:lazy-background="image"
class="app-mosaic__element-image"
:class="`app-mosaic__element-image_${position}`"
/>
:style="{
'background-image': `url(${image})`,
}"
></div>
</div>
</dl>
</section>
</template>
<script setup lang="ts">
import { GeneralLink } from "~/constants/appLinks";
export type MosaicElement = {
position: string;
title: string;
description: string;
image: string;
cta?: GeneralLink;
};
import type { MosaicElement } from "~/types/uiComponents";
interface Props {
mosaicElements: MosaicElement[];
@ -59,33 +53,39 @@ defineProps<Props>();
<style lang="scss" scoped>
@use "~/assets/scss/carbon.scss";
@use "~/assets/scss/helpers/index.scss" as qiskit;
.app-mosaic {
&__layout {
display: grid;
gap: carbon.$spacing-07;
grid-template:
2.5fr 4fr 3fr 29.5rem minmax(16rem, auto) "a b c"
grid-template-columns: 2.5fr 4fr 3fr;
grid-template-rows: 29.5rem minmax(16rem, auto);
grid-template-areas:
"a b c"
"d d c";
justify-items: stretch;
@include carbon.breakpoint-between(md, lg) {
grid-template:
1fr 1fr minmax(26rem, auto) minmax(12rem, auto) minmax(12rem, auto)
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(26rem, auto) minmax(12rem, auto) minmax(
12rem,
auto
);
grid-template-areas:
"a b"
"c c"
"d d";
}
@include carbon.breakpoint-down(md) {
grid-template:
1fr repeat(4, minmax(18.75rem, auto)) "a"
grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(18.75rem, auto));
grid-template-areas:
"a"
"b"
"c"
"d";
}
}
&__element {
background-color: qiskit.$background-color-lighter;
display: flex;
@ -157,7 +157,6 @@ defineProps<Props>();
background-repeat: no-repeat;
}
}
&-copy {
padding: carbon.$spacing-07;

4
components/ui/AppMosaicSection.vue
View File

@ -8,13 +8,13 @@
<p class="app-mosaic-section__description" v-text="description" />
</div>
</div>
<AppMosaic class="app-mosaic-section__mosaic" :mosaic-elements="elements" />
<UiAppMosaic class="app-mosaic-section__mosaic" :mosaic-elements="elements" />
<slot />
</section>
</template>
<script setup lang="ts">
import { MosaicElement } from "~/components/ui/AppMosaic.vue";
import type { MosaicElement } from "~/types/uiComponents";
interface Props {
description?: string;

3
components/ui/AppPageHeaderWithCard.vue
View File

@ -36,13 +36,14 @@ import { GeneralLink } from "~/constants/appLinks";
interface Props {
cardTitle: string;
cta: GeneralLink;
cta?: GeneralLink;
}
defineProps<Props>();
</script>
<style lang="scss" scoped>
@use "sass:math";
@use "~/assets/scss/carbon.scss";
@use "~/assets/scss/helpers/index.scss" as qiskit;

2
composables/useSegment.ts
View File

@ -106,7 +106,7 @@ function trackPage(context: AnalyticsContext, route: string) {
const category = getOrFailCategory(digitalData);
const productTitle = getOrFailProductTitle(digitalData);
const project = "project-saiba";
const project = "Qiskit.org";
bluemixAnalytics.pageEvent(category, project, {
navigationType: "pushState",

2
constants/summerSchool2022Content.ts
View File

@ -1,4 +1,4 @@
import { MosaicElement } from "@/components/ui/AppMosaic.vue";
import type { MosaicElement } from "~/types/uiComponents";
import { DescriptionCard } from "@/components/ui/AppDescriptionCard.vue";
const header = {

2
middleware/trackPage.global.ts
View File

@ -2,6 +2,6 @@ export default defineNuxtRouteMiddleware((to) => {
// Analytics must be executed only in client side
if (process.client) {
const { trackPage } = useSegment();
trackPage(to.fullPath);
trackPage(window, to.fullPath);
}
});

15
nuxt.config.ts
View File

@ -1,5 +1,20 @@
const { NODE_ENV } = process.env;
const IS_PRODUCTION = NODE_ENV === "production";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
runtimeConfig: {
// Keys within public are also exposed client-side
public: {
analyticsScriptUrl: IS_PRODUCTION
? "https://cloud.ibm.com/analytics/build/bluemix-analytics.min.js"
: "https://dev.console.test.cloud.ibm.com/analytics/build/bluemix-analytics.min.js",
analyticsKey: IS_PRODUCTION
? "ffdYLviQze3kzomaINXNk6NwpY9LlXcw"
: "zbHWEXPUfXm0K6C7HbegwB5ewDEC8o1H",
isAnalyticsEnabled: true,
},
},
css: ["~/assets/scss/main.scss"],
ssr: false,
vue: {

215
pages/events/summer-school.vue
View File

@ -1,16 +1,12 @@
<template>
<main class="summer-school-page">
<!-- TODO: Integrate components -->
<!-- <AppPageHeaderWithCard
:cta="null"
:card-title="headerData.cardSectionHeading"
>
<template slot="title">
<UiAppPageHeaderWithCard :card-title="headerData.cardSectionHeading">
<template #title>
{{ headerData.titleLine1 }}
<br />
{{ headerData.titleLine2 }}
</template>
<template slot="description">
<template #description>
<p>
The Qiskit Global Summer School 2022 is a two-week intensive summer
program designed to empower the quantum researchers and developers of
@ -30,68 +26,79 @@
</p>
<p>See you next year!</p>
</template>
<template slot="card">
<EventCard v-bind="headerData.card" vertical-layout>
<template #card>
<EventsItemCard v-bind="headerData.card" vertical-layout>
{{ headerData.card.description }}
</EventCard>
</EventsItemCard>
</template>
</AppPageHeaderWithCard> -->
</UiAppPageHeaderWithCard>
<div class="cds--grid summer-school-page__content">
<!-- <AppMosaicSection
<UiAppMosaicSection
class="summer-school-page__section"
:title="mosaicData.title"
:elements="mosaicData.tiles"
/> -->
/>
<section class="summer-school-page__section">
<!-- <h2 v-text="agendaData.title" /> -->
<!-- <p v-text="agendaData.subtitle" /> -->
<!-- <cv-tabs>
<cv-tab
<h2 v-text="agendaData.title" />
<p v-text="agendaData.subtitle" />
<bx-tabs trigger-content="Select an item" value="Week 1">
<bx-tab
v-for="week in agendaData.weeks"
:key="week.tabName"
:label="week.tabName"
:target="week.tabName"
:value="week.tabName"
>
<AppDataTable
class="summer-school-page__section"
:columns="agendaColumnsDataTable"
>
<cv-data-table-row
{{ week.tabName }}
</bx-tab>
</bx-tabs>
<div class="summer-school-page__agenda">
<div
v-for="week in agendaData.weeks"
:id="week.tabName"
:key="week.tabName"
class="summer-school-page__agenda__table"
role="tabpanel"
:aria-labelledby="week.tabName"
hidden
>
<UiAppDataTable :columns="agendaColumnsDataTable">
<bx-table-row
v-for="(row, rowIndex) in week.tableData"
:key="`${rowIndex}`"
>
<cv-data-table-cell
<bx-table-cell
v-for="({ styles, data }, elementIndex) in row"
:key="`${elementIndex}`"
>
<span :style="styles">{{ data }}</span>
</cv-data-table-cell>
</cv-data-table-row>
</AppDataTable>
</cv-tab>
</cv-tabs> -->
</bx-table-cell>
</bx-table-row>
</UiAppDataTable>
</div>
</div>
</section>
<!-- <FaqSection class="summer-school-page__section" /> -->
<EventsSummerSchoolFaq class="summer-school-page__section" />
<!-- <AppHelpfulResourcesSection
<UiAppHelpfulResourcesSection
class="summer-school-page__section"
:title="helpfulResourcesData.title"
:resources="helpfulResourcesData.resources"
/> -->
/>
</div>
</main>
</template>
<script setup lang="ts">
// TODO: Integrate old code
// import {
// header,
// mosaic,
// agenda,
// helpfulResources,
// } from "~/constants/summerSchool2022Content";
import "@carbon/web-components/es/components/tabs/index.js";
import {
header,
mosaic,
agenda,
helpfulResources,
} from "~/constants/summerSchool2022Content";
definePageMeta({
layout: "default-max",
@ -154,103 +161,47 @@ useHead({
],
});
// TODO: Integrate old code
// const agendaColumnsDataTable: string[] = ["Day", "Topic", "Speaker", "Format"];
// const headerData = header;
// const mosaicData = mosaic;
// const agendaData = agenda;
// const helpfulResourcesData = helpfulResources;
// TODO: Refactor tracking
// export default class SummerSchoolPage {
// routeName = 'summer-school'
// }
const agendaColumnsDataTable: string[] = ["Day", "Topic", "Speaker", "Format"];
const headerData = header;
const mosaicData = mosaic;
const agendaData = agenda;
const helpfulResourcesData = helpfulResources;
</script>
<style lang="scss" scoped>
// TODO: Review old CSS
// .summer-school-page {
// display: flex;
// flex-direction: column;
@use "~/assets/scss/carbon.scss";
// &__section {
// margin-top: carbon.$spacing-10;
// margin-bottom: carbon.$spacing-07;
.summer-school-page {
display: flex;
flex-direction: column;
// @include carbon.breakpoint-down(lg) {
// margin-bottom: carbon.$spacing-05;
// }
// }
&__section {
margin-top: carbon.$spacing-10;
margin-bottom: carbon.$spacing-07;
// &__content {
// @include carbon.breakpoint-down(lg) {
// max-width: 100%;
// }
// }
// }
</style>
<style lang="scss" scoped>
// TODO: Review old CSS
// // overrides
// .summer-school-page {
// ::v-deep {
// // TODO: Extract styles like "_checkbox" to be defined globally
// & a.bx--tabs--scrollable__nav-link {
// color: qiskit.$text-color-light;
// border-bottom-color: qiskit.$border-color;
// &:focus,
// &:active {
// outline: none;
// }
// &:not(.bx--tabs--scrollable__nav-item--disabled) {
// color: qiskit.$text-color-light;
// }
// }
// // TODO: Not sure if the order is important in these selectors.
// // So, disabling. Review the reule 'no-descending-specificity' here:
// // https://stylelint.io/user-guide/ignore-code
// // stylelint-disable no-descending-specificity
// & .bx--tabs--scrollable__nav-item {
// &:hover:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled) .bx--tabs--scrollable__nav-link,
// &:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled):not(.bx--tabs--scrollable__nav-item--selected) .bx--tabs--scrollable__nav-link:focus,
// &:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled):not(.bx--tabs--scrollable__nav-item--selected) a.bx--tabs--scrollable__nav-link:active,
// &:not(.bx--tabs--scrollable__nav-item--disabled) .bx--tabs--scrollable__nav-link, .bx--tabs--scrollable__nav-item--selected:not(.bx--tabs--scrollable__nav-item--disabled) .bx--tabs--scrollable__nav-link:focus {
// color: qiskit.$text-color-light;
// }
// &--selected:not(.bx--tabs--scrollable__nav-item--disabled) .bx--tabs--scrollable__nav-link {
// border-bottom-color: qiskit.$border-color-secondary;
// }
// }
// & .bx--tabs--scrollable__nav-item:hover:not(.bx--tabs--scrollable__nav-item--disabled) {
// box-shadow: none;
// }
// & .bx--tabs--scrollable__nav-item:hover:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled),
// & .bx--tabs--scrollable__nav-item,
// & .bx--tabs-trigger {
// background-color: qiskit.$background-color-white;
// svg {
// fill: $gray-100;
// }
// }
// & .bx--tabs--scrollable__nav-link,
// & .bx--tabs-trigger-text {
// color: qiskit.$text-color;
// }
// // stylelint-enable no-descending-specificity
// .app-data-table {
// margin-top: carbon.$spacing-07;
// padding: 0;
// }
// }
// }
@include carbon.breakpoint-down(lg) {
margin-bottom: carbon.$spacing-05;
}
}
&__agenda {
margin-top: carbon.$spacing-07;
margin-bottom: carbon.$spacing-07;
@include carbon.breakpoint-down(lg) {
margin-bottom: carbon.$spacing-05;
}
&__table {
max-width: 100%;
overflow-x: scroll;
}
}
&__content {
@include carbon.breakpoint-down(lg) {
max-width: 100%;
}
}
}
</style>

6
plugins.old/carbon.ts
View File

@ -1,9 +1,6 @@
import Vue from "vue";
import CarbonComponentsVue from "@carbon/vue";
import { CarbonIconsVue } from "@carbon/icons-vue";
import Calendar20 from "@carbon/icons-vue/lib/calendar/20";
import Time20 from "@carbon/icons-vue/lib/time/20";
import Education20 from "@carbon/icons-vue/lib/education/20";
import ArrowLeft16 from "@carbon/icons-vue/lib/arrow--left/16";
import LogoTwitter20 from "@carbon/icons-vue/lib/logo--twitter/20";
import LogoYouTube20 from "@carbon/icons-vue/lib/logo--youtube/20";
@ -14,10 +11,7 @@ import Copy16 from "@carbon/icons-vue/lib/copy/16";
Vue.use(CarbonComponentsVue);
Vue.use(CarbonIconsVue, {
components: {
Calendar20,
Copy16,
Time20,
Education20,
ArrowLeft16,
LogoTwitter20,
LogoYouTube20,

17
types/uiComponents.ts Normal file
View File

@ -0,0 +1,17 @@
import { GeneralLink } from "~/constants/appLinks";
type MosaicElement = {
position: string;
title: string;
description: string;
image: string;
cta?: GeneralLink;
};
type DescriptionCard = {
title: string;
description: string;
cta: GeneralLink;
};
export { MosaicElement, DescriptionCard };