Thank you for your interest in contributing to the DIV tool and media catalog!
- Node.js 22 — managed via Volta
- pnpm — installed automatically by Volta
git clone https://github.com/uzh-bf/div-uzh.git
cd div-uzh
pnpm install
pnpm devThe site runs at http://localhost:3000.
-
Create two MDX files in
content/toolpages/:<tool-name>.en.mdx(English)<tool-name>.de.mdx(German)
-
Add the required frontmatter. See
content/toolpages/canva.en.mdxfor a full example:--- title: Tool Name subtitle: Short description complexity: Low # Low | Medium | High (German: Tief | Mittel | Hoch) platforms: - macOS - Windows pricing: Free # Free | Freemium | Paid (German: Kostenlos | Freemium | Kostenpflichtig) interactiveOutput: "No" # Yes | No (German: Ja | Nein) edulicense: "No" # Yes | No (German: Ja | Nein) dataLocation: Switzerland # Switzerland | Abroad (German: Schweiz | Ausland) softwaretype: - Online-Tool link: https://example.com image: /assets/tool-name.png filterAttributes: - Grafik - macOS - Windows - Online-Tool # Optional AI fields (omit if not applicable): aiCapabilities: Text generation, image generation # free text dataPrivacy: Opt-out available # "No training on input" | "Opt-out available" | "Input used for training" | "Unknown" aiHosting: # hosting regions (must also appear in filterAttributes) - US ---
-
Add a screenshot to
public/assets/(PNG, same name as the tool). -
Populate
filterAttributeswith all values that apply — this array drives the filter UI and must include entries from platforms, softwaretype, visualization types, and output formats.
Same pattern as tools, but in content/mediapages/. See content/mediapages/pexels.en.mdx for an example.
Media frontmatter fields:
---
title: Source Name
subtitle: Short description
mediatype: Pictures, Videos
style: Modern
selection: Big
pricing: Free
license: Free
link: https://example.com
image: /assets/source-name.png
filterAttributes:
- Fotos
- Videos
- Modern
- Kostenlos
---Before submitting, run:
pnpm run checkThis runs TypeScript type checking, Prettier formatting checks, and ESLint in parallel.
- Create a branch from
devand open your PR againstdev. - Fill out the PR template — it includes checklists for tool/media entries and general code changes.
- Make sure
pnpm run checkandpnpm run buildboth pass. - Test both locales (
/enand/de) if your change affects content.