add hero banner, fix up css styles

This commit is contained in:
Evan Jarrett
2025-10-13 20:59:14 -05:00
parent 64a05d4024
commit 6359edaf20
8 changed files with 423 additions and 109 deletions
-2
View File
@@ -492,8 +492,6 @@ See `.env.hold.example` for all available options. Key environment variables:
**OAuth implementation:**
- Client (`pkg/auth/oauth/client.go`) encapsulates all OAuth configuration
- Uses `authelia.com/client/oauth2` for PAR support
- DPoP proofs generated with `github.com/AxisCommunications/go-dpop` (auto-handles JWK)
- Token validation via `com.atproto.server.getSession` ensures no trust in client-provided identity
- All ATCR components use standardized `/auth/oauth/callback` path
- Client ID generation (localhost query-based vs production metadata URL) handled internally
+2 -2
View File
@@ -466,5 +466,5 @@ docker run --rm \
## Support
- Documentation: https://tangled.org/@evan.jarrett.net/at-container-registry
- Issues: https://github.com/your-org/atcr.io/issues
- Bluesky: @yourhandle.bsky.social
- Issues: https://tangled.org/@evan.jarrett.net/at-container-registry/issues
- Bluesky: @evan.jarrett.net
+1 -1
View File
@@ -60,7 +60,7 @@ type RecentPushesHandler struct {
}
func (h *RecentPushesHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
limit := 50
limit := 20
offset := 0
if o := r.URL.Query().Get("offset"); o != "" {
+316 -13
View File
@@ -1,8 +1,13 @@
:root {
--primary: #0066cc;
--primary-dark: #0052a3;
--secondary: #6c757d;
--success: #28a745;
--success-bg: #d4edda;
--warning: #ffc107;
--warning-bg: #fff3cd;
--danger: #dc3545;
--danger-bg: #f8d7da;
--bg: #ffffff;
--fg: #1a1a1a;
--border-dark: #666;
@@ -10,6 +15,17 @@
--code-bg: #f5f5f5;
--hover-bg: #f9f9f9;
--star: #fbbf24;
/* Hero section colors */
--hero-bg-start: #f8f9fa;
--hero-bg-end: #e9ecef;
/* Terminal colors */
--terminal-bg: var(--fg);
--terminal-header-bg: #2d2d2d;
--terminal-text: var(--border);
--terminal-prompt: #4ec9b0;
--terminal-comment: #6a9955;
}
* {
@@ -694,23 +710,26 @@ button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover {
padding: 1rem;
}
/* Status Messages */
/* Status Messages / Callouts */
.note {
background: var(--warning-bg);
border-left: 4px solid var(--warning);
padding: 1rem;
margin: 1rem 0;
}
.success {
color: var(--success);
padding: 0.5rem;
background: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 4px;
margin-top: 1rem;
background: var(--success-bg);
border-left: 4px solid var(--success);
padding: 1rem;
margin: 1rem 0;
}
.error {
color: var(--danger);
padding: 0.5rem;
background: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
margin-top: 1rem;
background: var(--danger-bg);
border-left: 4px solid var(--danger);
padding: 1rem;
margin: 1rem 0;
}
/* Load More Button */
@@ -1167,6 +1186,248 @@ button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover {
color: var(--fg);
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
padding: 4rem 2rem;
border-bottom: 1px solid var(--border);
}
.hero-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--fg);
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--border-dark);
margin-bottom: 3rem;
line-height: 1.6;
}
.hero-terminal {
max-width: 600px;
margin: 0 auto 2.5rem;
background: var(--terminal-bg);
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.terminal-header {
background: var(--terminal-header-bg);
padding: 0.75rem 1rem;
display: flex;
gap: 0.5rem;
align-items: center;
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-dark);
}
.terminal-dot:nth-child(1) {
background: #ff5f56;
}
.terminal-dot:nth-child(2) {
background: #ffbd2e;
}
.terminal-dot:nth-child(3) {
background: #27c93f;
}
.terminal-content {
padding: 1.5rem;
margin: 0;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.95rem;
line-height: 1.8;
color: var(--terminal-text);
overflow-x: auto;
}
.terminal-prompt {
color: var(--terminal-prompt);
font-weight: bold;
}
.terminal-comment {
color: var(--terminal-comment);
font-style: italic;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 4rem;
}
.btn-hero-primary,
.btn-hero-secondary {
padding: 0.9rem 2rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
}
.btn-hero-primary {
background: var(--primary);
color: var(--bg);
border: 2px solid var(--primary);
}
.btn-hero-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}
.btn-hero-secondary {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-hero-secondary:hover {
background: var(--primary);
color: var(--bg);
transform: translateY(-2px);
}
.hero-benefits {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.benefit-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 2rem 1.5rem;
text-align: center;
transition: all 0.2s ease;
}
.benefit-card:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 1rem;
line-height: 1;
}
.benefit-card h3 {
font-size: 1.2rem;
margin-bottom: 0.75rem;
color: var(--fg);
}
.benefit-card p {
color: var(--border-dark);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
/* Install Page */
.install-page {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.install-section {
margin: 2rem 0;
}
.install-section h2 {
margin-bottom: 1rem;
color: var(--fg);
}
.install-section h3 {
margin: 1.5rem 0 0.5rem;
color: var(--border-dark);
font-size: 1.1rem;
}
.code-block {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
margin: 0.5rem 0 1rem;
overflow-x: auto;
}
.code-block code {
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
white-space: pre-wrap;
}
.platform-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 2px solid var(--border);
margin-bottom: 1rem;
}
.platform-tab {
padding: 0.5rem 1rem;
cursor: pointer;
border: none;
background: none;
font-size: 1rem;
color: var(--border-dark);
transition: all 0.2s;
}
.platform-tab:hover {
color: var(--fg);
}
.platform-tab.active {
color: var(--primary);
border-bottom: 2px solid var(--primary);
margin-bottom: -2px;
}
.platform-content {
display: none;
}
.platform-content.active {
display: block;
}
/* Responsive */
@media (max-width: 768px) {
.navbar {
@@ -1219,10 +1480,52 @@ button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover {
.featured-card {
min-height: auto;
}
.hero-section {
padding: 3rem 1.5rem;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.hero-terminal {
margin-bottom: 2rem;
}
.terminal-content {
font-size: 0.85rem;
padding: 1rem;
}
.hero-actions {
flex-direction: column;
margin-bottom: 3rem;
}
.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
text-align: center;
}
.hero-benefits {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-benefits {
grid-template-columns: repeat(3, 1fr);
}
}
+49
View File
@@ -11,6 +11,55 @@
<body>
{{ template "nav" . }}
{{ if not .User }}
<!-- Hero Section for Non-Logged-In Users -->
<section class="hero-section">
<div class="hero-content">
<h1 class="hero-title">ship containers on the open web.</h1>
<p class="hero-subtitle">
Push and pull Docker images on the AT Protocol.<br>
Browse public registries or control your data.
</p>
<div class="hero-terminal">
<div class="terminal-header">
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
</div>
<pre class="terminal-content"><span class="terminal-prompt">$</span> docker login atcr.io
<span class="terminal-prompt">$</span> docker push atcr.io/you/app
<span class="terminal-comment"># same docker, decentralized</span></pre>
</div>
<div class="hero-actions">
<a href="/auth/oauth/login?return_to=/" class="btn-hero-primary">Get Started</a>
<a href="/install" class="btn-hero-secondary">Learn More</a>
</div>
</div>
<!-- Benefit Cards -->
<div class="hero-benefits">
<div class="benefit-card">
<div class="benefit-icon">🐳</div>
<h3>Works with Docker</h3>
<p>Use docker push & pull. No new tools to learn.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon"></div>
<h3>Your Data</h3>
<p>Join shared holds or captain your own storage.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🧭</div>
<h3>Discover Images</h3>
<p>Browse and star public container registries.</p>
</div>
</div>
</section>
{{ end }}
<main class="container">
<div class="home-page">
<!-- Featured Repositories Section -->
+2 -80
View File
@@ -7,79 +7,6 @@
<title>Install ATCR Credential Helper - ATCR</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
.install-page {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.install-section {
margin: 2rem 0;
}
.install-section h2 {
margin-bottom: 1rem;
color: #1a1a1a;
}
.install-section h3 {
margin: 1.5rem 0 0.5rem;
color: #4a4a4a;
font-size: 1.1rem;
}
.code-block {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
padding: 1rem;
margin: 0.5rem 0 1rem;
overflow-x: auto;
}
.code-block code {
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
}
.platform-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 1rem;
}
.platform-tab {
padding: 0.5rem 1rem;
cursor: pointer;
border: none;
background: none;
font-size: 1rem;
color: #666;
transition: all 0.2s;
}
.platform-tab:hover {
color: #000;
}
.platform-tab.active {
color: #0066cc;
border-bottom: 2px solid #0066cc;
margin-bottom: -2px;
}
.platform-content {
display: none;
}
.platform-content.active {
display: block;
}
.note {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1rem;
margin: 1rem 0;
}
.success {
background: #d4edda;
border-left: 4px solid #28a745;
padding: 1rem;
margin: 1rem 0;
}
</style>
</head>
<body>
{{ template "nav" . }}
@@ -137,8 +64,7 @@ chmod +x install.sh
<h2>Authentication</h2>
<p>The credential helper will automatically prompt for authentication when you push or pull:</p>
<div class="code-block"><code>export ATCR_AUTO_AUTH=1
docker push {{ .RegistryURL }}/yourhandle/myapp:latest</code></div>
<div class="code-block"><code>docker push {{ .RegistryURL }}/yourhandle/myapp:latest</code></div>
<p>This will:</p>
<ol>
@@ -180,12 +106,8 @@ which docker-credential-atcr
# Add to PATH if needed
export PATH="/usr/local/bin:$PATH"</code></div>
<h3>Authentication failed</h3>
<p>Make sure auto-auth is enabled:</p>
<div class="code-block"><code>export ATCR_AUTO_AUTH=1</code></div>
<h3>Still having issues?</h3>
<p>Check the <a href="https://github.com/atcr-io/atcr/blob/main/INSTALLATION.md">full documentation</a> or <a href="https://github.com/atcr-io/atcr/issues">open an issue</a>.</p>
<p>Check the <a href="https://tangled.org/@evan.jarrett.net/at-container-registry/blob/main/INSTALLATION.md">full documentation</a> or <a href="https://tangled.org/@evan.jarrett.net/at-container-registry/issues">open an issue</a>.</p>
</div>
<div class="install-section">
+16
View File
@@ -106,6 +106,17 @@ func (s *HoldService) isCrewMember(did string) (bool, error) {
return false, fmt.Errorf("no PDS endpoint found for owner")
}
// Build this hold's URI for filtering
publicURL := s.config.Server.PublicURL
if publicURL == "" {
return false, fmt.Errorf("hold public URL not configured")
}
holdName, err := extractHostname(publicURL)
if err != nil {
return false, fmt.Errorf("failed to extract hold name: %w", err)
}
holdURI := fmt.Sprintf("at://%s/%s/%s", ownerDID, atproto.HoldCollection, holdName)
// Create unauthenticated client to read public records
client := atproto.NewClient(pdsEndpoint, ownerDID, "")
@@ -127,6 +138,11 @@ func (s *HoldService) isCrewMember(did string) (bool, error) {
continue
}
// Only check crew records for THIS hold (prevents cross-hold access)
if crewRecord.Hold != holdURI {
continue
}
// Check expiration (if set)
if crewRecord.ExpiresAt != nil && time.Now().After(*crewRecord.ExpiresAt) {
continue // Skip expired membership
+37 -11
View File
@@ -256,12 +256,16 @@ func (s *HoldService) ReconcileAllowAllCrew(callbackHandler *http.HandlerFunc) e
return nil
}
// hasAllowAllCrewRecord checks if the allow-all crew record exists in the PDS
// hasAllowAllCrewRecord checks if the allow-all crew record exists in the PDS for THIS hold
func (s *HoldService) hasAllowAllCrewRecord() (bool, error) {
ownerDID := s.config.Registration.OwnerDID
publicURL := s.config.Server.PublicURL
if ownerDID == "" {
return false, fmt.Errorf("hold owner DID not configured")
}
if publicURL == "" {
return false, fmt.Errorf("hold public URL not configured")
}
ctx := context.Background()
@@ -282,11 +286,18 @@ func (s *HoldService) hasAllowAllCrewRecord() (bool, error) {
return false, fmt.Errorf("no PDS endpoint found for owner")
}
// Build hold-specific rkey
holdName, err := extractHostname(publicURL)
if err != nil {
return false, fmt.Errorf("failed to extract hostname: %w", err)
}
crewRKey := fmt.Sprintf("allow-all-%s", holdName)
// Create unauthenticated client to read public records
client := atproto.NewClient(pdsEndpoint, ownerDID, "")
// Query for specific rkey "allow-all"
record, err := client.GetRecord(ctx, atproto.HoldCrewCollection, "allow-all")
// Query for hold-specific allow-all record
record, err := client.GetRecord(ctx, atproto.HoldCrewCollection, crewRKey)
if err != nil {
// Record doesn't exist
if errors.Is(err, atproto.ErrRecordNotFound) {
@@ -302,7 +313,13 @@ func (s *HoldService) hasAllowAllCrewRecord() (bool, error) {
}
// Check if it's the exact wildcard pattern
return crewRecord.MemberPattern != nil && *crewRecord.MemberPattern == "*", nil
if crewRecord.MemberPattern == nil || *crewRecord.MemberPattern != "*" {
return false, nil
}
// Verify it's for this hold (defensive check)
expectedHoldURI := fmt.Sprintf("at://%s/%s/%s", ownerDID, atproto.HoldCollection, holdName)
return crewRecord.Hold == expectedHoldURI, nil
}
// createAllowAllCrewRecord creates a wildcard crew record allowing all authenticated users
@@ -329,7 +346,9 @@ func (s *HoldService) createAllowAllCrewRecord(callbackHandler *http.HandlerFunc
// Create wildcard crew record
crewRecord := atproto.NewHoldCrewRecordWithPattern(holdURI, "*", "write")
_, err = client.PutRecord(ctx, atproto.HoldCrewCollection, "allow-all", crewRecord)
// Use hold-specific rkey to support multiple holds with different allow-all settings
crewRKey := fmt.Sprintf("allow-all-%s", holdName)
_, err = client.PutRecord(ctx, atproto.HoldCrewCollection, crewRKey, crewRecord)
if err != nil {
return fmt.Errorf("failed to create allow-all crew record: %w", err)
}
@@ -338,19 +357,26 @@ func (s *HoldService) createAllowAllCrewRecord(callbackHandler *http.HandlerFunc
return nil
}
// deleteAllowAllCrewRecord deletes the wildcard crew record
// deleteAllowAllCrewRecord deletes the wildcard crew record for this hold
func (s *HoldService) deleteAllowAllCrewRecord(callbackHandler *http.HandlerFunc) error {
// Safety check: only delete if it's the exact wildcard pattern
// Safety check: only delete if it's the exact wildcard pattern for THIS hold
isWildcard, err := s.hasAllowAllCrewRecord()
if err != nil {
return fmt.Errorf("failed to check allow-all crew record: %w", err)
}
if !isWildcard {
log.Printf("Warning: 'allow-all' crew record exists but is not wildcard - skipping deletion")
log.Printf("Note: 'allow-all' crew record not found for this hold (may exist for other holds)")
return nil
}
// Get hold name for rkey
holdName, err := extractHostname(s.config.Server.PublicURL)
if err != nil {
return fmt.Errorf("failed to extract hostname: %w", err)
}
crewRKey := fmt.Sprintf("allow-all-%s", holdName)
// Run OAuth flow to get authenticated client
client, err := s.runOAuthFlow(callbackHandler, "Deleting allow-all crew record")
if err != nil {
@@ -359,13 +385,13 @@ func (s *HoldService) deleteAllowAllCrewRecord(callbackHandler *http.HandlerFunc
ctx := context.Background()
// Delete the record
err = client.DeleteRecord(ctx, atproto.HoldCrewCollection, "allow-all")
// Delete the hold-specific allow-all record
err = client.DeleteRecord(ctx, atproto.HoldCrewCollection, crewRKey)
if err != nil {
return fmt.Errorf("failed to delete allow-all crew record: %w", err)
}
log.Printf("✓ Deleted allow-all crew record")
log.Printf("✓ Deleted allow-all crew record for this hold")
return nil
}