feat: implement Phase 1 (auth) and Phase 2 (faves CRUD) foundation
Go backend with server-rendered HTML/HTMX frontend, SQLite database, and filesystem image storage. Self-hostable single-binary architecture. Phase 1 — Authentication & project foundation: - Argon2id password hashing with timing-attack prevention - Session management with cookie-based auth and periodic cleanup - Login, signup (open/requests/closed modes), logout, forced password reset - CSRF double-submit cookie pattern with HTMX auto-inclusion - Proxy-aware real IP extraction (WireGuard/Tailscale support) - Configurable base path for subdomain and subpath deployment - Rate limiting on auth endpoints with background cleanup - Security headers (CSP, X-Frame-Options, Referrer-Policy) - Structured logging with slog, graceful shutdown - Pico CSS + HTMX vendored and embedded via go:embed Phase 2 — Faves CRUD with tags and images: - Full CRUD for favorites with ownership checks - Image upload with EXIF stripping, resize to 1920px, UUID filenames - Tag system with HTMX autocomplete (prefix search, popularity-sorted) - Privacy controls (public/private per fave, user-configurable default) - Tag browsing, pagination, batch tag loading (avoids N+1) - OpenGraph meta tags on public fave detail pages Includes code quality pass: extracted shared helpers, fixed signup request persistence bug, plugged rate limiter memory leak, removed dead code, and logged previously-swallowed errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
commit
fc1f7259c5
52 changed files with 5459 additions and 0 deletions
162
web/static/css/style.css
Normal file
162
web/static/css/style.css
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
/* Favoritter — custom styles on top of Pico CSS */
|
||||
|
||||
/* Skip navigation link for accessibility */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--pico-primary-background);
|
||||
color: var(--pico-primary-inverse);
|
||||
z-index: 1000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Inline forms (e.g. logout button in nav) */
|
||||
.inline-form {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Flash messages */
|
||||
.flash {
|
||||
padding: 1rem;
|
||||
border-radius: var(--pico-border-radius);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flash-success {
|
||||
background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent);
|
||||
border: 1px solid var(--pico-ins-color);
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
|
||||
border: 1px solid var(--pico-del-color);
|
||||
}
|
||||
|
||||
.flash-info {
|
||||
background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
|
||||
border: 1px solid var(--pico-primary);
|
||||
}
|
||||
|
||||
/* Fave card grid */
|
||||
.fave-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fave-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fave-card img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.fave-card header {
|
||||
padding: 0.5rem 1rem 0;
|
||||
}
|
||||
|
||||
.fave-card footer {
|
||||
padding: 0 1rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Privacy badge */
|
||||
.badge-private {
|
||||
background: var(--pico-muted-border-color);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: var(--pico-border-radius);
|
||||
font-size: 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Tag chips */
|
||||
.tag-chip {
|
||||
display: inline-block;
|
||||
background: var(--pico-primary-focus);
|
||||
color: var(--pico-primary);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.tag-chip:hover {
|
||||
background: var(--pico-primary);
|
||||
color: var(--pico-primary-inverse);
|
||||
}
|
||||
|
||||
/* Tag autocomplete suggestions */
|
||||
.tag-suggestions {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid var(--pico-muted-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tag-suggestions:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-suggestion {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tag-suggestion:hover,
|
||||
.tag-suggestion:focus {
|
||||
background: var(--pico-primary-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Fave detail actions */
|
||||
.fave-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.fave-actions a,
|
||||
.fave-actions button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Current image preview in edit form */
|
||||
.current-image {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.current-image img {
|
||||
border-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue