Merge branch 'main' into outsite-tweaks

.github/workflows/ci.yml → .github/workflows/lint.yml

@@ -1,23 +1,10 @@
-name: ci
+name: lint
 
-on:
-  push:
-    branches:
-      - main
-      - master
-  pull_request:
-    branches:
-      - main
-      - master
+on: push
 
 jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node: [22]
+  lint:
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout 🛎
@@ -26,7 +13,8 @@ jobs:
       - name: Setup node env 🏗
         uses: actions/[email protected]
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 22
+          cache: npm
 
       - name: Install dependencies 👨🏻‍💻
         run: npm ci

README.md

@@ -33,6 +33,15 @@ npm run dev outsite.nl
 
 _The domain argument is actually the subdirectory. We use [Nuxt layers](https://nuxt.com/docs/getting-started/layers) to generate multiple websites from the same codebase._
 
+### Recommended development tools
+
+* [Visual Studio Code](https://code.visualstudio.com)
+  * [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+  * [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+  * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+  * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+
 ## Production
 
 Build the application for production:

dwhdelft.nl/app.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <main class="bg-white relative">
+    <main class="relative bg-white">
       <NuxtPage />
     </main>
     <footer id="contact">

dwhdelft.nl/components/Announcement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="block bg-brand-800 hover:bg-brand-700 rounded-xl text-white p-4 shadow">
+  <div class="block rounded-xl bg-brand-800 p-4 text-white shadow hover:bg-brand-700">
     <slot />
   </div>
 </template>

dwhdelft.nl/components/EventRestrictionLabels.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  restrictions: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const { tt } = useT()
+</script>
+
+<template>
+  <div class="flex items-start space-x-0">
+    <div
+      v-for="restriction in restrictions"
+      :key="restriction"
+      class="rounded-lg bg-brand-200 px-2 py-1 text-xs uppercase tracking-wider"
+      v-text="tt(restriction)"
+    />
+  </div>
+</template>

dwhdelft.nl/components/PhotoCard.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  image: { type: Object, required: true },
+})
+</script>
+
+<template>
+  <div class="group overflow-hidden rounded-xl shadow-lg">
+    <div class="relative mx-auto h-80 w-full overflow-hidden">
+      <div
+        class="absolute left-0 top-0 z-50 p-6 text-2xl font-bold uppercase tracking-wider text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.45)]"
+      >
+        {{ title }}
+      </div>
+      <img :src="image" class="size-full object-cover" />
+      <div class="absolute left-0 top-0 h-2/3 w-full bg-gradient-to-b from-black/50 group-hover:from-black/30" />
+      <div
+        class="absolute bottom-0 left-0 flex h-2/3 w-full flex-col justify-end bg-gradient-to-t from-black/95 p-6 group-hover:from-black/80"
+      >
+        <p class="text-lg leading-snug text-white">
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

dwhdelft.nl/components/layout/Footer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconLink } from '@iconify-prerendered/vue-zondicons'
+import ExternalLinkIcon from '#shared/assets/images/layout/heroicon_external_link.svg'
 import InstagramIcon from '#shared/assets/images/social/instagram.svg'
 import YouTubeIcon from '#shared/assets/images/social/youtube.svg'
 import GitHubIcon from '#shared/assets/images/social/github.svg'
@@ -28,19 +28,19 @@ const links = linkCategories.map((category) => ({
 </script>
 
 <template>
-  <ElementsContainer class="text-white py-8 md:flex space-y-8 md:space-y-0 md:space-x-8 xl:space-x-16 justify-center">
+  <ElementsContainer class="justify-center space-y-8 py-8 text-white md:flex md:space-x-8 md:space-y-0 xl:space-x-16">
     <div v-for="category in links" :key="category.name">
-      <h3 class="text-xl text-gray-300 font-bold mb-4 uppercase tracking-wider" v-text="tt(category.name)" />
+      <h3 class="mb-4 text-xl font-bold uppercase tracking-wider text-gray-300" v-text="tt(category.name)" />
       <div class="space-y-2">
         <nuxt-link
           v-for="{ url, name, external } in category.items"
           :key="url"
           :to="url"
-          class="font-semibold block items-center text-gray-400 hover:text-white"
+          class="block items-center font-semibold text-gray-400 hover:text-white"
           :target="external ? '_blank' : '_self'"
         >
           {{ tt(name) }}
-          <IconLink v-if="external" class="inline w-4 ml-1" />
+          <ExternalLinkIcon v-if="external" class="ml-1 inline w-4" />
         </nuxt-link>
       </div>
     </div>

dwhdelft.nl/components/layout/Header.vue

@@ -3,34 +3,34 @@ en:
   menu:
     - title: Home
       url: index
-    - title: Bar Buddy
-      url: barbuddy
-    - title: Education
-      url: /education
-    - title: Jong&Out
-      url: /jongenout
+    - title: Outsite
+      url: https://outsite.nl
     - title: MIXUP
-      url: /mixup
+      url: mixup
+    - title: Jong&Out
+      url: jongenout
+    - title: Education
+      url: education
     - title: Andersblad
       url: andersblad
     - title: Contact
-      url: '/contact'
+      url: contact
 nl:
   menu:
     - title: Home
       url: index
-    - title: Barbuddy
-      url: barbuddy
-    - title: Voorlichting
-      url: /education
-    - title: Jong&Out
-      url: /jongenout
+    - title: Outsite
+      url: https://outsite.nl
     - title: MIXUP
-      url: /mixup
+      url: mixup
+    - title: Jong&Out
+      url: jongenout
+    - title: Voorlichting
+      url: education
     - title: Andersblad
       url: andersblad
     - title: Contact
-      url: '/contact'
+      url: contact
 </i18n>
 
 <script setup>
@@ -46,8 +46,8 @@ const menu = t('menu')
       <DWHLogo class="h-14 fill-current text-white" />
     </template>
     <template #background>
-      <div class="absolute top-0 bottom-0 w-full h-full overflow-hidden">
-        <img src="../../assets/images/photos/cover.jpg" class="w-full h-full object-cover opacity-50 blur-sm" />
+      <div class="absolute inset-y-0 size-full overflow-hidden">
+        <img src="../../assets/images/photos/cover.jpg" class="size-full object-cover opacity-50 blur-sm" />
       </div>
     </template>
     <slot />

dwhdelft.nl/components/layout/SmallHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutHeader small>
-    <h1 class="text-4xl text-white font-normal">
+    <h1 class="text-4xl font-normal text-white">
       <slot />
     </h1>
   </LayoutHeader>

dwhdelft.nl/components/pages/andersblad/FileCards.vue

@@ -20,7 +20,7 @@ const goToFile = (file) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-2 md:gap-4">
+  <div class="grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-4 lg:grid-cols-5">
     <ElementsActionCard
       v-for="file in filesForDisplay"
       :key="file.id"
@@ -32,9 +32,9 @@ const goToFile = (file) => {
       @click="goToFile(file)"
     >
       <template #header>
-        <img :src="file.thumbnailLink" class="w-full h-full object-cover" />
+        <img :src="file.thumbnailLink" class="size-full object-cover" />
       </template>
-      <p class="text-gray-600 text-base -mt-4">{{ file.publishDate }}</p>
+      <p class="-mt-4 text-base text-gray-600">{{ file.publishDate }}</p>
     </ElementsActionCard>
   </div>
 </template>

dwhdelft.nl/components/pages/contact/ContactForm.vue

@@ -19,7 +19,7 @@ const form = useReMemberForm('contact-dwh', {
 <template>
   <ElementsFormSuccessMessage
     v-if="form.state.value === 'success'"
-    class="md:pr-48 !bg-brand-100"
+    class="bg-brand-100 md:pr-48"
     :title="$t('forms.success.heading')"
     :subtitle="t('success')"
   />

dwhdelft.nl/components/pages/contact/OpeningHours.vue

@@ -6,22 +6,15 @@ const openingHours = (await useAsyncData(() => queryContent('opening_hours').fin
 
 <template>
   <ul class="space-y-4 leading-snug">
-    <li v-for="event in openingHours" :key="event.name" class="flex space-x-2 items-top">
+    <li v-for="event in openingHours" :key="event.name" class="flex space-x-2">
       <div class="w-32">
-        <div class="uppercase font-bold tracking-wide" v-text="tt(event.day)" />
+        <div class="font-bold uppercase tracking-wide" v-text="tt(event.day)" />
         {{ event.name }}
       </div>
       <div>
         <div class="flex space-x-2">
           <div>{{ event.start_time }} - {{ event.end_time }}</div>
-          <div v-if="event.restrictions">
-            <div v-for="restriction in event.restrictions" :key="restriction">
-              <div
-                class="bg-brand-200 px-2 rounded-lg text-xs uppercase tracking-wider inline-flex items-center"
-                v-text="tt(restriction)"
-              />
-            </div>
-          </div>
+          <EventRestrictionLabels :restrictions="event.restrictions" />
         </div>
         <div v-if="event.link">
           <a

dwhdelft.nl/components/pages/education/EducationForm.vue

@@ -21,7 +21,7 @@ const form = useReMemberForm('education', {
   <div>
     <ElementsFormSuccessMessage
       v-if="form.state.value === 'success'"
-      class="!bg-brand-100"
+      class="bg-brand-100"
       :title="$t('forms.success.heading')"
       :subtitle="t('form_success')"
     />

dwhdelft.nl/components/pages/education/Educators.vue

@@ -6,20 +6,20 @@ const requireImage = (name) => image(name.toLowerCase())
 </script>
 
 <template>
-  <div class="grid xl:grid-cols-2 gap-6 text-base">
+  <div class="grid gap-6 text-base xl:grid-cols-2">
     <div v-for="educator in educators" :key="educator.name">
-      <div class="md:flex items-center md:space-x-6 bg-white rounded-md md:rounded-full p-4 shadow-lg">
-        <div class="w-32 h-32 rounded-full overflow-hidden mx-auto">
-          <img :src="requireImage(educator.name)" class="object-cover h-full" />
+      <div class="items-center rounded-md bg-white p-4 shadow-lg md:flex md:space-x-6 md:rounded-full">
+        <div class="mx-auto size-32 overflow-hidden rounded-full">
+          <img :src="requireImage(educator.name)" class="h-full object-cover" />
         </div>
-        <div class="flex-1 flex flex-col justify-between relative p-3">
-          <div class="absolute text-[10rem] text-brand-100 -ml-6 pt-6 z-0">“</div>
-          <div class="text-xl z-10 pt-2">
+        <div class="relative flex flex-1 flex-col justify-between p-3">
+          <div class="absolute z-0 -ml-6 pt-6 text-[10rem] text-brand-100">“</div>
+          <div class="z-10 pt-2 text-xl">
             {{ educator.quote }}
           </div>
           <div>
-            <span class="uppercase tracking-wide font-bold text-brand-400 mr-1" v-text="educator.name" />
-            <span class="text-gray-500 italic" v-text="educator[`pronouns_${$i18n.locale}`]" />
+            <span class="mr-1 font-bold uppercase tracking-wide text-brand-400" v-text="educator.name" />
+            <span class="italic text-gray-500" v-text="educator[`pronouns_${$i18n.locale}`]" />
           </div>
         </div>
       </div>

dwhdelft.nl/components/pages/home/BulletPoints.vue

@@ -38,24 +38,14 @@ const requireImage = (name) => image(`bullet_${name}`)
 
 <template>
   <ElementsContainer>
-    <div class="grid md:grid-cols-2 gap-6">
-      <div v-for="point in t('bullet_points')" :key="point.title" class="flex-1 rounded-xl overflow-hidden shadow-lg">
-        <div class="w-full h-80 overflow-hidden mx-auto relative">
-          <div
-            class="absolute z-50 top-0 left-0 p-6 uppercase font-bold tracking-wider text-2xl text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.45)]"
-          >
-            {{ point.title }}
-          </div>
-          <img :src="requireImage(point.image)" class="object-cover h-full w-full" />
-          <div
-            class="absolute bottom-0 left-0 flex flex-col justify-end w-full h-full md:h-2/3 bg-gradient-to-t from-gray-900 p-6"
-          >
-            <p class="text-white text-lg leading-snug">
-              {{ point.description }}
-            </p>
-          </div>
-        </div>
-      </div>
+    <div class="grid gap-6 xl:grid-cols-2">
+      <PhotoCard
+        v-for="point in t('bullet_points')"
+        :key="point.title"
+        :title="point.title"
+        :description="point.description"
+        :image="requireImage(point.image)"
+      />
     </div>
   </ElementsContainer>
 </template>

dwhdelft.nl/components/pages/home/Intro.vue

@@ -36,11 +36,11 @@ const barOpeningHours = openingHours.value.events.find((event) => event.day.en =
   <div>
     <ElementsParagraphedText
       :paragraphs="t('intro')"
-      class="text-lg md:text-xl md:leading-relaxed text-gray-800 space-y-4"
+      class="space-y-4 text-lg text-gray-800 md:text-xl md:leading-relaxed"
     />
-    <p v-if="barOpeningHours.announcement" class="mt-3 mb-4 text-brand-500" v-text="tt(barOpeningHours.announcement)" />
+    <p v-if="barOpeningHours.announcement" class="mb-4 mt-3 text-brand-500" v-text="tt(barOpeningHours.announcement)" />
     <PagesHomeInvite
-      class="my-8 md:my-4"
+      class="my-8"
       :announcement="t('invite.announcement')"
       :time="t('invite.time', [barOpeningHours.start_time])"
     />