feat: initial docs design

pheralb · pheralb · commit c25342a7f372 · 2024-05-12T22:54:33.000+01:00
diff --git a/website/app/components/header.tsx b/website/app/components/header.tsx
@@ -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>
           ))}
diff --git a/website/app/components/hero.tsx b/website/app/components/hero.tsx
@@ -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;
diff --git a/website/app/components/icons.tsx b/website/app/components/icons.tsx
@@ -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 };
diff --git a/website/app/components/usage.tsx b/website/app/components/usage.tsx
@@ -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;
diff --git a/website/app/root.tsx b/website/app/root.tsx
@@ -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';
@@ -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 />
diff --git a/website/app/routes/_index.tsx b/website/app/routes/_index.tsx
diff --git a/website/app/routes/docs.tsx b/website/app/routes/docs.tsx
@@ -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 />;
 }

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ const Header = () => {`
`45`	`45`	`rel="noopener noreferrer"`
`46`	`46`	`className={buttonVariants({ variant: 'ghost', size: 'icon' })}`
`47`	`47`	`>`
`48`		`- <link.icon height={20} width={20} />`
	`48`	`+ <link.icon height={18} width={18} />`
`49`	`49`	`<span className="sr-only">{link.label}</span>`
`50`	`50`	`</a>`
`51`	`51`	`))}`