import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Intro/Welcome" />

# Nature Immersive Svelte Components

Welcome to the `nature-immersive-svelte-components` storybook.

This is a collection of [svelte](https://svelte.dev/) components forms the design system used to build [@nature](https://twitter.com/nature) immersive articles, such as [_Nature_’s 10](https://www.nature.com/immersive/d41586-020-03435-6/index.html).

## Installation

To install the components from npm:

```bash
npm install --save-dev nature-immersive-svelte-components
```

## Useage

Import each component into a svelte file with:

```js
import { Card, CardBox, etc... } from "nature-immersive-svelte-components";
```

To save from starting a project from scratch, you can use the [`nature-immersive-article-template`](https://github.com/chris-creditdesign/nature-immersive-article-template). Either download the files from this repo or use [`degit`](https://github.com/Rich-Harris/degit):

```bash
mkdir new-article
cd new-article
npx degit chris-creditdesign/nature-immersive-article-template
```

## Load CSS

It is first necessary to copy the global CSS file into your project, or to import import it into your Svelte layout, for instance with:

```js
import "..node_modules/nature-immersive-svelte-components/light.css";
```

You can choose to include either `light.css` or `dark.css`.

From then on style can be customised by passing props to existing svelte components or as style blocks within your own components.