Welcome to Qiskit.org

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

Home page · Learn · Events · Advocates · Ecosystem · Documentation · Providers

🚀 Get Up and Running
💻 Technology Used
🏭 Content Generation
🏷️ Naming Conventions
✏️ How to Contribute
🗓 Open Backlog
👩‍💻 Maintainers
🔗 Connect with Qiskit

🚀 Get Up and Running

Download this repository and go to its folder

git clone [email protected]:Qiskit/qiskit.org.git && cd qiskit.org

Install dependencies
```
 npm install
```
Run a local server with hot reload at localhost:3000
```
npm run dev
```

💻 Technology Used

Qiskit.org is a static website generated using Nuxt.

We create and run tests using Vitest, avoid syntax errors using ESLint and Stylelint, and automate code integration and deployment using GitHub Actions.

🏭 Content Generation

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

🥸 Mocking content

If you should not have access to the content tables (or you don't want to fetch these data), it can be mocked by setting the environment variable MOCK_CONTENT to true .

If you start up the project with npm run dev , mocked content is enabled by default.

The project has a default mocked content under the hooks/mock/content folder. If you want your own custom mocked content, you can create a new folder and set it as your mocked content folder using the environment variable MOCK_BASE_PATH which should be an absolute path of your system.

🏷️ Naming Conventions

Nuxt Components

When working with files in the components/ directory, please adhere to the following naming conventions:

Component files and directories should be named using PascalCase.
Always use multi-word names.
Simplify component names where possible, for example, EventsItemCard can be named EventsCard.
Group related components in folders when more than one component refers to the same concept.
When naming the component .vue files, include the whole path to make it easier to locate the components.
Generic components that can be reused across multiple pages should be placed in the components/Ui/ directory.
Components specific to a page should be placed in their respective directory, such as components/Events/ for events-specific components.
Avoid appending "Section" to component names, as it is usually implied that the component represents a section of the page.