kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

neat landing page

Browse Source
This commit is contained in:
MapleLeaf
2021-12-30 14:53:45 -06:00
parent 4c5164518f
commit 88426791f0
4 changed files with 94 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/docs/app/landing-example.mdx Normal file
View File

@@ -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 (
<>
<Embed title="Counter">
This button has been clicked {count} times.
</Embed>
<Button onClick={() => setCount(count + 1)}>
+1
</Button>
</>
)
}
```

38
packages/docs/app/root.tsx
View File

@@ -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() {
<Links />
</head>
<body>
<HeaderLayout header={<HeaderNav />} body={<Outlet />} />
<Outlet />
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
@@ -56,29 +46,3 @@ export default function App() {
</html>
)
}
function HeaderNav() {
return (
<nav className="flex justify-between items-center">
<Link to="/">
<h1 className="text-3xl font-light">
reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
</h1>
</Link>
<div className="flex gap-4">
<Link className={linkClass} to="/docs/guides/getting-started">
<DocumentTextIcon className="inline align-sub w-5" /> Guides
</Link>
<Link className={linkClass} to="/docs/api">
<DatabaseIcon className="inline align-sub w-5" /> API Reference
</Link>
<ExternalLink
className={linkClass}
href="https://github.com/itsMapleLeaf/reacord"
>
<ExternalLinkIcon className="inline align-sub w-5" /> GitHub
</ExternalLink>
</div>
</nav>
)
}

65
packages/docs/app/routes/docs.tsx
View File

@@ -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 (
<SidebarLayout
sidebar={
<SideNav heading="Guides">
{data.map(({ title, route }) => (
<Link className={linkClass} key={route} to={route}>
{title}
</Link>
))}
</SideNav>
}
<HeaderLayout
header={<HeaderNav />}
body={
<section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
<Outlet />
</section>
<SidebarLayout
sidebar={
<SideNav heading="Guides">
{data.map(({ title, route }) => (
<Link className={linkClass} key={route} to={route}>
{title}
</Link>
))}
</SideNav>
}
body={
<section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
<Outlet />
</section>
}
/>
}
/>
)
}
function HeaderNav() {
return (
<nav className="flex justify-between items-center">
<Link to="/">
<h1 className="text-3xl font-light">
reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
</h1>
</Link>
<div className="flex gap-4">
<Link className={linkClass} to="/docs/guides/getting-started">
<DocumentTextIcon className="inline align-sub w-5" /> Guides
</Link>
<Link className={linkClass} to="/docs/api">
<DatabaseIcon className="inline align-sub w-5" /> API Reference
</Link>
<ExternalLink
className={linkClass}
href="https://github.com/itsMapleLeaf/reacord"
>
<ExternalLinkIcon className="inline align-sub w-5" /> GitHub
</ExternalLink>
</div>
</nav>
)
}

28
packages/docs/app/routes/index.tsx
View File

@@ -1,10 +1,26 @@
export default function Index() {
import { Link } from "remix"
import LandingExample from "~/landing-example.mdx"
export default function Landing() {
return (
<main>
<h1>Reacord</h1>
<pre>code snippet here</pre>
<p>Create interactive Discord messages using React and JSX.</p>
<button>Get Started</button>
<main className="flex min-w-0 min-h-screen p-4 text-center">
<div className="w-full max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
<h1 className="text-6xl font-light">reacord</h1>
<div className="w-full overflow-x-auto">
<section className="mx-auto text-sm shadow w-fit sm:text-base">
<LandingExample />
</section>
</div>
<p className="px-8 text-2xl font-light">
Create interactive Discord messages using React and JSX.
</p>
<Link
to="/docs/guides/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md "
>
Get Started
</Link>
</div>
</main>
)
}