mirror of https://github.com/Qiskit/qiskit.org.git
refactor(index): migrate to Nuxt 3 (#2986)
* refactor(index): use `useAsyncData` * refactor(index): migrate "hero" component * refactor(index): migrate "quick start" section * fix(cta): use functions instead of computed props We were using exported functions from another component that should have been doing those calculations as computed props. Since they have been refactored as computed props, we can't export them and reuse them externally as regular functions. Hence we need to recreate those computations here. * feat: update Carbon css classes * chore: move image assets * refactor: use `:deep` selector * feat: working typography * refactor(index): migrate "quick start" section * fix: move images to public folder Our current setup only works with images that were in the "static" (now "public") directory. * refactor(index): migrate "capabilities" section * refactor(index): migrate "learn" section * feat(app-cta): show icons * feat(index): "start locally" design adjustments * chore: remove since already migrated * style: some lint fixes * feat: use new Carbon css name for "no gutter" * feat: use new Carbon css name for "aspect ratio" * feat: remove QuickStart and add TODO The component will be redesigned and will need a major update. Related to https://github.com/Qiskit/qiskit.org/issues/2856
This commit is contained in:
Eddybrando Vásquez
GitHub
parent
374024f7c4
commit
9258e8ac97
|
|
@ -6,3 +6,7 @@ node_modules
|
|||
.output
|
||||
.env
|
||||
dist
|
||||
|
||||
# Pictures downloaded from airtable
|
||||
public/images/advocates/downloaded/*
|
||||
public/images/events/downloaded/*
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default class AppCard extends Vue {
|
|||
@import "~carbon-components/scss/globals/scss/typography";
|
||||
|
||||
.app-card {
|
||||
background-color:carbon.$cool-gray-10;
|
||||
background-color: carbon.$cool-gray-10;
|
||||
|
||||
&__title {
|
||||
@include carbon.$type-style("productive-heading-02");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
@use "carbon";
|
||||
|
||||
// TODO: Use standard Carbon type sets
|
||||
|
||||
body {
|
||||
@include carbon.type-style("body-long-01");
|
||||
}
|
||||
|
||||
p,
|
||||
.p {
|
||||
@include carbon.type-style("body-long-01");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
@include carbon.type-style("heading-05");
|
||||
|
||||
@include carbon.breakpoint-up(md) {
|
||||
font-size: carbon.type-scale(9);
|
||||
font-weight: carbon.font-weight("light");
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(lg) {
|
||||
font-size: carbon.type-scale(10);
|
||||
line-height: 1.19;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
font-size: carbon.type-scale(11);
|
||||
line-height: 1.17;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(max) {
|
||||
font-size: carbon.type-scale(13);
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
@include carbon.type-style("heading-04");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
font-size: carbon.type-scale(8);
|
||||
line-height: 1.25;
|
||||
margin-bottom: carbon.$spacing-06;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
@include carbon.type-style("heading-03");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
|
||||
@include carbon.breakpoint-up(max) {
|
||||
font-size: carbon.type-scale(6);
|
||||
line-height: 1.17;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
@include carbon.type-style("heading-01");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
@include carbon.type-style("heading-01");
|
||||
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
.caption {
|
||||
@include carbon.type-style("label-01");
|
||||
}
|
||||
|
||||
code,
|
||||
.code {
|
||||
@include carbon.type-style("code-01");
|
||||
}
|
||||
|
|
@ -3,5 +3,5 @@
|
|||
@forward "@carbon/styles/scss/breakpoint";
|
||||
@forward "@carbon/styles/scss/spacing";
|
||||
@forward "@carbon/styles/scss/theme";
|
||||
@forward "@carbon/styles/scss/type";
|
||||
@forward "@carbon/grid" as grid-*; // Prefixed to avoid variable name conflicts
|
||||
@forward "@carbon/type";
|
||||
|
|
|
|||
|
|
@ -1,114 +0,0 @@
|
|||
@use "~/assets/scss/carbon.scss";
|
||||
|
||||
//TODO: Review imports
|
||||
@import "~/node_modules/@carbon/type/scss/font-family";
|
||||
@import "~/node_modules/@carbon/type/scss/scale";
|
||||
@import "~/node_modules/@carbon/type/scss/styles";
|
||||
|
||||
// @import "~@carbon/type/scss/font-family";
|
||||
// @import "~@carbon/type/scss/scale";
|
||||
// @import "~@carbon/type/scss/styles";
|
||||
|
||||
// Carbon's "body-long-01"
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/productive
|
||||
body {
|
||||
@include carbon--type-style("body-long-01");
|
||||
}
|
||||
|
||||
// Based on Carbon's "body-long-01"
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/productive
|
||||
p,
|
||||
.p {
|
||||
@include carbon--type-style("body-long-01");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
// Based on Carbon's "expressive-heading-05" but not fluid
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive/
|
||||
h1,
|
||||
.h1 {
|
||||
@include carbon--type-style("expressive-heading-05");
|
||||
|
||||
@include carbon.breakpoint-up(md) {
|
||||
font-size: carbon--type-scale(9);
|
||||
font-weight: carbon--font-weight("light");
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(lg) {
|
||||
font-size: carbon--type-scale(10);
|
||||
line-height: 1.19;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
font-size: carbon--type-scale(11);
|
||||
line-height: 1.17;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(max) {
|
||||
font-size: carbon--type-scale(13);
|
||||
}
|
||||
}
|
||||
|
||||
// Based on Carbon's "expressive-heading-04" but not fluid
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive/
|
||||
h2,
|
||||
.h2 {
|
||||
@include carbon--type-style("expressive-heading-04");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
font-size: carbon--type-scale(8);
|
||||
line-height: 1.25;
|
||||
margin-bottom: carbon.$spacing-06;
|
||||
}
|
||||
}
|
||||
|
||||
// Based on Carbon's "expressive-heading-03" but not fluid
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive/
|
||||
h3,
|
||||
.h3 {
|
||||
@include carbon--type-style("expressive-heading-03");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
|
||||
@include carbon.breakpoint-up(max) {
|
||||
font-size: carbon--type-scale(6);
|
||||
line-height: 1.17;
|
||||
}
|
||||
}
|
||||
|
||||
// Based on Carbon's "expressive-heading-01"
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive/
|
||||
h4,
|
||||
.h4 {
|
||||
@include carbon--type-style("expressive-heading-01");
|
||||
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
// Based on Carbon's "expressive-heading-01"
|
||||
// https://v10.carbondesignsystem.com/guidelines/typography/expressive/
|
||||
h5,
|
||||
.h5 {
|
||||
@include carbon--type-style("expressive-heading-01");
|
||||
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
// Carbon's "caption-01"
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive
|
||||
.caption {
|
||||
@include carbon--type-style("caption-01");
|
||||
}
|
||||
|
||||
// Carbon's "code-01"
|
||||
// https://www.carbondesignsystem.com/guidelines/typography/expressive
|
||||
code,
|
||||
.code {
|
||||
@include carbon--type-style("code-01");
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
@import "./base";
|
||||
@import "./typography";
|
||||
@import "../typography";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,35 @@
|
|||
// @import "./helpers";
|
||||
// @import "./vendor";
|
||||
// @import "./layout";
|
||||
// @import "./components";
|
||||
@use "@carbon/styles/scss/reset";
|
||||
@use "@ibm/plex/scss/ibm-plex";
|
||||
@use "carbon";
|
||||
@use "typography";
|
||||
@use "./components";
|
||||
@include carbon.grid-css-grid;
|
||||
@include carbon.grid-flex-grid;
|
||||
|
||||
:root {
|
||||
--cds-active-primary: #{carbon.$purple-80};
|
||||
--cds-active-tertiary: #{carbon.$purple-90};
|
||||
--cds-body-long-01-font-size: 1rem;
|
||||
--cds-button-primary-active: #{carbon.$purple-90};
|
||||
--cds-button-primary-hover: #{carbon.$purple-80};
|
||||
--cds-button-primary: #{carbon.$purple-70};
|
||||
--cds-focus: #{carbon.$purple-70};
|
||||
--cds-hover-primary-text: #{carbon.$purple-60};
|
||||
--cds-hover-primary: #{carbon.$purple-80};
|
||||
--cds-hover-tertiary: #{carbon.$purple-80};
|
||||
--cds-interactive-01: #{carbon.$purple-70};
|
||||
--cds-interactive-03: #{carbon.$purple-70};
|
||||
--cds-interactive-04: #{carbon.$purple-70};
|
||||
--cds-link-01: #{carbon.$purple-70};
|
||||
--cds-link-primary: #{carbon.$purple-70};
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
:class="`page-footer__primary_theme_${theme}`"
|
||||
>
|
||||
<div
|
||||
:class="oldContainer ? 'page-footer__primary-container' : 'bx--grid'"
|
||||
:class="oldContainer ? 'page-footer__primary-container' : 'cds--grid'"
|
||||
>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-4 bx--col-md">
|
||||
<div class="cds--row">
|
||||
<div class="cds--col-lg-4 cds--col-md">
|
||||
<UiAppLogo
|
||||
class="page-footer__logo"
|
||||
:class="`page-footer__logo_theme_${theme}`"
|
||||
|
|
@ -17,12 +17,12 @@
|
|||
<FooterSection
|
||||
v-for="sectionElements in footerElements"
|
||||
:key="sectionElements.title"
|
||||
class="bx--col-lg-3 bx--col-sm"
|
||||
class="cds--col-lg-3 cds--col-sm"
|
||||
v-bind="sectionElements"
|
||||
:theme="theme"
|
||||
/>
|
||||
<FooterSection
|
||||
class="bx--col-lg-3 bx--col-md page-footer__stay-connected"
|
||||
class="cds--col-lg-3 cds--col-md page-footer__stay-connected"
|
||||
v-bind="stayConnectedElements"
|
||||
icons-only
|
||||
:theme="theme"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
>
|
||||
<div
|
||||
class="page-footer__secondary-container"
|
||||
:class="{ 'bx--grid': !oldContainer }"
|
||||
:class="{ 'cds--grid': !oldContainer }"
|
||||
>
|
||||
<div class="caption" :class="`page-footer__copyright_theme_${theme}`">
|
||||
©Qiskit | All Rights Reserved
|
||||
|
|
@ -154,7 +154,7 @@ const secondaryFooterLinks = SECONDARY_FOOTER_LINKS;
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(.bx--grid) {
|
||||
&:not(.cds--grid) {
|
||||
@include qiskit.contained;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<section class="bx--grid">
|
||||
<div class="bx--row">
|
||||
<section class="cds--grid">
|
||||
<div class="cds--row">
|
||||
<article
|
||||
class="bx--col-lg-4 bx--col-md-4 join-section__feature join-section__intro"
|
||||
class="cds--col-lg-4 cds--col-md-4 join-section__feature join-section__intro"
|
||||
>
|
||||
<p>
|
||||
The Qiskit advocate program is a global program that provides support
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-for="benefit in advocateBenefits"
|
||||
:key="`benefit-${benefit.icon}`"
|
||||
class="bx--col-lg-4 bx--col-md-4 join-section__feature"
|
||||
class="cds--col-lg-4 cds--col-md-4 join-section__feature"
|
||||
>
|
||||
<CompactFeature v-bind="benefit" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<section id="meet-the-advocates" class="bx--grid meet-the-advocates">
|
||||
<section id="meet-the-advocates" class="cds--grid meet-the-advocates">
|
||||
<h2>Meet the Advocates</h2>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-md-5 bx--col-lg-8 bx--col-xlg-7 bx--col-max-6">
|
||||
<div class="cds--row">
|
||||
<div class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
|
||||
<p>
|
||||
Qiskit advocates are some of the finest minds in quantum computing,
|
||||
all over the world. If you are interested in getting involved with the
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
/>
|
||||
</template>
|
||||
<template #results>
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<div
|
||||
v-for="advocate in filteredAdvocates"
|
||||
:key="advocate.name"
|
||||
class="bx--col-max-8"
|
||||
class="cds--col-max-8"
|
||||
>
|
||||
<AdvocateCard v-bind="advocate" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -109,13 +109,13 @@ function dataPerRow(filteredData: Object[]): TableRowElement[][] {
|
|||
|
||||
.bx--data-table th[aria-sort] {
|
||||
background-color: carbon.$cool-gray-10;
|
||||
border-bottom: 1px solidcarbon.$cool-gray-30;
|
||||
border-bottom: 1px solid carbon.$cool-gray-30;
|
||||
}
|
||||
|
||||
.bx--data-table tbody tr td,
|
||||
.bx--data-table tbody tr:hover td {
|
||||
background-color: carbon.$cool-gray-10;
|
||||
border-bottom: 1px solidcarbon.$cool-gray-30;
|
||||
border-bottom: 1px solid carbon.$cool-gray-30;
|
||||
color: $black-100;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="university-directory-section">
|
||||
<article class="bx--row">
|
||||
<div class="bx--col-lg-4">
|
||||
<article class="cds--row">
|
||||
<div class="cds--col-lg-4">
|
||||
<h2>University directory</h2>
|
||||
<p>
|
||||
See your local community listed here? Click through and join the
|
||||
|
|
@ -11,12 +11,12 @@
|
|||
Quantum internship!
|
||||
</p>
|
||||
</div>
|
||||
<div class="bx--col-xlg-12 bx--col-lg-12">
|
||||
<div class="bx--row">
|
||||
<div class="cds--col-xlg-12 cds--col-lg-12">
|
||||
<div class="cds--row">
|
||||
<div
|
||||
v-for="{ image, title, startDate, cta, detail } in universities"
|
||||
:key="title"
|
||||
class="bx--col-xlg-8"
|
||||
class="cds--col-xlg-8"
|
||||
>
|
||||
<AppCard
|
||||
:cta-label="cta.label"
|
||||
|
|
|
|||
|
|
@ -319,19 +319,17 @@ const mailtoQiskit: TrackedLink = {
|
|||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.faq-section {
|
||||
::v-deep {
|
||||
.bx--accordion__title {
|
||||
color: qiskit.$text-color;
|
||||
}
|
||||
:deep(.bx--accordion__title) {
|
||||
color: qiskit.$text-color;
|
||||
}
|
||||
|
||||
.bx--accordion__heading:hover,
|
||||
.bx--accordion__heading:hover::before {
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
}
|
||||
:deep(.bx--accordion__heading:hover),
|
||||
:deep(.bx--accordion__heading:hover::before) {
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
}
|
||||
|
||||
.bx--accordion__arrow {
|
||||
fill: qiskit.$text-color;
|
||||
}
|
||||
:deep(.bx--accordion__arrow) {
|
||||
fill: qiskit.$text-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LogoGitHub32 from "@carbon/icons-vue/lib/logo--github/32";
|
||||
import { GITHUB_REPOSITORY } from "~/constants/menuLinks";
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<article class="the-hero-moment">
|
||||
<MetalGrid>
|
||||
<div class="bx--grid the-hero-moment__container">
|
||||
<VersionInfo class="the-hero-moment__version-info" :version="version" />
|
||||
<div class="bx--row">
|
||||
<div class="cds--grid the-hero-moment__container">
|
||||
<LandingTheHeroMomentVersionInfo
|
||||
class="the-hero-moment__version-info"
|
||||
:version="version"
|
||||
/>
|
||||
<div class="cds--row">
|
||||
<h1
|
||||
class="bx--col-md-4 bx--col-lg-9 bx--col-xlg-7 bx--col-max-7 the-hero-moment__title"
|
||||
class="cds--col-md-4 cds--col-lg-9 cds--col-xlg-7 cds--col-max-7 the-hero-moment__title"
|
||||
>
|
||||
Open-Source Quantum Development
|
||||
</h1>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<p
|
||||
class="bx--col-sm bx--col-md-4 bx--col-lg-6 bx--col-xlg-4 the-hero-moment__description"
|
||||
class="cds--col-sm cds--col-md-4 cds--col-lg-6 cds--col-xlg-4 the-hero-moment__description"
|
||||
>
|
||||
Qiskit {{ qiskitPronunciation }} is an open-source SDK for working
|
||||
with quantum computers at the level of pulses, circuits, and
|
||||
|
|
@ -49,6 +52,7 @@ const qiskitPronunciation = Math.random() < 0.5 ? "[kiss-kit]" : "[quiss-kit]";
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:math";
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<article class="page-section the-learn-section">
|
||||
<div class="bx--grid">
|
||||
<div class="cds--grid">
|
||||
<h2>Learn with Qiskit</h2>
|
||||
<LearnCard />
|
||||
<LandingTheLearnSectionCard />
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.the-learn-section {
|
||||
@include responsive-grid-bg("/images/grid/grid-left.svg", 36rem);
|
||||
@include qiskit.responsive-grid-bg("/images/grid/grid-left.svg", 36rem);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom -2px;
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<article class="learn-card">
|
||||
<div class="bx--col-max-3 bx--col-lg-4 bx--col-md-3 learn-card__content">
|
||||
<div class="cds--col-max-3 cds--col-lg-4 cds--col-md-3 learn-card__content">
|
||||
<div
|
||||
class="bx--aspect-ratio bx--aspect-ratio--4x3 learn-card__content__aspect-ratio"
|
||||
class="cds--aspect-ratio cds--aspect-ratio--4x3 learn-card__content__aspect-ratio"
|
||||
>
|
||||
<div
|
||||
class="bx--aspect-ratio--object learn-card__content__aspect-ratio__object"
|
||||
class="cds--aspect-ratio--object learn-card__content__aspect-ratio__object"
|
||||
>
|
||||
<p class="learn-card__description">
|
||||
Gain access to a free, digital textbook to study the concepts of
|
||||
|
|
@ -21,10 +21,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bx--col-md learn-card__media"
|
||||
lazy-background="/images/landing-page/learn-image.jpg"
|
||||
/>
|
||||
<div class="cds--col-md learn-card__media" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
|
|
@ -98,6 +95,7 @@ const learnLink: GeneralLink = {
|
|||
}
|
||||
|
||||
&__media {
|
||||
background-image: url("/images/landing-page/learn-image.jpg");
|
||||
background-position: center 25%;
|
||||
background-size: cover;
|
||||
flex: 1;
|
||||
|
|
@ -42,12 +42,10 @@ quantum_circuit = qiskit.circuit.library.QuantumVolume(5)</pre
|
|||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
activeBlocks?: boolean[];
|
||||
activeBlocks: boolean[];
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
activeBlocks: () => [true, false, false],
|
||||
});
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<article class="bx--grid page-section qiskit-capabilities-section">
|
||||
<article class="cds--grid page-section qiskit-capabilities-section">
|
||||
<h2>What Can Qiskit Do</h2>
|
||||
<div class="qiskit-capabilities-section__container">
|
||||
<div class="qiskit-capabilities-section__capabilities">
|
||||
<div class="qiskit-capabilities-section__content">
|
||||
<QiskitCapabilityCard
|
||||
<LandingTheQiskitCapabilityCard
|
||||
v-for="item in capabilities"
|
||||
:id="item.title"
|
||||
:key="item.title"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="qiskit-capabilities-section__scrolling-ui">
|
||||
<CodeCell
|
||||
<LandingTheQiskitCapabilitiesSectionCodeCell
|
||||
:active-blocks="
|
||||
capabilities.map((item, index) => isActiveSection(item, index))
|
||||
"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
:segment="quantumLabCTA.segment"
|
||||
:url="quantumLabCTA.url"
|
||||
/>
|
||||
<cv-button
|
||||
<bx-btn
|
||||
:title="copyCodeCTA.label"
|
||||
class="qiskit-capabilities-section__copy-button"
|
||||
@click="[copyToClipboard(), trackClickEvent(copyCodeCTA.segment)]"
|
||||
|
|
@ -41,96 +41,106 @@
|
|||
copyCodeCTA.label
|
||||
}}</span>
|
||||
<Copy16 class="qiskit-capabilities-section__copy-button__icon" />
|
||||
</cv-button>
|
||||
</bx-btn>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<!-- TODO: Refactor using Composition API once Mixins are refactored -->
|
||||
<script lang="ts">
|
||||
import { Component, Mixins } from 'vue-property-decorator'
|
||||
import { CtaClickedEventProp } from '~/types/segment'
|
||||
import { useScrollBetweenSections } from '~/composables/useScrollBetweenSections'
|
||||
<script setup lang="ts">
|
||||
import "@carbon/web-components/es/components/button/index.js";
|
||||
import Copy16 from "@carbon/icons-vue/lib/copy/16";
|
||||
import { useScrollBetweenSections } from "~/composables/useScrollBetweenSections";
|
||||
import type { CtaClickedEventProp } from "~/types/segment";
|
||||
|
||||
interface QiskitCapability {
|
||||
title: string
|
||||
description: string
|
||||
thumbnailResource: string
|
||||
segment: CtaClickedEventProp
|
||||
title: string;
|
||||
description: string;
|
||||
thumbnailResource: string;
|
||||
link?: {
|
||||
url: string;
|
||||
label: string;
|
||||
segment: CtaClickedEventProp;
|
||||
};
|
||||
segment?: CtaClickedEventProp;
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class TheQiskitCapabilitiesSection {
|
||||
const { trackClickEvent } = useSegment()
|
||||
const { trackClickEvent } = useSegment();
|
||||
|
||||
// TODO: Review how this work
|
||||
const { activeSection } = useScrollBetweenSections()
|
||||
const { activeSection } = useScrollBetweenSections();
|
||||
|
||||
capabilities = [
|
||||
{
|
||||
title: 'Circuit Library',
|
||||
description: 'Qiskit includes a comprehensive set of quantum gates and a variety of pre-built circuits so users at all levels can use Qiskit for research and application development.',
|
||||
thumbnailResource: '/images/landing-page/feature-circuit.png',
|
||||
link: {
|
||||
url: 'https://qiskit.org/documentation/apidoc/circuit_library.html',
|
||||
label: 'Learn more',
|
||||
segment: { cta: 'circuit-library', location: 'homepage-capabilities' }
|
||||
}
|
||||
const capabilities: QiskitCapability[] = [
|
||||
{
|
||||
title: "Circuit Library",
|
||||
description:
|
||||
"Qiskit includes a comprehensive set of quantum gates and a variety of pre-built circuits so users at all levels can use Qiskit for research and application development.",
|
||||
thumbnailResource: "/images/landing-page/feature-circuit.png",
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/apidoc/circuit_library.html",
|
||||
label: "Learn more",
|
||||
segment: { cta: "circuit-library", location: "homepage-capabilities" },
|
||||
},
|
||||
{
|
||||
title: 'Transpiler',
|
||||
description: 'The transpiler translates Qiskit code into an optimized circuit using a backend’s native gate set, allowing users to program for any quantum processor or processor architecture with minimal inputs.',
|
||||
thumbnailResource: '/images/landing-page/transpiler.png',
|
||||
link: {
|
||||
url: 'https://qiskit.org/documentation/apidoc/transpiler.html',
|
||||
label: 'Learn more',
|
||||
segment: { cta: 'transpiler', location: 'homepage-capabilities' }
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Transpiler",
|
||||
description:
|
||||
"The transpiler translates Qiskit code into an optimized circuit using a backend’s native gate set, allowing users to program for any quantum processor or processor architecture with minimal inputs.",
|
||||
thumbnailResource: "/images/landing-page/transpiler.png",
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/apidoc/transpiler.html",
|
||||
label: "Learn more",
|
||||
segment: { cta: "transpiler", location: "homepage-capabilities" },
|
||||
},
|
||||
{
|
||||
title: 'Run on real hardware',
|
||||
description: 'Users can run and schedule jobs on real quantum processors, and employ Qiskit Runtime to orchestrate quantum programs on cloud-based CPUs, QPUs, and GPUs.',
|
||||
thumbnailResource: '/images/library/chip-01.png',
|
||||
link: {
|
||||
url: 'https://qiskit.org/documentation/apidoc/ibmq_provider.html',
|
||||
label: 'Learn more',
|
||||
segment: { cta: 'run-on-hardware', location: 'homepage-capabilities' }
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Run on real hardware",
|
||||
description:
|
||||
"Users can run and schedule jobs on real quantum processors, and employ Qiskit Runtime to orchestrate quantum programs on cloud-based CPUs, QPUs, and GPUs.",
|
||||
thumbnailResource: "/images/library/chip-01.png",
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/apidoc/ibmq_provider.html",
|
||||
label: "Learn more",
|
||||
segment: { cta: "run-on-hardware", location: "homepage-capabilities" },
|
||||
},
|
||||
{
|
||||
title: 'Try it yourself',
|
||||
description: 'Ready to explore Qiskit’s capabilities for yourself? Copy the code to the right of this paragraph and try running it in your local Python environment. You can also click the link to the IBM Quantum Lab and test it there.',
|
||||
thumbnailResource: '/images/landing-page/med_02_1.png',
|
||||
segment: { cta: 'try-it-yourself', location: 'homepage-capabilities' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Try it yourself",
|
||||
description:
|
||||
"Ready to explore Qiskit’s capabilities for yourself? Copy the code to the right of this paragraph and try running it in your local Python environment. You can also click the link to the IBM Quantum Lab and test it there.",
|
||||
thumbnailResource: "/images/landing-page/med_02_1.png",
|
||||
segment: { cta: "try-it-yourself", location: "homepage-capabilities" },
|
||||
},
|
||||
];
|
||||
|
||||
quantumLabCTA = {
|
||||
url: 'https://quantum-computing.ibm.com/lab/files/qiskit-textbook/getting-started/example.ipynb',
|
||||
label: 'Open in Quantum Lab',
|
||||
segment: { cta: 'open-in-quantum-lab', location: 'homepage-capabilities' }
|
||||
const quantumLabCTA = {
|
||||
url: "https://quantum-computing.ibm.com/lab/files/qiskit-textbook/getting-started/example.ipynb",
|
||||
label: "Open in Quantum Lab",
|
||||
segment: { cta: "open-in-quantum-lab", location: "homepage-capabilities" },
|
||||
};
|
||||
|
||||
const copyCodeCTA = {
|
||||
url: "",
|
||||
label: "Copy code",
|
||||
segment: { cta: "copy-code", location: "homepage-capabilities" },
|
||||
};
|
||||
|
||||
function isActiveSection(item: QiskitCapability, index: number): boolean {
|
||||
if (capabilities[capabilities.length - 1].title === activeSection.value) {
|
||||
return true;
|
||||
}
|
||||
|
||||
copyCodeCTA = {
|
||||
url: '',
|
||||
label: 'Copy code',
|
||||
segment: { cta: 'copy-code', location: 'homepage-capabilities' }
|
||||
}
|
||||
return (
|
||||
item.title === activeSection.value ||
|
||||
(activeSection.value === "" && index === 0)
|
||||
);
|
||||
}
|
||||
|
||||
isActiveSection (item: QiskitCapability, index: number): boolean {
|
||||
if (this.capabilities[this.capabilities.length - 1].title === this.activeSection) {
|
||||
return true
|
||||
}
|
||||
function copyToClipboard(): void {
|
||||
const codeSnippet = document.querySelector(
|
||||
".code-cell"
|
||||
) as HTMLElement | null;
|
||||
|
||||
return item.title === this.activeSection || (this.activeSection === '' && index === 0)
|
||||
}
|
||||
|
||||
copyToClipboard (): void {
|
||||
const codeSnippet = document.querySelector('.code-cell') as HTMLElement | null
|
||||
|
||||
if (codeSnippet !== null) {
|
||||
navigator.clipboard.writeText(codeSnippet.innerText)
|
||||
}
|
||||
if (codeSnippet !== null) {
|
||||
navigator.clipboard.writeText(codeSnippet.innerText);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<section class="cds--grid page-section">
|
||||
<h2>Quick Start</h2>
|
||||
<!-- TODO: Implement new design (#2856) -->
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div class="prerequisites">
|
||||
<div class="prerequisites__section">
|
||||
<p>Run the following command and follow the onscreen instructions:</p>
|
||||
<pre class="code prerequisites__code">
|
||||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre
|
||||
>
|
||||
|
||||
<p>
|
||||
See
|
||||
<UiAppLink v-bind="rustupLink">
|
||||
{{ rustupLink.label }}
|
||||
</UiAppLink>
|
||||
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
|
||||
for more information and details on
|
||||
<UiAppLink v-bind="rustLangInstallLink">{{
|
||||
rustLangInstallLink.label
|
||||
}}</UiAppLink
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component } from "vue-property-decorator";
|
||||
import { GeneralLink } from "~/constants/appLinks";
|
||||
|
||||
@Component
|
||||
export default class PrerequisitesForLinuxMac extends Vue {
|
||||
rustupLink: GeneralLink = {
|
||||
url: "https://rustup.rs/",
|
||||
label: "https://rustup.rs/",
|
||||
segment: { cta: "rustup-installer", location: "quick-start" },
|
||||
};
|
||||
|
||||
rustLangInstallLink: GeneralLink = {
|
||||
label: "other installation methods",
|
||||
url: "https://forge.rust-lang.org/infra/other-installation-methods.html",
|
||||
segment: { cta: "rust-lang-install-methods", location: "quick-start" },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div class="prerequisites">
|
||||
<div class="prerequisites__section">
|
||||
<!-- eslint-disable vue/singleline-html-element-content-newline -->
|
||||
<p>
|
||||
<strong>Windows 64-bit:</strong> Download and run the
|
||||
<UiAppLink v-bind="rustup64Link">{{ rustup64Link.label }}</UiAppLink
|
||||
>, which will provider follow up instructions.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Windows 32-bit:</strong> Download and run the
|
||||
<UiAppLink v-bind="rustup32Link">{{ rustup32Link.label }}</UiAppLink
|
||||
>, which will provider follow up instructions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GeneralLink } from "~/constants/appLinks";
|
||||
|
||||
const rustup64Link: GeneralLink = {
|
||||
url: "https://win.rustup.rs/x86_64",
|
||||
label: "64-bit installer",
|
||||
segment: { cta: "rustup-windows-64-installer", location: "quick-start" },
|
||||
};
|
||||
|
||||
const rustup32Link: GeneralLink = {
|
||||
url: "https://win.rustup.rs/i686",
|
||||
label: "32-bit installer",
|
||||
segment: { cta: "rustup-windows-32-installer", location: "quick-start" },
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
<template>
|
||||
<section class="start-locally">
|
||||
<h3>Start locally</h3>
|
||||
<p class="start-locally__introduction">
|
||||
To install Qiskit locally, you will need
|
||||
<UiAppLink url="https://www.python.org/downloads/">
|
||||
Python 3.7+.
|
||||
</UiAppLink>
|
||||
Although it is not required, we recommend using a
|
||||
<UiAppLink url="https://www.anaconda.com/products/individual">
|
||||
virtual environment with Anaconda.
|
||||
</UiAppLink>
|
||||
</p>
|
||||
<div class="start-locally__options">
|
||||
<div v-for="choicesGroup in installChoices" :key="choicesGroup.id">
|
||||
<h4>
|
||||
{{ choicesGroup.title }}
|
||||
</h4>
|
||||
<cv-button-set class="start-locally__options-group">
|
||||
<cv-button
|
||||
v-for="option in choicesGroup.options"
|
||||
:key="option"
|
||||
:title="option"
|
||||
class="start-locally__option"
|
||||
:class="{
|
||||
'start-locally__option_active': isActive(choicesGroup, option),
|
||||
}"
|
||||
@click="selectOption(choicesGroup, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</cv-button>
|
||||
</cv-button-set>
|
||||
</div>
|
||||
<div>
|
||||
<cv-accordion
|
||||
v-if="prerequisitesToInstallQiskit()"
|
||||
class="start-locally__prerequisites-section"
|
||||
>
|
||||
<cv-accordion-item>
|
||||
<template #title>
|
||||
Installing from source requires that you have the Rust compiler on
|
||||
your system
|
||||
</template>
|
||||
<template #content>
|
||||
<lazy-prerequisites-for-windows
|
||||
v-if="selectedOs === OPERATING_SYSTEMS.windows"
|
||||
/>
|
||||
<lazy-prerequisites-for-linux-mac v-else />
|
||||
</template>
|
||||
</cv-accordion-item>
|
||||
</cv-accordion>
|
||||
<h4>Terminal</h4>
|
||||
<SyntaxHighlight :label="segmentLabel" :code="codeToInstallQiskit()" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type ChoicesGroup = {
|
||||
title: string;
|
||||
id: string;
|
||||
options: Array<string>;
|
||||
};
|
||||
|
||||
type InstallChoices = Array<ChoicesGroup>;
|
||||
|
||||
const OPERATING_SYSTEMS = {
|
||||
linux: "Linux",
|
||||
mac: "Mac",
|
||||
windows: "Windows",
|
||||
};
|
||||
|
||||
const QISKIT_INSTALL = {
|
||||
stable: "Stable (recommended)",
|
||||
master: "Unstable",
|
||||
};
|
||||
|
||||
const installChoices: InstallChoices = [
|
||||
{
|
||||
title: "Qiskit Install",
|
||||
id: "qiskit-install",
|
||||
options: Object.values(QISKIT_INSTALL),
|
||||
},
|
||||
{
|
||||
title: "Operating System",
|
||||
id: "os",
|
||||
options: Object.values(OPERATING_SYSTEMS),
|
||||
},
|
||||
];
|
||||
|
||||
const selectedOptions = reactive({
|
||||
"qiskit-install": QISKIT_INSTALL.stable,
|
||||
os: OPERATING_SYSTEMS.mac,
|
||||
});
|
||||
|
||||
const segmentLabel = "Qiskit Install";
|
||||
|
||||
const codeToInstallStableOnLinux = "pip install -U pip && pip install qiskit";
|
||||
const codeToInstallStableOnMac = "pip install qiskit";
|
||||
const codeToInstallStableOnWindows = "pip install qiskit";
|
||||
|
||||
const codeToInstallAllSystems =
|
||||
"pip install git+https://github.com/Qiskit/qiskit-terra";
|
||||
|
||||
const prerequisites = {
|
||||
[QISKIT_INSTALL.stable]: {
|
||||
[OPERATING_SYSTEMS.linux]: null,
|
||||
[OPERATING_SYSTEMS.mac]: null,
|
||||
[OPERATING_SYSTEMS.windows]: null,
|
||||
},
|
||||
[QISKIT_INSTALL.master]: {
|
||||
[OPERATING_SYSTEMS.linux]: "PrerequisitesForLinuxMac",
|
||||
[OPERATING_SYSTEMS.mac]: "PrerequisitesForLinuxMac",
|
||||
[OPERATING_SYSTEMS.windows]: "PrerequisitesForWindows",
|
||||
},
|
||||
};
|
||||
|
||||
const codeToInstall = {
|
||||
[QISKIT_INSTALL.stable]: {
|
||||
[OPERATING_SYSTEMS.linux]: codeToInstallStableOnLinux,
|
||||
[OPERATING_SYSTEMS.mac]: codeToInstallStableOnMac,
|
||||
[OPERATING_SYSTEMS.windows]: codeToInstallStableOnWindows,
|
||||
},
|
||||
[QISKIT_INSTALL.master]: {
|
||||
[OPERATING_SYSTEMS.linux]: codeToInstallAllSystems,
|
||||
[OPERATING_SYSTEMS.mac]: codeToInstallAllSystems,
|
||||
[OPERATING_SYSTEMS.windows]: codeToInstallAllSystems,
|
||||
},
|
||||
};
|
||||
|
||||
const selectedOs = computed<string>(() => selectedOptions.os);
|
||||
|
||||
const prerequisitesToInstallQiskit = computed<string | null>(() => {
|
||||
const { "qiskit-install": qiskitInstall, os } = selectedOptions;
|
||||
|
||||
return prerequisites[qiskitInstall][os];
|
||||
});
|
||||
|
||||
const codeToInstallQiskit = computed<string>(() => {
|
||||
const { "qiskit-install": qiskitInstall, os } = selectedOptions;
|
||||
|
||||
return codeToInstall[qiskitInstall][os];
|
||||
});
|
||||
|
||||
const isActive = computed<boolean>(
|
||||
(choicesGroup: ChoicesGroup, option: string) => {
|
||||
return (selectedOptions as any)[choicesGroup.id] === option;
|
||||
}
|
||||
);
|
||||
|
||||
function selectOption(choicesGroup: ChoicesGroup, selectedOption: string) {
|
||||
(selectedOptions as any)[choicesGroup.id] = selectedOption;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.bx--btn-set .bx--btn:not(:focus) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.start-locally {
|
||||
@include carbon.breakpoint-down(md) {
|
||||
margin-bottom: carbon.$spacing-09;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
margin-bottom: carbon.$spacing-08;
|
||||
|
||||
@include carbon.breakpoint-up(lg) {
|
||||
$grid-columns: math.div(
|
||||
9,
|
||||
10
|
||||
); // Number of columns that the element will use at this breakpoint.
|
||||
|
||||
max-width: 100% * $grid-columns;
|
||||
padding-right: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
$grid-columns: math.div(
|
||||
7,
|
||||
11
|
||||
); // Number of columns that the element will use at this breakpoint.
|
||||
|
||||
max-width: 100% * $grid-columns;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-up(max) {
|
||||
$grid-columns: math.div(
|
||||
6,
|
||||
12
|
||||
); // Number of columns that the element will use at this breakpoint.
|
||||
|
||||
max-width: 100% * $grid-columns;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__options-group {
|
||||
display: grid;
|
||||
column-gap: carbon.$spacing-07;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
column-gap: carbon.$spacing-05;
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
max-width: 100%;
|
||||
color: qiskit.$text-color-light;
|
||||
padding-left: carbon.$spacing-07;
|
||||
margin-bottom: carbon.$spacing-07;
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
padding-left: carbon.$spacing-05;
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
}
|
||||
|
||||
&_active {
|
||||
border-color: qiskit.$border-active-color;
|
||||
border-width: 2px;
|
||||
color: qiskit.$text-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~carbon-components/scss/globals/scss/typography";
|
||||
|
||||
.start-locally {
|
||||
/**
|
||||
* TODO: Review if there is some mechanism, inside the Carbon Themes
|
||||
* framework, for applying a different theme to an specific component (#703).
|
||||
*
|
||||
* If there is not, we need some alternative way of overriding component
|
||||
* internal CSS. The following approach takes advantage of BEM methodology
|
||||
* and CSS specificity to override the internal CSS.
|
||||
*/
|
||||
&__prerequisites-section {
|
||||
margin-bottom: carbon.$spacing-05;
|
||||
|
||||
& .bx--accordion__item {
|
||||
border-bottom: none;
|
||||
border-top-color: qiskit.$border-color;
|
||||
}
|
||||
|
||||
& .bx--accordion__heading {
|
||||
&:hover::before {
|
||||
// To match default light theme UI hover, which is not among the Carbon
|
||||
// palette. 🤦
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
& .bx--accordion__arrow {
|
||||
fill: currentcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<template>
|
||||
<section class="start-on-the-cloud">
|
||||
<div class="start-on-the-cloud__wrapper">
|
||||
<div class="start-on-the-cloud__content">
|
||||
<h3>Start Online</h3>
|
||||
<p>
|
||||
Get started in the cloud without installing anything with IBM Quantum
|
||||
Lab.
|
||||
</p>
|
||||
<UiAppCta
|
||||
kind="ghost"
|
||||
:label="ibmQExperienceLink.label"
|
||||
:url="ibmQExperienceLink.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IBM_Q_EXPERIENCE } from "~/constants/appLinks";
|
||||
|
||||
const ibmQExperienceLink = IBM_Q_EXPERIENCE;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.start-on-the-cloud {
|
||||
&__wrapper {
|
||||
@include responsive-grid-bg("/images/grid/grid-white.svg", 36rem);
|
||||
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
background-position: bottom left;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
background-position: bottom right;
|
||||
height: 17rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: carbon.$spacing-07;
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
padding: carbon.$spacing-05;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<article class="bx--grid page-section quick-start">
|
||||
<h2>Quick Start</h2>
|
||||
<div class="bx--row quick-start__introduction">
|
||||
<div class="bx--col-md-5 bx--col-lg-8 bx--col-xlg-7 bx--col-max-6">
|
||||
<p class="quick-start__description">
|
||||
When you are looking to start Qiskit, you have two options. You can
|
||||
start Qiskit locally, which is much more secure and private, or you
|
||||
get started with Jupyter Notebooks hosted in IBM Quantum Lab.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<StartLocally
|
||||
class="bx--col-md-5 bx--col-lg-10 bx--col-xlg-11 bx--col-max-12"
|
||||
/>
|
||||
<StartOnTheCloud
|
||||
class="bx--col-md-3 bx--col-lg-6 bx--col-xlg-5 bx--col-max-4"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
|
||||
.quick-start {
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
margin-bottom: carbon.$spacing-06;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="content-menu-section__container">
|
||||
<qiskit-mega-menu-dropdown
|
||||
:content.prop="dropdownMenuContent"
|
||||
class="content-menu-section__dropdown bx--col-md-4 bx--col-lg-4 bx--no-gutter"
|
||||
class="content-menu-section__dropdown cds--col-md-4 cds--col-lg-4 cds--no-gutter"
|
||||
segment-component-name="Textbook mega menu"
|
||||
:track-performed-search="trackPerformedSearch"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<section class="external-recommended-readings">
|
||||
<div class="bx--grid bx--no-gutter">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-12">
|
||||
<div class="cds--grid cds--no-gutter">
|
||||
<div class="cds--row">
|
||||
<div class="cds--col-lg-12">
|
||||
<h2>External recommended readings</h2>
|
||||
<p v-if="preamble">
|
||||
{{ preamble }}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<h1 class="learn-header__headline">Qiskit Textbook (beta)</h1>
|
||||
<qiskit-mega-menu-dropdown
|
||||
:id="appMegaDropdownMenuId"
|
||||
class="learn-header__dropdown bx--col-md-4 bx--col-lg-4 bx--no-gutter"
|
||||
class="learn-header__dropdown cds--col-md-4 cds--col-lg-4 cds--no-gutter"
|
||||
:content.prop="dropdownMenuContent"
|
||||
segment-component-name="Textbook mega menu"
|
||||
:track-performed-search="trackPerformedSearch"
|
||||
|
|
@ -122,7 +122,7 @@ function trackPerformedSearch(uiElement: string, field: string) {
|
|||
}
|
||||
|
||||
&-wrapper {
|
||||
@include responsive-grid-bg-strip(
|
||||
@include qiskit.responsive-grid-bg-strip(
|
||||
"/images/grid/grid-hero-textbook.svg",
|
||||
auto,
|
||||
95%
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
<article
|
||||
v-for="{ title, description, courses } in learningSections"
|
||||
:key="title"
|
||||
class="bx--row"
|
||||
class="cds--row"
|
||||
>
|
||||
<div class="bx--col-xlg-4 bx--col-lg-4">
|
||||
<div class="cds--col-xlg-4 cds--col-lg-4">
|
||||
<h3 v-text="title" />
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<p v-html="description" />
|
||||
<!-- eslint-enable -->
|
||||
</div>
|
||||
<div class="bx--col-xlg-12 bx--col-lg-12">
|
||||
<div class="bx--row">
|
||||
<div class="cds--col-xlg-12 cds--col-lg-12">
|
||||
<div class="cds--row">
|
||||
<div
|
||||
v-for="{
|
||||
description: courseDescription,
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
cta,
|
||||
} in courses"
|
||||
:key="courseTitle"
|
||||
class="bx--col-xlg-8"
|
||||
class="cds--col-xlg-8"
|
||||
>
|
||||
<AppCard
|
||||
:cta-label="cta.label"
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
<article
|
||||
v-for="{ title, syllabi } in teachingSections"
|
||||
:key="title"
|
||||
class="bx--row"
|
||||
class="cds--row"
|
||||
>
|
||||
<div class="bx--col-xlg-4 bx--col-lg-4">
|
||||
<div class="cds--col-xlg-4 cds--col-lg-4">
|
||||
<h3>Community Syllabi</h3>
|
||||
<p>
|
||||
You can add any of these pre made curated syllabi to your
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--col-xlg-12 bx--col-lg-12">
|
||||
<div class="bx--row">
|
||||
<div class="cds--col-xlg-12 cds--col-lg-12">
|
||||
<div class="cds--row">
|
||||
<div
|
||||
v-for="{
|
||||
title: syllabusTitle,
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
university,
|
||||
} in syllabi"
|
||||
:key="syllabusTitle"
|
||||
class="bx--col-xlg-8"
|
||||
class="cds--col-xlg-8"
|
||||
>
|
||||
<SyllabusCard
|
||||
:url="cta.url"
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const stayInTouchLink = {
|
|||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.building-section {
|
||||
@include responsive-grid-bg("/images/grid/grid-right-dark.svg", 36rem);
|
||||
@include qiskit.responsive-grid-bg("/images/grid/grid-right-dark.svg", 36rem);
|
||||
|
||||
background-position: right -1rem bottom -2px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<section class="intro-section">
|
||||
<div class="intro-section__container">
|
||||
<div class="bx--row">
|
||||
<h2 class="bx--col-md-6 bx--col-lg-8">
|
||||
<div class="cds--row">
|
||||
<h2 class="cds--col-md-6 cds--col-lg-8">
|
||||
Qiskit Metal | quantum device design is now open
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="metal-grid">
|
||||
<div class="metal-grid__underlayer">
|
||||
<TheDarkHeader class="metal-grid__header" />
|
||||
<MetalTheDarkHeader class="metal-grid__header" />
|
||||
</div>
|
||||
<div class="metal-grid__container">
|
||||
<div
|
||||
|
|
@ -39,6 +39,8 @@ type CellCoordinates = { x: number; y: number };
|
|||
type CellSpecification = { c: number; r: number; isDecoherent?: boolean };
|
||||
type Decoherences = { [key: number]: number };
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const timeToRemoveNextCell = 5; // in ms
|
||||
const timeToLoadMetal = 50; // in ms
|
||||
const triggerPositionFromTopCenter: CellCoordinates = { x: -3, y: 2 };
|
||||
|
|
@ -119,7 +121,6 @@ const positions = computed<CellSpecification[][]>(() =>
|
|||
const fallingCells = computed<string[]>(() =>
|
||||
Array.from(
|
||||
(() => {
|
||||
const self = this;
|
||||
const centralColumn = Math.floor(noDecoherenceColumnCount / 2);
|
||||
const [rowStart, rowEnd] = [1, pattern.length + 1];
|
||||
const [columnStart, columnEnd] = [
|
||||
|
|
@ -135,7 +136,7 @@ const fallingCells = computed<string[]>(() =>
|
|||
if (cellIsAlwaysVisible) {
|
||||
continue;
|
||||
}
|
||||
yield self.getPosId({ c, r });
|
||||
yield getPosId({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -145,19 +146,19 @@ const fallingCells = computed<string[]>(() =>
|
|||
)
|
||||
);
|
||||
|
||||
const isHidden = computed((pos: CellSpecification) => {
|
||||
function isHidden(pos: CellSpecification): boolean {
|
||||
return hiddenCells.includes(getPosId(pos));
|
||||
});
|
||||
}
|
||||
|
||||
const isTrigger = computed((pos: CellSpecification) => {
|
||||
function isTrigger(pos: CellSpecification): boolean {
|
||||
const centralColumn = Math.floor(noDecoherenceColumnCount / 2);
|
||||
const { x: triggerX, y: triggerY } = triggerPositionFromTopCenter;
|
||||
const { c, r } = pos;
|
||||
return c === centralColumn + triggerX && r === triggerY;
|
||||
});
|
||||
}
|
||||
|
||||
function triggerAnimation(pos: CellSpecification) {
|
||||
if (!isTrigger.value(pos)) {
|
||||
if (!isTrigger(pos)) {
|
||||
return;
|
||||
}
|
||||
slotContainerIsHidden.value = true;
|
||||
|
|
@ -170,7 +171,7 @@ function removeCell() {
|
|||
|
||||
if (noMoreCells) {
|
||||
setTimeout(() => {
|
||||
this.$router.push({ path: "/metal" });
|
||||
router.push({ path: "/metal" });
|
||||
}, timeToLoadMetal);
|
||||
return;
|
||||
}
|
||||
|
|
@ -192,9 +193,9 @@ function getRowId(index: number): string {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:math";
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
@import "~carbon-components/scss/globals/scss/typography";
|
||||
|
||||
.metal-grid {
|
||||
position: relative;
|
||||
|
|
@ -212,7 +213,7 @@ function getRowId(index: number): string {
|
|||
overflow: hidden;
|
||||
background-color: carbon.$cool-gray-100;
|
||||
height: 42rem;
|
||||
margin-top: 1px;
|
||||
margin-top: -1px;
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
height: 26.5rem;
|
||||
|
|
@ -269,7 +270,7 @@ function getRowId(index: number): string {
|
|||
|
||||
&::before {
|
||||
content: "";
|
||||
border: 1px solidcarbon.$cool-gray-20;
|
||||
border: 1px solid carbon.$cool-gray-20;
|
||||
position: absolute;
|
||||
width: $large-cell - 1px;
|
||||
height: $large-cell - 1px;
|
||||
|
|
@ -319,98 +320,98 @@ function getRowId(index: number): string {
|
|||
|
||||
@keyframes anxious-tile {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-70;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-70;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
18% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(-3deg * $rotation-multiplier);
|
||||
}
|
||||
|
||||
26% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(4deg * $rotation-multiplier);
|
||||
}
|
||||
|
||||
34% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(-3deg * $rotation-multiplier);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
45% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(1deg * $rotation-multiplier);
|
||||
}
|
||||
|
||||
55% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
65% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-60;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-60;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-70;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-70;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes very-anxious-tile {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-70;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-70;
|
||||
transform: rotate(0deg) scale(1);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
10% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(0deg) scale($magnification);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
18% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(-5deg * $rotation-multiplier) scale($magnification);
|
||||
}
|
||||
|
||||
26% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(7deg * $rotation-multiplier) scale($magnification);
|
||||
}
|
||||
|
||||
34% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(-5deg * $rotation-multiplier) scale($magnification);
|
||||
}
|
||||
|
||||
45% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(3deg * $rotation-multiplier) scale($magnification);
|
||||
}
|
||||
|
||||
55% {
|
||||
box-shadow: 0 1px 5px 0carbon.$cool-gray-20;
|
||||
box-shadow: 0 1px 5px 0 carbon.$cool-gray-20;
|
||||
transform: rotate(0deg) scale($magnification);
|
||||
}
|
||||
|
||||
65% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-60;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-60;
|
||||
transform: rotate(0deg) scale($magnification);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0carbon.$cool-gray-70;
|
||||
box-shadow: 0 0 0 0 carbon.$cool-gray-70;
|
||||
transform: rotate(0deg) scale(1);
|
||||
background-color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,11 +151,12 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:math";
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
@import "~carbon-components/scss/globals/scss/typography";
|
||||
|
||||
.the-dark-header {
|
||||
@include responsive-grid-bg-strip(
|
||||
@include qiskit.responsive-grid-bg-strip(
|
||||
"/images/grid/grid-hero-dark.svg",
|
||||
auto,
|
||||
56rem
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
{{ subtitle }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<div v-if="hasTags(tags)" class="app-card__tags">
|
||||
<cv-tag v-for="tag in tags" :key="tag" :label="tag" kind="purple" />
|
||||
</div>
|
||||
|
|
@ -161,7 +161,7 @@ function hasTags(tags: string[] | TagTooltip[]) {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bx--row {
|
||||
.cds--row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: carbon.$spacing-03;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
{ 'app-cta_wider': isWider },
|
||||
]"
|
||||
v-bind="$attrs"
|
||||
:url="urlString"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<span class="app-cta__content">
|
||||
|
|
@ -22,8 +23,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ArrowDown16 from "@carbon/icons-vue/lib/arrow--down/16";
|
||||
import ArrowRight16 from "@carbon/icons-vue/lib/arrow--right/16";
|
||||
import ErrorOutline16 from "@carbon/icons-vue/lib/error--outline/16";
|
||||
import Launch16 from "@carbon/icons-vue/lib/launch/16";
|
||||
import type { GeneralLink } from "~~/constants/appLinks";
|
||||
import UiBasicLink from "~/components/ui/BasicLink.vue";
|
||||
|
||||
interface Props {
|
||||
isWider?: boolean;
|
||||
|
|
@ -39,22 +43,37 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
theme: "light",
|
||||
});
|
||||
|
||||
defineEmits(["click"]);
|
||||
|
||||
const urlString = computed(() => {
|
||||
if (typeof props.url === "string") {
|
||||
return props.url;
|
||||
}
|
||||
return props.url.url;
|
||||
});
|
||||
|
||||
const iconPerLinkType = computed(() => {
|
||||
const url = props.url;
|
||||
|
||||
if (props.label === "Under construction") {
|
||||
return "error-outline-16";
|
||||
return ErrorOutline16;
|
||||
}
|
||||
// TODO: Fix how we're using this function and what params it accepts
|
||||
if (UiBasicLink.isExternal(url as string)) {
|
||||
return "launch-16";
|
||||
if (isExternal(url as string)) {
|
||||
return Launch16;
|
||||
}
|
||||
// TODO: Fix how we're using this function and what params it accepts
|
||||
if (UiBasicLink.isIdAnchor(url as string)) {
|
||||
return "arrow-down-16";
|
||||
if (isIdAnchor(url as string)) {
|
||||
return ArrowDown16;
|
||||
}
|
||||
return "arrow-right-16";
|
||||
return ArrowRight16;
|
||||
});
|
||||
|
||||
function isExternal(url: string) {
|
||||
return !!url && url.startsWith("http");
|
||||
}
|
||||
|
||||
function isIdAnchor(url: string) {
|
||||
return !!url && url.startsWith("#");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="bx--row app-filters-results-layout">
|
||||
<div class="bx--col-xlg-2 bx--col-lg-4 bx--col-md-2 bx--col-sm-0">
|
||||
<div class="cds--row app-filters-results-layout">
|
||||
<div class="cds--col-xlg-2 cds--col-lg-4 cds--col-md-2 cds--col-sm-0">
|
||||
<slot name="filters-on-m-l-screen" />
|
||||
</div>
|
||||
<div class="bx--col-sm-4 bx--col-md-0">
|
||||
<div class="cds--col-sm-4 cds--col-md-0">
|
||||
<slot name="filters-on-s-screen" />
|
||||
</div>
|
||||
<div
|
||||
class="bx--col-xlg-14 bx--col-lg-12 bx--col-md-6 app-filters-results-layout__main-section"
|
||||
class="cds--col-xlg-14 cds--col-lg-12 cds--col-md-6 app-filters-results-layout__main-section"
|
||||
>
|
||||
<slot name="results" />
|
||||
<slot name="extra-info" />
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
@use "~/assets/scss/carbon.scss";
|
||||
|
||||
.app-filters-results-layout {
|
||||
::v-deep &__main-section {
|
||||
:deep(&__main-section) {
|
||||
@include carbon.breakpoint-down(md) {
|
||||
margin-top: carbon.$spacing-09;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep &__results-item {
|
||||
:deep(&__results-item) {
|
||||
margin-bottom: carbon.$spacing-06;
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<section class="app-helpful-resources-section">
|
||||
<h2 v-text="title" />
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<AppDescriptionCard
|
||||
v-for="resource in resources"
|
||||
:key="resource.title"
|
||||
class="bx--col-lg-4 bx--col-md-4 app-helpful-resources-section__card"
|
||||
class="cds--col-lg-4 cds--col-md-4 app-helpful-resources-section__card"
|
||||
v-bind="resource"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ defineProps<Props>();
|
|||
}
|
||||
|
||||
&-description {
|
||||
::v-deep li {
|
||||
:deep(li) {
|
||||
list-style-type: disc;
|
||||
margin-left: carbon.$spacing-06;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<section class="app-mosaic-section">
|
||||
<div class="bx--row">
|
||||
<h2 class="bx--col-md-4 bx--col-lg-8" v-text="title" />
|
||||
<div class="cds--row">
|
||||
<h2 class="cds--col-md-4 cds--col-lg-8" v-text="title" />
|
||||
</div>
|
||||
<div v-if="description" class="bx--row app-mosaic-section__introduction">
|
||||
<div class="bx--col-md-5 bx--col-lg-8 bx--col-xlg-7 bx--col-max-6">
|
||||
<div v-if="description" class="cds--row app-mosaic-section__introduction">
|
||||
<div class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
|
||||
<p class="app-mosaic-section__description" v-text="description" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<header class="app-page-header-fixed">
|
||||
<div class="bx--grid app-page-header-fixed__container">
|
||||
<div class="bx--row">
|
||||
<h1 class="bx--col-sm bx--col-md-6 bx--col-lg-10 bx--col-max-8">
|
||||
<div class="cds--grid app-page-header-fixed__container">
|
||||
<div class="cds--row">
|
||||
<h1 class="cds--col-sm cds--col-md-6 cds--col-lg-10 cds--col-max-8">
|
||||
<slot />
|
||||
</h1>
|
||||
</div>
|
||||
|
|
@ -11,8 +11,10 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.app-page-header-fixed {
|
||||
@include responsive-grid-bg-strip(
|
||||
@include qiskit.responsive-grid-bg-strip(
|
||||
"/images/grid/grid-hero-learn.svg",
|
||||
auto,
|
||||
28rem
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<header class="app-page-header">
|
||||
<div class="bx--grid">
|
||||
<div class="bx--row">
|
||||
<main class="bx--col app-page-header__main">
|
||||
<div class="cds--grid">
|
||||
<div class="cds--row">
|
||||
<main class="cds--col app-page-header__main">
|
||||
<div>
|
||||
<h1 class="app-page-header__headline">
|
||||
<slot name="title" />
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
:url="cta.url"
|
||||
/>
|
||||
</main>
|
||||
<aside class="bx--col-lg-5 bx--col-md-4 app-page-header__aside">
|
||||
<aside class="cds--col-lg-5 cds--col-md-4 app-page-header__aside">
|
||||
<div>
|
||||
<div class="app-page-header__card-title-wrapper">
|
||||
<div class="app-page-header__card-title" v-text="cardTitle" />
|
||||
|
|
@ -47,7 +47,7 @@ defineProps<Props>();
|
|||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.app-page-header {
|
||||
@include responsive-grid-bg-strip(
|
||||
@include qiskit.responsive-grid-bg-strip(
|
||||
"/images/grid/grid-hero-learn.svg",
|
||||
auto,
|
||||
28rem
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<header class="app-page-header-with-img">
|
||||
<div class="bx--grid">
|
||||
<div v-if="backLink" class="bx--row app-page-header-with-img__back-link">
|
||||
<div class="cds--grid">
|
||||
<div v-if="backLink" class="cds--row app-page-header-with-img__back-link">
|
||||
<UiAppNavBackLink
|
||||
:label="backLink.label"
|
||||
:segment="backLink.segment"
|
||||
:url="backLink.url"
|
||||
/>
|
||||
</div>
|
||||
<div class="bx--row app-page-header-with-img__content">
|
||||
<div class="cds--row app-page-header-with-img__content">
|
||||
<h1 class="app-page-header-with-img__headline">
|
||||
<slot name="title" />
|
||||
</h1>
|
||||
|
|
@ -49,7 +49,7 @@ defineProps<Props>();
|
|||
&__back-link {
|
||||
height: 0;
|
||||
|
||||
::v-deep .app-nav-back-link {
|
||||
:deep(.app-nav-back-link) {
|
||||
padding-left: carbon.$spacing-05;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<component
|
||||
:is="isNuxtLink ? 'nuxt-link' : 'a'"
|
||||
:is="isNuxtLink ? 'NuxtLink' : 'a'"
|
||||
:href="isAnchor && url"
|
||||
:to="isNuxtLink && url"
|
||||
:style="hasLink && 'cursor:pointer'"
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<div class="syntax-highlight">
|
||||
<cv-button
|
||||
size="small"
|
||||
title="Copy to clipboard"
|
||||
class="syntax-highlight__copy-button"
|
||||
@click="[copyToClipboard(code), trackClickEvent(segmentAction)]"
|
||||
>
|
||||
Copy
|
||||
</cv-button>
|
||||
<code class="syntax-highlight__code" v-text="code" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CtaClickedEventProp } from "~/types/segment";
|
||||
|
||||
interface Props {
|
||||
code?: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
code: "",
|
||||
});
|
||||
|
||||
const { trackClickEvent } = useSegment();
|
||||
|
||||
const segmentAction: CtaClickedEventProp = computed(() => ({
|
||||
cta: `${props.label}: Copy Code Sample`,
|
||||
location: "syntax-highlight",
|
||||
}));
|
||||
|
||||
function copyToClipboard(code: string) {
|
||||
navigator.clipboard.writeText(code);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.syntax-highlight {
|
||||
position: relative;
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
padding: carbon.$spacing-05 carbon.$spacing-07;
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
padding: carbon.$spacing-05 carbon.$spacing-05;
|
||||
}
|
||||
|
||||
&__copy-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
padding: carbon.$spacing-03 carbon.$spacing-05;
|
||||
text-transform: lowercase;
|
||||
background-size: 200% 100%;
|
||||
background-position-x: 100%;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
qiskit.$button-background-color-light 0%,
|
||||
qiskit.$button-background-color-light 50%,
|
||||
qiskit.$background-color-secondary 50%,
|
||||
qiskit.$background-color-secondary 100%
|
||||
);
|
||||
transition: background-position-x 0.3s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-position-x: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
// TODO: Fix this composable to work with Vue 3
|
||||
import { ref, onMounted, onUpdated, onBeforeUnmount } from "vue";
|
||||
import { onBeforeRouteUpdate } from "vue-router";
|
||||
|
||||
export function useScrollBetweenSections() {
|
||||
const activeSection = ref("");
|
||||
const _observer: IntersectionObserver | null = ref(null);
|
||||
const _observer: Ref<IntersectionObserver | null> = ref(null);
|
||||
// const root: Ref<HTMLElement | null> = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
const threshold = [...Array(25).keys()].map((x) => (4 * x) / 100);
|
||||
const windowTriggerMargins = "-16px 0px -80% 0px";
|
||||
this._observer = new IntersectionObserver(this._onSectionAppearing, {
|
||||
_observer.value = new IntersectionObserver(_onSectionAppearing, {
|
||||
root: null, // the viewport
|
||||
rootMargin: windowTriggerMargins,
|
||||
threshold,
|
||||
});
|
||||
this.updateObserved();
|
||||
// updateObserved();
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
this.$nextTick(() => this.updateObserved());
|
||||
// nextTick(() => updateObserved());
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
this._observer && this._observer.disconnect();
|
||||
_observer.value && _observer.value.disconnect();
|
||||
});
|
||||
|
||||
// TODO: This is the original code. The onBeforeRouteEnter doesn't
|
||||
|
|
@ -36,17 +38,17 @@ export function useScrollBetweenSections() {
|
|||
// }
|
||||
|
||||
onBeforeRouteUpdate((route: any, _: any, next: any) => {
|
||||
this._parseSectionFromUrl(route);
|
||||
_parseSectionFromUrl(route);
|
||||
next();
|
||||
});
|
||||
|
||||
function updateObserved() {
|
||||
(this.$el as HTMLElement)
|
||||
.querySelectorAll(".scrollable")
|
||||
.forEach((section) => {
|
||||
(this._observer as IntersectionObserver).observe(section);
|
||||
});
|
||||
}
|
||||
// function updateObserved() {
|
||||
// (root!.value as HTMLElement)
|
||||
// .querySelectorAll(".scrollable")
|
||||
// .forEach((section) => {
|
||||
// (_observer.value as IntersectionObserver).observe(section);
|
||||
// });
|
||||
// }
|
||||
|
||||
function _onSectionAppearing(entries: Array<IntersectionObserverEntry>) {
|
||||
let highestTopValue = Infinity;
|
||||
|
|
@ -59,9 +61,9 @@ export function useScrollBetweenSections() {
|
|||
const triggerWindowBottom = rootBounds.bottom;
|
||||
const onTop = targetTop >= 0 && targetTop <= triggerWindowBottom;
|
||||
if (onTop && targetTop < highestTopValue) {
|
||||
if (this.activeSection !== target.id) {
|
||||
this.activeSection = target.id;
|
||||
this.activeSectionChanged();
|
||||
if (activeSection.value !== target.id) {
|
||||
activeSection.value = target.id;
|
||||
activeSectionChanged();
|
||||
}
|
||||
highestTopValue = targetTop;
|
||||
}
|
||||
|
|
@ -74,7 +76,7 @@ export function useScrollBetweenSections() {
|
|||
function activeSectionChanged() {}
|
||||
|
||||
function _parseSectionFromUrl(route: any) {
|
||||
this.activeSection = route.hash.substr(1);
|
||||
activeSection.value = route.hash.substr(1);
|
||||
}
|
||||
|
||||
return { activeSection };
|
||||
|
|
|
|||
|
|
@ -144,11 +144,6 @@ enum QuantumComputingLabs {
|
|||
Lab9 = "https://learn.qiskit.org/course/ch-labs/lab-9-quantum-simulation-as-a-search-algorithm",
|
||||
}
|
||||
|
||||
const IBM_Q_EXPERIENCE: GeneralLink = {
|
||||
url: "https://quantum-computing.ibm.com/lab",
|
||||
label: "IBM Quantum Lab",
|
||||
};
|
||||
|
||||
export {
|
||||
GeneralLink,
|
||||
EVENT_REQUEST_LINK,
|
||||
|
|
@ -165,5 +160,4 @@ export {
|
|||
QuantumHardwareCircuitsUrl,
|
||||
QuantumComputingLabs,
|
||||
GamesAndDemos,
|
||||
IBM_Q_EXPERIENCE,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ class AdvocatesAirtableRecords extends AirtableRecords {
|
|||
|
||||
const imagePublicPath = `/images/advocates/downloaded/${this.id}.jpg`;
|
||||
|
||||
return await this.storeImage(imageUrl, `static/${imagePublicPath}`)
|
||||
return await this.storeImage(imageUrl, `public/${imagePublicPath}`)
|
||||
.then(() => imagePublicPath)
|
||||
.catch(() => fallbackImage);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -372,7 +372,7 @@ class EventsAirtableRecords extends AirtableRecords {
|
|||
|
||||
const imagePublicPath = `/images/events/downloaded/${this.id}.jpg`;
|
||||
|
||||
return await this.storeImage(imageUrl, `static/${imagePublicPath}`)
|
||||
return await this.storeImage(imageUrl, `public/${imagePublicPath}`)
|
||||
.then(() => imagePublicPath)
|
||||
.catch(() => fallbackImage);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,12 @@
|
|||
color: qiskit.$text-color-lighter-2;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
h2,
|
||||
p {
|
||||
color: qiskit.$text-color-lighter-2;
|
||||
}
|
||||
:deep(h2),
|
||||
:deep(p) {
|
||||
color: qiskit.$text-color-lighter-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: qiskit.$text-color-white;
|
||||
}
|
||||
:deep(h3) {
|
||||
color: qiskit.$text-color-white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,3 @@ dist
|
|||
|
||||
# Service worker
|
||||
sw.*
|
||||
|
||||
# Pictures downloaded from airtable
|
||||
static/images/advocates/downloaded/*
|
||||
static/images/events/downloaded/*
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
"devDependencies": {
|
||||
"@carbon/icons-vue": "^10.49.1",
|
||||
"@carbon/styles": "^1.22.0",
|
||||
"@carbon/type": "^11.15.0",
|
||||
"@carbon/web-components": "^1.24.0",
|
||||
"@ibm/plex": "^6.1.1",
|
||||
"@nuxtjs/eslint-config-typescript": "^12.0.0",
|
||||
"@qiskit/web-components": "^0.11.2",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@
|
|||
"devDependencies": {
|
||||
"@carbon/icons-vue": "^10.49.1",
|
||||
"@carbon/styles": "^1.22.0",
|
||||
"@carbon/type": "^11.15.0",
|
||||
"@carbon/web-components": "^1.24.0",
|
||||
"@ibm/plex": "^6.1.1",
|
||||
"@nuxtjs/eslint-config-typescript": "^12.0.0",
|
||||
"@qiskit/web-components": "^0.11.2",
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
<br />
|
||||
and the Qiskit community
|
||||
</AppPageHeaderFixed> -->
|
||||
<section id="ecosystem" class="bx--grid ecosystem">
|
||||
<section id="ecosystem" class="cds--grid ecosystem">
|
||||
<h2>Ecosystem Resources</h2>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-md-5 bx--col-lg-8 bx--col-xlg-7 bx--col-max-6">
|
||||
<div class="cds--row">
|
||||
<div class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
|
||||
<p>
|
||||
The Ecosystem consists of projects, tools, utilities, libraries and
|
||||
tutorials from a broad community of developers and researchers. The
|
||||
|
|
@ -51,11 +51,11 @@
|
|||
/>
|
||||
</template>
|
||||
<template slot="results">
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<div
|
||||
v-for="(member, index) in filteredMembers"
|
||||
:key="index"
|
||||
class="bx--col-sm-4 bx--col-xlg-8"
|
||||
class="cds--col-sm-4 cds--col-xlg-8"
|
||||
>
|
||||
<AppCard
|
||||
class="project-card"
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}"
|
||||
:to="member.url"
|
||||
>
|
||||
<div class="bx--row">
|
||||
<div class="cds--row">
|
||||
<p class="project-card__license">
|
||||
{{ member.licence }}
|
||||
</p>
|
||||
|
|
@ -224,7 +224,7 @@ useHead({
|
|||
// TODO: Review old CSS
|
||||
// .ecosystem-header {
|
||||
// &__hero {
|
||||
// .bx--col-max-8 {
|
||||
// .cds--col-max-8 {
|
||||
// max-width: 100%;
|
||||
// flex: 0 0 100%;
|
||||
// }
|
||||
|
|
@ -243,13 +243,13 @@ useHead({
|
|||
// }
|
||||
// }
|
||||
|
||||
// .bx--col-sm-4 {
|
||||
// .cds--col-sm-4 {
|
||||
// padding-bottom: carbon.$spacing-08;
|
||||
// }
|
||||
|
||||
// .app-card {
|
||||
// &__description {
|
||||
// .bx--row {
|
||||
// .cds--row {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@
|
|||
</template>
|
||||
</AppPageHeaderWithCard> -->
|
||||
|
||||
<div class="bx--grid fall-fest-page__content">
|
||||
<div class="cds--grid fall-fest-page__content">
|
||||
<section class="fall-fest-page__section">
|
||||
<!-- <UniversityDirectorySection /> -->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bx--grid fall-fest-page__content">
|
||||
<div class="cds--grid fall-fest-page__content">
|
||||
<section class="fall-fest-page__section">
|
||||
<!-- <h2 v-text="agendaData.title" /> -->
|
||||
<!-- <p v-text="agendaData.subtitle" /> -->
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
/>
|
||||
from the world’s largest quantum computing community
|
||||
</AppPageHeaderFixed> -->
|
||||
<div class="bx--grid">
|
||||
<div class="cds--grid">
|
||||
<div class="event-page__tabs">
|
||||
<!-- <client-only>
|
||||
<cv-tabs aria-label="Event tabs" @tab-selected="selectTab">
|
||||
|
|
@ -57,11 +57,11 @@
|
|||
{{ emptyCard.description }}
|
||||
</div>
|
||||
</AppCard>
|
||||
<div v-else class="bx--row">
|
||||
<div v-else class="cds--row">
|
||||
<div
|
||||
v-for="event in filteredEvents"
|
||||
:key="`${event.title}-${event.place}-${event.date}`"
|
||||
class="bx--col-sm-4 bx--col-xlg-8"
|
||||
class="cds--col-sm-4 cds--col-xlg-8"
|
||||
>
|
||||
<EventCard
|
||||
class="app-filters-results-layout__results-item"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</EventCard>
|
||||
</template>
|
||||
</AppPageHeaderWithCard> -->
|
||||
<div class="bx--grid">
|
||||
<div class="cds--grid">
|
||||
<!-- <AppMosaicSection
|
||||
class="seminar-series-page__section"
|
||||
:title="mosaicSectionTitle"
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</template>
|
||||
</AppPageHeaderWithCard> -->
|
||||
|
||||
<div class="bx--grid summer-school-page__content">
|
||||
<div class="cds--grid summer-school-page__content">
|
||||
<!-- <AppMosaicSection
|
||||
class="summer-school-page__section"
|
||||
:title="mosaicData.title"
|
||||
|
|
|
|||
|
|
@ -1,40 +1,33 @@
|
|||
<template>
|
||||
<!-- TODO: review if class is needed or can be deleted -->
|
||||
<main class="landing-page">
|
||||
Index page
|
||||
<!-- TODO: Integrate components -->
|
||||
<!-- <TheHeroMoment :version="qiskitVersion" /> -->
|
||||
<!-- <TheQuickStart /> -->
|
||||
<!-- <TheQiskitCapabilitiesSection /> -->
|
||||
<!-- <TheLearnSection /> -->
|
||||
<main>
|
||||
<LandingTheHeroMoment :version="qiskitVersion" />
|
||||
<LandingTheQuickStart />
|
||||
<LandingTheQiskitCapabilitiesSectionIndexComponent />
|
||||
<LandingTheLearnSectionIndexComponent />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO: Integrate old code
|
||||
// import axios from 'axios'
|
||||
interface PackageInfo {
|
||||
info: {
|
||||
version: string;
|
||||
};
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
layout: "default-max",
|
||||
});
|
||||
|
||||
useHead({
|
||||
// TODO: Review if this is the intended title
|
||||
title: "Qiskit",
|
||||
});
|
||||
|
||||
// TODO: Refactor async data fetching in pages
|
||||
// @Component({
|
||||
// async asyncData () {
|
||||
// const qiskitPackageInfoUrl = 'https://pypi.org/pypi/qiskit/json'
|
||||
// const packageInfo = (await axios.get(qiskitPackageInfoUrl)).data
|
||||
// return {
|
||||
// qiskitVersion: packageInfo.info.version
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// TODO: Refactor tracking
|
||||
// export default class LandingPage {
|
||||
// routeName = 'qiskit-landing-page'
|
||||
// }
|
||||
// const routeName = "qiskit-landing-page";
|
||||
|
||||
const { data: packageInfo } = await useAsyncData<PackageInfo>(() =>
|
||||
$fetch("https://pypi.org/pypi/qiskit/json")
|
||||
);
|
||||
|
||||
const qiskitVersion = packageInfo.value?.info.version ?? "";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
/>
|
||||
quantum computing SDK
|
||||
</AppPageHeaderFixed> -->
|
||||
<!-- <section id="contentContainer" class="bx--grid page-section">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-sm-0 bx--col-md-2 bx--col-lg-3">
|
||||
<!-- <section id="contentContainer" class="cds--grid page-section">
|
||||
<div class="cds--row">
|
||||
<div class="cds--col-sm-0 cds--col-md-2 cds--col-lg-3">
|
||||
<div class="overview-page__table-of-contents">
|
||||
<TheTableOfContents
|
||||
:entries="tocEntries"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<UiAppCta kind="ghost" :label="quickStartLink.label" :url="quickStartLink.url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--col-lg-13 bx--col-md-6">
|
||||
<div class="cds--col-lg-13 cds--col-md-6">
|
||||
<AppIntroductoryContent
|
||||
v-for="section in contentSections"
|
||||
:id="section.id"
|
||||
|
|
|
|||
|
|
@ -8,17 +8,12 @@ import ErrorFilled16 from "@carbon/icons-vue/lib/error--filled/16";
|
|||
import Time20 from "@carbon/icons-vue/lib/time/20";
|
||||
import Education20 from "@carbon/icons-vue/lib/education/20";
|
||||
import Map20 from "@carbon/icons-vue/lib/map/20";
|
||||
import ArrowRight20 from "@carbon/icons-vue/lib/arrow--right/20";
|
||||
import ArrowRight16 from "@carbon/icons-vue/lib/arrow--right/16";
|
||||
import ArrowLeft16 from "@carbon/icons-vue/lib/arrow--left/16";
|
||||
import ArrowDown16 from "@carbon/icons-vue/lib/arrow--down/16";
|
||||
import LogoTwitter20 from "@carbon/icons-vue/lib/logo--twitter/20";
|
||||
import LogoSlack20 from "@carbon/icons-vue/lib/logo--slack/20";
|
||||
import LogoYouTube20 from "@carbon/icons-vue/lib/logo--youtube/20";
|
||||
import LogoMedium20 from "@carbon/icons-vue/lib/logo--medium/20";
|
||||
import LogoGitHub32 from "@carbon/icons-vue/lib/logo--github/32";
|
||||
import Launch16 from "@carbon/icons-vue/lib/launch/16";
|
||||
import ErrorOutline16 from "@carbon/icons-vue/lib/error--outline/16";
|
||||
import Copy16 from "@carbon/icons-vue/lib/copy/16";
|
||||
import StarFilled16 from "@carbon/icons-vue/lib/star--filled/16";
|
||||
|
||||
|
|
@ -30,17 +25,12 @@ Vue.use(CarbonIconsVue, {
|
|||
Time20,
|
||||
Education20,
|
||||
Map20,
|
||||
ArrowRight20,
|
||||
ArrowRight16,
|
||||
ArrowLeft16,
|
||||
ArrowDown16,
|
||||
LogoTwitter20,
|
||||
LogoSlack20,
|
||||
LogoYouTube20,
|
||||
LogoMedium20,
|
||||
LogoGitHub32,
|
||||
Launch16,
|
||||
ErrorOutline16,
|
||||
CheckmarkFilled16,
|
||||
ErrorFilled16,
|
||||
PendingFilled16,
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 490 B |
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 670 KiB After Width: | Height: | Size: 670 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 797 KiB After Width: | Height: | Size: 797 KiB |
|
Before Width: | Height: | Size: 550 KiB After Width: | Height: | Size: 550 KiB |
|
Before Width: | Height: | Size: 491 KiB After Width: | Height: | Size: 491 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue