Add about/history page

content/history/1968_dswh.md

@@ -0,0 +1,11 @@
+---
+year: 1968
+title_nl: Oprichting DSWH
+title_en: X
+description_nl:
+  DWH werd in 1968 opgericht onder de naam Delftse Studenten Werkgroep Homosexualiteit door onder andere Flip
+  Spangenberg, Hans Pon en Jan Molema. DSWH was toen lid van de landelijke koepelorganisatie Federatie
+  Studenten Werkgroepen Homoseksualiteit.
+description_en:
+  X
+---

content/history/1971_dswh_to_dwh.md

@@ -0,0 +1,13 @@
+---
+year: 1971
+title_nl: Van DSWH naar DWH
+title_en: X
+description_nl:
+  Samen met de andere leden van de Federatie Studenten Werkgroepen Homoseksualiteit demonstreerden DSWH op
+  een nieuwe, confronterender wijze tegen artikel 248bis wat homoseksuele relaties met jongeren onder de 21
+  verbood. Nadat deze hierdoor in 1971 was afgeschaft werden veel andere werkgroepen opgeheven of gingen ze
+  op in lokale COC afdelingen. DWH bleef bestaan als onafhankelijke organisatie maar schrapte rond deze tijd
+  wel de term 'Studenten' uit de naam.
+description_en:
+  X
+---

content/history/1985_building.md

@@ -0,0 +1,12 @@
+---
+year: 1985
+title_nl: Eigen pand aan de Lange Geer
+title_en: X
+description_nl:
+  De eerste jaren kwamen de leden van DWH bijeen in elkaars huiskamers. Na enkele jaren verkregen we een
+  ruimte in het Trefcentrum. Grotere activiteiten zoals feesten werden in die tijd gegeven in de sociëteiten
+  van bevriende studentenverenigingen zoals Wolbodo en de Koornbeurs. In 1984 gingen we op zoek naar een eigen
+  pand om te huren, en in 1985 trok DWH in op Lange Geer 22, waar we nog steeds gevestigd zijn.
+description_en:
+  X
+---

content/history/1985_official_start.md

@@ -0,0 +1,12 @@
+---
+year: 1985
+title_nl: Officiële oprichting vereniging
+title_en: X
+description_nl:
+  Voor het huren van het pand was een juridische entiteit nodig. Hoewel het zich reeds gedroeg als een
+  vereniging, was DWH dit officieel nog niet. In 1985 werd de vereniging ingeschreven bij de Kamer van
+  Koophandel. De eerste officiële leden, waarvan sommigen nog steeds lid zijn, zijn hun lidmaatschap
+  dan ook gestart in 1985.
+description_en:
+  X
+---

content/history/1989_verhoef.md

@@ -0,0 +1,13 @@
+---
+year: 1989
+title_nl: Hans-Paul Verhoef
+title_en: X
+description_nl:
+  In april 1989 kwam toenmalig voorzitter van DWH Hans-Paul Verhoef internationaal in het nieuws toen
+  hij in de Verenigde Staten werd gearresteerd omdat hij aids had. Hij had dit niet verteld bij
+  binnenkomst van het land, aangezien hem dan de toegang ontzegd zou zijn. Dit kwam hem te staan op
+  vijf dagen cel. In de jaren na zijn overlijden is door de vereniging de Hans-Paul Verhoef prijs
+  jaarlijks gegeven aan iemand die veel bijdroeg aan lhbt-emancipatie in de regio.
+description_en:
+  X
+---

content/history/2002_outsite.md

@@ -0,0 +1,12 @@
+---
+year: 2002
+title_nl: Oprichting Outsite
+title_en: X
+description_nl:
+  In augustus 2002 werd Outsite opgericht als onofficiële ondervereniging en merknaam van DWH gericht
+  op jongeren, en dan vooral studenten. Dit bleek succesvol en via Outsite kreeg DWH, wat zelf
+  ondertussen lang niet alleen uit studenten bestond, nauwere banden met de studentenverenigingen in
+  Delft en de universiteit.
+description_en:
+  X
+---

sites/dwhdelft.nl/components/HistoryTimeline.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col md:grid grid-cols-9 mx-auto">
+    <HistoryTimelineEntry
+      v-for="(event, index) in events"
+      :key="event.year + event.title"
+      :year="event.year"
+      :title="event.title_nl"
+      :description="event.description_nl"
+      :is-left="index % 2 == 0"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['events'],
+}
+</script>

sites/dwhdelft.nl/components/HistoryTimelineEntry.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="['flex md:contents', isLeft && 'flex-row-reverse']">
+    <HistoryTimelineEntryYear v-if="!isLeft" class="col-start-5 col-end-6 md:mx-auto relative mr-4" :year="year" />
+    <div
+      :class="[isLeft ? 'col-start-1 col-end-5' : 'col-start-6 col-end-10', 'bg-white rounded-lg p-6 my-8 shadow-xl']"
+    >
+      <h3 class="text-xl font-bold mb-2 text-brand-500 uppercase tracking-wider" v-text="title" />
+      <p class="text-lg" v-text="description" />
+    </div>
+    <HistoryTimelineEntryYear v-if="isLeft" class="col-start-5 col-end-6 md:mx-auto relative mr-4" :year="year" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['year', 'title', 'description', 'isLeft'],
+}
+</script>

sites/dwhdelft.nl/components/HistoryTimelineEntryYear.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="h-full w-6 flex items-center justify-center">
+      <div class="h-full w-1 bg-brand-300 pointer-events-none"></div>
+    </div>
+    <div
+      class="
+        w-16
+        sm:w-20
+        h-16
+        sm:h-20
+        absolute
+        top-12
+        sm:top-1/2
+        -mt-10
+        -ml-3
+        sm:-ml-7
+        rounded-full
+        bg-white
+        flex
+        items-center
+        justify-center
+        border-8 border-brand-300
+      "
+    >
+      <span class="text-brand-600 tracking-wider font-bold text-lg" v-text="year" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['year'],
+}
+// w-20
+// h-20
+// absolute
+// top-0
+// sm:top-1/2
+// mt-2
+// sm:-mt-10
+// -ml-6
+// sm:-ml-7
+// rounded-r-full
+// sm:rounded-full
+// bg-white
+// flex
+// items-center
+// justify-center
+// border-8 border-brand-300
+</script>

sites/dwhdelft.nl/pages/about.vue

@@ -0,0 +1,43 @@
+<i18n lang="yaml">
+en:
+  title: About DWH
+  main_text: The association magazine of DWH is published several times a year.
+    Earlier editions can be seen here in PDF format. The magazine is (partly) in Dutch.
+  history_title: <strong>History</strong> of DWH
+nl:
+  title: Over DWH
+  main_text:
+    - DWH is een lhbt-vereniging en belangenorganisatie die zich richt op Delft en omgeving. DWH is een ontmoetingsplek voor lhbt'ers in de regio met wekelijks een eettafel, filmavond en twee baravonden, en daarnaast activiteiten en feesten. Het doel van DWH is het doorbreken van heteronormen, het vergroten van acceptatie en het stimuleren van discussie rond lhbt-onderwerpen. Naast het bieden van een ontmoetingsplek geven ze daarom ook voorlichting op scholen en werken ze samen met andere organisaties om voor zichtbaarheid en discussie te zorgen rond dagen als Coming Out Dag.
+    - Lhbt-jongerenvereniging Outsite is onderdeel van DWH. Daarnaast wordt samengewerkt met de Delftse homosportvereniging het Roze Blok en met COC Nederland.
+    - DWH is sinds 1985 gevestigd aan de Lange Geer in Delft en geeft enkele keren per jaar een ledenblad, het Andersblad, uit.
+  list_title: <strong>Geschiedenis</strong> van DWH
+</i18n>
+
+<template>
+  <div>
+    <SmallHeader>{{ $t('title') }}</SmallHeader>
+
+    <PageIntroText>
+      <p v-for="text in $t('main_text')" :key="text" class="mb-4" v-html="text" />
+    </PageIntroText>
+
+    <section>
+      <div class="container px-4 mx-auto mb-6">
+        <h1 class="text-brand-400 font-medium text-5xl" v-html="$t('list_title')" />
+      </div>
+      <div class="bg-brand-400">
+        <div class="container px-4 mx-auto">
+          <HistoryTimeline :events="historyEvents" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ $content, app }) {
+    return { historyEvents: await $content('history').sortBy('year').fetch() }
+  },
+}
+</script>