feat: add new social link of mastodon

src/components/icons/mastodon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+
+/**
+ * https://icon-sets.iconify.design/fa6-brands/mastodon/
+ */
+export function MastodonIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={448}
+      height={512}
+      viewBox="0 0 448 512"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"
+      />
+    </svg>
+  );
+}

src/config/social-config.tsx

@@ -6,6 +6,7 @@ import { FacebookIcon } from '@/components/icons/facebook';
 import { GitHubIcon } from '@/components/icons/github';
 import { InstagramIcon } from '@/components/icons/instagram';
 import { LinkedInIcon } from '@/components/icons/linkedin';
+import { MastodonIcon } from '@/components/icons/mastodon';
 import { TikTokIcon } from '@/components/icons/tiktok';
 import { XTwitterIcon } from '@/components/icons/x';
 import { YouTubeIcon } from '@/components/icons/youtube';
@@ -49,6 +50,14 @@ export function getSocialLinks(): MenuItem[] {
     });
   }
 
+  if (websiteConfig.metadata.social?.mastodon) {
+    socialLinks.push({
+      title: 'Mastodon',
+      href: websiteConfig.metadata.social.mastodon,
+      icon: <MastodonIcon className="size-4 shrink-0" />,
+    });
+  }
+
   if (websiteConfig.metadata.social?.discord) {
     socialLinks.push({
       title: 'Discord',

src/config/website.tsx

@@ -25,6 +25,8 @@ export const websiteConfig: WebsiteConfig = {
     social: {
       github: 'https://github.com/MkSaaSHQ',
       twitter: 'https://x.com/mksaascom',
+      blueSky: 'https://bsky.app/profile/mksaas.com',
+      mastodon: 'https://mastodon.social/@mksaas',
       discord: 'https://discord.gg/yVwpEtTT',
       youtube: 'https://www.youtube.com/@MkSaaS',
     },

src/types/index.d.ts

@@ -51,6 +51,7 @@ export interface SocialConfig {
   github?: string;
   discord?: string;
   blueSky?: string;
+  mastodon?: string;
   youtube?: string;
   linkedin?: string;
   facebook?: string;