Fixed Issue #269 add additional social icons

[TomNaughton]

Link to issue

Twitch and Bluesky icons added to footer using official press pack SVGs.

[Copilot]

Pull request overview

This PR adds Twitch and Bluesky social media icons to the footer, resolving issue #269. The implementation includes new SVG icon components using official brand assets and integrates them into the existing footer navigation alongside other social media links.

• Created two new icon components (IconTwitch and IconBluesky) with official SVG assets
• Added corresponding URL and label configurations to the commons.json file
• Integrated both icons into the Footer component with proper accessibility attributes

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
public/icons/twitch.js	New Twitch icon component with official SVG from brand press pack
public/icons/bluesky.js	New Bluesky icon component with official SVG from brand press pack
content/commons.json	Added Twitch and Bluesky URL and label configurations for footer links
components/footer/Footer.jsx	Imported new icon components and added them to the footer social links section with proper accessibility attributes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The SVG attributes should follow the formatting convention used in other icon files. Place each attribute on its own line with consistent indentation, and ensure width and height appear before fill and xmlns. Compare with the formatting in facebook.js, youtube.js, and linkedin.js for consistency.

Suggested change

	<svg className="icon-bluesky" xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 568 501" width="17" height="17" fill="none">
	<svg
	className="icon-bluesky"
	width="17"
	height="17"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 568 501"
	>

[Copilot]

For consistency with other icon files in this codebase, the path element should be indented and formatted on multiple lines with each attribute on its own line. This improves readability and maintains code consistency.

Suggested change

	<path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" fill="white" />
	<path
	d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z"
	fill="white"
	/>

[Copilot]

The attribute class should be className in JSX. In React/JSX, the HTML class attribute must be written as className.

Suggested change

	<rect x="1700" y="550" class="st0" width="200" height="600" fill="white" />
	<rect x="1150" y="550" class="st0" width="200" height="600" fill="white" />
	<rect x="1700" y="550" className="st0" width="200" height="600" fill="white" />
	<rect x="1150" y="550" className="st0" width="200" height="600" fill="white" />

[Copilot]

The SVG attributes should follow the formatting convention used in other icon files. Place each attribute on its own line with consistent indentation, and ensure xmlns appears before viewBox. Compare with the formatting in twitter.js, facebook.js, youtube.js, and linkedin.js for consistency.

Suggested change

	<svg className="icon-twitch" xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 2400 2800" width="18" height="18" fill="none">
	<svg
	className="icon-twitch"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 2400 2800"
	width="18"
	height="18"
	fill="none"
	>

[Copilot]

The path element has inconsistent indentation. The continuation of the path should be consistently indented with the rest of the code to improve readability and maintain consistency with other icon files.

Suggested change

	V1300z" fill="white"/>
	V1300z" fill="white"/>

[TomNaughton]

@copilot open a new pull request to apply changes based on the comments in this thread