From 0db30271b1663e93025c5a099f4c94d075aedd39 Mon Sep 17 00:00:00 2001 From: balovbohdan Date: Tue, 31 Mar 2026 14:53:30 +0300 Subject: [PATCH 1/3] plan: Add implementation plan for issue #94 - Add Strava footer button Planning details: - Requirements: Add Strava icon button to footer linking to club - Approach: Check icon library, add button component, style consistently - Key changes: Footer component, icon assets, styling Co-Authored-By: Claude Haiku 4.5 --- .../add-strava-footer-button/proposal.md | 28 ++++++++++ .../specs/footer-integration/spec.md | 53 +++++++++++++++++++ .../changes/add-strava-footer-button/tasks.md | 41 ++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 openspec/changes/add-strava-footer-button/proposal.md create mode 100644 openspec/changes/add-strava-footer-button/specs/footer-integration/spec.md create mode 100644 openspec/changes/add-strava-footer-button/tasks.md diff --git a/openspec/changes/add-strava-footer-button/proposal.md b/openspec/changes/add-strava-footer-button/proposal.md new file mode 100644 index 0000000..e6b11f2 --- /dev/null +++ b/openspec/changes/add-strava-footer-button/proposal.md @@ -0,0 +1,28 @@ +# Change: Add Strava footer button + +## Why +The website needs a visible link to the Strava club (https://www.strava.com/clubs/torqlab) in the footer to help users discover and join the community. A minimalist icon button matching existing footer icons provides consistent UX while maintaining footer clean aesthetics. + +## What Changes +- Add Strava icon to icon library (or use provided SVG if not available) +- Add new icon button to website footer linking to Strava club +- Configure button with security attributes (noopener, noreferrer) +- Ensure button opens link in new browser tab +- Style button to match existing footer icon button design + +## Implementation Approach +1. Check existing icon library for Strava icon availability +2. If missing, add provided SVG to icon assets directory +3. Add Strava icon button component to Footer component +4. Apply consistent styling with other footer icon buttons +5. Add proper security attributes to anchor tag +6. Add accessible alt text and aria labels + +## Impact +- **Affected files/components:** + - Footer component (render new icon button) + - Icon assets directory (add Strava SVG if needed) + - Footer styling/CSS (ensure consistent appearance) +- **Change type:** Added (new button and icon) +- **User impact:** Users can access Strava club from website footer +- **Security:** Proper security attributes prevent referrer leaks diff --git a/openspec/changes/add-strava-footer-button/specs/footer-integration/spec.md b/openspec/changes/add-strava-footer-button/specs/footer-integration/spec.md new file mode 100644 index 0000000..ed8f19b --- /dev/null +++ b/openspec/changes/add-strava-footer-button/specs/footer-integration/spec.md @@ -0,0 +1,53 @@ +# Footer Integration Specification + +## ADDED Requirements + +### Requirement: Strava Club Social Link Button +Adds a new icon button to the website footer that links to the TORQ Strava club, allowing users to discover and join the community. + +**WHEN** user visits the website footer +**THEN** user sees a Strava icon button alongside other social/community links +**AND** button is styled consistently with existing footer icon buttons +**AND** button label is accessible to screen readers + +### Requirement: Security Attributes +Ensures the Strava link follows web security best practices by preventing referrer information leakage. + +**WHEN** user clicks the Strava button +**THEN** link opens in a new browser tab +**AND** browser does not send HTTP referrer header to Strava +**AND** opened window has no access to window.opener (prevents window hijacking) + +**Implementation details:** +- Use `target="_blank"` to open in new tab +- Use `rel="noopener noreferrer"` for security + - `noopener`: Prevents opened window from accessing window.opener + - `noreferrer`: Prevents sending HTTP referrer header + +### Requirement: Icon Consistency +The Strava icon matches the minimalist design language of existing footer icons. + +**WHEN** footer is displayed +**THEN** Strava icon is rendered at same size as other footer icons +**AND** Strava icon uses same color scheme (likely white or matching theme) +**AND** icon scales appropriately on responsive layouts + +**Icon details:** +- SVG format (provided in issue if not in library) +- Minimalist design with stroke-based lines +- Square viewport (800x800px original, scales to button size) +- Colors adapt to footer theme + +### Requirement: Accessibility +The Strava button is fully accessible to keyboard and screen reader users. + +**WHEN** user navigates footer with keyboard +**THEN** Strava button receives focus like other buttons +**AND** user can activate button with Enter/Space key + +**WHEN** screen reader reads footer +**THEN** Strava button has descriptive accessible name (e.g., "Visit TORQ on Strava, opens in new tab") +**AND** visual icon has appropriate aria-label + +## REMOVED/CHANGED +None - this is purely additive diff --git a/openspec/changes/add-strava-footer-button/tasks.md b/openspec/changes/add-strava-footer-button/tasks.md new file mode 100644 index 0000000..cfccee7 --- /dev/null +++ b/openspec/changes/add-strava-footer-button/tasks.md @@ -0,0 +1,41 @@ +# Implementation Checklist for Issue #94 + +## Planning +- [x] Reviewed requirements and acceptance criteria +- [x] Confirmed implementation approach +- [x] Identified footer component and icon library structure + +## Implementation + +### 1. Icon Setup +- [ ] 1.1 Check existing icon library for Strava icon +- [ ] 1.2 If missing, add provided SVG to icon assets directory +- [ ] 1.3 Verify icon renders correctly and matches minimalist style + +### 2. Footer Integration +- [ ] 2.1 Add Strava icon button to Footer component +- [ ] 2.2 Configure link to https://www.strava.com/clubs/torqlab +- [ ] 2.3 Add target="_blank" attribute for new tab opening +- [ ] 2.4 Add security attributes: rel="noopener noreferrer" +- [ ] 2.5 Add accessible alt text and aria-label + +### 3. Styling +- [ ] 3.1 Apply consistent styling with existing footer icon buttons +- [ ] 3.2 Verify button padding, spacing, and alignment +- [ ] 3.3 Test hover/focus states match existing buttons +- [ ] 3.4 Verify responsive behavior on mobile + +## Testing +- [ ] 4.1 Visual: Verify Strava button renders in footer +- [ ] 4.2 Visual: Confirm styling matches other footer icons +- [ ] 4.3 Functional: Click button opens Strava club link in new tab +- [ ] 4.4 Security: Inspect element confirms noopener/noreferrer attributes +- [ ] 4.5 Accessibility: Test keyboard navigation to button +- [ ] 4.6 Accessibility: Screen reader reads button label correctly +- [ ] 4.7 Responsive: Test on mobile, tablet, and desktop views + +## Documentation & Cleanup +- [ ] 5.1 Run lint checks: `bun run lint` +- [ ] 5.2 Run tests: `bun run test` +- [ ] 5.3 Commit code changes with clear message +- [ ] 5.4 Push changes to planning branch From 8d8450896a236c9e5d904df8762cd7909d237109 Mon Sep 17 00:00:00 2001 From: balovbohdan Date: Tue, 31 Mar 2026 14:55:59 +0300 Subject: [PATCH 2/3] chore: Update changelog and version for issue #94 planning - Added version 6.2.1 to CHANGELOG.md - Updated package.json version to 6.2.1 - Documented OpenSpec planning artifacts for Strava footer button Co-Authored-By: Claude Haiku 4.5 --- CHANGELOG.md | 11 +++++++++++ package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3413c51..c89b38f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,17 @@ Please, document here only changes visible to the client app. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [6.2.1] - 2026-03-31 + +### [94 Add Strava footer button](https://github.com/torqlab/torq/issues/94) + +### Added +- **OpenSpec planning artifacts** for Strava club footer button feature + - Proposal: Requirements and implementation approach for adding Strava social link + - Specification: Detailed requirements for icon button, security attributes, and accessibility + - Tasks: Implementation checklist covering icon setup, footer integration, styling, and testing + - Planning branch: `plan/94-add-strava-footer-button` ready for development + ## [6.2.0] - 2026-03-31 ### [0 Implement Implementation Phase Skill for OpenSpec Workflow](https://github.com/torqlab/torq/issues/0) diff --git a/package.json b/package.json index d2d67d2..bc30e21 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "torq", - "version": "6.2.0", + "version": "6.2.1", "description": "Generates AI images based on Strava activity data.", "type": "module", "private": true, From 332b45dc74e39a8ee38951897d9c54f18dbe6d43 Mon Sep 17 00:00:00 2001 From: balovbohdan Date: Tue, 31 Mar 2026 15:15:49 +0300 Subject: [PATCH 3/3] impl: Add Strava footer button - Create custom StravaIcon SVG component matching minimalist design - Add STRAVA_CLUB link to footer constants - Add new Strava icon button to Copywrite component - Configure with noopener noreferrer security attributes - Add accessible aria-label for screen readers - Styled consistently with existing footer icon buttons --- .../components/organisms/Footer/Copywrite.tsx | 11 +++++++++ .../organisms/Footer/StravaIcon.tsx | 23 +++++++++++++++++++ .../components/organisms/Footer/constants.ts | 1 + 3 files changed, 35 insertions(+) create mode 100644 packages/ui/src/components/organisms/Footer/StravaIcon.tsx diff --git a/packages/ui/src/components/organisms/Footer/Copywrite.tsx b/packages/ui/src/components/organisms/Footer/Copywrite.tsx index 93b36f5..e734094 100644 --- a/packages/ui/src/components/organisms/Footer/Copywrite.tsx +++ b/packages/ui/src/components/organisms/Footer/Copywrite.tsx @@ -1,6 +1,7 @@ import { Github, Globe } from 'lucide-react'; import { LINKS } from './constants'; +import StravaIcon from './StravaIcon'; /** * Copywrite information. @@ -32,6 +33,16 @@ const Copywrite = () => ( > + + + ); diff --git a/packages/ui/src/components/organisms/Footer/StravaIcon.tsx b/packages/ui/src/components/organisms/Footer/StravaIcon.tsx new file mode 100644 index 0000000..dd7563e --- /dev/null +++ b/packages/ui/src/components/organisms/Footer/StravaIcon.tsx @@ -0,0 +1,23 @@ +/** + * Strava icon component. + * @returns {JSX.Element} Strava icon SVG. + */ +const StravaIcon = () => ( + + + +); + +export default StravaIcon; diff --git a/packages/ui/src/components/organisms/Footer/constants.ts b/packages/ui/src/components/organisms/Footer/constants.ts index 1e251f5..967ccf1 100644 --- a/packages/ui/src/components/organisms/Footer/constants.ts +++ b/packages/ui/src/components/organisms/Footer/constants.ts @@ -1,6 +1,7 @@ export const LINKS = { PROJECT_GITHUB: 'https://github.com/torqlab', AUTHOR_BLOG: 'https://balov.dev', + STRAVA_CLUB: 'https://www.strava.com/clubs/torqlab', POLLINATIONS_AI: 'https://pollinations.ai/', NETLIFY: 'https://www.netlify.com/', };