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/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 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, 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/', };