mirror of https://github.com/Qiskit/qiskit.org.git
Add nuxt/content for content management and add initial learning resources (#715)
* Add optional() helper for adding optional configurations * Clarify the environment variable for analytics * Add nuxt/content for managing new-content * Remove legacy index content * Update nuxt types and JS target * Add new content and initial learning resources
This commit is contained in:
Salvador de la Puente González
Salvador de la Puente González
parent
0673d79956
commit
52d45e4b93
10
README.md
10
README.md
|
|
@ -51,7 +51,7 @@
|
|||
- [🚀 Get Up and Running](#-get-up-and-running)
|
||||
- [🏭 Content Generation](#-content-generation)
|
||||
- [🎚️Other environment flags](#️other-environment-flags)
|
||||
- [Show cookies preferences](#show-cookies-preferences)
|
||||
- [Enable analytics](#enable-analytics)
|
||||
- [🧐 Folder Structure](#-folder-structure)
|
||||
- [✏️ How to Contribute](#️-how-to-contribute)
|
||||
- [🛠 Available Scripts](#-available-scripts)
|
||||
|
|
@ -116,11 +116,11 @@ GENERATE_CONTENT=1 AIRTABLE_API_KEY=<your airtable api key> npm run dev
|
|||
|
||||
## 🎚️Other environment flags
|
||||
|
||||
### Show cookies preferences
|
||||
### Enable analytics
|
||||
|
||||
In production, a cookies settings dialog can be found for the user to customize
|
||||
her privacy settings. In development, it is disabled by default. To enable, set
|
||||
the `SHOW_COOKIES_SETTINGS` environment variable.
|
||||
In production, the user can authorize us to gather analytics so we can identify
|
||||
trends and improve our user experience. In development, analytics are disabled
|
||||
by default. To enable, set the `ENABLE_ANALYTICS` environment variable.
|
||||
|
||||
## 🧐 Folder Structure
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.nuxt-content p,
|
||||
&__paragraph {
|
||||
@include type-style('body-long-01');
|
||||
color: $gray-60;
|
||||
|
|
|
|||
|
|
@ -8,16 +8,12 @@
|
|||
alt=""
|
||||
>
|
||||
<div class="learning-resource-card__content">
|
||||
<header>
|
||||
<h3 class="copy__subtitle">
|
||||
{{ title }}
|
||||
</h3>
|
||||
</header>
|
||||
<p class="copy__paragraph">
|
||||
{{ description }}Lipsum
|
||||
</p>
|
||||
<h3 class="copy__subtitle">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<slot />
|
||||
<AppCta class="copy__link" :url="to">
|
||||
{{ ctaLabel }}Movidas
|
||||
{{ ctaLabel }}
|
||||
</AppCta>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -34,7 +30,6 @@ import AppCta from '~/components/ui/AppCta.vue'
|
|||
export default class extends Vue {
|
||||
@Prop(String) image
|
||||
@Prop(String) title
|
||||
@Prop(String) description
|
||||
@Prop(String) ctaLabel
|
||||
@Prop(String) to
|
||||
}
|
||||
|
|
@ -74,6 +69,7 @@ export default class extends Vue {
|
|||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
title: Become an advocate
|
||||
image: /images/qiskit-advocates.jpg
|
||||
---
|
||||
A global program that provides support to the individuals who actively work on assisting and growing the Qiskit community.
|
||||
|
||||
- Educators can request funding for events and projects
|
||||
- Access to a network of experts
|
||||
- Prioritized access to the IBM Quantum hardware
|
||||
- Opportunities to get your work officially supported by IBM
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Join Slack
|
||||
to: http://ibm.co/joinqiskitslack
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Qiskit Hackathons
|
||||
image: https://madrid.qiskit.camp/img/bg-low-res.jpg
|
||||
to: /events
|
||||
---
|
||||
Host local Qiskit Hackathons in your community and help shape the future of quantum computing!
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Qiskit Camp Europe
|
||||
image: /images/events/promo-europe.jpg
|
||||
to: /events/europe
|
||||
---
|
||||
Happening from **September 12 to 15** at an incredible location on the top of The Shilthorn Peak, in the heart of The Alpes, **Qiskit Camp Europe** is the next big thing you cannot miss.
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Qiskit Camps
|
||||
image: /images/qiskit-camp-campers.jpg
|
||||
to: /events
|
||||
---
|
||||
Experience our Qiskit Camps, where attendees will learn in an immersive environment, collaborate with peers, and enjoy meaningful experiences resulting in a more connected and impactful global quantum community.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Stack Exchange
|
||||
to: https://quantumcomputing.stackexchange.com/questions/tagged/qiskit
|
||||
---
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
-
|
||||
title: Save the date!
|
||||
collections:
|
||||
major:
|
||||
- qiskit-camp-europe.md
|
||||
-
|
||||
title: Gather together
|
||||
collections:
|
||||
regular:
|
||||
- qiskit-camps.md
|
||||
- local-events.md
|
||||
-
|
||||
title: Get involved
|
||||
collections:
|
||||
major:
|
||||
- advocate-program.md
|
||||
-
|
||||
title: Get help
|
||||
collections:
|
||||
minor:
|
||||
- join-slack.md
|
||||
- stack-exchange.md
|
||||
- twitter.md
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Twitter
|
||||
to: https://twitter.com/Qiskit
|
||||
---
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Qiskit blog
|
||||
to: https://medium.com/qiskit
|
||||
image: /images/landing-page/feature-hardware.png
|
||||
ctaLabel: Read the docs
|
||||
classifications:
|
||||
- level: advanced
|
||||
time: 1 week
|
||||
- level: beginner
|
||||
time: 1 month
|
||||
---
|
||||
In this post, we will share an overview of our plans for Qiskit, including its four elements, each of which forms a pillar of quantum computing software.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Textbook
|
||||
to: /textbook
|
||||
image: /images/landing-page/feature-hardware.png
|
||||
ctaLabel: Read the textbook
|
||||
classifications:
|
||||
- level: advanced
|
||||
time: 1 week
|
||||
- level: beginner
|
||||
time: 1 month
|
||||
---
|
||||
Qiskit is a quantum computing SDK written in the python so you won’t need to learn a new language. If you need up your python skills before getting started, we recommend Khan Academy’s course.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Tutorials
|
||||
to: https://github.com/Qiskit/qiskit-tutorials
|
||||
image: /images/landing-page/feature-hardware.png
|
||||
ctaLabel: Go to Khan Academy
|
||||
classifications:
|
||||
- level: advanced
|
||||
time: 1 week
|
||||
- level: beginner
|
||||
time: 1 month
|
||||
---
|
||||
Qiskit is a quantum computing SDK written in the python so you won’t need to learn a new language. If you need up your python skills before getting started, we recommend Khan Academy’s course.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Qiskit video series
|
||||
to: https://www.youtube.com/Qiskit
|
||||
image: /images/landing-page/feature-hardware.png
|
||||
ctaLabel: Watch the series
|
||||
classifications:
|
||||
- level: advanced
|
||||
time: 1 week
|
||||
- level: beginner
|
||||
time: 1 month
|
||||
---
|
||||
In this post, we will share an overview of our plans for Qiskit, including its four elements, each of which forms a pillar of quantum computing software.
|
||||
|
|
@ -12,7 +12,7 @@ import { Configuration } from '@nuxt/types'
|
|||
import pkg from './package.json'
|
||||
import fetchEvents from './hooks/update-events'
|
||||
|
||||
const { NODE_ENV, SHOW_COOKIES_SETTINGS, GENERATE_CONTENT, AIRTABLE_API_KEY } = process.env
|
||||
const { NODE_ENV, ENABLE_ANALYTICS, GENERATE_CONTENT, AIRTABLE_API_KEY } = process.env
|
||||
|
||||
const IS_PRODUCTION = NODE_ENV === 'production'
|
||||
|
||||
|
|
@ -69,6 +69,13 @@ const config: Configuration = {
|
|||
'~/static/css/fonts.css'
|
||||
],
|
||||
|
||||
/*
|
||||
** Content
|
||||
*/
|
||||
content: {
|
||||
dir: 'new-content'
|
||||
},
|
||||
|
||||
/*
|
||||
** Plugins to load before mounting the App.
|
||||
*/
|
||||
|
|
@ -77,24 +84,18 @@ const config: Configuration = {
|
|||
'~/plugins/highlight-js.ts',
|
||||
'~/plugins/carbon.ts',
|
||||
'~/plugins/deep-load.ts',
|
||||
{
|
||||
src: IS_PRODUCTION || SHOW_COOKIES_SETTINGS
|
||||
? '~/plugins/hotjar.ts'
|
||||
: '',
|
||||
mode: 'client'
|
||||
},
|
||||
{
|
||||
src: IS_PRODUCTION || SHOW_COOKIES_SETTINGS
|
||||
? '~/plugins/segment-analytics.ts'
|
||||
: '',
|
||||
mode: 'client'
|
||||
}
|
||||
{ src: '~/plugins/hotjar.ts', mode: 'client' },
|
||||
...optional(
|
||||
IS_PRODUCTION || ENABLE_ANALYTICS,
|
||||
{ src: '~/plugins/segment-analytics.ts', mode: 'client' } as const
|
||||
)
|
||||
],
|
||||
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
modules: [
|
||||
'@nuxt/content',
|
||||
'@nuxtjs/style-resources',
|
||||
'@nuxtjs/axios'
|
||||
],
|
||||
|
|
@ -226,6 +227,10 @@ const config: Configuration = {
|
|||
}
|
||||
}
|
||||
|
||||
function optional<T> (test: any, ...plugins: T[]): T[] {
|
||||
return test ? plugins : []
|
||||
}
|
||||
|
||||
async function generateContent () {
|
||||
if (AIRTABLE_API_KEY) {
|
||||
consola.info('Generating community event previews')
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
|
|
@ -19,53 +19,55 @@
|
|||
"node": ">=12.x"
|
||||
},
|
||||
"dependencies": {
|
||||
"@carbon/colors": "^10.9.2",
|
||||
"@carbon/icons-vue": "^10.8.2",
|
||||
"@carbon/themes": "^10.10.1",
|
||||
"@carbon/vue": "^2.23.0",
|
||||
"@nuxtjs/axios": "^5.9.3",
|
||||
"carbon-components": "^10.9.3",
|
||||
"@carbon/colors": "^10.11.0",
|
||||
"@carbon/icons-vue": "^10.13.0",
|
||||
"@carbon/themes": "^10.14.0",
|
||||
"@carbon/vue": "^2.28.0",
|
||||
"@nuxtjs/axios": "^5.11.0",
|
||||
"carbon-components": "^10.15.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"npm": "^6.13.4",
|
||||
"nuxt": "^2.10.2",
|
||||
"ts-node": "^8.5.4",
|
||||
"npm": "^6.14.5",
|
||||
"nuxt": "^2.13.3",
|
||||
"ts-node": "^8.10.2",
|
||||
"vue-highlightjs": "^1.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/content": "^1.4.1",
|
||||
"@nuxt/types": "^2.13.3",
|
||||
"@nuxt/typescript-build": "^0.3.10",
|
||||
"@nuxt/typescript-runtime": "^0.2.10",
|
||||
"@nuxtjs/eslint-config": "2.0.0",
|
||||
"@nuxtjs/style-resources": "^1.0.0",
|
||||
"@types/jest": "^24.0.23",
|
||||
"@types/jest": "^24.9.1",
|
||||
"@types/markdown-it": "0.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^2.10.0",
|
||||
"@typescript-eslint/parser": "^2.10.0",
|
||||
"@vue/test-utils": "^1.0.0-beta.30",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.34.0",
|
||||
"@vue/test-utils": "^1.0.3",
|
||||
"airtable": "^0.8.1",
|
||||
"babel-bridge": "^1.12.11",
|
||||
"babel-core": "^6.26.3",
|
||||
"d3": "^5.14.2",
|
||||
"d3": "^5.16.0",
|
||||
"datamaps": "github:delapuente/datamaps#0.5.10",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-config-standard": "^14.1.0",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-jest": "^23.1.1",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-standard": "^14.1.1",
|
||||
"eslint-plugin-import": "^2.22.0",
|
||||
"eslint-plugin-jest": "^23.17.1",
|
||||
"eslint-plugin-node": "^10.0.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"eslint-plugin-vue": "^6.0.1",
|
||||
"frontmatter-markdown-loader": "^3.1.0",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"frontmatter-markdown-loader": "^3.6.0",
|
||||
"jest": "^24.9.0",
|
||||
"markdown-it-anchor": "^5.2.5",
|
||||
"markdown-it-anchor": "^5.3.0",
|
||||
"markdown-it-link-attributes": "^3.0.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"nodemon": "^2.0.1",
|
||||
"sass-loader": "^8.0.0",
|
||||
"nodemon": "^2.0.4",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sass-mq": "^5.0.1",
|
||||
"topojson": "^3.0.2",
|
||||
"ts-jest": "^24.2.0",
|
||||
"ts-jest": "^24.3.0",
|
||||
"uslug": "^1.0.4",
|
||||
"vue-jest": "^3.0.5",
|
||||
"vue-property-decorator": "^8.3.0"
|
||||
"vue-jest": "^3.0.6",
|
||||
"vue-property-decorator": "^8.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,15 +55,15 @@
|
|||
<section class="the-learning-resources-list__results">
|
||||
<template v-if="hasEvents">
|
||||
<LearningResourceCard
|
||||
v-for="event in filteredEvents"
|
||||
:key="`${event.place}-${event.date}`"
|
||||
:type="formatType(event.types)"
|
||||
:title="event.title"
|
||||
:image="event.image"
|
||||
:location="event.location"
|
||||
:date="event.date"
|
||||
:to="event.to"
|
||||
/>
|
||||
v-for="learningResource in resources"
|
||||
:key="learningResource.path"
|
||||
:title="learningResource.title"
|
||||
:image="learningResource.image"
|
||||
:cta-label="learningResource.ctaLabel"
|
||||
:to="learningResource.to"
|
||||
>
|
||||
<nuxt-content class="copy" :document="learningResource" />
|
||||
</LearningResourceCard>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -98,6 +98,12 @@ import { EVENT_REQUEST_LINK } from '~/constants/appLinks'
|
|||
}
|
||||
},
|
||||
|
||||
async asyncData ({ $content }) {
|
||||
return {
|
||||
resources: await $content('learning-resources').fetch()
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'filteredEvents',
|
||||
|
|
@ -230,6 +236,15 @@ export default class extends QiskitPage {
|
|||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/scss/blocks/copy.scss';
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.the-learning-resources-list {
|
||||
&__filter-level {
|
||||
& a.bx--tabs__nav-link {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"target": "es2018",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"lib": [
|
||||
|
|
@ -27,9 +27,10 @@
|
|||
"resolveJsonModule": true,
|
||||
"types": [
|
||||
"@types/node",
|
||||
"@nuxt/types",
|
||||
"@types/jest",
|
||||
"@nuxtjs/axios"
|
||||
"@nuxt/types",
|
||||
"@nuxt/content",
|
||||
"@nuxtjs/axios",
|
||||
]
|
||||
},
|
||||
"exclude": [
|
||||
|
|
|
|||
Loading…
Reference in New Issue