feat: handle EventCard rendering in document

Author: samipe

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     ChevronIcon: typeof import('./src/components/icons/ChevronIcon.vue')['default']
     ComingSoonBanner: typeof import('./src/components/banners/ComingSoonBanner.vue')['default']
     copy: typeof import('./src/components/cards/EventCards copy.vue')['default']
+    EventCard: typeof import('./src/components/cards/EventCard.vue')['default']
     EventCards: typeof import('./src/components/cards/EventCards.vue')['default']
     GlobeIcon: typeof import('./src/components/icons/GlobeIcon.vue')['default']
     GlobeRBCN: typeof import('./src/components/icons/GlobeRBCN.vue')['default']

src/components/cards/EventCard.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+type Styling = 'primary' | 'secondary'
+defineProps({
+  title: String,
+  description: String,
+  styling: String as PropType<Styling>
+})
+
+</script>
+
+<template>
+  <v-col cols="12" sm="4">
+    <v-card elevation="2" rounded="md">
+
+      <div style="height: 240px; width: 240px;"></div>
+
+      <v-card-item class="pt-0">
+        <h4 class="text-h5" v-text="title" :class="styling === 'secondary' ? 'text-white' : 'text-primary'"></h4>
+        <div class="d-flex align-center justify-space-between mt-1">
+          <div>
+            <span :class="[
+              styling === 'secondary' ? 'text-white' : 'text-black', 'text-body-1 text-medium-emphasis']"
+              v-text="description"></span>
+          </div>
+          <div class="d-flex justify-end">
+            <v-btn size="xs" variant="text" :color="styling === 'secondary' ? 'white' : 'secondary'" class="d-flex">
+              more
+            </v-btn>
+          </div>
+        </div>
+      </v-card-item>
+    </v-card>
+  </v-col>
+</template>

src/components/index.ts

@@ -5,6 +5,7 @@ export { default as NotFoundBanner } from './banners/NotFoundBanner.vue'
 export { default as ComingSoonBanner } from './banners/ComingSoonBanner.vue'
 
 export { default as EventCards } from './cards/EventCards.vue'
+export { default as EventCard } from './cards/EventCard.vue'
 export { default as SpeakerCards } from './cards/SpeakerCards.vue'
 
 export { default as PageFooter } from './footer/PageFooter.vue'

src/components/sections/PageSection.vue

@@ -1,10 +1,14 @@
 <template>
-  <v-row :class="bg ? `bg-${bg}` : ''">
-    <v-responsive class="mx-auto py-10" max-width="960">
-      <h2>{{ props.title }}</h2>
-      <slot></slot>
-    </v-responsive>
-  </v-row>
+  <div>
+    <v-container>
+      <v-row>
+        <h2>{{ props.title }}</h2>
+      </v-row>
+      <v-row>
+        <slot></slot>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 

src/content/contentful.ts

@@ -2,8 +2,8 @@ import { createClient } from 'contentful'
 
 const client = createClient({
   space: '0375ld2k0qal',
-  environment: 'master',
-  accessToken: '0JsLjZA5NNToRRuCN_8kQDlK1AiOI3ExSRNlaNM1sec'
+  environment: 'dev',
+  accessToken: 'QODt2cpA7LqQsSoqZd1oQ38yKLR7qQjh_UDHpOZYWOs'
 })
 
 const getPages = () => client
@@ -17,4 +17,4 @@ const getEntries = () => client
 export {
   getPages,
   getEntries
-}
+}

src/views/Sponsor.vue

@@ -45,13 +45,11 @@
 </template>
 
 <script>
-import { Banner } from 'Components'
 import { marked } from 'marked'
 
 export default {
   name: 'Sponsor',
   components: {
-    Banner
   },
   methods: {
     parseMarkdown(text) {

src/views/main/Home.vue

@@ -14,16 +14,18 @@
 
   </div>
 
-  <v-container fluid class="pa-0">
-
     <news-banner v-if="$t('newsBanner') !== ''">
       <div v-html="$t('newsBanner')" />
     </news-banner>
 
-    <page-section v-for="(section, index) in sections" :key="section.data.target.fields.title"
-      :titleId="section.data.target.fields.title" :title="section.data.target.fields.title"
-      :bg="index % 2 === 1 ? 'surface-bright' : undefined">
-      <RichTextRenderer :document="section.data.target.fields.body" :nodeRenderers="renderNodes()" />
+    <page-section
+      v-for="(section, index) in sections"
+      :key="section.data.target.fields.title"
+      :title="section.data.target.fields.shownTitle"
+      :class="index % 2 && 'bg-surface-bright'">
+      <RichTextRenderer
+        :document="section.data.target.fields.body"
+        :nodeRenderers="renderNodes()" />
     </page-section>
 
     <div class="bg-surface-bright">
@@ -36,9 +38,6 @@
       <SpeakerCards />
     </v-responsive>
 
-
-  </v-container>
-
 </template>
 
 <script>
@@ -47,11 +46,13 @@ import {
   PageSection,
   NewsBanner,
   EventCards,
+  EventCard,
   SpeakerCards,
   TicketItem,
   SponsorItem
 } from '@/components'
 import RichTextRenderer from 'contentful-rich-text-vue-renderer'
+import { BLOCKS } from '@contentful/rich-text-types';
 import { h } from 'vue'
 import { useGlobalStore } from '@/store';
 import { mapState } from 'pinia';
@@ -70,7 +71,8 @@ export default {
     RichTextRenderer,
     TicketItem,
     SponsorItem,
-    EventCards
+    EventCards,
+    EventCard,
   },
   computed: {
     currentYear() {
@@ -79,6 +81,7 @@ export default {
     ...mapState(useGlobalStore, ['pages']),
     sections() {
       const page = this.pages.find((p) => p.fields.pageName === '2025') ?? this.pages[0]
+      console.log(page)
       return page.fields.pageBody.content
         .filter((c) => c.nodeType === 'embedded-entry-block')
         .map((c) => c)
@@ -108,15 +111,17 @@ export default {
     },
     renderNodes() {
       return {
+        [BLOCKS.PARAGRAPH]: (node, key, next) => h('p', { class: 'w-100' }, next(node.content, key, next)),
+        [BLOCKS.HEADING_2]: (node, key, next) => h('h2', { class: 'w-100' }, next(node.content, key, next)),
+        [BLOCKS.HEADING_3]: (node, key, next) => h('h3', { class: 'w-100' }, next(node.content, key, next)),
+        [BLOCKS.HEADING_4]: (node, key, next) => h('h4', { class: 'w-100' }, next(node.content, key, next)),
         'embedded-entry-inline': (node) => {
           const target = node.data.target
           const type = target.sys.contentType.sys.id
 
           if (type === 'ticket') {
             const { ticketName, href, price, discountedPrice, validFrom, validUntil, highlighted } = target.fields
 
-
-            console.log("type >>>>>", ticketName, price, validUntil)
             const isValid =
               (!validFrom || (new Date() > new Date(validFrom))) &&
               (!validUntil || (new Date() < new Date(validUntil)))
@@ -136,6 +141,17 @@ export default {
 
           return ''
         },
+        'embedded-entry-block': (node) => {
+          const target = node.data.target
+          const type = target.sys.contentType.sys.id
+
+          if (type === 'card') {
+            const {cardTitle, description} = target.fields
+            return h(EventCard, {title: cardTitle, description})
+          }
+
+          return ''
+        },
         'embedded-asset-block': (node) => {
           const target = node.data.target
           const file = target.fields.file