VCSI custom research website template

npx degit Vermont-Complex-Systems/vcsi-starter/templates/simple example
cd example

Project Structure

src/
├── lib/
│   ├── stories/          # Your stories live here
│   │   └── my-story/
│   │       ├── components/
│   │       │   └── Index.svelte
│   │       └── data/
│   │           └── copy.json
│   └── components/       # Shared components
├── routes/               # SvelteKit routes
├── data/
│   ├── stories.csv       # Story metadata for routing
│   └── members.csv       # Team member data
└── styles/
    └── app.css           # Your customizations

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:5173
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

This templates comes with the sv Command Line Interface for creating and maintaining Svelte application:

Command	Action
npx sv check	Finds errors and warnings in your project
npx sv --help	Get help using the sv CLI

On top of the official CLI, VCSI provides useful adds-on to the template

Command	Action
npx sv add @the-vcsi/msgraph	Integrate Microsoft Sharepoint
npx sv add @the-vcsi/openalex	Integrate OpenAlex data

You can read more about these integrations on their own page.

Adding a Story

npm run new-story my-new-story
npm run dev

This creates the folder structure, boilerplate files, and adds an entry to stories.csv.

Customization

Edit src/styles/app.css to override CSS variables.

👀 Want to learn more?

Check out VCSI Scrolly kit’s docs, read the svelte documentation, or jump into the VCSI slack channel.