vincula/views/index.ejs

<%- contentFor('body') %>

  <div class="row">

    <% news.forEach(function(key){ %>
      <div class="col-xl-3 col-lg-4 col-md-6 pb-2 px-1">
        <div class="card card-post d-flex border-0">

          <!-- <nav class="w-100 position-absolute d-flex justify-content-end align-items-center p-3">
            <div>
              <a href="#" class="bg-gradient-info p-1 text-white d-flex justify-content-center">
                <i class="material-icons">more_vert</i>
              </a>
            </div>
          </nav> -->

          <img class="card-img" src="<%= key.thumb %>" />

          <!-- <div class="card-img-overlay d-flex flex-column"> -->

          <div class="card-img-overlay mt-auto">

            <div class="m-0 p-0 text-secondary">
              <small class="gray-100">@<%= key.websiteSlug %>
              </small>
              |
              <small class="post-date"><%= key.createdAt.toISOString() %></small>
            </div>
            <a class="card-title text-light" href="<%= key.link %>">
              <%= key.title %>
            </a>

            <p class="see-more card-text text-light">
             <a href="/view/<%= key.id %>" class="text-light">
              Leia sem sair daqui
             </a>
            </p>

            <!--
	        <div class="mt-auto d-flex justify-content-between align-items-center">
	          <small class="text-muted">By @<%= key.websiteSlug %></small>
	          <small class="text-muted post-date"><%= key.createdAt.toISOString() %></small>
	          <a href="#" class="p-2 text-muted">
	          	<i class="material-icons">more_vert</i>
	          </a>
	        </div>
          -->
          </div>

        </div>
      </div>
      <% }); %>

      <nav class="w-100 d-flex justify-content-center">
        <ul class="pagination mt-2 mb-3">
          <% for(var i = 0; i < pagesNumber; i++) { %>
            <% if( currentPage == (i+1) ) {%>
              <li class="page-item disabled">
                <a class="page-link" href="/page/<%=i+1%>" tabindex="-1">
                  <%=i+1%>
                </a>
              </li>
              <% } else { %>
                <li class="page-item">
                  <a class="page-link" href="/page/<%=i+1%>">
                    <%=i+1%>
                  </a>
                </li>
                <% } %>
                  <% } %>
        </ul>
      </nav>
  </div>
  <script type="text/javascript" src="/js/moment.js"></script>
  <script type="text/javascript" src="/js/locale/pt-br.js"></script>
  <script type="text/javascript">

    $(document).ready(function () {

      const postDate = $(".post-date");

      $(this).find('.post-date').each(function (date, data) {
        console.log($(data).text());
        $(data).text(moment($(data).text()).calendar())
      });

      $(".card").hover(function () {
        $(this).find('.see-more').slideDown("fast");
      }, function () {
        $(this).find('.see-more').slideUp("fast");
      });

    });
  </script>