SPB Git

spb/spbgit Public MIT

SPB Git — the platform hosting itself

JavaScript 73.9% CSS 11.7% Nunjucks 11.6% Shell 2.7%
4.7 KB · 109 lines jinja
Raw Blame History
1{#2  ─────────────────────────────────────────────3   SPB Git — Personal Git Platform4  ─────────────────────────────────────────────5   Author  : Simon-Pierre Boucher6   Contact : contact@spboucher.ai7   File    : src/web/views/home.njk8   Purpose : Home — hero, pinned repos, repo index, activity, heatmap9   License : MIT © Simon-Pierre Boucher10  ─────────────────────────────────────────────11#}{% extends "layout.njk" %}12{% block content %}13<section class="hero">14  <div class="hero-id">15    <div class="hero-avatar" aria-hidden="true">SPB</div>16    <div>17      <h1 class="hero-name">{{ owner.name }}</h1>18      <p class="hero-tagline">{{ owner.tagline }} · <a href="mailto:{{ owner.email }}">{{ owner.email }}</a></p>19    </div>20  </div>21  <div class="hero-badges">22    <span class="badge-stat"><strong>{{ stats.repos | num }}</strong> repos</span>23    <span class="badge-stat"><strong>{{ stats.commits | num }}</strong> commits</span>24    <span class="badge-stat"><strong>{{ stats.languages | num }}</strong> languages</span>25  </div>26</section>2728{% if pinned.length %}29<section aria-labelledby="pinned-h">30  <h2 id="pinned-h" class="section-title">Pinned</h2>31  <div class="pinned-grid">32    {% for repo in pinned %}{% include "partials/repo-card.njk" %}{% endfor %}33  </div>34</section>35{% endif %}3637<div class="home-columns">38  <section class="home-main" aria-labelledby="repos-h">39    <div class="repo-controls">40      <h2 id="repos-h" class="section-title">Repositories</h2>41      <div class="repo-filters">42        <input type="search" id="repo-filter" placeholder="Filter repositories…" aria-label="Filter repositories">43        <select id="repo-sort" aria-label="Sort repositories">44          <option value="pushed">Recently pushed</option>45          <option value="name">Name</option>46          <option value="created">Created</option>47        </select>48        <select id="repo-lang" aria-label="Filter by language">49          <option value="">All languages</option>50          {% for lang in languages %}<option value="{{ lang }}">{{ lang }}</option>{% endfor %}51        </select>52        <select id="repo-topic" aria-label="Filter by topic">53          <option value="">All topics</option>54          {% for topic in topics %}<option value="{{ topic }}">{{ topic }}</option>{% endfor %}55        </select>56      </div>57    </div>58    <div class="repo-list" id="repo-list">59      {% for repo in overviews %}{% include "partials/repo-card.njk" %}{% endfor %}60      {% if not overviews.length %}61      <div class="empty-state">62        <p>No repositories yet. Create the first one:</p>63        <pre class="clone-snippet">spbgit create hello-world --push</pre>64      </div>65      {% endif %}66    </div>67    <p class="muted" id="repo-list-empty" hidden>No repository matches the current filters.</p>68  </section>6970  <aside class="home-side">71    <section aria-labelledby="activity-h">72      <h2 id="activity-h" class="section-title">Activity</h2>73      <ul class="activity-feed">74        {% for event in activity %}75        <li>76          <span class="activity-dot" aria-hidden="true"></span>77          <div>78            {% if event.deleted %}79              deleted {{ event.refType }} <code>{{ event.ref }}</code> in <a href="/{{ event.repo }}">{{ event.repo }}</a>80            {% else %}81              pushed {{ event.commits | num }} commit{{ 's' if event.commits != 1 }} to <a href="/{{ event.repo }}">{{ event.repo }}</a>82              {% if event.refType == 'tag' %}(tag <code>{{ event.ref }}</code>){% elif event.ref != overviewDefault %}<code class="ref-inline">{{ event.ref }}</code>{% endif %}83            {% endif %}84            <span class="muted">· {{ event.at | reltime }}</span>85          </div>86        </li>87        {% else %}88        <li class="muted">No pushes recorded yet.</li>89        {% endfor %}90      </ul>91    </section>92  </aside>93</div>9495<section aria-labelledby="heatmap-h" class="heatmap-section">96  <h2 id="heatmap-h" class="section-title">{{ heatmap.total | num }} commits in the last year</h2>97  <div class="heatmap-scroll">{{ heatmap.svg | safe }}</div>98  <div class="heatmap-legend" aria-hidden="true">99    <span>Less</span>100    <span class="heatmap-cell-demo" data-level="0"></span>101    <span class="heatmap-cell-demo" data-level="1"></span>102    <span class="heatmap-cell-demo" data-level="2"></span>103    <span class="heatmap-cell-demo" data-level="3"></span>104    <span class="heatmap-cell-demo" data-level="4"></span>105    <span>More</span>106  </div>107</section>108{% endblock %}109