| .. | ||
| .storybook | ||
| i18n | ||
| public | ||
| public-msw | ||
| src | ||
| .browserslistrc | ||
| .editorconfig | ||
| .env.development | ||
| .env.test | ||
| .eslintrc-auto-import.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.json | ||
| CHANGELOG.md | ||
| chromatic.config.json | ||
| dir2json.d.ts | ||
| env.d.ts | ||
| eslint.config.ts | ||
| index.html | ||
| openapi-generator.mts | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| uno.config.ts | ||
| vite.config.mts | ||
| vitest.shims.d.ts | ||
OpenAPI
OpenAPI-fetch is used to generate a fully typed client from the Komga OpenAPI documentation.
The openapi-generate tasks will generate bindings, and should be run when the OpenAPI definition has changed.
Pinia Colada
Pinia Colada is used for all the API queries and mutations.
Tests
Vitest projects are used to specify different kind of tests:
unit: unit testsstorybook: component tests, defined in Storybook stories. Those can be run from Storybook directly or through Vitest.
Mock Service Worker is used to mock the Komga API.
Code formatting
Both ESLint and b are used in combination.
Tasks:
- ESLint:
lintandlint:fix - Prettier:
prettierandprettier:fix
Type checking
Vite does not perform type-checking and leaves the job to the IDE. The type-check task can be used to perform type checking.
Storybook
Storybook is used for component development and testing. Run storybook:dev to start the Storybook server.
i18n
FormatJS is used for i18n.
Message IDs are generated automatically using the ESLint plugin, and hard-coded message IDs should be avoided.
Tasks:
i18n:extract: extracts the messages from the source into thei18nfolder. This folder is what Weblate uses.i18n:compile: compiles the translated files ini18ninto./src/i18n. This folder is what the application uses at runtime.
The Vite plugin dir2json is used to load the available translation files, see ./src/utils/locale-helper.ts for more details.
Components
Vue template files are segregated in different categories depending on usage:
./src/components: Pure UI components, driven by model/props. Those are reusable components../src/fragments: Fragments interact with other layers of the application, like API or Pinia stores. They are split into separate files for easier organization, but are not necessarily reused../src/pages: Pages make use of components/fragments as well as API / Pinia stores. Each Component in that folder is converted to a navigable route using unplugin-vue-router. Pages contain a special<route>to define the layout to use as well as other router meta attributes../src/layouts: Wrapper component around Pages.
Components and Fragments are automatically imported using unplugin-vue-components.
Icons
UnoCSS Icons preset is used for icons, with the MDI set from Iconify.