Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/site/components/Containers/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -17,6 +18,7 @@ const footerSocialIcons: Record<string, React.FC<SVGProps<SVGSVGElement>>> = {
twitter: Twitter,
slack: Slack,
linkedin: LinkedIn,
bluesky: Bluesky,
};

const Footer: FC = () => {
Expand Down
19 changes: 19 additions & 0 deletions apps/site/components/Icons/Social/Bluesky.tsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions apps/site/components/__design__/social-logos.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
),
Expand Down
5 changes: 5 additions & 0 deletions apps/site/navigation.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Expand Down
Loading