flaschengeist-frontend/src/pages/about/About.vue

<template>
  <q-page
    padding
    class="fit row justify-center content-center items-center"
    v-if="$route.name == 'about' || $route.name == 'about_out'"
  >
    <q-card flat class="col-6">
      <q-card-section
        class="row fit justify-center items-center content-center"
      >
        <q-img
          src="logo-dark.svg"
          class="q-mt-md"
          style="min-width: 200px; max-width: 400px"
        />
      </q-card-section>
      <q-card-section class="text-h4 text-center">
        Flaschengeist
        <div class="text-caption">
          Version 2.0.0
        </div>
      </q-card-section>
      <q-card-section class="text-center">
        Flaschengeist ist ein dynamischen Managementsystem für Studentenclubs.
        Es ermöglicht unter anderem die Mitgliederverwaltung, Dienstverwaltung,
        Arbeitsgruppenverwaltung und vieles meher. Es kann fast alles ermöglich
        werden, wenn ein Plugin dafür geschrieben wird. Jeder Club hat die
        Möglichkeit sein eigenes Flaschengeist zu hosten. Ziel ist später
        Clubübergreifend dezentralisiert miteinander zu arbeiten.
      </q-card-section>
    </q-card>
    <q-separator />
    <q-card flat class="col-12">
      <q-card-section class="text-h6" v-if="$route.name == 'about'">
        Geladene Plugins:
      </q-card-section>
      <q-card-section v-if="$route.name == 'about'">
        <q-chip
          v-for="(plugin, index) in $flaschengeistPlugins.plugins"
          :key="'plugin' + index"
        >
          {{ plugin.name }}
          <q-separator vertical color="black" class="q-ma-xs" />
          {{ plugin.version }}
        </q-chip>
      </q-card-section>
      <q-separator />
      <q-card-section class="text-h6">
        Entwickler:
      </q-card-section>
    </q-card>

    <div
      class="fit row inline wrap justify-around items-start content-start q-gutter-sm"
    >
      <developer
        v-for="(developer, index) in developers"
        :key="'dev' + index"
        class="col-xs-12 col-md-5 col-lg-3"
        :firstname="developer.firstname"
        :lastname="developer.lastname"
        :job="developer.job"
        :club="developer.club"
        :description="developer.description"
        :pic="developer.pic"
      />
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import Developer from 'components/about/Developer.vue';

const developers = [
  {
    firstname: 'Tim',
    lastname: 'Gröger',
    club: 'Studentenclub Wu5 e.V.',
    job: 'Gründer von Flaschengeist; Maintainer',
    pic:
      'https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/31768724_1663023210401956_3834323197281435648_n.jpg?_nc_cat=109&_nc_sid=09cbfe&_nc_ohc=jWvUfn_xJ9YAX_oJ3CE&_nc_ht=scontent-frt3-2.xx&oh=15249378051f1e27f8b15122effb5c4a&oe=5FAC6A17',
    description:
      'Eigentlich wöllte ich jetzt hier echt viel hinschreiben. Aber ich habe keinen Plan was. Früher war ich einfach nur Tim G. und habe für andere den Kaffe geholt. Unter anderen für Ferdinand Thiessen.'
  },
  {
    firstname: 'Ferdinand',
    lastname: 'Thiessen',
    club: 'Club Aquarium e.V.',
    pic:
      'https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/17022243_1418942461493397_9069541318944803902_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=HjkSm8vcRW8AX8bTnJ8&_nc_ht=scontent-frx5-1.xx&oh=f09bd36525f3c6e55feaafb3b05b43d2&oe=5FAD432A',
    job: 'Backend-Developer; Co-Maintainer',
    description:
      'Geiler Typ. Einfach mal so alles Aufgeräumt. Aufeinmal könnte man aus dem Code eine Dokumentation zaubern!'
  },
  {
    firstname: 'Dominik',
    lastname: 'Renz',
    club: 'Studentenclub Wu5 e.V.',
    job: 'Eigentlich Frontend-Developer',
    description: 'Er findet sich langsam rein.',
    pic:
      'https://scontent-frt3-1.xx.fbcdn.net/v/t31.0-8/10363433_647611335326483_3447118968375865826_o.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=nWMgo-6Ih74AX_NiGUz&_nc_ht=scontent-frt3-1.xx&oh=f16d2edfe86f68d54900099087edb9c9&oe=5FAACFD4'
  }
];
export default defineComponent({
  // name: 'PageName'
  components: { Developer },
  setup() {
    return { developers };
  }
});
</script>