Create reusable social media SVG components #178

New issue

Closed

opened 2026-06-21 15:49:47 -05:00 by erik · 2 comments

erik commented

2026-06-21 15:49:47 -05:00

Owner

Goal

Create reusable SVG controls for social media icons so they can be shared across the home page, contact page, sources page, and other appropriate pages.

Requirements

Replace duplicated or page-specific social media SVG/icon markup with reusable components.
Support the social media icons currently used on the front page, including GitHub, LinkedIn, Facebook, and similar existing social links.
Make the components easy to reuse wherever social links appear.
Preserve existing visual styling and accessibility behavior.

Acceptance criteria

Social media icons are available as reusable SVG components.
The home page uses the reusable components instead of duplicated icon markup.
The components can be used on the contact page and sources page where appropriate.
Existing icon appearance, links, and accessibility labels are preserved.

Dependencies

None

## Goal Create reusable SVG controls for social media icons so they can be shared across the home page, contact page, sources page, and other appropriate pages. ## Requirements - Replace duplicated or page-specific social media SVG/icon markup with reusable components. - Support the social media icons currently used on the front page, including GitHub, LinkedIn, Facebook, and similar existing social links. - Make the components easy to reuse wherever social links appear. - Preserve existing visual styling and accessibility behavior. ## Acceptance criteria - [ ] Social media icons are available as reusable SVG components. - [ ] The home page uses the reusable components instead of duplicated icon markup. - [ ] The components can be used on the contact page and sources page where appropriate. - [ ] Existing icon appearance, links, and accessibility labels are preserved. ## Dependencies - None

erik added the

priority:medium

status:inprogress

labels

2026-06-21 15:49:47 -05:00

erik commented

2026-06-21 16:06:18 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-21T21:03:08.357Z

PR Review

PR: #179

Review result: approved

Acceptance criteria: 4 total, 4 met, 0 missing.

Blocking issues: 0
Warnings: 0

Verification:

./scripts/pre-pr.sh passed.
CI status for commit 4b41938780610aa7d50d3c84abd83cd7f541463a is success.

Next gate: waiting for explicit human merge approval.

_Synced from todu comment by @todu on 2026-06-21T21:03:08.357Z_ ## PR Review PR: https://forge.caradoc.com/erik/slugkit/pulls/179 Review result: approved Acceptance criteria: 4 total, 4 met, 0 missing. Blocking issues: 0 Warnings: 0 Verification: - `./scripts/pre-pr.sh` passed. - CI status for commit `4b41938780610aa7d50d3c84abd83cd7f541463a` is `success`. Next gate: waiting for explicit human merge approval.

erik

2026-06-21 16:11:46 -05:00

closed this issue
added
status:done
and removed
status:inprogress
labels

erik commented

2026-06-21 16:11:46 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-21T21:07:59.583Z

Closing Summary

Readiness: READY

Acceptance criteria verified:

Reusable social SVG components are implemented in template/site/src/templates/social-icons.tsx via SocialIcon, SocialIconName, and getSocialIconName for GitHub, LinkedIn, Facebook, YouTube, Mastodon, Bluesky, Email, and RSS.
The home page uses <SocialIcon /> in renderHomeContent for the project links instead of inline SVG markup.
Contact and source cards reuse the same icon path through AccountIconLink, ContactAccountSummary, and SourceAccountSummary.
Link targets and accessibility labels are preserved by the surrounding anchors (href, aria-label, title) while SVGs remain decorative with aria-hidden="true" and the same default visual class (h-6 w-6 fill-current).

_Synced from todu comment by @todu on 2026-06-21T21:07:59.583Z_ ## Closing Summary Readiness: READY Acceptance criteria verified: - Reusable social SVG components are implemented in `template/site/src/templates/social-icons.tsx` via `SocialIcon`, `SocialIconName`, and `getSocialIconName` for GitHub, LinkedIn, Facebook, YouTube, Mastodon, Bluesky, Email, and RSS. - The home page uses `<SocialIcon />` in `renderHomeContent` for the project links instead of inline SVG markup. - Contact and source cards reuse the same icon path through `AccountIconLink`, `ContactAccountSummary`, and `SourceAccountSummary`. - Link targets and accessibility labels are preserved by the surrounding anchors (`href`, `aria-label`, `title`) while SVGs remain decorative with `aria-hidden="true"` and the same default visual class (`h-6 w-6 fill-current`).