feat: initial docs + mdx config

Author: pheralb

website/.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

website/.eslintrc.json

@@ -1,5 +1,3 @@
-'use client';
-
 import { useToast } from '@pheralb/toast';
 
 const Examples = () => {

website/src/components/examples.tsx website/app/components/examples.tsx

@@ -1,9 +1,10 @@
-import { Logo } from '@/icons';
-import { cn } from '@/utils';
-import Link from 'next/link';
-import { ModeToggle } from './theme-toggle';
+import { Link } from '@remix-run/react';
 import { Github, X } from 'iconoir-react';
+
+import { Logo } from '@/components/icons';
 import { buttonVariants } from '@/ui/button';
+import { cn } from '@/utils/index';
+import { ModeToggle } from './theme-toggle';
 
 const socialLinks = [
   {
@@ -28,7 +29,7 @@ const Header = () => {
     >
       <div className="container flex max-w-7xl items-center justify-between">
         <Link
-          href="/"
+          to="/"
           className="flex items-center space-x-2 font-medium tracking-tight transition-opacity duration-75 hover:opacity-80"
         >
           <Logo width={22} />

website/src/components/header.tsx website/app/components/header.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@/utils';
+import type { ComponentProps, FC } from 'react';
+
+export type Position =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+const Logo: FC<ComponentProps<'svg'>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path d="M224 71.1a8 8 0 01-10.78-3.42 94.13 94.13 0 00-33.46-36.91 8 8 0 118.54-13.54 111.46 111.46 0 0139.12 43.09A8 8 0 01224 71.1zM35.71 72a8 8 0 007.1-4.32 94.13 94.13 0 0133.46-36.91 8 8 0 10-8.54-13.54 111.46 111.46 0 00-39.12 43.09A8 8 0 0035.71 72zm186.1 103.94A16 16 0 01208 200h-40.8a40 40 0 01-78.4 0H48a16 16 0 01-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 01160 0c0 26.27 4.78 48.38 13.81 63.94zM150.62 200h-45.24a24 24 0 0045.24 0zM208 184c-10.64-18.27-16-42.49-16-72a64 64 0 00-128 0c0 29.52-5.38 53.74-16 72z" />
+  </svg>
+);
+
+export const SparkleSvg = ({ position }: { position: Position }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        'absolute z-10 size-4 fill-black',
+        position === 'top-right' && '-right-2 -top-2',
+        position === 'bottom-left' && '-bottom-2 -left-2',
+        position === 'bottom-right' && '-bottom-2 -right-2',
+        position === 'top-left' && '-left-2 -top-2',
+      )}
+    >
+      <path d="m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z"></path>
+    </svg>
+  );
+};
+
+export { Logo };

website/app/components/icons.tsx

@@ -1,26 +1,16 @@
-'use client';
+import { Link, useLocation } from '@remix-run/react';
 
-import { DocsRoutes } from '@/routes';
-import { buttonVariants } from '@/ui/button';
-import { CardAnimatedBorder } from '@/ui/cards-spotlight';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/ui/collapsible';
-import { cn } from '@/utils';
-import { ArrowUpRight, NavArrowDown } from 'iconoir-react';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { DocsRoutes } from '@/docs.routes';
+import { cn } from '@/utils/index';
+import { ArrowUpRight } from 'iconoir-react';
 
 const SidebarContent = () => {
-  const pathname = usePathname();
+  const location = useLocation();
   return (
     <nav
       className={cn(
-        '] fixed z-50 h-[calc(100vh-4rem)] overflow-y-auto overflow-x-hidden pb-10',
-        'bg-white dark:bg-neutral-900',
+        'fixed z-50 h-[calc(100vh-4rem)] overflow-y-auto overflow-x-hidden pb-10',
+        'bg-neutral-50 dark:bg-neutral-900',
         'flex flex-col',
       )}
     >
@@ -34,13 +24,13 @@ const SidebarContent = () => {
               {route.routes.map((r) => (
                 <Link
                   key={r.path}
-                  href={r.path}
+                  to={r.path}
                   className={cn(
                     'px-4 py-2 text-sm',
                     'border-l border-neutral-200 dark:border-neutral-800',
                     'text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white',
                     'transition-colors',
-                    pathname === r.path
+                    location.pathname === r.path
                       ? 'border-black font-medium text-black dark:border-white dark:text-white'
                       : 'bg-transparent',
                   )}
@@ -52,8 +42,8 @@ const SidebarContent = () => {
           </div>
         ))}
       </div>
-      <div className="w-full border-b border-neutral-200 py-2 text-sm dark:border-neutral-800">
-        <p className="font-medium">Found an issue?</p>
+      <div className="w-full border-b-2 border-dashed border-neutral-200 py-2 text-sm dark:border-neutral-800">
+        <p className="font-medium">Found a bug?</p>
         <a
           href="https://github.com/pheralb/toast/issues/new"
           target="_blank"

website/src/components/sidebar.tsx website/app/components/sidebar.tsx

@@ -0,0 +1,34 @@
+import { HalfMoon, SunLight } from 'iconoir-react';
+import { Theme, useTheme } from 'remix-themes';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/ui/dropdown-menu';
+import { Button } from '@/ui/button';
+
+export function ModeToggle() {
+  const [, setTheme] = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <SunLight className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <HalfMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme(Theme.LIGHT)}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme(Theme.DARK)}>
+          Dark
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

website/app/components/theme-toggle.tsx

@@ -16,7 +16,7 @@ export const DocsRoutes: iDocsRoutes[] = [
       },
       {
         title: 'Usage with Next.js',
-        path: '/nextjs',
+        path: '/docs/nextjs',
       },
     ],
   },
@@ -25,11 +25,11 @@ export const DocsRoutes: iDocsRoutes[] = [
     routes: [
       {
         title: 'Positions',
-        path: '/positions',
+        path: '/docs/positions',
       },
       {
         title: 'Variants',
-        path: '/variants',
+        path: '/docs/variants',
       },
     ],
   },
@@ -38,15 +38,15 @@ export const DocsRoutes: iDocsRoutes[] = [
     routes: [
       {
         title: 'Rich Colors',
-        path: '/colors',
+        path: '/docs/colors',
       },
       {
         title: 'Dark Mode',
-        path: '/dark-mode',
+        path: '/docs/dark-mode',
       },
       {
         title: 'Tailwind CSS',
-        path: '/tailwind-css',
+        path: '/docs/tailwind-css',
       },
     ],
   },

website/src/routes.ts website/app/docs.routes.ts

@@ -0,0 +1,85 @@
+import type { LinksFunction, LoaderFunctionArgs } from '@vercel/remix';
+
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from '@remix-run/react';
+
+// Styles:
+import stylesheet from '@/styles/globals.css?url';
+import { cn } from './utils';
+
+// Layout:
+import Header from './components/header';
+import SidebarContent from './components/sidebar';
+
+// Providers:
+import { ToastProvider } from '@pheralb/toast';
+import {
+  PreventFlashOnWrongTheme,
+  ThemeProvider,
+  useTheme,
+} from 'remix-themes';
+import { themeSessionResolver } from './sessions.server';
+
+export const links: LinksFunction = () => [
+  { rel: 'stylesheet', href: stylesheet },
+];
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const { getTheme } = await themeSessionResolver(request);
+  return {
+    theme: getTheme(),
+  };
+}
+
+export default function AppWithProviders() {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
+      <App />
+    </ThemeProvider>
+  );
+}
+
+function App() {
+  const data = useLoaderData<typeof loader>();
+  const [theme] = useTheme();
+  return (
+    <html lang="en" className={cn(theme)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
+        <Links />
+      </head>
+      <body
+        className={cn(
+          'font-sans antialiased',
+          'bg-neutral-50 dark:bg-neutral-900',
+          'text-neutral-900 dark:text-neutral-50',
+        )}
+      >
+        <Header />
+        <ToastProvider
+          position="bottom-right"
+          theme={data.theme == 'dark' ? 'dark' : 'light'}
+        >
+          <div className="container mx-auto max-w-7xl">
+            <SidebarContent />
+            <main className="ml-60">
+              <Outlet />
+            </main>
+          </div>
+        </ToastProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}