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