We’ve successfully pulled data back from our Discord server now, but haven’t done anything with it.

Let’s jump into that events.njk page again and start building out an event card to display our events.

{# src/events.njk #}

<div class="flex flex-col items-center justify-center mt-10">
  <div class="flex flex-col">
     <h1>Discord Community Events</h1>
     <p class="animate-pulse">Served via On Demand Builders</p>
  </div>
</div>

Currently we’ve just got a page rendering some static content. Let’s use Nunjucks loops to render a card for each of our events.

The data we care about right now from the large event object coming back are:

• creator
• name
• scheduled start time
• description
• and if it’s not inside of Discord, where is it

Our other problem, is making sure we check the event for any meta data that could point us toward an external link for this event. Thankfully, this is another quick fix with Nunjucks if blocks.

Our final card (should) end up looking something like below.

{% for event in events %}
	<div class="border-4 border-pink-700 rounded-md p-5 mt-5">
    <div class="flex items-center">
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900">Created by: {{ event.creator.username }}</p>
        <div class="flex text-sm leading-5 text-gray-500">
          <time datetime="2020-03-16">{{ event.scheduled_start_time }}</time>
        </div>
      </div>
    </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      <p>Title: {{ event.name }}</p>
      </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      Description: {{ event.description }}
    </div>

    {% if event.entity_metadata %}
      <div class="mt-3 text-sm leading-5 text-gray-900">
        <a href={{ event.entity_metadata.location }}>Where: {{ event.entity_metadata.location }}</a>
      </div>
    {% endif %}
  </div>
{% endfor %}

Awesome, now we have something to show when we fetch our events. We may have use for this event card in other parts of our site though, so instead of copying and pasting these around, we can move it into it’s own component.

In this instance though, we’re faced with a bit of a challenge. How do we get the data inside of the template??

Nunjucks macro’s fit right into what we need here! You can think of a macro as regular old function, that accepts some parameters, and returns some values. For those coming from a component framework like React, such as myself, you can think of this as a component that accepts props, and returns markup.

To get this macro working, we’ll need to create a new file inside of src/_includes/components

named event-card.njk and just copy + paste the markup inside of our if block from above into the file surrounded by the macro block. The block will be where you name your component and define it’s parameters, which will be event.

{% macro card(event) %}
  <div class="border-4 border-pink-700 rounded-md p-5 mt-5">
    <div class="flex items-center">
      <img src={{ "<https://cdn.discordapp.com/guild-events/>" + event.id + "/" + event.image + ".png"  }} />
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900">Created by: {{ event.creator.username }}</p>
        <div class="flex text-sm leading-5 text-gray-500">
          <time datetime="2020-03-16">{{ event.scheduled_start_time }}</time>
        </div>
      </div>
    </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      <p>Title: {{ event.name }}</p>
      </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      Description: {{ event.description }}
    </div>

    {% if event.entity_metadata %}
      <div class="mt-3 text-sm leading-5 text-gray-900">
        <a href={{ event.entity_metadata.location }}>Where: {{ event.entity_metadata.location }}</a>
      </div>
    {% endif %}
  </div>
{% endmacro %}

To finalize the use of our new macro component, we need to head on back to events.njk with a couple new lines of code.