custom.ejs

```{=html}
<%/* so category filtering works */%>
<ul class="list" style="list-style-type:none">

<%/* create custom listing */%>
<% for (const item of items) { %>

  <li <%= metadataAttrs(item) %>>
  
    <div id="container" style="height:100%; width:100%; overflow: hidden; display: flex; margin-left: -35px; margin-bottom: 30px;">
    
      <div id="itemImage" style="width:150px; height:150px; background-size:contain; background-position:center; margin: 0px 30px 15px 0px;">
      
        <a href="<%- item.url %>" class="thumbnail">
          <img src="<%- item.image %>" width="150" height="150" />
        </a>
        
      </div>
    
    <div id="itemDetails" style="width:100%;">
    
      <div id="itemHeader" style="justify-content: space-between; line-height:30px; margin-bottom:3px; align-items:flex-start;">
    
      <div id="itemTitle" style="display:block; width:95%">
        <p style="font-size:20px">
          <a href="<%- item.url %>"><%= item.title %>
          </a>
        </p>
      </div>
      
      
      <div class="container" style="display: flex; height: 100px;">
      
        <div style="width: 50%;">
            <%= item['source'] %>
            <p style="font-size:14px"><%= item['date'] %></p>
        </div>
        
        <div style="flex-grow: 1;">
          Categories:
          
            <% for (const category of item.categories) { %>
              <div class="listing-category" style="font-size:14px" onclick="window.quartoListingCategory('<%=category%>'); return false;">
                  <%= category %>
              </div>
            <% } %>
            
        </div>
        
      </div>
      
    
    </div>
    
  </div>
  
</div>

</li>

<% } %>

</ul>
```