diff --git a/packages/docs/app/landing-example.mdx b/packages/docs/app/landing-example.mdx new file mode 100644 index 0000000..aa74822 --- /dev/null +++ b/packages/docs/app/landing-example.mdx @@ -0,0 +1,19 @@ +{/* prettier-ignore */} +```tsx +import * as React from "react" +import { Embed, Button } from "reacord" + +function Counter() { + const [count, setCount] = React.useState(0) + return ( + <> + + This button has been clicked {count} times. + + + + ) +} +``` diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx index d401b91..b5e0f01 100644 --- a/packages/docs/app/root.tsx +++ b/packages/docs/app/root.tsx @@ -1,12 +1,5 @@ -import { CodeIcon } from "@heroicons/react/outline" -import { - DatabaseIcon, - DocumentTextIcon, - ExternalLinkIcon, -} from "@heroicons/react/solid" import type { LinksFunction, MetaFunction } from "remix" import { - Link, Links, LiveReload, Meta, @@ -14,9 +7,6 @@ import { Scripts, ScrollRestoration, } from "remix" -import { ExternalLink } from "~/components/external-link" -import { HeaderLayout } from "~/components/header-layout" -import { linkClass } from "~/styles" import prismThemeCss from "./prism-theme.css" export const meta: MetaFunction = () => { @@ -48,7 +38,7 @@ export default function App() { - } body={} /> + {process.env.NODE_ENV === "development" && } @@ -56,29 +46,3 @@ export default function App() { ) } - -function HeaderNav() { - return ( - - ) -} diff --git a/packages/docs/app/routes/docs.tsx b/packages/docs/app/routes/docs.tsx index 13bca3b..00393a2 100644 --- a/packages/docs/app/routes/docs.tsx +++ b/packages/docs/app/routes/docs.tsx @@ -1,5 +1,13 @@ +import { CodeIcon } from "@heroicons/react/outline" +import { + DatabaseIcon, + DocumentTextIcon, + ExternalLinkIcon, +} from "@heroicons/react/solid" import type { LoaderFunction } from "remix" import { Link, Outlet, useLoaderData } from "remix" +import { ExternalLink } from "~/components/external-link" +import { HeaderLayout } from "~/components/header-layout" import { SideNav } from "~/components/side-nav" import { SidebarLayout } from "~/components/sidebar-layout" import type { ContentIndexEntry } from "~/create-index.server" @@ -16,21 +24,52 @@ export const loader: LoaderFunction = async () => { export default function Docs() { const data: LoaderData = useLoaderData() return ( - - {data.map(({ title, route }) => ( - - {title} - - ))} - - } + } body={ -
- -
+ + {data.map(({ title, route }) => ( + + {title} + + ))} + + } + body={ +
+ +
+ } + /> } /> ) } + +function HeaderNav() { + return ( + + ) +} diff --git a/packages/docs/app/routes/index.tsx b/packages/docs/app/routes/index.tsx index af3aee3..0ae9d62 100644 --- a/packages/docs/app/routes/index.tsx +++ b/packages/docs/app/routes/index.tsx @@ -1,10 +1,26 @@ -export default function Index() { +import { Link } from "remix" +import LandingExample from "~/landing-example.mdx" + +export default function Landing() { return ( -
-

Reacord

- 
code snippet here
-

Create interactive Discord messages using React and JSX.

- +
+
+

reacord

+
+
+ +
+
+

+ Create interactive Discord messages using React and JSX. +

+ + Get Started + +
) }