diff --git a/components/Libraries.tsx b/components/Libraries.tsx
index 24f98e0..3f94ef7 100644
--- a/components/Libraries.tsx
+++ b/components/Libraries.tsx
@@ -6,8 +6,8 @@ import { Heading } from "./Heading";
const libraries = [
{
- href: "https://github.com/versia-pub/api/tree/main/federation",
- name: "@versia/federation",
+ href: "https://github.com/versia-pub/server/tree/main/packages/sdk",
+ name: "@versia/sdk",
description:
"Fully-featured federation toolkit with validation, signatures, parsing, and more.",
logo: logoTypescript,
diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx
new file mode 100644
index 0000000..eb11c7c
--- /dev/null
+++ b/components/LinkPreview.tsx
@@ -0,0 +1,174 @@
+"use client";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import {
+ AnimatePresence,
+ motion,
+ useMotionValue,
+ useSpring,
+} from "framer-motion";
+import { encode } from "qss";
+import {
+ type MouseEvent as ReactMouseEvent,
+ type ReactNode,
+ useEffect,
+ useState,
+} from "react";
+
+import { createPortal } from "react-dom";
+
+type LinkPreviewProps = {
+ children: ReactNode;
+ url: string;
+ className?: string;
+ width?: number;
+ height?: number;
+ quality?: number;
+ layout?: string;
+} & (
+ | { isStatic: true; imageSrc: string }
+ | { isStatic?: false; imageSrc?: never }
+);
+
+export const LinkPreview = ({
+ children,
+ url,
+ className,
+ width = 200,
+ height = 125,
+ isStatic = false,
+ imageSrc = "",
+}: LinkPreviewProps) => {
+ let src: string;
+
+ if (isStatic) {
+ src = imageSrc;
+ } else {
+ const params = encode({
+ url,
+ screenshot: true,
+ meta: false,
+ embed: "screenshot.url",
+ colorScheme: "dark",
+ "viewport.isMobile": true,
+ "viewport.deviceScaleFactor": 1,
+ "viewport.width": width * 3,
+ "viewport.height": height * 3,
+ });
+ src = `https://api.microlink.io/?${params}`;
+ }
+
+ const [isOpen, setOpen] = useState(false);
+
+ const [isMounted, setIsMounted] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ const springConfig = { stiffness: 100, damping: 15 };
+ const x = useMotionValue(0);
+
+ const translateX = useSpring(x, springConfig);
+
+ const handleMouseMove = (
+ event: ReactMouseEvent
,
+ ) => {
+ const targetRect = (
+ event.target as HTMLAnchorElement
+ ).getBoundingClientRect();
+ const eventOffsetX = event.clientX - targetRect.left;
+ const offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2; // Reduce the effect to make it subtle
+ x.set(offsetFromCenter);
+ };
+
+ const [isCurrentOrigin, setIsCurrentOrigin] = useState(true);
+
+ useEffect(() => {
+ if (process && URL.canParse(url)) {
+ setIsCurrentOrigin(new URL(url).origin === window.location.origin);
+ }
+ }, [url]);
+
+ return (
+ <>
+ {isMounted
+ ? createPortal(
+
+

+
,
+ document.body,
+ )
+ : null}
+ {
+ setOpen(open);
+ }}
+ >
+
+ {children}
+
+
+
+
+
+ {isOpen && (
+
+
+
+
+
+ )}
+
+
+
+
+ >
+ );
+};
diff --git a/components/Logo.tsx b/components/Logo.tsx
index 52bf0da..0da78d4 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -1,7 +1,7 @@
import clsx from "clsx";
import type { ComponentPropsWithoutRef } from "react";
// Uncomment this on dev branches
-// import { Badge } from "./Metadata";
+import { Badge } from "./Metadata";
export function Logo(props: ComponentPropsWithoutRef<"div">) {
return (
@@ -17,9 +17,9 @@ export function Logo(props: ComponentPropsWithoutRef<"div">) {
alt="Logo"
className="h-full rounded-xs"
/>
-
- Versia Protocol {/* Dev */}
-
+ {/*
+ Versia Protocol Dev
+ */}
);
}
diff --git a/components/MobileNavigation.tsx b/components/MobileNavigation.tsx
index 56d9d4d..a2f994c 100644
--- a/components/MobileNavigation.tsx
+++ b/components/MobileNavigation.tsx
@@ -11,9 +11,9 @@ import { motion } from "framer-motion";
import { usePathname, useSearchParams } from "next/navigation";
import {
type ComponentPropsWithoutRef,
+ createContext,
type MouseEvent,
Suspense,
- createContext,
useContext,
useEffect,
useRef,
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 06c3c10..4d088f9 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -209,7 +209,6 @@ function NavigationGroup({
{link.href === pathname &&
sections.length > 0 && (