Extending Diadem

Project structure

After setting up the project, /config contains linked files to custom.css and Home.svelte. This allows you to easily add your own styles and home page. For advanced extensions, you can use the designated custom* directories.

Directoryconfig
- Home.svelte Link to /src/components/custom/Home.svelte
- custom.css Link to /src/custom.css
Directorysrc
- Directorycomponents
  - Directorycustom
    Home.svelte
    … Add your own components
- Directoryroutes
  - Directory(custom)
    … Add your own routes
- custom.css Add your own styles
Directorystatic
- Directorycustom
  - … Add your own assets (fonts, images, …)
Directorymessages
- en.json
- …

Custom home page

Enable in config:

[client.general]
customHome = true

When enabled, / renders src/components/custom/Home.svelte. The map is made available at /map. You can use this to extend Diadem into a full webfront for your mapping project.

Relevant documentation:

Custom CSS

Global custom styles live in src/custom.css (from config/custom.css).

It is imported before app styles in src/app.css, so you can change theming as you like.

Add your own custom routes

You can create your own /about or /status page like this.

Directorysrc
- Directoryroutes
  - Directory(custom)
    Directoryabout
    +page.svelte
    Directorystatus
    +page.svelte
    …

Refer to the SvelteKit documentation to learn more about routing.

Add your own translations

Diadem uses Paraglide JS for localizing. You can add your own translation keys to /messages/{locale}.json. Just prepend them to the file, and git should be able to auto merge them. Add a unique prefix to your keys to avoid conflicts.

"$schema": "https://inlang.com/schema/inlang-message-format",
"dm_hello": "Hello",
"theme_light": "Light",
...