From e5fb894810e83b49b3dfb6866fb4fe4f2ae417c8 Mon Sep 17 00:00:00 2001 From: Mudskipper Date: Tue, 14 Oct 2025 14:09:24 +1100 Subject: [PATCH] Add inline SVG components for footer branding and social icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Convert static image imports to JSX SVG components for better control - Add FacebookSVG, InstagramSVG, TwitterSVG, YoutubeSVG, DiscordSVG with fill-accent styling - Add MuseHubSVG, MuseGroupSVG, AudioSVG, MuseWordmarkSVG for footer branding - Update social links array to include Instagram and X (Twitter) - All SVG components use Tailwind classes for consistent theming 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/footer/Footer.astro | 29 +++++++++++++++----- src/components/inlineSVG/AudioSVG.jsx | 21 ++++++++++++++ src/components/inlineSVG/DiscordSVG.jsx | 14 ++++++++++ src/components/inlineSVG/FacebookSVG.jsx | 20 ++++++++++++++ src/components/inlineSVG/InstagramSVG.jsx | 15 ++++++++++ src/components/inlineSVG/MuseGroupSVG.jsx | 23 ++++++++++++++++ src/components/inlineSVG/MuseHubSVG.jsx | 23 ++++++++++++++++ src/components/inlineSVG/MuseWordmarkSVG.jsx | 15 ++++++++++ src/components/inlineSVG/TwitterSVG.jsx | 14 ++++++++++ src/components/inlineSVG/YoutubeSVG.jsx | 15 ++++++++++ 10 files changed, 182 insertions(+), 7 deletions(-) create mode 100644 src/components/inlineSVG/AudioSVG.jsx create mode 100644 src/components/inlineSVG/DiscordSVG.jsx create mode 100644 src/components/inlineSVG/FacebookSVG.jsx create mode 100644 src/components/inlineSVG/InstagramSVG.jsx create mode 100644 src/components/inlineSVG/MuseGroupSVG.jsx create mode 100644 src/components/inlineSVG/MuseHubSVG.jsx create mode 100644 src/components/inlineSVG/MuseWordmarkSVG.jsx create mode 100644 src/components/inlineSVG/TwitterSVG.jsx create mode 100644 src/components/inlineSVG/YoutubeSVG.jsx diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro index e9688ad..c925220 100644 --- a/src/components/footer/Footer.astro +++ b/src/components/footer/Footer.astro @@ -1,5 +1,14 @@ --- import "../../styles/fonts.css"; +import MuseHubSVG from "../inlineSVG/MuseHubSVG"; +import MuseGroupSVG from '../inlineSVG/MuseGroupSVG'; +import AudioSVG from '../inlineSVG/AudioSVG'; +import MuseWordmarkSVG from '../inlineSVG/MuseWordmarkSVG'; +import FacebookSVG from '../inlineSVG/FacebookSVG'; +import InstagramSVG from '../inlineSVG/InstagramSVG'; +import TwitterSVG from '../inlineSVG/TwitterSVG'; +import YoutubeSVG from '../inlineSVG/YoutubeSVG'; +import DiscordSVG from '../inlineSVG/DiscordSVG'; const links = [ { href: "https://support.audacityteam.org", label: "Help", external: true }, @@ -23,9 +32,10 @@ const downloads = [ const social = [ { href: "https://www.facebook.com/Audacity/", label: "Facebook", external: true }, - { href: "https://github.com/audacity", label: "Github", external: true }, - { href: "https://discord.gg/audacity", label: "Discord", external: true }, + { href: "https://x.com/getaudacity?lang=en", label: "X", external: true }, + { href: "https://www.instagram.com/audacityteam/", label: "Instagram", external: true }, { href: "https://www.youtube.com/c/audacity", label: "YouTube", external: true }, + { href: "https://discord.gg/audacity", label: "Discord", external: true }, ]; const legal = [ @@ -165,7 +175,12 @@ const legal = [ target="_blank" class="text-accent hover:text-text-contrast transition-colors" > - {link.label} + {link.label === "Facebook" ? : + link.label === "Instagram" ? : + link.label === "X" ? : + link.label === "YouTube" ? : + link.label === "Discord" ? : + link.label} ))} @@ -184,17 +199,17 @@ const legal = [
- Muse Group +
- Muse Group - Muse Group + +
- Muse Group +

Inspire the artist.
Unleash their sound.

diff --git a/src/components/inlineSVG/AudioSVG.jsx b/src/components/inlineSVG/AudioSVG.jsx new file mode 100644 index 0000000..a854d49 --- /dev/null +++ b/src/components/inlineSVG/AudioSVG.jsx @@ -0,0 +1,21 @@ +const AudioSVG = ({ className = "h-12 opacity-50" }) => ( + + + + +); + +export default AudioSVG; diff --git a/src/components/inlineSVG/DiscordSVG.jsx b/src/components/inlineSVG/DiscordSVG.jsx new file mode 100644 index 0000000..44a4f50 --- /dev/null +++ b/src/components/inlineSVG/DiscordSVG.jsx @@ -0,0 +1,14 @@ +const DiscordSVG = ({ className = "h-6 fill-accent" }) => ( + + + +); + +export default DiscordSVG; diff --git a/src/components/inlineSVG/FacebookSVG.jsx b/src/components/inlineSVG/FacebookSVG.jsx new file mode 100644 index 0000000..85b63c9 --- /dev/null +++ b/src/components/inlineSVG/FacebookSVG.jsx @@ -0,0 +1,20 @@ +const FacebookSVG = ({ className = "h-6 fill-accent" }) => ( + + + + + + +); + +export default FacebookSVG; diff --git a/src/components/inlineSVG/InstagramSVG.jsx b/src/components/inlineSVG/InstagramSVG.jsx new file mode 100644 index 0000000..88ec5de --- /dev/null +++ b/src/components/inlineSVG/InstagramSVG.jsx @@ -0,0 +1,15 @@ +const InstagramSVG = ({ className = "h-6 fill-accent" }) => ( + + + +); + +export default InstagramSVG; diff --git a/src/components/inlineSVG/MuseGroupSVG.jsx b/src/components/inlineSVG/MuseGroupSVG.jsx new file mode 100644 index 0000000..46850a5 --- /dev/null +++ b/src/components/inlineSVG/MuseGroupSVG.jsx @@ -0,0 +1,23 @@ +const MuseGroupSVG = ({ + className = "h-12 opacity-50", +}) => ( + + + + +); + +export default MuseGroupSVG; diff --git a/src/components/inlineSVG/MuseHubSVG.jsx b/src/components/inlineSVG/MuseHubSVG.jsx new file mode 100644 index 0000000..bf84048 --- /dev/null +++ b/src/components/inlineSVG/MuseHubSVG.jsx @@ -0,0 +1,23 @@ +const MuseHubSVG = ({ + className = "h-12 opacity-50", +}) => ( + + + + +); + +export default MuseHubSVG; diff --git a/src/components/inlineSVG/MuseWordmarkSVG.jsx b/src/components/inlineSVG/MuseWordmarkSVG.jsx new file mode 100644 index 0000000..327a5e0 --- /dev/null +++ b/src/components/inlineSVG/MuseWordmarkSVG.jsx @@ -0,0 +1,15 @@ +const MuseGroupSVG = ({ className = "h-6 opacity-50" }) => ( + + + +); + +export default MuseGroupSVG; diff --git a/src/components/inlineSVG/TwitterSVG.jsx b/src/components/inlineSVG/TwitterSVG.jsx new file mode 100644 index 0000000..24b1bcb --- /dev/null +++ b/src/components/inlineSVG/TwitterSVG.jsx @@ -0,0 +1,14 @@ +const TwitterSVG = ({ className = "h-6 fill-accent" }) => ( + + + +); + +export default TwitterSVG; diff --git a/src/components/inlineSVG/YoutubeSVG.jsx b/src/components/inlineSVG/YoutubeSVG.jsx new file mode 100644 index 0000000..de170cd --- /dev/null +++ b/src/components/inlineSVG/YoutubeSVG.jsx @@ -0,0 +1,15 @@ +const YoutubeSVG = ({ className = "h-6 fill-accent" }) => ( + + + +); + +export default YoutubeSVG;