diff --git a/thoughts-frontend/app/page.tsx b/thoughts-frontend/app/page.tsx index 91c778b..728787d 100644 --- a/thoughts-frontend/app/page.tsx +++ b/thoughts-frontend/app/page.tsx @@ -11,6 +11,7 @@ import { buildThoughtThreads } from "@/lib/utils"; import { TopFriends } from "@/components/top-friends"; import { UsersCount } from "@/components/users-count"; import { PaginationNav } from "@/components/pagination-nav"; +import { FediverseHandleWidget } from "@/components/fediverse-handle-widget"; import { redirect } from "next/navigation"; import { Suspense } from "react"; import { @@ -84,6 +85,7 @@ async function FeedPage({ const sidebar = ( <> + }> diff --git a/thoughts-frontend/components/fediverse-handle-widget.tsx b/thoughts-frontend/components/fediverse-handle-widget.tsx new file mode 100644 index 0000000..5b628e5 --- /dev/null +++ b/thoughts-frontend/components/fediverse-handle-widget.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import { CopyButton } from "./copy-button"; + +interface FediverseHandleWidgetProps { + username: string; +} + +export function FediverseHandleWidget({ username }: FediverseHandleWidgetProps) { + const domain = process.env.NEXT_PUBLIC_FEDIVERSE_DOMAIN; + if (!domain) return null; + + const handle = `@${username}@${domain}`; + + return ( +
+

Your fediverse handle

+
+

{handle}

+ +
+

+ Anyone on Mastodon or Pixelfed can follow you with this. +

+ + Learn more → + +
+ ); +}