Mink frontend

With Mink, we are putting Språkbanken's research infrastructure into the hands of the researchers. You can use Mink to apply our language technology methods on texts that you have collected yourself. The resulting data can be downloaded or made available through our research tools.

Use Mink – Language data – Tools

Code

This repo makes up the frontend at spraakbanken.gu.se/mink. It is a Vue 3 app using Vite.

Design patterns

• Single-file components with <script setup>
• Composables to group state+logic for distinct features
• Utility-first styling with Tailwind CSS
• Visualization of API calls:
  1. Wrap async calls in spin:

     spin(loadCorpora(), "corpora");

  2. For markup that might change after the call, wrap it in <PendingContent> to apply animation:

     <PendingContent on="corpora"> {{ corpora.length }} </PendingContent>

Futher reading

• Mink API documentation
• Mink project board

Recommended IDE setup

VSCode with the plugins ESLint, Vue and Prettier.

VSCode settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "[javascript][typescript][vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

SSL in development

For SB-Auth to allow authentication requests, the dev server must use a hostname matching *.spraakbanken.gu.se, and HTTPS must be enabled. See the server section in vite.config.ts. If needed, create certificates with mkcert and refer to them in .env.local:

DEV_HTTPS_KEY=./local/spraakbanken.gu.se+1-key.pem
DEV_HTTPS_CERT=./local/spraakbanken.gu.se+1.pem

Testing

See:

• Vue testing guide
• Vitest API
• Vue testing library