blob: 4f65c987632535364bd0bcc0a541f63d74cb287f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
# [FEATURE] Random landscape background image
## Description
Use a random open licensed landscape image as the background, and replace it with a new one each refresh.
## User Story
As a user, I want a fresh landscape background on each visit for visual variety.
## Technical Context
- Affects page container/body styling
- Needs external image source with open license
- Consider performance and loading states
## Test Strategy
### Integration Test (Red)
Test image endpoint returns valid image URL with appropriate license.
```go
func TestGetRandomBackgroundURL(t *testing.T) {
url := GetRandomBackgroundURL()
assert.NotEmpty(t, url)
assert.Contains(t, url, "unsplash") // or other source
// Verify URL is accessible
resp, err := http.Head(url)
assert.NoError(t, err)
assert.Equal(t, 200, resp.StatusCode)
}
```
## Proposed Approach
1. **Image Source Options:**
- **Unsplash Source API:** `https://source.unsplash.com/1920x1080/?landscape,nature`
- Free, no API key needed for basic use
- Redirects to random image
- **Pexels API:** Requires API key
- **Local curated set:** Bundle images, no external dependency
2. **Implementation:**
- Set CSS `background-image` on body or main container
- Add loading state (solid color) while image loads
- Use `background-size: cover` and `background-position: center`
3. **Template change:**
```html
<body style="background-image: url('{{.BackgroundURL}}'); background-size: cover;">
```
Or with CSS class and CSS variable.
4. **Handler:**
- Generate/fetch random URL on each page load
- Pass to template context
## Traps to Avoid
- **Slow loads:** Large images can delay page render
- Use appropriate resolution (1920x1080 max)
- Consider lazy loading or progressive enhancement
- **Image fails to load:** Have solid color fallback
- **Caching:** Browser may cache image; ensure URL changes per request
- **Dark text visibility:** May need overlay or text shadow for readability
## Affected Components
- `internal/handlers/handlers.go` (add background URL to context)
- `web/templates/index.html` (apply background style)
- `web/static/css/` (fallback and loading styles)
## Definition of Done
- [ ] Background image displays on page load
- [ ] Different image on each refresh
- [ ] Images are openly licensed
- [ ] Fallback color while loading
- [ ] Text remains readable over images
- [ ] Integration test verifies URL validity
|
