add cports pkg updates section on homepage

assets/css/mainpage.css

@@ -171,6 +171,9 @@ body {
     grid-area: bottom;
     padding-top: var(--content-halfgap);
     padding-bottom: var(--content-halfgap);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--content-gap);
 }
 
 #bottom #bottom_warn {
@@ -204,6 +207,43 @@ body {
     border-color: var(--color-tblsep);
 }
 
+#bottom .bottom_commits ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#bottom .bottom_commits li {
+    border-top: 1px solid var(--color-tblsep);
+    padding: 8px 0;
+}
+
+#bottom .bottom_commits li a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--color-fontdef);
+}
+
+#bottom .bottom_commits li a:hover {
+    color: var(--color-chred);
+}
+
+#bottom .bottom_commits a {
+    display: flex;
+    justify-content: space-between;
+}
+
+#bottom .bottom_commits .commit_date {
+    white-space: nowrap;
+    opacity: 0.7;
+}
+
+#bottom .bottom_commits .more {
+    text-align: right;
+    margin-top: var(--content-halfgap);
+}
+
 /* responsive layout adjustments */
 
 @media (max-width: 1023px) {
@@ -270,6 +310,9 @@ body {
         margin-top: var(--side-padding);
         margin-bottom: 0;
     }
+    #bottom {
+        grid-template-columns: 1fr;
+    }
 }
 
 @media (max-width: 480px) {

assets/js/commits.js

@@ -0,0 +1,38 @@
+(function() {
+    "use strict";
+
+    var list = document.getElementById("cports_list");
+    var more = document.getElementById("cports_more");
+    if (!list) return;
+
+    fetch("https://api.github.com/repos/chimera-linux/cports/commits?per_page=10")
+        .then(function(response) { return response.json(); })
+        .then(function(data) {
+            var html = "";
+            var i, commit, msg, url, date, ago, diff;
+
+            for (i = 0; i < data.length; i++) {
+                commit = data[i];
+                msg = commit.commit.message.split("\n")[0];
+                url = commit.html_url;
+
+                date = new Date(commit.commit.committer.date);
+                diff = Math.floor((new Date() - date) / 1000);
+
+                if (diff < 60) ago = "just now";
+                else if (diff < 3600) ago = Math.floor(diff / 60) + "m ago";
+                else if (diff < 86400) ago = Math.floor(diff / 3600) + "h ago";
+                else ago = Math.floor(diff / 86400) + "d ago";
+
+                if (msg.length > 50) msg = msg.slice(0, 49) + "…";
+
+                html += '<li>' +
+                        '<a href="' + url + '" title="' + commit.commit.message + '">' +
+                        '<span class="commit_msg">' + msg + '</span>' +
+                        '<span class="commit_date">' + ago + '</span>' +
+                        '</a></li>';
+            }
+            list.innerHTML = html;
+            if (more) more.style.display = "block";
+        });
+})();

index.html

@@ -33,7 +33,7 @@
     </p>
     <p>
         <a href="/about">Read more</a> for details.
-    <p>
+    </p>
 </main>
 
 <div id="tile1" class="tile">
@@ -85,13 +85,31 @@ <h1>Portable.</h1>
 </div>
 
 <div id="bottom">
-    <h2><a href="/news">Recent news</a> <a href="/atom.xml">(feed)</a></h2>
-    {% for post in site.posts limit:2 %}
-    <div class="bottom_post">
-        <h4>{{ post.date | date: "%B %d, %Y" }}</h4>
-        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
-        {{ post.excerpt }}
-        <p><a href="{{ post.url }}">Read more</a></p>
+    <div class="bottom_news">
+        <h2><a href="/news">Recent news</a> <a href="/atom.xml">(feed)</a></h2>
+        {% for post in site.posts limit:2 %}
+        <div class="bottom_post">
+            <h4>{{ post.date | date: "%B %d, %Y" }}</h4>
+            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+            {{ post.excerpt }}
+            <p><a href="{{ post.url }}">Read more</a></p>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div class="bottom_commits">
+        <h2>Package updates</h2>
+        <ul id="cports_list">
+            <li>
+                <a href="https://github.com/chimera-linux/cports/commits/master">
+                    <span class="commit_msg">View recent updates on GitHub...</span>
+                </a>
+            </li>
+        </ul>
+        <div class="more" id="cports_more" style="display: none;">
+            <a href="https://github.com/chimera-linux/cports/commits/master">View all</a>
+        </div>
     </div>
-    {% endfor %}
 </div>
+
+<script src="/assets/js/commits.js"></script>