Hide monthly events on contact page

Author: casperboone

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

@@ -1,7 +1,18 @@
+<i18n lang="yaml">
+en:
+  monthly_events: Besides the regular opening hours, there are also various [monthly events](/#recurring-events-monthly) at DWH.
+nl:
+  monthly_events: Naast de vaste openingstijden zijn er ook diverse [maandelijkse activiteiten](/#recurring-events-monthly) bij DWH.
+</i18n>
+
 <script setup>
-const { tt } = useT()
+import Markdown from '#shared/components/Markdown.vue'
+
+const { t, tt } = useT()
 
-const openingHours = (await useAsyncData(() => queryContent('opening_hours').findOne())).data.value.events
+const openingHours = (await useAsyncData(() => queryContent('opening_hours').findOne())).data.value.events.filter(
+  (event) => !('monthly' in event)
+)
 </script>
 
 <template>
@@ -26,4 +37,7 @@ const openingHours = (await useAsyncData(() => queryContent('opening_hours').fin
       </div>
     </li>
   </ul>
+  <div class="mt-6 w-80 text-gray-800">
+    <Markdown :content="t('monthly_events')" />
+  </div>
 </template>

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

@@ -49,7 +49,7 @@ const openingHoursMonthly = openingHours.value.events.filter((o) => 'monthly' in
     </table>
 
     <!-- Monthly events -->
-    <h2 class="text-5xl font-medium leading-tight text-brand-500 md:mb-6 md:text-center">
+    <h2 id="recurring-events-monthly" class="text-5xl font-medium leading-tight text-brand-500 md:mb-6 md:text-center">
       <Markdown :content="t('announcement_month')" />
     </h2>
 

dwhdelft.nl/pages/index.vue

@@ -55,7 +55,7 @@ const instagramChannels = [
       <a href="#join-dwh" class="block">
         <ElementsPrimaryButton>{{ t('hero.leftButton') }}</ElementsPrimaryButton>
       </a>
-      <a href="#recurring_events" class="block">
+      <a href="#recurring-events" class="block">
         <ElementsSecondaryButton>{{ t('hero.rightButton') }}</ElementsSecondaryButton>
       </a>
     </div>
@@ -88,7 +88,7 @@ const instagramChannels = [
     <PagesHomeJoinOptions />
   </section>
 
-  <section id="recurring_events" class="bg-white">
+  <section id="recurring-events" class="bg-white">
     <PagesHomeRecurringEvents />
   </section>