links.ejs

<%- include('./partials/header') %>
<div class="container article-container">
    <article style="padding: 16px">
        <%- include('./partials/page-info') %>
    </article>
    <% if (linkList && linkList.length){ %>
        <% linkList.forEach((link)=>{ %>
        <div class="link-card">
            <%if(link && link.image ===""){
                if(link.link.endsWith("/")) {
                    link.image  = link.link + "favicon.ico";
                }else {
                    link.image  = link.link + "/favicon.ico";
                }
            }%>
            <a href="<%= link.link %>"><img loading="lazy" class="image" src="<%= link.image %>"  alt="⚠️"/></a>
            <div class="info">
                <div class="title"><a href='<%= link.link %>' style='color: black'><%= link.title %></a></div>
                <div class="description"><%= link.description %></div>
            </div>
        </div>
    <% })} %>
    <%- include('./partials/prev-next') %>
    <%- include('./partials/comment') %>
</div>

<style>
    .link-card {
        padding: 1em 0;
        border: 2px solid transparent;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #999;
        margin-left: 20px;
        margin-right: 20px;
    }

    .link-card a {
        flex-shrink: 0;
    }

    .link-card img {
        width: 4em;
        height: 4em;
        margin: 0 1em 0 0;
    }

    .link-card .info {
        flex-shrink: 1;
    }

    .link-card .title {
        font-size: 1.1em;
        font-weight: bold;
        margin: 0.375em 0;
    }

    .link-card .description {
        font-size: 0.875em;
    }
</style>

<%- include('./partials/footer') %>