Cosmetics, better UI for articles listing (#40)

* made the link on the news page to the actual publication item

* cosmetics + force doi in getcomputo-pub.fsx, fix badge alignment in publications.ejs

* updated publications metadata to include DOI

* Enhance publication display: update DOI handling, improve layout, and add source links

Author: fradav

site/publications.ejs

@@ -8,6 +8,8 @@
 let currentYear = null;
 for (const item of items) {
   let doiurl = item.url === "" ? "https://doi.org/" + item.doi : item.url;
+  let bibtitle = item.title.replace(/'/g, "\\'");
+  let bibauthors = item.authors.replace(/'/g, "\\'");
   if (item.year !== currentYear) {
     if (currentYear !== null) { %>
 </div> <!-- End previous year section -->
@@ -23,27 +25,34 @@ for (const item of items) {
             <div class="row align-items-start"> <!-- align-items-start for top alignment -->
               <div class="col-md-2 col-3 d-flex flex-column justify-content-start align-items-start p-0 badge-left-align"> <!-- left-aligned, no padding -->
                 <a href="https://github.com/computorg/<%- item.repo %>" target="_blank" style="margin-left:0;">
-                  <img src="https://img.shields.io/github/actions/workflow/status/computorg/<%- item.repo %>/build.yml?label=build&logo=github" class="img-fluid" alt="Build Status" style="vertical-align: top; margin-top: 0; margin-left:-20px; margin-top:5px; display:block;" />
+                  <img src="https://img.shields.io/github/actions/workflow/status/computorg/<%- item.repo %>/build.yml?label=build&logo=github" class="img-fluid" alt="Build Status" style="margin-top: 0; margin-left:-20px; margin-top:5px; display:block;" />
                 </a>
               </div>
               <div class="col-md-10 col-9 pl-1">
-                <h5 class="card-title mb-1" style="font-size:1.1em;">
+                <!-- <h5 class="card-title mb-1" style="font-size:1.1em;">
                   <a href="<%= doiurl %>" data-toggle="modal" data-target="#articleModal" class="text-decoration-none"><%= item.title %></a>
+                </h5> -->
+                <h5 class="card-title mb-1" style="font-size:1.1em;">
+                  <a href="<%= doiurl %>" target="_blank"><%= item.title %></a>
                 </h5>
                 <% if (item.authors) { %>
                 <p class="text-muted mb-1" style="font-size:0.97em;"><%= item.authors %></p>
                 <% } %>
-                <p class="text-muted mb-2" style="font-size:0.95em;"><em>Computo</em>, <%= item.year %>.</p>
+                <div class="d-flex justify-content-between align-items-center mb-2" style="font-size:0.95em;">
+                  <span class="text-muted"><em>Computo</em>, <%= item.year %>.</span>
+                  <span class="text-muted text-right" style="font-size:0.95em; white-space:nowrap;"><em><a href="<%= doiurl %>" target="_blank" ><%= doiurl %></a></em></span>
+                </div>
                 <div class="btn-group btn-group-sm" role="group" aria-label="Article actions">
-                  <% if (item["abstract'" ] && item["abstract'"].trim()) { %>
+                  <a href="<%= doiurl %>" data-toggle="modal" data-target="#articleModal" class="btn btn-outline-secondary btn-sm">Preview</a>
+                  <!-- <% if (item["abstract'" ] && item["abstract'"].trim()) { %>
                   <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#abstractModal" data-abstract="<%- item["abstract'"].replace(/"/g, '&quot;') %>" data-title="<%- item.title.replace(/"/g, '&quot;') %>" style="padding:0.2em 0.6em;">ABS</button>
-                  <% } %>
-                  <a href="<%= doiurl %>" class="btn btn-outline-secondary btn-sm" target="_blank" style="padding:0.2em 0.6em;">HTML</a>
-                  <% if (item.pdf && item.pdf.trim()) { %>
+                  <% } %> -->
+                  <!-- <a href="<%= doiurl %>" class="btn btn-outline-secondary btn-sm" target="_blank" style="padding:0.2em 0.6em;">HTML</a> -->
+                  <!-- <% if (item.pdf && item.pdf.trim()) { %>
                   <a href="<%= item.pdf %>" class="btn btn-outline-secondary btn-sm" target="_blank" style="padding:0.2em 0.6em;">PDF</a>
-                  <% } %>
-                  <a href="https://github.com/computorg/<%- item.repo %>" class="btn btn-outline-secondary btn-sm" target="_blank" style="padding:0.2em 0.6em;">GIT REPO</a>
-                  <button type="button" class="btn btn-outline-secondary btn-sm" onclick="generateBibTex('<%- item.title.replace(/'/g, "\\'") %>', '<%- item.authors.replace(/'/g, "\\'") %>', '<%= item.year %>', '<%= doiurl %>')" style="padding:0.2em 0.6em;">BIB</button>
+                  <% } %> -->
+                  <a href="https://github.com/computorg/<%- item.repo %>" class="btn btn-outline-secondary btn-sm" target="_blank" style="padding:0.2em 0.6em;">Sources (Git)</a>
+                  <button type="button" class="btn btn-outline-secondary btn-sm" onclick="generateBibTex('<%- bibtitle %>', '<%- bibauthors %>', '<%= item.year %>', '<%= doiurl %>')" style="padding:0.2em 0.6em;"><span style="font-variant: small-caps; font-family: 'Times New Roman', Times, serif;">Bib<span style="vertical-align: -0.2em;">T</span><span style="vertical-align: 0em;">E</span>X</span></button>
                 </div>
               </div>
             </div>