diff options
Diffstat (limited to 'issues/015-random-landscape-background.md')
| -rw-r--r-- | issues/015-random-landscape-background.md | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/issues/015-random-landscape-background.md b/issues/015-random-landscape-background.md new file mode 100644 index 0000000..4f65c98 --- /dev/null +++ b/issues/015-random-landscape-background.md @@ -0,0 +1,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 |