feat: add Bluesky social icon and update footer navigation (#7218)

* feat: add Bluesky social icon and update footer navigation

* add Bluesky social icon to social media logos story

* change icon order

Author: TenzDelek

apps/site/components/Containers/Footer/index.tsx

@@ -2,6 +2,7 @@ import { useTranslations } from 'next-intl';
 import type { FC, SVGProps } from 'react';
 
 import NavItem from '@/components/Containers/NavBar/NavItem';
+import Bluesky from '@/components/Icons/Social/Bluesky';
 import GitHub from '@/components/Icons/Social/GitHub';
 import LinkedIn from '@/components/Icons/Social/LinkedIn';
 import Mastodon from '@/components/Icons/Social/Mastodon';
@@ -17,6 +18,7 @@ const footerSocialIcons: Record<string, React.FC<SVGProps<SVGSVGElement>>> = {
   twitter: Twitter,
   slack: Slack,
   linkedin: LinkedIn,
+  bluesky: Bluesky,
 };
 
 const Footer: FC = () => {

apps/site/components/Icons/Social/Bluesky.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from 'react';
+
+const Bluesky: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 568 501"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="#1185FE"
+      d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"
+    ></path>
+  </svg>
+);
+
+export default Bluesky;

apps/site/components/__design__/social-logos.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import Bluesky from '@/components/Icons/Social/Bluesky';
 import GitHub from '@/components/Icons/Social/GitHub';
 import LinkedIn from '@/components/Icons/Social/LinkedIn';
 import Mastodon from '@/components/Icons/Social/Mastodon';
@@ -17,6 +18,7 @@ export const SocialMediaLogos: StoryObj = {
       <div className="flex flex-col items-center gap-4">
         <Slack width={64} height={64} />
         <Twitter width={64} height={64} />
+        <Bluesky width={64} height={64} />
       </div>
     </div>
   ),

apps/site/navigation.json

@@ -68,6 +68,11 @@
       "link": "https://twitter.com/nodejs",
       "alt": "Twitter"
     },
+    {
+      "icon": "bluesky",
+      "link": "https://bsky.app/profile/nodejs.org",
+      "alt": "Bluesky"
+    },
     {
       "icon": "slack",
       "link": "https://slack-invite.openjsf.org/",