refactor: rework credits page

src/Pages/Credits.vue

 <template>
-  <b-container>
-    <h1>{{ t('credits.title') }}</h1>
-    <p>{{ t('credits.intro') }}<br /></p>
-    <ul>
-      <li>
-        Andrea Ida Malkah Klaura
-        <a href="https://gitlab.servus.at/jackie">@jackie</a>
-        <b-badge variant="primary"> dashboard </b-badge>
-        <b-badge>oidc</b-badge>
-      </li>
-      <li>
-        Christian Pointner
-        <a href="https://gitlab.servus.at/equinox">@equinox</a>
-        <b-badge variant="danger"> tank </b-badge>
-        <b-badge>oidc</b-badge>
-      </li>
-      <li>
-        David Trattnig
-        <a href="https://gitlab.servus.at/david">@david</a>
-        <b-badge variant="success"> engine </b-badge>
-      </li>
-      <li>
-        Ernesto Rico Schmidt
-        <a href="https://gitlab.servus.at/nnrcschmdt">@nnrcschmdt</a>
-        <b-badge variant="warning"> steering </b-badge>
-      </li>
-      <li>
-        Gottfried Gaisbauer
-        <a href="https://gitlab.servus.at/gg">@gg</a>
-        <b-badge variant="success"> engine </b-badge>
-      </li>
-      <li>
-        Ingo Leindecker
-        <a href="https://gitlab.servus.at/ingo">@ingo</a>
-        <b-badge variant="warning"> steering </b-badge>
-        <b-badge>oidc</b-badge>
-      </li>
-      <li>
-        Martin Lasinger
-        <b-badge>gfx</b-badge>
-      </li>
-      <li>
-        Richard Blechinger
-        <a href="https://gitlab.servus.at/pretzelhands">@pretzelhands</a>
-        <b-badge variant="primary"> dashboard </b-badge>
-      </li>
-    </ul>
-    <p>
-      <b>{{ t('credits.graphicsIcons') }}</b
-      ><br />
-    </p>
-    <ul>
-      <li>
-        {{ t('credits.loadingIcon') }}:
-        <a href="https://loading.io/spinner">spinner by loading.io</a> (CC-BY License).
-      </li>
-      <li>
-        {{ t('credits.otherIcons') }}:
-        <a href="http://tango.freedesktop.org/">Tango Project</a> (Public Domain),
-        <a href="https://bootstrap-vue.org/docs/icons">BootstrapVue</a> (MIT).
-      </li>
-    </ul>
-    <p v-html="t('credits.moreInfo')" />
-  </b-container>
+  <div>
+    <PageHeader :title="t('credits.title')" />
+
+    <div class="tw-flex tw-gap-6 tw-flex-wrap tw-items-start *:tw-max-w-xl">
+      <AFieldset as="div" :title="t('credits.contributors')" class="tw-bg-white">
+        <p>{{ t('credits.intro') }}</p>
+        <p>{{ t('credits.contributorLabel') }}</p>
+        <ul class="tw-flex tw-flex-col tw-gap-4 tw-m-0 tw-mb-6">
+          <li v-for="person in creditedPersons" :key="person.name">
+            <ACreditedPerson :person="person" />
+          </li>
+        </ul>
+
+        <SafeHTML :html="t('credits.moreInfo')" sanitize-preset="safe-html" />
+      </AFieldset>
+    </div>
+  </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useI18n } from '@/i18n'
+import PageHeader from '@/components/PageHeader.vue'
+import ACreditedPerson, { CreditedPerson } from '@/components/generic/ACreditedPerson.vue'
+import AFieldset from '@/components/generic/AFieldset.vue'
+import SafeHTML from '@/components/generic/SafeHTML'
+
+const creditedPersons: CreditedPerson[] = [
+  {
+    name: 'Andrea Ida Malkah Klaura',
+    gitlab: { handle: '@jackie', url: 'https://gitlab.servus.at/jackie' },
+    projects: ['dashboard'],
+  },
+  {
+    name: 'Christian Pointner',
+    gitlab: { url: 'https://gitlab.servus.at/equinox', handle: '@equinox' },
+    projects: ['tank'],
+  },
+  {
+    name: 'David Trattnig',
+    gitlab: { url: 'https://gitlab.servus.at/david', handle: '@david' },
+    projects: ['engine'],
+  },
+  {
+    name: 'Ernesto Rico Schmidt',
+    gitlab: { url: 'https://gitlab.servus.at/eigenwijsje', handle: '@eigenwijsje' },
+    projects: ['steering', 'tank'],
+  },
+  {
+    name: 'Gottfried Gaisbauer',
+    gitlab: { url: 'https://gitlab.servus.at/gg', handle: '@gg' },
+    projects: ['engine'],
+  },
+  {
+    name: 'Ingo Leindecker',
+    gitlab: { url: 'https://gitlab.servus.at/ingo', handle: '@ingo' },
+    projects: ['steering'],
+  },
+  {
+    name: 'Konrad Mohrfeldt',
+    gitlab: { url: 'https://gitlab.servus.at/kmohrf', handle: '@kmohrf' },
+    projects: ['dashboard', 'steering'],
+  },
+  {
+    name: 'Martin Lasinger',
+    projects: ['gfx'],
+  },
+  {
+    name: 'Richard Blechinger',
+    gitlab: { url: 'https://gitlab.servus.at/pretzelhands', handle: '@pretzelhands' },
+    projects: ['dashboard'],
+  },
+]
 
 const { t } = useI18n()
 </script>
-
-<style scoped>
-p {
-  text-align: left;
-}
-
-.badge {
-  margin-left: 0.25rem;
-}
-</style>

src/components/generic/ACreditedPerson.vue

+<template>
+  <p class="tw-m-0">
+    <span class="tw-block">
+      {{ person.name }}
+      <a v-if="person.gitlab" :href="person.gitlab.url">{{ person.gitlab.handle }}</a>
+    </span>
+
+    <AColorBadge
+      v-for="project in person.projects"
+      :key="project"
+      class="tw-mr-2 tw-py-1 tw-px-2 tw-leading-none tw-rounded-full tw-inline-flex"
+      :seed="project"
+      random
+      >{{ project }}</AColorBadge
+    >
+  </p>
+</template>
+
+<script lang="ts">
+type Project = 'dashboard' | 'steering' | 'tank' | 'gfx' | 'engine'
+export type CreditedPerson = {
+  name: string
+  gitlab?: { url: string; handle: string }
+  projects: Project[]
+}
+</script>
+
+<script lang="ts" setup>
+import AColorBadge from '@/components/generic/AColorBadge.vue'
+
+defineProps<{
+  person: CreditedPerson
+}>()
+</script>

src/i18n/de.js

@@ -150,13 +150,9 @@ export default {
 
   credits: {
     title: 'Credits',
-    intro:
-      'AURA wird unter der GNU Affero General Public License v3 entwickelt. Aktive und vergangene Entwickler sind:',
-    graphicsIcons: 'Grafiken & Icons',
-
-    loadingIcon: 'Animiertes Lade-Icon',
-    otherIcons: 'Alle weiteren Icons',
-
+    intro: 'AURA wird unter der GNU Affero General Public License v3 entwickelt.',
+    contributors: 'Beitragende',
+    contributorLabel: 'Aktive und vergangene Entwickler sind:',
     moreInfo:
       'Mehr Informationen gibt es im <a href="https://gitlab.servus.at/aura/dashboard">Dashboard-Repository</a>.<br>Um eine Gesamtübersicht über AURA zu erhalten, besuche <a href="https://aura.radio">aura.radio</a>.<br>Alle AURA-Repositories können auf <a href="https://code.aura.radio">https://code.aura.radio</a> eingesehen werden.',
   },

src/i18n/en.js

@@ -149,14 +149,9 @@ export default {
 
   credits: {
     title: 'Credits',
-    intro:
-      'AURA is developed under the GNU Affero General Public License v3. Current and former developers are',
-
-    graphicsIcons: 'Graphics & Icons',
-
-    loadingIcon: 'Animated loading icon',
-    otherIcons: 'All other icons',
-
+    intro: 'AURA is developed under the GNU Affero General Public License v3.',
+    contributors: 'Contributors',
+    contributorLabel: 'Current and former developers are:',
     moreInfo:
       'For more infos visit the <a href="https://gitlab.servus.at/aura/dashboard">Dashboard repository</a>.<br>To get started with AURA, visit <a href="https://aura.radio">aura.radio</a>.<br>All AURA repositories can be found at <a href="https://code.aura.radio">https://code.aura.radio</a>.',
   },