Files
at-container-registry/pkg/appview/templates/pages/repository.html
T
2025-10-08 20:50:27 -05:00

159 lines
7.9 KiB
HTML

{{ define "repository" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ if .Repository.Title }}{{ .Repository.Title }}{{ else }}{{ .Owner.Handle }}/{{ .Repository.Name }}{{ end }} - ATCR</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="/static/js/app.js"></script>
</head>
<body>
{{ template "nav" . }}
<main class="container">
<div class="repository-page">
<!-- Repository Header -->
<div class="repository-header">
<div class="repo-hero">
{{ if .Repository.IconURL }}
<img src="{{ .Repository.IconURL }}" alt="{{ .Repository.Name }}" class="repo-hero-icon">
{{ else }}
<div class="repo-hero-icon-placeholder">{{ firstChar .Repository.Name }}</div>
{{ end }}
<div class="repo-hero-info">
<h1>
<a href="/u/{{ .Owner.Handle }}" class="owner-link">{{ .Owner.Handle }}</a>
<span class="repo-separator">/</span>
<span class="repo-name">{{ .Repository.Name }}</span>
</h1>
{{ if .Repository.Description }}
<p class="repo-hero-description">{{ .Repository.Description }}</p>
{{ end }}
</div>
</div>
<!-- Star Button -->
<div class="repo-actions">
<button class="star-btn{{ if .IsStarred }} starred{{ end }}" id="star-btn" onclick="toggleStar('{{ .Owner.Handle }}', '{{ .Repository.Name }}')">
<span class="star-icon" id="star-icon">{{ if .IsStarred }}★{{ else }}☆{{ end }}</span>
<span class="star-count" id="star-count">{{ .StarCount }}</span>
</button>
</div>
<!-- Metadata Section -->
{{ if or .Repository.Licenses .Repository.SourceURL .Repository.DocumentationURL }}
<div class="repo-metadata">
{{ if .Repository.Licenses }}
<span class="metadata-badge license-badge">{{ .Repository.Licenses }}</span>
{{ end }}
{{ if .Repository.SourceURL }}
<a href="{{ .Repository.SourceURL }}" target="_blank" class="metadata-link">
Source
</a>
{{ end }}
{{ if .Repository.DocumentationURL }}
<a href="{{ .Repository.DocumentationURL }}" target="_blank" class="metadata-link">
Documentation
</a>
{{ end }}
</div>
{{ end }}
<!-- Pull Command -->
<div class="pull-command-section">
<h3>Pull this image</h3>
{{ if .Repository.Tags }}
{{ $firstTag := index .Repository.Tags 0 }}
<div class="push-command">
<code class="pull-command">docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:{{ $firstTag.Tag }}</code>
<button class="copy-btn" onclick="copyToClipboard('docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:{{ $firstTag.Tag }}')">
Copy
</button>
</div>
{{ else }}
<div class="push-command">
<code class="pull-command">docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:latest</code>
<button class="copy-btn" onclick="copyToClipboard('docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:latest')">
Copy
</button>
</div>
{{ end }}
</div>
</div>
<!-- Tags Section -->
<div class="repo-section">
<h2>Tags</h2>
{{ if .Repository.Tags }}
<div class="tags-list">
{{ range .Repository.Tags }}
<div class="tag-item" id="tag-{{ .Tag }}">
<div class="tag-item-header">
<span class="tag-name-large">{{ .Tag }}</span>
<div style="display: flex; gap: 1rem; align-items: center;">
<time class="tag-timestamp" datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z07:00" }}">
{{ timeAgo .CreatedAt }}
</time>
{{ if $.IsOwner }}
<button class="delete-btn"
hx-delete="/api/images/{{ $.Repository.Name }}/tags/{{ .Tag }}"
hx-confirm="Delete tag {{ .Tag }}?"
hx-target="#tag-{{ .Tag }}"
hx-swap="outerHTML">
🗑️
</button>
{{ end }}
</div>
</div>
<div class="tag-item-details">
<code class="digest" title="{{ .Digest }}">{{ truncateDigest .Digest 12 }}</code>
</div>
<div class="push-command">
<code class="pull-command">docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:{{ .Tag }}</code>
<button class="copy-btn" onclick="copyToClipboard('docker pull {{ $.RegistryURL }}/{{ $.Owner.Handle }}/{{ $.Repository.Name }}:{{ .Tag }}')">
Copy
</button>
</div>
</div>
{{ end }}
</div>
{{ else }}
<p class="empty-message">No tags available</p>
{{ end }}
</div>
<!-- Manifests Section -->
<div class="repo-section">
<h2>Manifests</h2>
{{ if .Repository.Manifests }}
<div class="manifests-list">
{{ range .Repository.Manifests }}
<div class="manifest-item">
<div class="manifest-item-header">
<code class="manifest-digest" title="{{ .Digest }}">{{ truncateDigest .Digest 16 }}</code>
<time datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z07:00" }}">
{{ timeAgo .CreatedAt }}
</time>
</div>
<div class="manifest-item-details">
<span class="manifest-detail-label">Storage:</span>
<span>{{ .HoldEndpoint }}</span>
</div>
</div>
{{ end }}
</div>
{{ else }}
<p class="empty-message">No manifests available</p>
{{ end }}
</div>
</div>
</main>
<!-- Modal container for HTMX -->
<div id="modal"></div>
</body>
</html>
{{ end }}