Usage a library

To use the views for instance in the context of an Obsidian plugin, the <Routes> tag with everything inside is bundled as a library. A user should wrap it into a suitable router component, as well as include the bundled CSS file.

Development

lib and src folders

lib folder contains all the code that is to bundled into the lib. This package also works as an app, and the purely app-related code is placed in the src folder.

Styling

Tailwindcss should be used whenever possible.

Themes and styling

There are only 3 allowed ways to style by themes in the project, in order of preference:

1. useThemeClsx function is used to conditionally apply classnames based on the current theme. It takes a partial map between themes and classnames, which means that applying styles for every new theme on each element is not enforced and you have to follow your visual better judgment to see where those need to be applied.

2. Dynamic classnames cannot be used for tailwindcss, so if they are needed there is a similar useThemeStyle.

3. Sometimes adding additional, purely decorative, HTML elements might be needed, or restructuring layout in some other way. This is done by a ThemeComponent element. The component it conditionally renders must then import and wrap the usual children with whatever is needed.

All in all, your theme-specific code can live in the following places: a) useThemeClsx or useThemeStyle calls, b) a separate file prefixed with your theme name, it can be either a component or e.g. utility functions/constants. You can either place it where a related generic component is placed, or if there is no such place - in lib/[theme-name] folder (files in that folder may be not prefixed)