Display the event page

We're almost there. Now that you have extended the content model and all the elements are in place, you can open the website and view the event page.

event page example

You can see the event ID in the Details section of the event details page. Go to Content Hub ONE and, on the menu bar, click Content. From the Content type filter list, click Event, and then click the event to open its details page.

To display the event page:

  1. In Visual Studio Code, open the starter kit repository and go to the /pages folder.

  2. Make a copy of the index.tsx page and name it event.tsx.

  3. In the function, export async function getStaticProps, add the line const event = await getEventById('YOUR_EVENT_ID'), inserting the event ID from your Content Hub ONE instance.

  4. Modify the header elements to display the event data:

    • Add the following import statements after line 2: import Event from '../types/Events/events-type'; and import RichText from '../components/Common/richText-component';

    • Update the event object to display the h1 with event.eventName.

    • Update event.eventImage?.results[0]?.fileUrl for the hero banner.

    • Update event.eventDescription within a RichText Component. The event description is returned as a JSONContent object. Look at the [slug].tsx file located in the /pages/Recipes folder to see that those JSONContent objects can be rendered using the richText-component passing the JSONContent.

    • Remove import RecipeTeaserComponent from '../components/Recipe/recipeTeaser-component';.

    • Remove RecipeTeaserComponent allRecipes={allHomepage[0].recipes}/ .

  5. Run npm run dev.

The final code should look like this.

You can now navigate to http://localhost:3000/event to open the website and verify that everything works.

Do you have some feedback for us?

If you have suggestions for improving this article,