mirror of
https://github.com/versia-pub/docs.git
synced 2026-03-13 02:49:16 +01:00
docs: 💄 Add more info on SDKs, change border radius to semi-rounded
This commit is contained in:
Jesse Wierzbinski
parent
0d18130dcf
commit
e53dc0d9ff
11 changed files with 41 additions and 65 deletions
|
|
@ -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",
|
||||
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",
|
||||
"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-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",
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,16 @@
|
|||
import Image from "next/image";
|
||||
|
||||
import logoGo from "@/images/logos/go.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 logoTypescript from "@/images/logos/typescript.svg";
|
||||
import { Button } from "./Button";
|
||||
import { Heading } from "./Heading";
|
||||
|
||||
const libraries = [
|
||||
{
|
||||
href: "#",
|
||||
name: "PHP",
|
||||
href: "https://github.com/lysand-org/api/tree/main/federation",
|
||||
name: "@lysand-org/federation",
|
||||
description:
|
||||
"A popular general-purpose scripting language that is especially suited to web development.",
|
||||
logo: logoPhp,
|
||||
},
|
||||
{
|
||||
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,
|
||||
"Fully-featured federation toolkit with validation, signatures, parsing, and more.",
|
||||
logo: logoTypescript,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -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">
|
||||
{library.name}
|
||||
<h3 className="mt-0 text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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="relative rounded-2xl px-4 pb-4 pt-16">
|
||||
<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-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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue