docs: 💄 Add more info on SDKs, change border radius to semi-rounded

app/sdks/page.mdx

@@ -1,9 +1,9 @@
 import { Libraries } from '@/components/Libraries'
 
 export const metadata = {
-  title: 'Protocol SDKs',
+  title: 'Lysand SDKs',
   description:
-    'Protocol offers fine-tuned JavaScript, Ruby, PHP, Python, and Go libraries to make your life easier and give you the best experience when consuming the API.',
+    'Lysand offers well-written SDKs in various languages to help you create Lysand applications with ease.',
 }
 
 export const sections = [
@@ -12,6 +12,6 @@ export const sections = [
 
 # Protocol SDKs
 
-The recommended way to interact with the Protocol API is by using one of our official SDKs. Today, Protocol offers fine-tuned JavaScript, Ruby, PHP, Python, and Go libraries to make your life easier and give you the best experience when consuming the API. {{ className: 'lead' }}
+The Lysand development team offers a well-written SDK in TypeScript to help you create Lysand applications with ease. {{ className: 'lead' }}
 
 <Libraries />

components/Button.tsx

@@ -17,12 +17,12 @@ function ArrowIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 const variantStyles = {
     primary:
-        "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300",
+        "rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300",
     secondary:
-        "rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+        "rounded-md bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
-    filled: "rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-500 dark:text-white dark:hover:bg-brand-400",
+    filled: "rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-500 dark:text-white dark:hover:bg-brand-400",
     outline:
-        "rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
+        "rounded-md py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
     text: "text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-500",
 };
 

components/Code.tsx

@@ -77,7 +77,7 @@ function CopyButton({ code }: { code: string }) {
         <button
             type="button"
             className={clsx(
-                "group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
+                "group/button absolute right-4 top-3.5 overflow-hidden rounded-md py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
                 copied
                     ? "bg-brand-400/10 ring-1 ring-inset ring-brand-400/20"
                     : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
@@ -124,7 +124,7 @@ function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
                 </div>
             )}
             {tag && label && (
-                <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
+                <span className="h-0.5 w-0.5 rounded-md bg-zinc-500" />
             )}
             {label && (
                 <span className="font-mono text-xs text-zinc-400">{label}</span>
@@ -328,7 +328,7 @@ export function CodeGroup({
     const hasTabs = Children.count(children) > 1;
 
     const containerClassName =
-        "my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+        "my-6 overflow-hidden rounded-md bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
     const header = (
         <CodeGroupHeader
             title={title}

components/Feedback.tsx

@@ -49,7 +49,7 @@ const FeedbackForm = forwardRef<
             <p className="text-sm text-zinc-600 dark:text-zinc-400">
                 Was this page helpful?
             </p>
-            <div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10">
+            <div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-md border border-zinc-900/10 dark:border-white/10">
                 <FeedbackButton data-response="yes">Yes</FeedbackButton>
                 <div className="bg-zinc-900/10 dark:bg-white/10" />
                 <FeedbackButton data-response="no">No</FeedbackButton>
@@ -66,7 +66,7 @@ const FeedbackThanks = forwardRef<ElementRef<"div">>(
                 ref={ref}
                 className="absolute inset-0 flex justify-center md:justify-start"
             >
-                <div className="flex items-center gap-3 rounded-full bg-brand-50/50 py-1 pl-1.5 pr-3 text-sm text-brand-900 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/5 dark:text-brand-200 dark:ring-brand-500/30">
+                <div className="flex items-center gap-3 rounded-md bg-brand-50/50 py-1 pl-1.5 pr-3 text-sm text-brand-900 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/5 dark:text-brand-200 dark:ring-brand-500/30">
                     <CheckIcon className="h-5 w-5 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
                     Thanks for your feedback!
                 </div>

components/Heading.tsx

@@ -36,7 +36,7 @@ function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
         <div className="flex items-center gap-x-3">
             {tag && <Tag>{tag}</Tag>}
             {tag && label && (
-                <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" />
+                <span className="h-0.5 w-0.5 rounded-md bg-zinc-300 dark:bg-zinc-600" />
             )}
             {label && (
                 <span className="font-mono text-xs text-zinc-400">{label}</span>

components/Libraries.tsx

@@ -1,48 +1,16 @@
 import Image from "next/image";
 
-import logoGo from "@/images/logos/go.svg";
+import logoTypescript from "@/images/logos/typescript.svg";
-import logoNode from "@/images/logos/node.svg";
-import logoPhp from "@/images/logos/php.svg";
-import logoPython from "@/images/logos/python.svg";
-import logoRuby from "@/images/logos/ruby.svg";
 import { Button } from "./Button";
 import { Heading } from "./Heading";
 
 const libraries = [
     {
-        href: "#",
+        href: "https://github.com/lysand-org/api/tree/main/federation",
-        name: "PHP",
+        name: "@lysand-org/federation",
         description:
-            "A popular general-purpose scripting language that is especially suited to web development.",
+            "Fully-featured federation toolkit with validation, signatures, parsing, and more.",
-        logo: logoPhp,
+        logo: logoTypescript,
-    },
-    {
-        href: "#",
-        name: "Ruby",
-        description:
-            "A dynamic, open source programming language with a focus on simplicity and productivity.",
-        logo: logoRuby,
-    },
-    {
-        href: "#",
-        name: "Node.js",
-        description:
-            "Node.js® is an open-source, cross-platform JavaScript runtime environment.",
-        logo: logoNode,
-    },
-    {
-        href: "#",
-        name: "Python",
-        description:
-            "Python is a programming language that lets you work quickly and integrate systems more effectively.",
-        logo: logoPython,
-    },
-    {
-        href: "#",
-        name: "Go",
-        description:
-            "An open-source programming language supported by Google with built-in concurrency.",
-        logo: logoGo,
     },
 ];
 
@@ -52,15 +20,15 @@ export function Libraries() {
             <Heading level={2} id="official-libraries">
                 Official libraries
             </Heading>
-            <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
+            <div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
                 {libraries.map((library) => (
                     <div
                         key={library.name}
                         className="flex flex-row-reverse gap-6"
                     >
                         <div className="flex-auto">
-                            <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
+                            <h3 className="mt-0 text-sm font-semibold text-zinc-900 dark:text-white">
-                                {library.name}
+                                <code>{library.name}</code>
                             </h3>
                             <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                                 {library.description}
@@ -68,6 +36,8 @@ export function Libraries() {
                             <p className="mt-4">
                                 <Button
                                     href={library.href}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
                                     variant="text"
                                     arrow="right"
                                 >
@@ -78,7 +48,7 @@ export function Libraries() {
                         <Image
                             src={library.logo}
                             alt=""
-                            className="h-12 w-12"
+                            className="h-12 w-12 rounded m-0"
                             unoptimized={true}
                         />
                     </div>

components/Resources.tsx

@@ -62,7 +62,7 @@ const resources: Resource[] = [
 
 function ResourceIcon({ icon: Icon }: { icon: Resource["icon"] }) {
     return (
-        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-brand-300/10 dark:group-hover:ring-brand-400">
+        <div className="flex h-7 w-7 items-center justify-center rounded-md bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-brand-300/10 dark:group-hover:ring-brand-400">
             <Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-brand-300/10 dark:group-hover:stroke-brand-400" />
         </div>
     );
@@ -81,7 +81,7 @@ function ResourcePattern({
 
     return (
         <div className="pointer-events-none">
-            <div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
+            <div className="absolute inset-0 rounded-md transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
                 <GridPattern
                     width={72}
                     height={56}
@@ -91,11 +91,11 @@ function ResourcePattern({
                 />
             </div>
             <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
+                className="absolute inset-0 rounded-md bg-gradient-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
                 style={style}
             />
             <motion.div
-                className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
+                className="absolute inset-0 rounded-md opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
                 style={style}
             >
                 <GridPattern
@@ -128,19 +128,19 @@ function Resource({ resource }: { resource: Resource }) {
         <div
             key={resource.href}
             onMouseMove={onMouseMove}
-            className="group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
+            className="group relative flex rounded-md bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
         >
             <ResourcePattern
                 {...resource.pattern}
                 mouseX={mouseX}
                 mouseY={mouseY}
             />
-            <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
+            <div className="absolute inset-0 rounded-md ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
-            <div className="relative rounded-2xl px-4 pb-4 pt-16">
+            <div className="relative rounded-md px-4 pb-4 pt-16">
                 <ResourceIcon icon={resource.icon} />
                 <h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
                     <Link href={resource.href}>
-                        <span className="absolute inset-0 rounded-2xl" />
+                        <span className="absolute inset-0 rounded-md" />
                         {resource.name}
                     </Link>
                 </h3>

components/Search.tsx

@@ -473,7 +473,7 @@ export function Search() {
         <div className="hidden lg:block lg:max-w-md lg:flex-auto">
             <button
                 type="button"
-                className="hidden h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
+                className="hidden h-8 w-full items-center gap-2 rounded-md bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
                 {...buttonProps}
             >
                 <SearchIcon className="h-5 w-5 stroke-current" />

components/mdx.tsx

@@ -46,7 +46,7 @@ function InfoIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 export function Note({ children }: { children: ReactNode }) {
     return (
-        <div className="my-6 flex gap-2.5 rounded-2xl border border-brand-500/20 bg-brand-50/50 p-4 leading-6 text-brand-900 dark:border-brand-500/30 dark:bg-brand-500/5 dark:text-brand-200 dark:[--tw-prose-links-hover:theme(colors.brand.300)] dark:[--tw-prose-links:theme(colors.white)]">
+        <div className="my-6 flex gap-2.5 rounded-md border border-brand-500/20 bg-brand-50/50 p-4 leading-6 text-brand-900 dark:border-brand-500/30 dark:bg-brand-500/5 dark:text-brand-200 dark:[--tw-prose-links-hover:theme(colors.brand.300)] dark:[--tw-prose-links:theme(colors.white)]">
             <InfoIcon className="mt-1 h-4 w-4 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
             <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
                 {children}

images/logos/typescript.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="48" height="48" fill="none">
+    <path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"></path>
+    <path data-name="original" fill="#007acc"
+        d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z">
+    </path>
+</svg>

next.config.mjs

@@ -16,7 +16,7 @@ const withMDX = nextMDX({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"],
-    output: "export"
+    output: "export",
 };
 
 export default withSearch(withMDX(nextConfig));