@thegoldendino/festival-app v0.0.2
Festival App
A mobile kiosk for festival information. Each festival day displays a pannable/zoomable map image with positioned stage pins. Stages display artist schedules with links to more artist information.
Features
- Pannable/Zoomable map image
- Configuration schema
- Browser history state maintained.
Installing
npm install --save-dev @thegoldendino/festival-app
Usage
<script lang="ts">
import FestivalApp from '@thegoldendino/festival-app';
import type { ConfigParams } from '@thegoldendino/festival-app';
import type { PageData } from './$types.js';
let { data }: { data: PageData } = $props();
let config: ConfigParams = {
days: data.days,
artists: data.artists,
stages: data.stages,
options: data.options
};
</script>
<div class="mobile-preview">
<FestivalApp {config} />
</div>
<style>
.mobile-preview {
width: 400px;
height: 700px;
}
</style>
Config Schema
Example Config TOML
- days: schedule and map data for a festival day
- artists: artist information
- stages: stage information
- options: application specific options
Static Site Implementation
Though any repository can generate a Config object, FestivalApp is designed to not require a CMS or any 3rd party backend. Image file nameing conventions provide a reference to the record keys in the DaysConfig and ArtistsConfig.
Example
# artists.toml
[brasscheeks]
name = "Brass Cheeks"
brasscheeks
key requires a corresponding image filebrasscheeks.jpg
(extension agnostic: 'png', 'jpeg', 'webp').- We can then use Vite's file glob feature to pull all image files.
- Similarly a Day record with key
2025-06-01
should have a corresponding map image2025-06-01.png
file.
Merging Vite processed images
Each ConfigDay and ConfigArtist has an Image which includes src, width, height. Instead of manually entering these values, Vite provides the ability to pull this data from a directory of images. Each image must be named the same as the corresponding record key.
see +page.serve.ts for example.
Styling
The FestivalApp takes advantage of svelte's ability to pass custom properties to its components.
Example
<FestivalApp {config}
--festapp-color-primary-hue="100"
--festapp-color-secondary-hue="187"
>
see all custom property variables.css
Developing
Once you've installed dependencies with npm install
, start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Everything inside src/lib
is part of the festival-app library, everything inside src/routes
is used as a showcase for the festival-app.
Building
To build your library:
npm run package
To create a production version of your showcase app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.
Publishing
To publish your library to npm:
npm publish