Qiskit's website

⚛️ 💻

Welcome to Quantum

Qiskit is an open-source quantum computing software development framework for leveraging today's quantum processors in research, education, and business.

Home page · Education · Documentation · Advocates · Support: Slack

What’s In This Document

What’s In This Document
⚡️ Live
💻 Technology Used
🚀 Get Up and Running
🏭 Content Generation
🧐 Folder Structure
✏️ How to Contribute
🛠 Available Scripts
🗓 Open backlog
👩‍💻 Maintainers

⚡️ Live

Go to Qiskit.org's website

💻 Technology Used

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 it's 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 Travis.

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.

🚀 Get Up and Running

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
```

🏭 Content Generation

qiskit.org integrates with the tools used by the IBM Quantum Community Team and generate 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

🧐 Folder Structure

.
├── assets
├── components
├── constants
├── content
├── deploy
├── hooks
├── layouts
├── mixins
├── pages
├── plugins
├── static
├── store
├── tests
├── textbook
├── nuxt.config.js
... other third-parties configuration files like ESLint, Jest or Travis

/assets: Images and assets for the project. You can find more information at Nuxt's assets directory documentation
/components: Vue components for the project. You can find more information at Nuxt's components directory documentation
/constants: Constants shared through the whole project.
/content: Markdown files, website's editable content. They are divided in folders by sections.
/deploy: Deploy configuration.
/hooks: Hook functions shared through the whole project.
/layouts: You can find information at Nuxt's layout directory documentation
/mixins: Mixin functions shared through the whole project.
/pages: This is a starting point because if you want to know what is the website structure, it's the same as this folder's structure. Nuxt reads all the .vue files inside this directory and creates the application router based on it. You can find information at Nuxt's pages directory documentation. All .vue pages prefixed by an underscore are dynamic routes and we use them to create different pages based on the same template. We also use nuxt-link to keep the user inside our webapp router.
/plugins: You can find information at Nuxt's plugins directory documentation
/statics: You can find information at Nuxt's statics directory documentation
/tests: Unit tests made with Jest
/textbook: Redirect page for textbook
nuxt-config.js: This is the main configuration file for a Nuxt site. You can find information at Nuxt's config documentation

✏️ How to Contribute

Contributions are always welcome, no matter how large or small. Before contributing, please read the contributing guide and code of conduct.

🛠 Available Scripts

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 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

🗓 Open backlog

You can see our backlog here.

👩‍💻 Maintainers

by alphabetical order:

_{Leron Gil}
🐛💬

_{Salvador de la Puente}
🐛💻💬

_{Yaiza García}
🐛💻💬

emreyalcin26 / qiskit.org