Skip to content

Commit

Permalink
feat: initial docs design
Browse files Browse the repository at this point in the history
  • Loading branch information
pheralb committed May 12, 2024
1 parent 1aa42c7 commit c25342a
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 82 deletions.
2 changes: 1 addition & 1 deletion website/app/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const Header = () => {
rel="noopener noreferrer"
className={buttonVariants({ variant: 'ghost', size: 'icon' })}
>
<link.icon height={20} width={20} />
<link.icon height={18} width={18} />
<span className="sr-only">{link.label}</span>
</a>
))}
Expand Down
52 changes: 52 additions & 0 deletions website/app/components/hero.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Button } from '@/ui/button';
import { SparkleCard } from '@/ui/sparkle-card';
import { useToast } from '@pheralb/toast';
import { Sparkles } from 'lucide-react';
import { Github } from './icons';

const Hero = () => {
const toast = useToast();
return (
<SparkleCard className="rounded-md border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
<div className="mb-4 flex flex-col space-y-1">
<h1 className="text-5xl font-bold tracking-tight lg:text-4xl">Toast</h1>
<p className="font-medium text-neutral-500 dark:text-neutral-400">
An accessible and beautiful toast library for React.
</p>
</div>
<div className="flex items-center space-x-2">
<Button
variant="default"
onClick={() =>
toast.open({
text: 'pheralb/toast',
variant: 'success',
description: '✨ A beautiful toast library for React',
})
}
>
<Sparkles size={14} />
<span>Render a toast</span>
</Button>
<Button
variant="outline"
onClick={() =>
toast.open({
text: 'Hello, world!',
description: 'This is a description',
variant: 'info',
action() {
console.log('Action clicked');
},
})
}
>
<Github height={14} />
<span>View on GitHub</span>
</Button>
</div>
</SparkleCard>
);
};

export default Hero;
98 changes: 97 additions & 1 deletion website/app/components/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,100 @@ const X = (props: SVGProps<SVGSVGElement>) => (
);
export default X;

export { Logo, Github };
const Nextjs = (props: SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 180 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_408_139"
style={{
maskType: 'alpha',
}}
maskUnits="userSpaceOnUse"
x={0}
y={0}
width={180}
height={180}
>
<circle cx={90} cy={90} r={90} fill="black" />
</mask>
<g mask="url(#mask0_408_139)">
<circle
cx={90}
cy={90}
r={87}
fill="black"
stroke="white"
strokeWidth={6}
/>
<path
d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
fill="url(#paint0_linear_408_139)"
/>
<rect
x={115}
y={54}
width={12}
height={72}
fill="url(#paint1_linear_408_139)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_408_139"
x1={109}
y1={116.5}
x2={144.5}
y2={160.5}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint1_linear_408_139"
x1={121}
y1={54}
x2={120.799}
y2={106.875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset={1} stopColor="white" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);

const Remix = (props: SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 256 297" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474 30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337.415 5.924.358 5.542.249 4.179.267 4.93.138 2.814.198 4.47.159 4.222.079 2.427.107 3.888.092 4.446.033 2.148.06 6.226.02 6.496v3.885h-78.758l.004-1.62.028-3.147.047-3.065.136-7.424.035-2.489.027-3.902-.004-2.496-.023-2.617-.032-2.054-.064-2.876-.094-3.05-.125-3.242-.16-3.455-.096-1.813-.16-2.833-.186-2.976-.287-4.204-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127-1.471-.103-1.502-.081-1.514-.058-1.544-.039-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095 1.893-.122 1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2 0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79.167.782.109.617.046.306.078.603.058.59.023.29.031.569.01.278.008.54v29.507H0v-46.102h83.276Z"
fill="currentColor"
fillRule="nonzero"
/>
</svg>
);

const Astro = (props: SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 256 366"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
{...props}
>
<path
fill="currentColor"
d="M182.022 9.147c2.982 3.702 4.502 8.697 7.543 18.687L256 246.074a276.467 276.467 0 0 0-79.426-26.891L133.318 73.008a5.63 5.63 0 0 0-10.802.017L79.784 219.11A276.453 276.453 0 0 0 0 246.04L66.76 27.783c3.051-9.972 4.577-14.959 7.559-18.654a24.541 24.541 0 0 1 9.946-7.358C88.67 0 93.885 0 104.314 0h47.683c10.443 0 15.664 0 20.074 1.774a24.545 24.545 0 0 1 9.95 7.373Z"
/>
<path
fill="#FF5D01"
d="M189.972 256.46c-10.952 9.364-32.812 15.751-57.992 15.751-30.904 0-56.807-9.621-63.68-22.56-2.458 7.415-3.009 15.903-3.009 21.324 0 0-1.619 26.623 16.898 45.14 0-9.615 7.795-17.41 17.41-17.41 16.48 0 16.46 14.378 16.446 26.043l-.001 1.041c0 17.705 10.82 32.883 26.21 39.28a35.685 35.685 0 0 1-3.588-15.647c0-16.886 9.913-23.173 21.435-30.48 9.167-5.814 19.353-12.274 26.372-25.232a47.588 47.588 0 0 0 5.742-22.735c0-5.06-.786-9.938-2.243-14.516Z"
/>
</svg>
);

export { Logo, Github, Nextjs, Remix, Astro };
41 changes: 41 additions & 0 deletions website/app/components/usage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Link } from '@remix-run/react';
import { Astro, Nextjs, Remix } from './icons';

const usageLinks = [
{
label: 'Next.js',
to: '/docs/nextjs',
icon: Nextjs,
},
{
label: 'Remix',
to: '/docs/remix',
icon: Remix,
},
{
label: 'Astro',
to: '/docs/astro',
icon: Astro,
},
];

const Usage = () => {
return (
<div className="flex items-center space-x-2">
{usageLinks.map((link) => {
return (
<Link
key={link.to}
to={link.to}
className="text-md flex flex-col items-center space-y-3 rounded-md border border-neutral-200 p-[20px] text-sm no-underline shadow-sm transition-colors duration-100 hover:bg-neutral-100 dark:border-neutral-800 dark:hover:bg-neutral-800/50"
>
<link.icon height={35} />
<span>Install on {link.label}</span>
</Link>
);
})}
</div>
);
};

export default Usage;
12 changes: 6 additions & 6 deletions website/app/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { cn } from './utils';
// Layout:
import Header from './components/header';
import SidebarContent from './components/sidebar';
import { proseClasses } from './ui/prose';

// Providers:
import { ToastProvider } from '@pheralb/toast';
Expand Down Expand Up @@ -66,15 +67,14 @@ function App() {
)}
>
<Header />
<ToastProvider
position="bottom-right"
theme={data.theme == 'dark' ? 'dark' : 'light'}
>
<ToastProvider position="bottom-right" theme={theme!}>
<div className="container mx-auto max-w-7xl">
<SidebarContent />
<main className="ml-60">
<article
className={cn('ml-60 w-full max-w-4xl py-8', proseClasses)}
>
<Outlet />
</main>
</article>
</div>
</ToastProvider>
<ScrollRestoration />
Expand Down
59 changes: 0 additions & 59 deletions website/app/routes/_index.tsx

This file was deleted.

16 changes: 1 addition & 15 deletions website/app/routes/docs.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
import { cn } from '@/utils';
import { Outlet } from '@remix-run/react';

export default function DocsLayout() {
return (
<article
className={cn(
'w-full max-w-3xl py-8',
'prose prose-neutral dark:prose-invert',
'prose-headings:font-medium prose-headings:tracking-tight',
'prose-a:underline-offset-[4px] prose-a:decoration-solid dark:prose-a:decoration-neutral-500 prose-a:decoration-neutral-400',
'prose-figure:my-0 prose-p:mb-1 prose-p:text-pretty',
'prose-pre:border dark:prose-pre:border-neutral-800 prose-pre:border-neutral-200',
)}
>
<Outlet />
</article>
);
return <Outlet />;
}

0 comments on commit c25342a

Please sign in to comment.