An custom.ejs file for a Listing for quarto for external links

custom.ejs

```{=html}

<%
// Number of columns
const cols = 3;

// Card alignment
const align = "left";

// Borders
const hideBorders = false;

// Cap Options
const imgHeight = "100%";
%>

    <div class="list grid quarto-listing-cols-<%=cols%>">
        <% for (const item of items) { %>
            <div class="g-col-1" <%=metadataAttrs(item) %>>

                <div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
                    <% if (item.image) { %>
                            <div style="height: 10vw;">
                                <img src="<%= item.image %>" class="card-img-top" style="width: 100%; height: 10vw; object-fit: scale-down;"
                                    alt="<%= item['image-alt'] %>">
                            </div>
                        <% } else { %>
                            <div style="height: 10vw;">
                                <img src="browser-safari.svg" class="card-img-top" style="width: 100%; height: 10vw; object-fit: scale-up;"
                                    alt="<%= item['image-alt'] %>">
                            </div>
                            <% } %>
                                <% if ('title' || 'subtitle' || 'description' || 'author' || 'date' ||
                                    otherFields.length>
                                    0) { %>
                                    <div class="card-body post-contents">
                                        <% if ('title') { %>
                                            <h4 class="no-anchor card-title listing-title">
                                                <%= item.title %>
                                            </h4>
                                            <% } %>
                                                <% if ('subtitle') { %>
                                                    <div class="card-subtitle listing-subtitle">
                                                        <%= item.subtitle %>
                                                    </div>
                                                    <% } %>

                                                        <% if (item.description) { %>
                                                            <div class="card-text listing-description delink">
                                                                <p><%= item.description %></p>
                                                            </div>
                                                            <% } %>
                                                                <div class="card-text listing-description">
                                                                    
                                                                    <% if (item.dash_app) { %>
                                                                    <p><i class="bi bi-browser-safari"></i> <a href="<%=item.dash_app%>">Dash App</a> </p>
                                                                    <% } %>

                                                                    <% if (item.href) { %>
                                                                        <p><a href="<%=item.href%>"><i class="bi bi-browser-safari"></i>Link</a></p>
                                                                        <% } %>
                                                                        
                                                                    
                                                                                                  
                                                                    <% if (item.shiny_app) { %>
                                                                        <p><i class="bi bi-browser-safari"></i> <a href="<%=item.shiny_app%>">Shiny App</a></p>
                                                                        <% } %>

                                                                    <% if (item.repo) { %>

                                                                    <p><i class="bi bi-github"></i> <a href="<%=item.repo%>">Github Source</a></p>
                                                                    <% } %>

                                                                </div>


                                                            <% if (item.categories) { %>

                                                                <div class="'card-footer">
                                                                    <div class="listing-categories">
                                                                      <% for (const category of item.categories) { %>
                                                                    <div class="listing-category" onclick="window.quartoListingCategory('<%=category%>'); return false;"><%= category %></div>
                                                                      <% } %>
                                                                    </div>
                                                                    
                                                                </div>
                                                                <% } %>
                                                                <% const flexJustify='author' && 'date' ? "justify"
                                                                    : 'author' ? "start" : "end" ; %>
                                                                    <% if ('author' || 'date' ) { %>
                                                                        <div
                                                                            class="card-attribution card-text-small <%-flexJustify%>">
                                                                            <% if ('author') { %>
                                                                                <div class="listing-author">
                                                                                    <%= item.author %>
                                                                                </div>
                                                                                <% } %>
                                                                                    <% if ('date') { %>
                                                                                        <div class="listing-date">
                                                                                            <%= item.date %>
                                                                                        </div>
                                                                                        <% } %>
                                                                        </div>
                                                                        <% } %>
                                                                            <style>
                                                                                .listing-categories .listing-category .listing-href {
                                                                                    color: inherit;
                                                                                    /* blue colors for links too */
                                                                                    text-decoration: inherit;
                                                                                    /* no underline */
                                                                                }
                                                                            </style>

                                    </div>
                                    <% } %>



                </div>
            </div>
            <% } %>
    </div>



```