Import copy into your package like any JSON file

```js
import copy from '$lib/data/copy.json'
```

## Development

```shell
nvm use
npm install
npm run dev
```

Modify content in `src`.

### Adding and removing graphics

CMSvelte's power is dynamic placement unrestrained by content. After build, you can place the `` elements anywhere in the CMS and they will load.

To place graphics, edit `index.html` by adding or removing figures such as this: ``.

Then, in `src/main.ts`, import your wrapper component up top and add the applicable data to the component array. Every object in this array should have 1) a matching `` element in index.html and 2) an imported component:

```js
const components = [
{
chartID: 'CHART-ID',
Component: ImportedComponent,
props: {}
},
{
chartID: 'CHART-ID2',
Component: ImportedComponent2,
props: {}
},
{
chartID: 'CHART-ID3',
Component: ImportedComponent3,
props: {}
},
];
```

*Notes:*
- High-level props can be passed down here as well using the `props: {}` object passed in MountComponent.

### Writing styles

It's recommended to include the CMS's styles in a development environment and defer to them for fonts and classes to reduce the shipped CSS. This can be done by adding objects to a `cmsFiles` array in `main.ts`. This appends any tag and it's listed attributes to the `` while in dev mode. These are not included in production.

Otherwise, this template uses [Tailwind](https://tailwindcss.com/) for out-of-the-box classes that we don't have to think about. By default, these classes are prefixed with `cmsvelte-` to prevent clashing with CMS classes. This can be changed in `tailwind.config.cjs`.

Write global styles in `app.postcss`. Otherwise, use [Svelte's built-in scroped styling syntax](https://svelte.dev/tutorial/styling).

### Asset management

For image optimization see [vite-imagetools](https://www.npmjs.com/package/vite-imagetools) or [sharp](https://www.npmjs.com/package/sharp).

[Vite's Static Asset Handling](https://vitejs.dev/guide/assets.html) lets us import image and SVG files with several options.

#### As files

Imports the hashed file name for the asset. For example, `imgUrl` will be `/img.png` during development, and become `/assets/img.2d8efhg.png` in the production build.

```js
import imgUrl from '$lib/assets/img.png'
```

#### As strings

Import raw strings by appending ?raw at the end. This is useful for SVG files.

```js
import imgUrl from '$lib/assets/img.svg?raw'
```

### Useful libs

- [body-scroll-lock](https://www.npmjs.com/package/body-scroll-lock) - Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
- [focus-trap](https://www.npmjs.com/package/focus-trap) - Trap focus within a DOM node.
- [fullpage.js](https://www.npmjs.com/package/fullpage.js) - Create fullscreen scrolling websites.
- [gsap](https://www.npmjs.com/package/gsap) - Professional-grade animation for the modern web.
- [journalize](https://www.npmjs.com/package/journalize) - A collection of functions useful for making prose reader friendly.
- [lodash](https://www.npmjs.com/package/lodash) - Various helper functions.
- [slugify](https://www.npmjs.com/package/slugify) - Easily slug a string.
- [@sveltejs/svelte-scroller](https://www.npmjs.com/package/@sveltejs/svelte-scroller) - Svelte-y scrollytelling
- [svelte-select](https://www.npmjs.com/package/svelte-select) - A select/autocomplete component for Svelte apps. With support for grouping, filtering, async and more.
- [swiper](https://www.npmjs.com/package/swiper) - Modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

### Deployment

```bash
npm run build
```

In the project root the command generates a directory called `build`. The built files have names without hashing thanks to [Rollup's config options](https://rollupjs.org/guide/en/#rolluprollup). You only need to embed once as the graphics are generated client-side.

The generated files will likely live in an S3 bucket or other storage site. Update the `base` url in `vite.config.js` to match the final URL of the files. A script to facilitate file uploading to S3 or another service can be easily written in the scripts folder.

```js
base: mode === 'production' ? link : '/',
```

The resulting `build/index.html` file is what can be embedded. It should look something like this, with a `` element for each graphic, as well as ``s and `<link>`s to external files:

```html
<script type="module" crossorigin src="https://www.site.com/path/to/index.js">

```

Scripts and styles should be embedded once anywhere in the CMS. The `` elements can be moved around as needed and do not need to live side-by-side. The `index.js` script will generate the graphics accordingly based on the `data-cmsvelte` attribute.