diff --git a/public/assets/social/mastodon.svg b/public/assets/social/mastodon.svg new file mode 100644 index 00000000..0f8baebf --- /dev/null +++ b/public/assets/social/mastodon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/social/misskey.png b/public/assets/social/misskey.png new file mode 100644 index 00000000..b4eb18a5 Binary files /dev/null and b/public/assets/social/misskey.png differ diff --git a/public/assets/social/pleroma.svg b/public/assets/social/pleroma.svg new file mode 100644 index 00000000..68e647e6 --- /dev/null +++ b/public/assets/social/pleroma.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx b/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx index efde5cd4..6649b62f 100644 --- a/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx +++ b/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx @@ -8,7 +8,7 @@ import toast from "react-hot-toast" import { ReactSortable } from "react-sortablejs" import { SettingsLayout } from "~/components/dashboard/SettingsLayout" -import { Platform } from "~/components/site/Platform" +import { Platform, PlatformsSyncMap } from "~/components/site/Platform" import { Button } from "~/components/ui/Button" import { Input } from "~/components/ui/Input" import { UniLink } from "~/components/ui/UniLink" @@ -58,6 +58,7 @@ const SortableNavigationItem: React.FC<{ id={`${item.id}-identity`} type="text" value={item.identity} + placeholder={PlatformsSyncMap[item.platform]?.identityFormatTemplate} onChange={(e: ChangeEvent) => updateItem(item.id, { identity: e.target.value }) } diff --git a/src/components/site/Platform.tsx b/src/components/site/Platform.tsx index a7d79c77..1f66b05e 100644 --- a/src/components/site/Platform.tsx +++ b/src/components/site/Platform.tsx @@ -3,11 +3,12 @@ import { Tooltip } from "~/components/ui/Tooltip" import { UniLink } from "~/components/ui/UniLink" import { cn } from "~/lib/utils" -const syncMap: { +export const PlatformsSyncMap: { [key: string]: { name: string icon: string url?: string + identityFormatTemplate?: string } } = { telegram: { @@ -109,6 +110,24 @@ const syncMap: { icon: "/assets/social/whatsapp.svg", url: "https://wa.me/{username}", }, + mastodon: { + name: "Mastodon", + icon: "/assets/social/mastodon.svg", + url: "https://{instance}/@{username}", + identityFormatTemplate: "username@instance.ltd", + }, + misskey: { + name: "Misskey", + icon: "/assets/social/misskey.png", + url: "https://{instance}/@{username}", + identityFormatTemplate: "username@instance.ltd", + }, + pleroma: { + name: "Pleroma", + icon: "/assets/social/pleroma.svg", + url: "https://{instance}/users/{username}", + identityFormatTemplate: "username@instance.ltd", + }, } export const Platform: React.FC<{ @@ -117,6 +136,20 @@ export const Platform: React.FC<{ className?: string }> = ({ platform, username, className }) => { platform = platform.toLowerCase() + let link = PlatformsSyncMap[platform]?.url + + switch (platform) { + case "mastodon": + case "misskey": + case "pleroma": + const [uname, instance] = username?.split("@") + link = link?.replace("{instance}", instance).replace("{username}", uname) + break + default: + link = link?.replace("{username}", username) + break + } + return ( - {syncMap[platform]?.icon ? ( + {PlatformsSyncMap[platform]?.icon ? ( {platform} ) : (