We renamed the master
branch to main
and GitHub is displaying a notice for the contributors visiting the repository. However, this is not compatible with the Forking Workflow we follow in the team. If you are contributing to qiskit.org, chances are that you have a fork of this project and your origin
remote is pointing to it. The Qiskit/qiskit.org repository should be your upstream
remote and so, the instructions provided by GitHub should be directed towards your upstream
remote:
git branch -m master main
git fetch upstream
git branch -u upstream/main main
Qiskit is an open-source quantum computing software development framework for leveraging today's quantum processors in research, education, and business.
Home page Β· Learn Β· Documentation Β· Advocates Β· Support: Slack
- Whatβs In This Document
- β‘οΈ Live
- π» Technology Used
- π Get Up and Running
- π Content Generation
- ποΈOther environment flags
- π§ Directory structure
- βοΈ How to Contribute
- π Available Scripts
- π Open backlog
- π©βπ» Maintainers
Qiskit.org is a pre-rendering SPA using Nuxt.js.
A pre-rendering SPA is a single page application that generates a static markup (HTML) at build time. The user, when entering the web, receives HTML (as if it were a static web) but in the meantime, JS files belonging to the SPA are loaded βhydratingβ the web until it's completely dynamic.
Nuxt.js is the biggest framework on top of Vue.js to generate universal SPAs. Universal or "isomorphic" apps can be pre-rendering or SSR. Since so far we don't need server functions, our website is just pre-rendering.
We create and run unit tests using Jest, ensure avoiding syntax errors using ESLint and automate all these previous tools and deployment using GitHub Actions.
With this technology we want to achieve:
- Separation between content edition and development concerns.
- Use a component-based framework like Vue that allow us to reuse part of the UI code in different parts of the application.
- Fast initial page load.
- Index content on Search Engines.
- Test JS unit functions.
- Avoid syntax errors.
- Continuous integration pipeline.
-
Download this repository and go to its folder
git clone git@github.com:Qiskit/qiskit.org.git && cd qiskit.org
-
Install dependencies
npm install
-
Run a local server with hot reload at localhost:3000
npm run dev
qiskit.org integrates with the tools used by the IBM Quantum Community Team and generates some content based on 3rd party APIs such as Airtable. Part of this content is prefetched during building time. While developing, it is disabled by default. If you want enable content generation, you must set the environment variable GENERATE_CONTENT
. For instance:
GENERATE_CONTENT=1 npm run dev
Notice that, for communicating with the team tools, API keys may be required. It is the case of dealing with Airtable for the generation of the event index. If you think you should have access to these tables, talk to the Event Squad in the Community Team, get your developer API key and set the AIRTABLE_API_KEY
environment variable to this value:
GENERATE_CONTENT=1 AIRTABLE_API_KEY=<your airtable api key> npm run dev
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.
qiskit.org/
ββ app/
ββ assets/
ββ components/
ββ constants/
ββ content/
ββ deploy/
ββ hooks/
ββ layouts/
ββ mixins/
ββ new-content/
ββ pages/
ββ plugins/
ββ static/
ββ store/
ββ tests/
ββ types/
ββ nuxt.config.js
ββ ... other third-parties configuration files like ESLint, Jest or GitHub Actions
-
app/
: Global scripts.Currently only contains
router.ScrollBehavior.js
for controlling the behavior of the scroll when navigating. -
assets/
: Un-compiled Sass files.More information: NuxtJS documentation on the assets directory
-
components/
: Vue.js components.More information: NuxtJS documentation on the components directory
-
constants/
: Shared constants. -
content/
: Content Markdown and JSON files included via thegenerate
property.The files are organized in folders matching the website's information architecture.
-
deploy/
: Deployment configuration. -
hooks/
: Shared hook functions. -
layouts/
: Nuxt layout components.More information: NuxtJS documentation on the layouts directory
-
mixins/
: Shared Vue.js mixins. -
new-content/
: Content Markdown files included via@nuxtjs/content
.This directory would usually be named
content
, but that name was already in use in our project.More information: NuxtJS documentation on the content directory
-
pages/
: The base application views and routes.More information: NuxtJS documentation on the pages directory
-
plugins/
: JavaScript plugins that run before instantiating the root Vue.js application.More information: NuxtJS documentation on the pages directory
-
static/
: Files that will be automatically served by Nuxt and will be accessible through the project root URL.More information: NuxtJS documentation on the static directory
-
store/
: Vuex store files.More information: NuxtJS documentation on the store directory
-
tests/
: Jest unit tests. -
types/
: Additional types for non-typed libraries or global definitions. -
nuxt.config.js
: Main NuxtJS configuration.More information: NuxtJS documentation on the nuxt.config file
Contributions are always welcome, no matter how large or small. Before contributing, please read the contributing guide and code of conduct.
Run a local server enabling inspector agent:
npm run dev-debug
Run unit tests made with Jest:
npm run test
Build static version ready for production, output will be generated inside a new folder called dist
:
npm run build
Run a local server on the website's production built. Make sure you ran npm run build
first:
npm run start
Find syntax errors. We use ESLint:
npm run lint
Autofix linter:
npm run fix-lint
You can see our backlog here.
In alphabetical order: