Skip to content

Latest commit

 

History

History
104 lines (81 loc) · 2.77 KB

File metadata and controls

104 lines (81 loc) · 2.77 KB

Contributing

Thank you for your interest in contributing to the DIV tool and media catalog!

Getting Started

Prerequisites

  • Node.js 22 — managed via Volta
  • pnpm — installed automatically by Volta

Setup

git clone https://github.com/uzh-bf/div-uzh.git
cd div-uzh
pnpm install
pnpm dev

The site runs at http://localhost:3000.

Adding a New Tool

  1. Create two MDX files in content/toolpages/:

    • <tool-name>.en.mdx (English)
    • <tool-name>.de.mdx (German)
  2. Add the required frontmatter. See content/toolpages/canva.en.mdx for 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
    ---
  3. Add a screenshot to public/assets/ (PNG, same name as the tool).

  4. Populate filterAttributes with all values that apply — this array drives the filter UI and must include entries from platforms, softwaretype, visualization types, and output formats.

Adding a New Media Entry

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
---

Code Changes

Before submitting, run:

pnpm run check

This runs TypeScript type checking, Prettier formatting checks, and ESLint in parallel.

Pull Request Process

  1. Create a branch from dev and open your PR against dev.
  2. Fill out the PR template — it includes checklists for tool/media entries and general code changes.
  3. Make sure pnpm run check and pnpm run build both pass.
  4. Test both locales (/en and /de) if your change affects content.