- created dsx and dsx_server in place of dsx-build
- dsx replaces dsx-build and is a build tool/package manager for the DSA ecosystem - dsx_server is the repository/server for dsx packages. dsx is a WIP.
This commit is contained in:
@@ -0,0 +1,360 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}#{{ artifact.id }} · {{ package.name }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* ── Artifact layout ────────────────────────── */
|
||||
.artifact-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.artifact-layout { grid-template-columns: 1fr; }
|
||||
.artifact-sidebar { order: -1; }
|
||||
}
|
||||
|
||||
/* ── Artifact header ────────────────────────── */
|
||||
.artifact-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.artifact-header h1 {
|
||||
font-family: var(--mono);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.artifact-trigger-line {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Steps list ─────────────────────────────── */
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-card { overflow: hidden; }
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
transition: background .1s;
|
||||
user-select: none;
|
||||
}
|
||||
.step-card.open .step-header {
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
background: var(--surface2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.step-header:hover { background: var(--surface2); }
|
||||
|
||||
.step-name {
|
||||
flex: 1;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
}
|
||||
.step-duration {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.step-chevron {
|
||||
color: var(--muted);
|
||||
transition: transform .2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step-card.open .step-chevron { transform: rotate(90deg); }
|
||||
|
||||
/* ── Log output ─────────────────────────────── */
|
||||
.step-log {
|
||||
display: none;
|
||||
background: #080808;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.step-card.open .step-log { display: block; }
|
||||
|
||||
.log-line {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.log-line:hover { background: rgba(255,255,255,.03); }
|
||||
.log-num {
|
||||
min-width: 48px;
|
||||
padding: 0 12px;
|
||||
text-align: right;
|
||||
color: var(--muted);
|
||||
user-select: none;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.log-text {
|
||||
padding: 0 16px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
.log-text.err { color: var(--red); }
|
||||
.log-text.warn { color: var(--yellow); }
|
||||
|
||||
/* ── Sidebar ────────────────────────────────── */
|
||||
.sidebar-card { overflow: hidden; margin-bottom: 12px; }
|
||||
.sidebar-card-title {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .8px;
|
||||
color: var(--muted);
|
||||
padding: 10px 14px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.sidebar-card-body { padding: 12px 14px; }
|
||||
.sidebar-stat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.sidebar-stat-label { color: var(--text-dim); }
|
||||
.sidebar-stat-value { font-family: var(--mono); font-size: 12px; }
|
||||
|
||||
/* ── Navigation between artifacts ──────────── */
|
||||
.artifact-nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.artifact-nav a {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 5px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-dim);
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.artifact-nav a:hover { color: var(--text); border-color: #3a3a3a; text-decoration: none; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/packages/">packages</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}">{{ package.name }}</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}/~artifact/">artifacts</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>#{{ artifact.id }}</span>
|
||||
</div>
|
||||
|
||||
<div class="artifact-header">
|
||||
<h1>
|
||||
#{{ artifact.id }}
|
||||
{% if artifact.status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passed</span>
|
||||
{% elif artifact.status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failed</span>
|
||||
{% elif artifact.status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif artifact.status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>queued</span>
|
||||
{% else %}
|
||||
<span class="badge badge-unknown"><span class="dot"></span>{{ artifact.status }}</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
<p class="artifact-trigger-line">
|
||||
{{ artifact.trigger | default(value="Triggered manually") }}
|
||||
{% if artifact.commit_sha %} · <span class="mono" style="font-size:12px">{{ artifact.commit_sha }}</span>{% endif %}
|
||||
{% if artifact.branch %} on <strong>{{ artifact.branch }}</strong>{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="artifact-layout">
|
||||
|
||||
<!-- Steps + logs -->
|
||||
<div>
|
||||
{% if artifact.steps and artifact.steps | length > 0 %}
|
||||
<p class="section-title">Steps</p>
|
||||
<div class="steps-list">
|
||||
{% for step in artifact.steps %}
|
||||
<div class="card step-card {% if step.status == 'failure' or loop.first %}open{% endif %}" id="step-{{ loop.index }}">
|
||||
<div class="step-header" onclick="toggleStep(this)">
|
||||
<span class="step-status">
|
||||
{% if step.status == "success" %}
|
||||
<span style="color:var(--green)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
{% elif step.status == "failure" %}
|
||||
<span style="color:var(--red)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</span>
|
||||
{% elif step.status == "running" %}
|
||||
<span style="color:var(--accent)" class="dot-pulse">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</span>
|
||||
{% elif step.status == "skipped" %}
|
||||
<span style="color:var(--muted)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="color:var(--muted)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="step-name">{{ step.name }}</span>
|
||||
{% if step.duration %}<span class="step-duration">{{ step.duration }}</span>{% endif %}
|
||||
<svg class="step-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="step-log">
|
||||
{% if step.log_lines and step.log_lines | length > 0 %}
|
||||
{% for line in step.log_lines %}
|
||||
<div class="log-line">
|
||||
<span class="log-num">{{ loop.index }}</span>
|
||||
<span class="log-text {% if line.level == 'error' %}err{% elif line.level == 'warn' %}warn{% endif %}">{{ line.text | default(value=line) | escape }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% elif step.log %}
|
||||
{% for raw_line in step.log | split(pat="\n") %}
|
||||
<div class="log-line">
|
||||
<span class="log-num">{{ loop.index }}</span>
|
||||
<span class="log-text">{{ raw_line | escape }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="log-line">
|
||||
<span class="log-num">1</span>
|
||||
<span class="log-text dim">No output.</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="padding:32px;text-align:center;color:var(--text-dim);font-size:13px">
|
||||
No steps recorded for this artifact.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="artifact-nav">
|
||||
{% if artifact.prev_id %}
|
||||
<a href="/packages/{{ package.name }}/~artifact/{{ artifact.prev_id }}">← #{{ artifact.prev_id }}</a>
|
||||
{% endif %}
|
||||
{% if artifact.next_id %}
|
||||
<a href="/packages/{{ package.name }}/~artifact/{{ artifact.next_id }}">#{{ artifact.next_id }} →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="artifact-sidebar">
|
||||
|
||||
<div class="card sidebar-card">
|
||||
<div class="sidebar-card-title">Summary</div>
|
||||
<div class="sidebar-card-body">
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Status</span>
|
||||
<span>
|
||||
{% if artifact.status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passed</span>
|
||||
{% elif artifact.status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failed</span>
|
||||
{% elif artifact.status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% else %}
|
||||
<span class="badge badge-unknown">{{ artifact.status }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% if artifact.duration %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Duration</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.duration }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.created_at %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Started</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.created_at }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.finished_at %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Finished</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.finished_at }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.steps %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Steps</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.steps | length }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if artifact.commit_sha or artifact.branch %}
|
||||
<div class="card sidebar-card">
|
||||
<div class="sidebar-card-title">Commit</div>
|
||||
<div class="sidebar-card-body">
|
||||
{% if artifact.branch %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Branch</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.branch }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.commit_sha %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">SHA</span>
|
||||
<span class="sidebar-stat-value">{{ artifact.commit_sha | truncate(length=8, end="") }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if artifact.commit_message %}
|
||||
<div style="font-size:12px;color:var(--text-dim);margin-top:8px;line-height:1.5">{{ artifact.commit_message }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:4px">
|
||||
<a href="/packages/{{ package.name }}/~artifact/" style="font-size:12px;font-family:var(--mono)">← all artifacts</a>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleStep(header) {
|
||||
const card = header.closest('.step-card');
|
||||
card.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,189 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}Artifacts · {{ package.name }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.artifacts-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.artifacts-header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.artifact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.artifact-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.artifact-row:hover {
|
||||
background: var(--surface2);
|
||||
border-color: #3a3a3a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.artifact-id {
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.artifact-info { flex: 1; min-width: 0; }
|
||||
.artifact-trigger {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.artifact-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.artifact-status { flex-shrink: 0; }
|
||||
.artifact-duration {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
min-width: 48px;
|
||||
text-align: right;
|
||||
}
|
||||
.artifact-date {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
flex-shrink: 0;
|
||||
min-width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 64px 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Stats strip at top */
|
||||
.stats-strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.stat-chip {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.stat-chip-val {
|
||||
font-family: var(--mono);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.stat-chip-label { color: var(--text-dim); }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/packages/">packages</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}">{{ package.name }}</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>artifacts</span>
|
||||
</div>
|
||||
|
||||
<div class="artifacts-header">
|
||||
<h1>{{ package.name }} / artifacts</h1>
|
||||
</div>
|
||||
|
||||
{% if stats is defined %}
|
||||
<div class="stats-strip">
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip-val">{{ stats.total | default(value=0) }}</span>
|
||||
<span class="stat-chip-label">Total</span>
|
||||
</div>
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip-val" style="color:var(--green)">{{ stats.success | default(value=0) }}</span>
|
||||
<span class="stat-chip-label">Passed</span>
|
||||
</div>
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip-val" style="color:var(--red)">{{ stats.failure | default(value=0) }}</span>
|
||||
<span class="stat-chip-label">Failed</span>
|
||||
</div>
|
||||
{% if stats.avg_duration is defined %}
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip-val">{{ stats.avg_duration }}</span>
|
||||
<span class="stat-chip-label">Avg duration</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if artifacts and artifacts | length > 0 %}
|
||||
<div class="artifact-list">
|
||||
{% for artifact in artifacts %}
|
||||
<a class="card artifact-row" href="/packages/{{ package.name }}/~artifact/{{ artifact.id }}">
|
||||
<span class="artifact-id">#{{ artifact.id }}</span>
|
||||
<div class="artifact-info">
|
||||
<div class="artifact-trigger">{{ artifact.trigger | default(value="manual") }}</div>
|
||||
<div class="artifact-meta">{{ artifact.commit_sha | default(value="") }}{% if artifact.branch %} on {{ artifact.branch }}{% endif %}</div>
|
||||
</div>
|
||||
<span class="artifact-status">
|
||||
{% if artifact.status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passed</span>
|
||||
{% elif artifact.status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failed</span>
|
||||
{% elif artifact.status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif artifact.status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>queued</span>
|
||||
{% else %}
|
||||
<span class="badge badge-unknown"><span class="dot"></span>{{ artifact.status }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if artifact.duration %}<span class="artifact-duration">{{ artifact.duration }}</span>{% endif %}
|
||||
<span class="artifact-date">{{ artifact.created_at | default(value="") }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<p style="margin-top:10px">No artifacts yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Packages{% endblock %} · depot</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d0d0d;
|
||||
--surface: #161616;
|
||||
--surface2: #1f1f1f;
|
||||
--border: #2a2a2a;
|
||||
--muted: #555;
|
||||
--text: #ddd;
|
||||
--text-dim: #888;
|
||||
--accent: #4f8ef7;
|
||||
--green: #3ecf6a;
|
||||
--yellow: #f0b429;
|
||||
--red: #f25c5c;
|
||||
--radius: 6px;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
--sans: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Top nav ─────────────────────────────── */
|
||||
.topbar {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 24px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.topbar-logo {
|
||||
font-family: var(--mono);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.topbar-logo span { color: var(--accent); }
|
||||
|
||||
.topbar-search {
|
||||
flex: 1;
|
||||
max-width: 420px;
|
||||
position: relative;
|
||||
}
|
||||
.topbar-search input {
|
||||
width: 100%;
|
||||
padding: 6px 12px 6px 32px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.topbar-search input:focus { border-color: var(--accent); }
|
||||
.topbar-search input::placeholder { color: var(--muted); }
|
||||
.topbar-search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Page wrapper ───────────────────────── */
|
||||
.page {
|
||||
padding-top: 52px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── Breadcrumb ─────────────────────────── */
|
||||
.breadcrumb {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.breadcrumb a { color: var(--text-dim); }
|
||||
.breadcrumb a:hover { color: var(--text); text-decoration: none; }
|
||||
.breadcrumb-sep { color: var(--border); }
|
||||
|
||||
/* ── Status badges ──────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
.badge-success { background: rgba(62,207,106,.12); color: var(--green); }
|
||||
.badge-failure { background: rgba(242,92,92,.12); color: var(--red); }
|
||||
.badge-running { background: rgba(79,142,247,.12); color: var(--accent); }
|
||||
.badge-pending { background: rgba(240,180,41,.12); color: var(--yellow); }
|
||||
.badge-unknown { background: rgba(136,136,136,.12); color: var(--muted); }
|
||||
|
||||
.dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dot-pulse {
|
||||
animation: pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,100% { opacity: 1; }
|
||||
50% { opacity: .3; }
|
||||
}
|
||||
|
||||
/* ── Generic card ───────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* ── Section heading ────────────────────── */
|
||||
.section-title {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .8px;
|
||||
color: var(--muted);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
/* ── Utility ────────────────────────────── */
|
||||
.mono { font-family: var(--mono); }
|
||||
.dim { color: var(--text-dim); }
|
||||
.small { font-size: 12px; }
|
||||
</style>
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<nav class="topbar">
|
||||
<a class="topbar-logo" href="/packages/"><span>//</span>DSA Packages</a>
|
||||
<div class="topbar-search">
|
||||
<svg class="topbar-search-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<form method="get" action="/packages/">
|
||||
<input type="text" name="q" placeholder="Search packages…" value="{{ query | default(value='') }}">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{% macro file_view(package, file) %}
|
||||
<div class="file-row">
|
||||
<span class="file-icon">
|
||||
{% if file.is_dir %}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:#4f8ef7" ><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
|
||||
{% else %}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="file-name">
|
||||
<a href="/packages/{{ package }}/~repo/{{ file.path }}">{{ file.name }}</a>
|
||||
</span>
|
||||
<!--<span class="file-commit">{{ file.last_commit_message | default(value="") }}</span>
|
||||
<span class="file-age">{{ file.last_modified | default(value="") }}</span>-->
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!-- File tree -->
|
||||
<div class="pkg-main">
|
||||
<div class="file-tree">
|
||||
<div class="file-toolbar">
|
||||
<div class="file-toolbar-search">
|
||||
<svg class="file-toolbar-search-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<form method="get" action="/packages/{{ package.config.name }}/~repo">
|
||||
<input type="text" name="q" placeholder="Filter files…" value="{{ query | default(value='') }}">
|
||||
</form>
|
||||
</div>
|
||||
<span class="dim small mono">{{ current_path | default(value="/") }}</span>
|
||||
</div>
|
||||
|
||||
{% if package.files and package.files | length > 0 %}
|
||||
<div class="file-tree-body">
|
||||
{% if current_path %}
|
||||
<a class="file-row" href="/packages/{{ package.config.name }}/~repo/{{ parent_path | default(value='') }}">
|
||||
<span class="file-icon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
|
||||
</span>
|
||||
<span class="file-name" style="color:var(--text-dim)">..</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% for file in package.files %}
|
||||
{{ files::file_view(package = package.config.name, file = file) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="file-tree-empty">No files found.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!-- Sidebar -->
|
||||
<aside class="pkg-sidebar">
|
||||
|
||||
<!-- Build status -->
|
||||
<div class="card sidebar-card">
|
||||
<div class="sidebar-card-title">Latest Build</div>
|
||||
<div class="sidebar-card-body">
|
||||
<div class="build-status-row">
|
||||
{% if package.meta.latest_build_status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passing</span>
|
||||
{% elif package.meta.latest_build_status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failing</span>
|
||||
{% elif package.meta.latest_build_status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif package.meta.latest_build_status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>pending</span>
|
||||
{% else %}
|
||||
<span class="dim small">No builds yet</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if package.meta.latest_build_id %}
|
||||
<a class="build-link" href="/packages/{{ package.config.name }}/~artifact/{{ package.meta.latest_build_id }}">
|
||||
#{{ package.meta.latest_build_id }} — view logs →
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if package.meta.latest_build_date %}
|
||||
<div class="dim small mono" style="margin-top:6px">{{ package.meta.latest_build_date }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About -->
|
||||
<div class="card sidebar-card">
|
||||
<div class="sidebar-card-title">About</div>
|
||||
<div class="sidebar-card-body">
|
||||
{% if package.language %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Language</span>
|
||||
<span class="lang-pill">
|
||||
<span class="lang-color-dot" {% if package.language_color %}style="background:{{ package.language_color }}"{% endif %}></span>
|
||||
{{ package.language }}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if package.version %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Version</span>
|
||||
<span class="sidebar-stat-value">{{ package.version }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if package.license %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">License</span>
|
||||
<span class="sidebar-stat-value">{{ package.license }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if package.created_at %}
|
||||
<div class="sidebar-stat">
|
||||
<span class="sidebar-stat-label">Created</span>
|
||||
<span class="sidebar-stat-value dim">{{ package.created_at }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick links -->
|
||||
<div class="card sidebar-card">
|
||||
<div class="sidebar-card-title">Links</div>
|
||||
<div class="sidebar-card-body" style="display:flex;flex-direction:column;gap:6px">
|
||||
<a href="/packages/{{ package.config.name }}/~repo" style="font-size:13px">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:4px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
Browse files
|
||||
</a>
|
||||
<a href="/packages/{{ package.config.name }}/~artifact/" style="font-size:13px">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:4px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
Build history
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
@@ -0,0 +1,204 @@
|
||||
{% extends "base" %}
|
||||
{% import 'components/file' as files %}
|
||||
|
||||
{% block title %}{{ package.config.name }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* ── Layout: main + sidebar ─────────────────── */
|
||||
.pkg-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 240px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.pkg-layout { grid-template-columns: 1fr; }
|
||||
.pkg-sidebar { order: -1; }
|
||||
}
|
||||
|
||||
/* ── Repo header ────────────────────────────── */
|
||||
.pkg-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pkg-header h1 {
|
||||
font-family: var(--mono);
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pkg-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Toolbar above file tree ────────────────── */
|
||||
.file-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
}
|
||||
.file-toolbar-search {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 260px;
|
||||
}
|
||||
.file-toolbar-search input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 28px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-family: var(--sans);
|
||||
outline: none;
|
||||
}
|
||||
.file-toolbar-search input:focus { border-color: var(--accent); }
|
||||
.file-toolbar-search input::placeholder { color: var(--muted); }
|
||||
.file-toolbar-search-icon {
|
||||
position: absolute;
|
||||
left: 8px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── File tree ──────────────────────────────── */
|
||||
.file-tree { border-radius: var(--radius); overflow: hidden; }
|
||||
.file-tree-body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }
|
||||
|
||||
.file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
transition: background .1s;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.file-row:last-child { border-bottom: none; }
|
||||
.file-row:hover { background: var(--surface2); text-decoration: none; }
|
||||
|
||||
.file-icon { color: var(--muted); flex-shrink: 0; }
|
||||
.file-name { flex: 1; }
|
||||
.file-name a { color: var(--text); }
|
||||
.file-name a:hover { color: var(--accent); text-decoration: none; }
|
||||
.file-commit { font-size: 11px; color: var(--text-dim); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.file-age { font-size: 11px; color: var(--muted); flex-shrink: 0; }
|
||||
|
||||
/* ── Sidebar ────────────────────────────────── */
|
||||
.pkg-sidebar {}
|
||||
.sidebar-card {
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar-card-title {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .8px;
|
||||
color: var(--muted);
|
||||
padding: 10px 14px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.sidebar-card-body { padding: 12px 14px; }
|
||||
|
||||
.sidebar-stat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.sidebar-stat-label { color: var(--text-dim); }
|
||||
.sidebar-stat-value { font-family: var(--mono); }
|
||||
|
||||
.build-status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.build-link {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
margin-top: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
.lang-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.lang-color-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Empty file state ───────────────────────── */
|
||||
.file-tree-empty {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/packages/">packages</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>{{ package.config.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pkg-header">
|
||||
<h1>
|
||||
{{ package.config.name }}
|
||||
{% if package.meta.latest_build_status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passing</span>
|
||||
{% elif package.meta.latest_build_status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failing</span>
|
||||
{% elif package.meta.latest_build_status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif package.meta.latest_build_status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>pending</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
{% if package.config.description %}
|
||||
<p class="pkg-desc">{{ package.config.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="pkg-layout">
|
||||
|
||||
<!-- File tree -->
|
||||
{% include 'components/file_tree' %}
|
||||
|
||||
<!-- Sidebar (Package info incl build status and releases) -->
|
||||
{% include 'components/sidebar' %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,174 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}{% if query %}Search: {{ query }}{% else %}All Packages{% endif %}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.home-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.home-header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.home-header p {
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.repo-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.repo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.repo-item:hover {
|
||||
border-color: #3a3a3a;
|
||||
background: var(--surface2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.repo-item-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface2);
|
||||
background-image: url("/static/placeholder.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.repo-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.repo-item-name {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.repo-item-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.repo-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.repo-item-lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.lang-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 64px 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.empty-state p { margin: 6px 0 0; font-size: 13px; }
|
||||
|
||||
.result-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="home-header">
|
||||
{% if query %}
|
||||
<h1>Results for <span style="color:var(--accent)">"{{ query }}"</span></h1>
|
||||
{% else %}
|
||||
<h1>Packages</h1>
|
||||
<p>{{ packages | length }} package{% if packages | length != 1 %}s{% endif %} available</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if query %}
|
||||
<div class="result-count">{{ packages | length }} result{% if packages | length != 1 %}s{% endif %}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if packages | length > 0 %}
|
||||
<div class="repo-grid">
|
||||
{% for pkg in packages %}
|
||||
<a class="card repo-item" href="/packages/{{ pkg.name }}">
|
||||
<div class="repo-item-avatar" {% if pkg.avatar_url %}style="background-image:url('{{ pkg.avatar_url }}')"{% endif %}></div>
|
||||
<div class="repo-item-main">
|
||||
<span class="repo-item-name">{{ pkg.name }}</span>
|
||||
{% if pkg.description %}
|
||||
<div class="repo-item-desc">{{ pkg.description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="repo-item-meta">
|
||||
{% if pkg.language %}
|
||||
<span class="repo-item-lang">
|
||||
<span class="lang-dot" style="{% if pkg.language_color %}background:{{ pkg.language_color }}{% endif %}"></span>
|
||||
{{ pkg.language }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if pkg.latest_build_status %}
|
||||
{% if pkg.latest_build_status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passing</span>
|
||||
{% elif pkg.latest_build_status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failing</span>
|
||||
{% elif pkg.latest_build_status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif pkg.latest_build_status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>pending</span>
|
||||
{% else %}
|
||||
<span class="badge badge-unknown"><span class="dot"></span>unknown</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<span class="dim small">{{ pkg.updated_at }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
{% if query %}
|
||||
<p>No packages match <strong>"{{ query }}"</strong></p>
|
||||
{% else %}
|
||||
<p>No packages yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,281 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}{{ file.name }} · {{ package.name }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* ── Path breadcrumb ────────────────────────── */
|
||||
.file-path-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
padding: 8px 14px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
}
|
||||
.file-path-bar a { color: var(--accent); }
|
||||
.file-path-bar a:hover { text-decoration: underline; }
|
||||
.file-path-sep { color: var(--border); margin: 0 3px; }
|
||||
.file-path-current { color: var(--text); }
|
||||
|
||||
/* ── File metadata row ──────────────────────── */
|
||||
.file-meta-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
background: var(--surface);
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-meta-bar .mono { font-family: var(--mono); }
|
||||
|
||||
/* ── Directory listing (same as package home but nested) */
|
||||
.file-tree-body {
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
transition: background .1s;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.file-row:last-child { border-bottom: none; }
|
||||
.file-row:hover { background: var(--surface2); }
|
||||
.file-icon { color: var(--muted); flex-shrink: 0; }
|
||||
.file-name { flex: 1; }
|
||||
.file-name a { color: var(--text); }
|
||||
.file-name a:hover { color: var(--accent); text-decoration: none; }
|
||||
.file-commit { font-size: 11px; color: var(--text-dim); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.file-age { font-size: 11px; color: var(--muted); flex-shrink: 0; }
|
||||
|
||||
/* ── File content / code viewer ─────────────── */
|
||||
.code-viewer {
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-viewer pre {
|
||||
margin: 0;
|
||||
padding: 16px 20px;
|
||||
overflow-x: auto;
|
||||
background: #0a0a0a;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #c8ccd4;
|
||||
}
|
||||
/* Line numbers */
|
||||
.code-table { width: 100%; border-collapse: collapse; }
|
||||
.code-table tr:hover .code-line { background: rgba(255,255,255,.03); }
|
||||
.code-table tr:hover .line-num { background: rgba(255,255,255,.03); }
|
||||
.line-num {
|
||||
user-select: none;
|
||||
text-align: right;
|
||||
padding: 0 16px 0 16px;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.code-line {
|
||||
padding: 0 16px;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
white-space: pre;
|
||||
color: #c8ccd4;
|
||||
}
|
||||
|
||||
/* ── Binary/image preview ───────────────────── */
|
||||
.file-preview-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
.file-preview-img img { max-width: 100%; max-height: 600px; border-radius: 4px; }
|
||||
|
||||
.file-binary-msg {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
|
||||
.toolbar-search {
|
||||
position: relative;
|
||||
max-width: 260px;
|
||||
}
|
||||
.toolbar-search input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 28px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-family: var(--sans);
|
||||
outline: none;
|
||||
}
|
||||
.toolbar-search input:focus { border-color: var(--accent); }
|
||||
.toolbar-search input::placeholder { color: var(--muted); }
|
||||
.toolbar-search-icon {
|
||||
position: absolute;
|
||||
left: 8px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
.dir-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
background: var(--surface2);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/packages/">packages</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}">{{ package.name }}</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>files</span>
|
||||
</div>
|
||||
|
||||
<!-- Path bar -->
|
||||
<div class="file-path-bar">
|
||||
<a href="/packages/{{ package.name }}/~repo">{{ package.name }}</a>
|
||||
{% for segment in path_segments %}
|
||||
<span class="file-path-sep">/</span>
|
||||
{% if loop.last %}
|
||||
<span class="file-path-current">{{ segment.name }}</span>
|
||||
{% else %}
|
||||
<a href="/packages/{{ package.name }}/~repo/{{ segment.path }}">{{ segment.name }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if file.is_dir %}
|
||||
<!-- Directory: optional search toolbar + listing -->
|
||||
<div class="dir-toolbar">
|
||||
<div class="toolbar-search">
|
||||
<svg class="toolbar-search-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<form method="get" action="/packages/{{ package.name }}/~repo">
|
||||
<input type="text" name="q" placeholder="Filter files…" value="{{ query | default(value='') }}">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-tree-body">
|
||||
{% if file.parent_path is defined %}
|
||||
<a class="file-row" href="/packages/{{ package.name }}/~repo/{{ file.parent_path }}">
|
||||
<span class="file-icon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</span>
|
||||
<span class="file-name" style="color:var(--text-dim)">..</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% for entry in file.children %}
|
||||
<div class="file-row">
|
||||
<span class="file-icon">
|
||||
{% if entry.is_dir %}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:#4f8ef7"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
|
||||
{% else %}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="file-name">
|
||||
<a href="/packages/{{ package.name }}/~repo/{{ entry.path }}">{{ entry.name }}</a>
|
||||
</span>
|
||||
<span class="file-commit">{{ entry.last_commit_message | default(value="") }}</span>
|
||||
<span class="file-age">{{ entry.last_modified | default(value="") }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif file.is_image %}
|
||||
<!-- Image preview -->
|
||||
<div class="file-meta-bar">
|
||||
<span>{{ file.size | default(value="unknown size") }}</span>
|
||||
<a href="{{ file.raw_url }}" class="mono" style="font-size:11px">raw ↗</a>
|
||||
</div>
|
||||
<div class="file-preview-img">
|
||||
<img src="{{ file.raw_url }}" alt="{{ file.name }}">
|
||||
</div>
|
||||
|
||||
{% elif file.is_binary %}
|
||||
<!-- Binary file -->
|
||||
<div class="file-meta-bar">
|
||||
<span>{{ file.size | default(value="unknown size") }} · binary file</span>
|
||||
{% if file.raw_url %}<a href="{{ file.raw_url }}" class="mono" style="font-size:11px">download ↗</a>{% endif %}
|
||||
</div>
|
||||
<div class="file-binary-msg">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border);margin-bottom:8px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
<p>Binary file — cannot be displayed.</p>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<!-- Text / code file -->
|
||||
<div class="file-meta-bar">
|
||||
<span class="mono">{{ file.name }}</span>
|
||||
<span>
|
||||
<span class="mono">{{ file.line_count | default(value="?") }} lines</span>
|
||||
<span style="margin: 0 8px">·</span>
|
||||
<span>{{ file.size | default(value="") }}</span>
|
||||
{% if file.raw_url %}<span style="margin: 0 8px">·</span><a href="{{ file.raw_url }}" style="font-size:11px" class="mono">raw ↗</a>{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="code-viewer">
|
||||
<pre><table class="code-table">
|
||||
{% if file.lines %}
|
||||
{% for line in file.lines %}
|
||||
<tr>
|
||||
<td class="line-num">{{ loop.index }}</td>
|
||||
<td class="code-line">{{ line | escape }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr><td class="code-line" style="padding:16px 20px">{{ file.content | default(value="") | escape }}</td></tr>
|
||||
{% endif %}
|
||||
</table></pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,161 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}Search "{{ query }}" · {{ package.name }}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.search-header { margin-bottom: 20px; }
|
||||
.search-header h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-family: var(--mono);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.result-count { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-bottom: 16px; }
|
||||
|
||||
.search-result {
|
||||
padding: 12px 16px;
|
||||
transition: background .1s, border-color .1s;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
display: block;
|
||||
}
|
||||
.search-result:hover { background: var(--surface2); border-color: #3a3a3a; text-decoration: none; }
|
||||
.search-result + .search-result { border-top: 1px solid var(--border); }
|
||||
|
||||
.result-path {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-matches { margin-top: 6px; }
|
||||
.match-line {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 2px 0;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.match-lineno {
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.match-text {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
.match-text mark {
|
||||
background: rgba(79,142,247,.25);
|
||||
color: var(--accent);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 64px 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-form-inline {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.search-form-inline input[type="text"] {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
padding: 7px 12px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
.search-form-inline input:focus { border-color: var(--accent); }
|
||||
.search-form-inline button {
|
||||
padding: 7px 16px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-form-inline button:hover { opacity: .9; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/packages/">packages</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}">{{ package.name }}</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/packages/{{ package.name }}/~repo">files</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>search</span>
|
||||
</div>
|
||||
|
||||
<div class="search-header">
|
||||
<h1>Search in {{ package.name }}</h1>
|
||||
</div>
|
||||
|
||||
<form class="search-form-inline" method="get" action="/packages/{{ package.name }}/~repo">
|
||||
<input type="text" name="q" value="{{ query | default(value='') }}" placeholder="Search files and content…" autofocus>
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
{% if query %}
|
||||
<div class="result-count">
|
||||
{% if results and results | length > 0 %}
|
||||
{{ results | length }} file{% if results | length != 1 %}s{% endif %} matched "{{ query }}"
|
||||
{% else %}
|
||||
No results for "{{ query }}"
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if results and results | length > 0 %}
|
||||
<div class="card" style="overflow:hidden">
|
||||
{% for result in results %}
|
||||
<div class="search-result">
|
||||
<div class="result-path">
|
||||
<a href="/packages/{{ package.name }}/~repo/{{ result.path }}">{{ result.path }}</a>
|
||||
</div>
|
||||
{% if result.matches and result.matches | length > 0 %}
|
||||
<div class="result-matches">
|
||||
{% for match in result.matches %}
|
||||
<div class="match-line">
|
||||
<span class="match-lineno">{{ match.line_number }}</span>
|
||||
<span class="match-text">{{ match.text | escape }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<p style="margin-top:10px">No files match <strong>"{{ query }}"</strong>.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user