This is a Vue 3 app using the Vite build tool.
Contents:
The Mink system consists of these pieces of software:
- Mink frontend runs in the user's web browser and presents a graphical user interface (GUI) to the services of the backend
- Mink backend runs on a server where it manages stored data and executes data processing operations
- Sparv is the NLP pipeline used for text analysis, operated by the Mink backend. (Sparv lives independently from Mink, but it is listed here because it is essential to Mink.)
The frontend communicates with the backend using the Mink API. The API can also be used directly from command-line or scripts.
The Mink system is connected to these other systems:
- SB-Auth provides user authentication with eduGAIN to Mink and a few other services of Språkbanken Text
- Analysed results can be installed from Mink into:
- Matomo records anonymized visitor statistics
Source code lives in src/.
Code files are largely ordered into folders by topic:
APIs:
src/api/ - Mink API and Sparv
src/auth/ - authentication flow, SB-Auth API
UI components:
src/components/ - reusable elements like boxes and buttons
src/page/ - site-wide singular elements (header etc)
Resource pages:
src/corpus/ - corpus-related pages and logic (most of Mink currently)
src/metadata/ - metadata-related pages and logic
src/resource/ - logic common to all resource types
Other pages:
src/home/ - home page
src/library/ - overview of user's resources
src/user/ - user page, admin mode
Plugins:
src/i18n/ - (internationalization) translations, language switcher
src/router/ - config for vue-router
src/store/ - app state
Helper subsystems:
src/message/ - showing alerts and other feedback messages
src/spin/ - UI feedback about pending API requests
Directly under src/ there is:
- Entrypoint (main.ts)
- Vue root component (App.vue)
- Vue plugin config
- Reusable utility functions and types
- General CSS rules
The user interface should explain itself, as largely as possible without cluttering itself with prose.
Use <HelpBox> to give context to a page or section. Form inputs should have a label and probably a help text.
Use icons to accompany text snippets, but not by themselves. Exceptions are allowed in tight spaces.
Outside the app, there is also some guidance available at the Språkbanken Text website: Mink.
You are reading some of it now. See README.md for a documentation table of contents.
public/contains static assets which do not need to be imported in codesrc/assets/contains static assets which can be imported in code
See Vite docs on Assets.
There is a GitHub action in .github/workflows/ci.yml that will trigger on each push and check that the code builds. It also runs tests, but that is less significant since test coverage is tiny so far. As such, it is a basic implementation of the Continuous integration (CI) principle.
These are referenced from main.ts. (Tailwind via index.css, I think.)
- Page navigation with vue-router
- Reactive app state with Pinia
- UI translation with vue-i18n
- Utility-first styling with Tailwind CSS, see STYLE.md
- Icons with Phosphor Icons
- Form handling with FormKit
- Visitor statistics tracking with vue-matomo
These utilities are complex enough that they cannot each be contained in a single file.
Wrap an async request with:
spin(promise, token);Show loading animation on top of related UI elements with:
<PendingContent :on="token">[dependent content here]</PendingContent>Show a message:
alert("There is no coffee", "error");Helper for showing a failing Mink API response:
mink.runJob(corpusId).catch(alertError);Test files should be named after the files they test, so HomeView.vue is tested by HomeView.test.ts.
Tests are run with yarn test
Read more about testing for Vue at: