Split events in two columns

components/home/HomeNextEvents.vue

 <template>
-  <aside>
-    <h1 class="text-3xl uppercase text-gray-400 font-bold ml-2 mb-2 md:ml-1.5">
-      Événements à venir...
-    </h1>
-
-    <template v-if="!loading">
+  <aside v-if="!loading" class="lg:flex">
+    <div
+      v-for="(column, num) in columns"
+      :key="num"
+      class="flex-1"
+      :class="num === 1 && 'lg:ml-4'"
+    >
       <a
-        v-for="(event, index) in events"
+        v-for="(event, index) in column"
         :key="index"
         :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
         targe="_blank"
-        class="block dark-hover:bg-gray-700 hover:bg-gray-100 p-2 mt-1 rounded-lg transition-colors"
+        class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
       >
-        <div class="text-sm text-gray-500">
-          {{ $d(Date.parse(event.event.start), 'long') }}
+        <div class="event-date text-sm text-gray-500">
+          {{ prettyDate(event.event.start) }}
         </div>
         <div>{{ event.title }}</div>
       </a>
-    </template>
-
-    <div v-else class="h-80 flex items-center">
-      <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
     </div>
   </aside>
+
+  <div v-else class="h-80 flex items-center">
+    <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
+  </div>
 </template>
 
 <script>
@@ -34,12 +35,54 @@ export default {
     return {
       events: [],
       loading: false,
+      cols: 2,
     }
   },
+  computed: {
+    columns() {
+      const columns = []
+      const mid = Math.ceil(this.events.length / this.cols)
+      for (let col = 0; col < this.cols; col++) {
+        columns.push(this.events.slice(col * mid, col * mid + mid))
+      }
+      return columns
+    },
+  },
   async mounted() {
     this.loading = true
-    this.events = await fetchNextEvents()
+    this.events = await fetchNextEvents(`?start=${this.formatDateForParams()}`)
     this.loading = false
   },
+
+  methods: {
+    formatDateForParams(date = new Date()) {
+      const offset = date.getTimezoneOffset()
+      date = new Date(date.getTime() - offset * 60 * 1000)
+      return date.toISOString().split('T')[0]
+    },
+    prettyDate(date) {
+      const formatter = new Intl.DateTimeFormat(
+        this.$i18n.locale,
+        this.$i18n.dateTimeFormats[this.$i18n.locale].full
+      )
+      return formatter
+        .formatToParts(Date.parse(date))
+        .map(({ type, value }) => {
+          switch (type) {
+            case 'literal':
+              return value === ', ' ? ' à ' : value === ':' ? 'h' : value
+            default:
+              return value
+          }
+        })
+        .reduce((string, part) => string + part)
+    },
+  },
 }
 </script>
+
+<style lang="postcss" scoped>
+.event-date:first-letter {
+  text-transform: uppercase;
+}
+</style>

libs/api-forum.js

@@ -26,12 +26,12 @@ export async function fetchCategories() {
  *
  * @return {Array} An array of events
  */
-export async function fetchNextEvents() {
+export async function fetchNextEvents(params) {
   // Caches to avoid fetching each time it's mounted
   if (sessionStorage.getItem('events_forum')) {
     return JSON.parse(sessionStorage.getItem('events_forum'))
   } else {
-    const events = await fetch(`${forumUrl}/calendar.json`)
+    const events = await fetch(`${forumUrl}/calendar.json${params}`)
       .then((response) => response.json())
       .then((data) =>
         data.topic_list.topics.filter(

plugins/i18n.js

@@ -55,6 +55,15 @@ export default {
           hour: 'numeric',
           minute: 'numeric',
         },
+        full: {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          weekday: 'long',
+          hour: 'numeric',
+          literal: 'h',
+          minute: 'numeric',
+        },
       },
     },
   },