Updated libraries page look + added deprecation label (#123)

* updated libraries page

* Updated Libraries page look + added Deprecation label

Author: shravanngoswamii

library/index.qmd

@@ -3,8 +3,58 @@ title: "Turing Libraries"
 search: false
 toc: false
 include-in-header:
-    - text: |
-        <style>a {text-decoration: none;}a:hover {text-decoration: underline;}</style>
+  - text: |
+      <style>
+        /* links */
+        a { text-decoration: none; }
+        a:hover { text-decoration: underline; }
+      </style>
+
+      <style>
+        /* responsive wrapper */
+        .table-responsive {
+          overflow-x: auto;
+          margin-bottom: 1rem;
+        }
+
+        /* default (light-mode) table styling */
+        .packages-table {
+          width: 100%;
+          border-collapse: collapse;
+          background-color: #ffffff;
+          color: #212529;
+        }
+        .packages-table th,
+        .packages-table td {
+          padding: 0.75rem 1rem;
+          text-align: left;
+          border-bottom: 1px solid #eee;
+        }
+        .packages-table thead {
+          background-color: #f8f8f8;
+        }
+        .packages-table tbody tr:nth-child(odd) {
+          background-color: #fafafa;
+        }
+        .packages-table tbody tr:hover {
+          background-color: #eef9ff;
+        }
+        .packages-table th {
+          font-weight: 600;
+        }
+
+        /* deprecated badge */
+        .badge.deprecated {
+          display: inline-block;
+          margin-left: 0.5em;
+          padding: 0.2em 0.4em;
+          font-size: 0.75em;
+          font-weight: 600;
+          color: #721c24;
+          background-color: #f8d7da;
+          border-radius: 0.2em;
+        }
+      </style>
 listing:
   - id: libraries-main
     template: table.ejs

library/main.yml

@@ -83,10 +83,11 @@
   description: "Convenient callbacks for sampling in Turing.jl"
   category: utilities
 - name: TuringBenchmarking
-  api: https://turinglang.org/TuringBenchmarking.jl/
-  github: https://github.com/TuringLang/TuringBenchmarking.jl
+  api: https://turinglang.org/Deprecated/TuringBenchmarking/
+  github: https://github.com/TuringLang/Deprecated/tree/main/TuringBenchmarking
   description: "Tools to benchmark and check Turing models"
   category: utilities
+  status: deprecated
 
 - name: MCMCChains
   api: https://turinglang.org/MCMCChains.jl/

library/table.ejs

@@ -1,14 +1,22 @@
-<table width="100%">
+<div class="table-responsive">
+<table class="packages-table">
+<thead>
+<tr>
+<th>Package</th>
+<th>API</th>
+<th>GitHub</th>
+<th>Description</th>
+</tr>
+</thead>
 <tbody>
 <% for (const item of items) { %>
 <tr>
-<td style="padding: 5px 5px 5px 0"><span style="font-weight: bold"><%- item.name %></span></td>
-<% if (item.api !== "") { %>
-<td style="padding: 5px 5px"><a href="<%- item.api %>" target="_blank">API</a></td>
-<% } %>
-<td style="padding: 5px 5px"><a href="<%- item.github %>" target="_blank">GitHub</a></td>
-<td style="padding: 5px 0 5px 5px"><%- item.description %></td>
+<td data-label="Package"><%- item.name %><% if(item.status==="deprecated"){ %><span class="badge deprecated">Deprecated</span><% } %></td>
+<td data-label="API"><% if(item.api){ %><a href="<%- item.api %>" target="_blank">API</a><% } else { %>—<% } %></td>
+<td data-label="GitHub"><a href="<%- item.github %>" target="_blank">GitHub</a></td>
+<td data-label="Description"><%- item.description %></td>
 </tr>
 <% } %>
 </tbody>
 </table>
+</div>

theming/theme-dark.scss

@@ -137,3 +137,36 @@ p {
     --bs-tooltip-color: $black !important;
     --bs-tooltip-bg: $white !important;
 }
+
+// table background & text
+.packages-table {
+    background-color: $background-body !important;
+    color: $li !important;
+}
+
+// cell borders
+.packages-table th,
+.packages-table td {
+    border-bottom-color: $gray-900 !important;
+}
+
+// header row
+.packages-table thead {
+    background-color: $gray-900 !important;
+}
+
+// zebra stripes
+.packages-table tbody tr:nth-child(odd) {
+    background-color: darken($gray-900, 5%) !important;
+}
+
+// hover state
+.packages-table tbody tr:hover {
+    background-color: lighten($background-nav, 5%) !important;
+}
+
+// “Deprecated” badge styling
+.badge.deprecated {
+    color: $white !important;
+    background-color: $red !important;
+}