landing updates

2026-03-05 10:47:55 -07:00
parent 4d6357cc74
commit 567a59f9b1
3 changed files with 103 additions and 84 deletions
--- a/kubernetes/gitea/landingpage.css
+++ b/kubernetes/gitea/landingpage.css
@@ -84,10 +84,7 @@
  margin: 0;
  color: var(--color-text);
 }
-.subtitle {
-  font-size: 0.9rem;
-  color: var(--color-text-muted);
-}
+

 /* Grid */
 .repo-grid {
--- a/kubernetes/gitea/landingpage.html
+++ b/kubernetes/gitea/landingpage.html
@@ -10,7 +10,6 @@
  <section class="projects-section">
    <div class="section-header">
      <h2>Recent Projects</h2>
-      <span class="subtitle">Latest commits across all repositories</span>
    </div>
    <div id="repo-grid" class="repo-grid">
      <div class="skeleton-card"></div>
@@ -25,7 +24,6 @@
  <section class="activity-section">
    <div class="section-header">
      <h2>Recent Activity</h2>
-      <span class="subtitle">What Alex has been up to</span>
      <a href="/alex" class="view-all-link">View full profile →</a>
    </div>
    <div id="activity-feed" class="activity-feed">
@@ -42,6 +40,7 @@
  window.GITEA_APP_URL = "{{AppUrl}}";
  window.GITEA_SUB_URL = "{{AppSubUrl}}";
 </script>
-<script src="{{AppSubUrl}}/assets/js/custom-landing.js?v=4"></script>
-<link rel="stylesheet" href="{{AppSubUrl}}/assets/css/custom-landing.css?v=4">
+<!-- update version when changed to reset cloudflare cache -->
+<script src="{{AppSubUrl}}/assets/js/custom-landing.js?v=5"></script>
+<link rel="stylesheet" href="{{AppSubUrl}}/assets/css/custom-landing.css?v=5">
 {{template "base/footer" .}}
--- a/kubernetes/gitea/landingpage.js
+++ b/kubernetes/gitea/landingpage.js
@@ -1,69 +1,74 @@
 const httpService = {
-  baseUrl: window.GITEA_SUB_URL || '',
+  baseUrl: window.GITEA_SUB_URL || "",

  async fetchRss() {
    const resp = await fetch(`${this.baseUrl}/alex.rss`);
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    const text = await resp.text();
-    return new DOMParser().parseFromString(text, 'application/xml');
+    return new DOMParser().parseFromString(text, "application/xml");
  },
 };

 const dataDomain = {
  timeAgo(dateStr) {
    const diff = (Date.now() - new Date(dateStr)) / 1000;
-    if (diff < 60) return 'just now';
-    if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
-    if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
-    if (diff < 2592000) return Math.floor(diff / 86400) + 'd ago';
-    if (diff < 31536000) return Math.floor(diff / 2592000) + 'mo ago';
-    return Math.floor(diff / 31536000) + 'y ago';
+    if (diff < 60) return "just now";
+    if (diff < 3600) return Math.floor(diff / 60) + "m ago";
+    if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
+    if (diff < 2592000) return Math.floor(diff / 86400) + "d ago";
+    if (diff < 31536000) return Math.floor(diff / 2592000) + "mo ago";
+    return Math.floor(diff / 31536000) + "y ago";
  },

  esc(str) {
-    return (str || '')
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;');
+    return (str || "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
  },

  safeTitleHtml(rawTitleText) {
-    const doc = new DOMParser().parseFromString(rawTitleText, 'text/html');
-    doc.body.querySelectorAll('*:not(a)').forEach(el => el.replaceWith(el.textContent));
+    const doc = new DOMParser().parseFromString(rawTitleText, "text/html");
+    doc.body
+      .querySelectorAll("*:not(a)")
+      .forEach((el) => el.replaceWith(el.textContent));
    return doc.body.innerHTML;
  },

  titlePlainText(rawTitleText) {
-    const doc = new DOMParser().parseFromString(rawTitleText, 'text/html');
+    const doc = new DOMParser().parseFromString(rawTitleText, "text/html");
    return doc.body.textContent || rawTitleText;
  },

  activityIcon(titleText) {
    const t = titleText.toLowerCase();
-    if (t.includes('push') || t.includes('commit')) return '📤';
-    if (t.includes('creat') && t.includes('repo')) return '📁';
-    if (t.includes('fork')) return '🍴';
-    if (t.includes('open') && t.includes('issue')) return '🔴';
-    if (t.includes('clos') && t.includes('issue')) return '🟢';
-    if (t.includes('pull request') || t.includes('merge')) return '🔀';
-    if (t.includes('tag')) return '🏷️';
-    if (t.includes('branch')) return '🌿';
-    if (t.includes('comment')) return '💬';
-    if (t.includes('release')) return '🚀';
-    return '⚡';
+    if (t.includes("push") || t.includes("commit")) return "📤";
+    if (t.includes("creat") && t.includes("repo")) return "📁";
+    if (t.includes("fork")) return "🍴";
+    if (t.includes("open") && t.includes("issue")) return "🔴";
+    if (t.includes("clos") && t.includes("issue")) return "🟢";
+    if (t.includes("pull request") || t.includes("merge")) return "🔀";
+    if (t.includes("tag")) return "🏷️";
+    if (t.includes("branch")) return "🌿";
+    if (t.includes("comment")) return "💬";
+    if (t.includes("release")) return "🚀";
+    return "⚡";
  },

  parseCommits(descriptionText) {
-    const doc = new DOMParser().parseFromString(descriptionText, 'text/html');
-    return Array.from(doc.querySelectorAll('a')).map(anchor => {
+    const doc = new DOMParser().parseFromString(descriptionText, "text/html");
+    return Array.from(doc.querySelectorAll("a")).map((anchor) => {
      const sha = anchor.textContent.trim().slice(0, 7);
-      const href = anchor.getAttribute('href') || '#';
-      let msg = '';
+      const href = anchor.getAttribute("href") || "#";
+      let msg = "";
      let node = anchor.nextSibling;
      while (node) {
-        const t = (node.textContent || '').trim();
-        if (t) { msg = t; break; }
+        const t = (node.textContent || "").trim();
+        if (t) {
+          msg = t;
+          break;
+        }
        node = node.nextSibling;
      }
      return { sha, href, msg };
@@ -71,40 +76,47 @@ const dataDomain = {
  },

  parseRepos(xmlDoc) {
-    const items = Array.from(xmlDoc.querySelectorAll('channel > item'));
+    const items = Array.from(xmlDoc.querySelectorAll("channel > item"));
    const seen = new Map();
    for (const item of items) {
-      const titleHtml = item.querySelector('title')?.textContent || '';
-      const titleDoc = new DOMParser().parseFromString(titleHtml, 'text/html');
-      const anchors = titleDoc.querySelectorAll('a');
+      const titleHtml = item.querySelector("title")?.textContent || "";
+      const titleDoc = new DOMParser().parseFromString(titleHtml, "text/html");
+      const anchors = titleDoc.querySelectorAll("a");
      if (anchors.length < 2) continue;
      const repoAnchor = anchors[anchors.length - 1];
      const repoName = repoAnchor.textContent.trim();
      if (!repoName || seen.has(repoName)) continue;
      seen.set(repoName, {
        repoName,
-        repoUrl: repoAnchor.getAttribute('href') || '#',
-        shortName: repoName.includes('/') ? repoName.split('/').pop() : repoName,
-        pubDate: item.querySelector('pubDate')?.textContent || '',
-        firstCommit: this.parseCommits(item.querySelector('description')?.textContent || '')[0] || null,
+        repoUrl: repoAnchor.getAttribute("href") || "#",
+        shortName: repoName.includes("/")
+          ? repoName.split("/").pop()
+          : repoName,
+        pubDate: item.querySelector("pubDate")?.textContent || "",
+        firstCommit:
+          this.parseCommits(
+            item.querySelector("description")?.textContent || "",
+          )[0] || null,
      });
    }
    return Array.from(seen.values());
  },

  parseActivity(xmlDoc, limit = 20) {
-    return Array.from(xmlDoc.querySelectorAll('channel > item'))
+    return Array.from(xmlDoc.querySelectorAll("channel > item"))
      .slice(0, limit)
-      .map(item => {
-        const rawTitle = item.querySelector('title')?.textContent || '';
+      .map((item) => {
+        const rawTitle = item.querySelector("title")?.textContent || "";
        const titleText = this.titlePlainText(rawTitle);
        return {
          titleHtmlSafe: this.safeTitleHtml(rawTitle),
          titleText,
-          link: item.querySelector('link')?.textContent || '#',
-          pubDate: item.querySelector('pubDate')?.textContent || '',
+          link: item.querySelector("link")?.textContent || "#",
+          pubDate: item.querySelector("pubDate")?.textContent || "",
          icon: this.activityIcon(titleText),
-          commits: this.parseCommits(item.querySelector('description')?.textContent || '').slice(0, 3),
+          commits: this.parseCommits(
+            item.querySelector("description")?.textContent || "",
+          ).slice(0, 3),
        };
      });
  },
@@ -112,23 +124,28 @@ const dataDomain = {

 const uiRendering = {
  async renderRepos(xmlDoc) {
-    const grid = document.getElementById('repo-grid');
+    const grid = document.getElementById("repo-grid");
    if (!grid) return;

-
    const repos = dataDomain.parseRepos(xmlDoc);
    if (repos.length === 0) {
      grid.innerHTML = `<div class="error-msg">No repositories found in feed.</div>`;
      return;
    }

-    grid.innerHTML = '';
-    for (const { shortName, repoName, repoUrl, pubDate, firstCommit } of repos) {
+    grid.innerHTML = "";
+    for (const {
+      shortName,
+      repoName,
+      repoUrl,
+      pubDate,
+      firstCommit,
+    } of repos) {
      const when = dataDomain.timeAgo(pubDate);
-      const commitMsg = firstCommit?.msg || firstCommit?.sha || '';
+      const commitMsg = firstCommit?.msg || firstCommit?.sha || "";

-      const card = document.createElement('a');
-      card.className = 'repo-card';
+      const card = document.createElement("a");
+      card.className = "repo-card";
      card.href = dataDomain.esc(repoUrl);
      card.innerHTML = `
        <div class="repo-card-header">
@@ -147,7 +164,7 @@ const uiRendering = {
  },

  async renderActivity(xmlDoc) {
-    const feed = document.getElementById('activity-feed');
+    const feed = document.getElementById("activity-feed");
    if (!feed) return;

    const items = dataDomain.parseActivity(xmlDoc);
@@ -156,21 +173,27 @@ const uiRendering = {
      return;
    }

-    feed.innerHTML = '';
+    feed.innerHTML = "";
    for (const { titleHtmlSafe, icon, pubDate, commits } of items) {
      const when = dataDomain.timeAgo(pubDate);

-      const commitsHtml = commits.length === 0 ? '' :
-        `<div class="activity-commits">` +
-        commits.map(({ sha, href, msg }) => `
+      const commitsHtml =
+        commits.length === 0
+          ? ""
+          : `<div class="activity-commits">` +
+            commits
+              .map(
+                ({ sha, href, msg }) => `
          <div class="activity-commit-line">
            <a class="activity-commit-sha" href="${dataDomain.esc(href)}">${dataDomain.esc(sha)}</a>
            <span class="activity-commit-text">${dataDomain.esc(msg)}</span>
-          </div>`).join('') +
-        `</div>`;
+          </div>`,
+              )
+              .join("") +
+            `</div>`;

-      const el = document.createElement('div');
-      el.className = 'activity-item';
+      const el = document.createElement("div");
+      el.className = "activity-item";
      el.innerHTML = `
        <div class="activity-op-icon">${icon}</div>
        <div class="activity-body">
@@ -188,23 +211,23 @@ const uiRendering = {
  async render() {
    const baseUrl = httpService.baseUrl;

-    let xmlDoc;
    try {
-      xmlDoc = await httpService.fetchRss();
+      const xmlDoc = await httpService.fetchRss();
+      await Promise.all([
+        this.renderRepos(xmlDoc),
+        this.renderActivity(xmlDoc),
+      ]);
    } catch (e) {
-      console.error('Gitea landing: RSS fetch failed', e);
-      const grid = document.getElementById('repo-grid');
-      const feed = document.getElementById('activity-feed');
-      if (grid) grid.innerHTML = `<div class="error-msg">Could not load feed (${e.message}). <a href="${baseUrl}/explore/repos" style="color:#58a6ff">Browse manually →</a></div>`;
-      if (feed) feed.innerHTML = `<div class="error-msg">Could not load activity (${e.message})</div>`;
+      console.error("Gitea landing: RSS fetch failed", e);
+      const grid = document.getElementById("repo-grid");
+      const feed = document.getElementById("activity-feed");
+      if (grid)
+        grid.innerHTML = `<div class="error-msg">Could not load feed (${e.message}). <a href="${baseUrl}/explore/repos" style="color:#58a6ff">Browse manually →</a></div>`;
+      if (feed)
+        feed.innerHTML = `<div class="error-msg">Could not load activity (${e.message})</div>`;
      return;
    }
-
-    await Promise.all([
-      this.renderRepos(xmlDoc),
-      this.renderActivity(xmlDoc),
-    ]);
  },
 };

-document.addEventListener('DOMContentLoaded', () => uiRendering.render());
+document.addEventListener("DOMContentLoaded", () => uiRendering.render());