neat landing page
This commit is contained in:
MapleLeaf
19
packages/docs/app/landing-example.mdx
Normal file
19
packages/docs/app/landing-example.mdx
Normal 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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -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 type { LinksFunction, MetaFunction } from "remix"
|
||||||
import {
|
import {
|
||||||
Link,
|
|
||||||
Links,
|
Links,
|
||||||
LiveReload,
|
LiveReload,
|
||||||
Meta,
|
Meta,
|
||||||
@@ -14,9 +7,6 @@ import {
|
|||||||
Scripts,
|
Scripts,
|
||||||
ScrollRestoration,
|
ScrollRestoration,
|
||||||
} from "remix"
|
} from "remix"
|
||||||
import { ExternalLink } from "~/components/external-link"
|
|
||||||
import { HeaderLayout } from "~/components/header-layout"
|
|
||||||
import { linkClass } from "~/styles"
|
|
||||||
import prismThemeCss from "./prism-theme.css"
|
import prismThemeCss from "./prism-theme.css"
|
||||||
|
|
||||||
export const meta: MetaFunction = () => {
|
export const meta: MetaFunction = () => {
|
||||||
@@ -48,7 +38,7 @@ export default function App() {
|
|||||||
<Links />
|
<Links />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<HeaderLayout header={<HeaderNav />} body={<Outlet />} />
|
<Outlet />
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
<Scripts />
|
<Scripts />
|
||||||
{process.env.NODE_ENV === "development" && <LiveReload />}
|
{process.env.NODE_ENV === "development" && <LiveReload />}
|
||||||
@@ -56,29 +46,3 @@ export default function App() {
|
|||||||
</html>
|
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
|
import { CodeIcon } from "@heroicons/react/outline"
|
||||||
|
import {
|
||||||
|
DatabaseIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
ExternalLinkIcon,
|
||||||
|
} from "@heroicons/react/solid"
|
||||||
import type { LoaderFunction } from "remix"
|
import type { LoaderFunction } from "remix"
|
||||||
import { Link, Outlet, useLoaderData } 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 { SideNav } from "~/components/side-nav"
|
||||||
import { SidebarLayout } from "~/components/sidebar-layout"
|
import { SidebarLayout } from "~/components/sidebar-layout"
|
||||||
import type { ContentIndexEntry } from "~/create-index.server"
|
import type { ContentIndexEntry } from "~/create-index.server"
|
||||||
@@ -16,21 +24,52 @@ export const loader: LoaderFunction = async () => {
|
|||||||
export default function Docs() {
|
export default function Docs() {
|
||||||
const data: LoaderData = useLoaderData()
|
const data: LoaderData = useLoaderData()
|
||||||
return (
|
return (
|
||||||
<SidebarLayout
|
<HeaderLayout
|
||||||
sidebar={
|
header={<HeaderNav />}
|
||||||
<SideNav heading="Guides">
|
|
||||||
{data.map(({ title, route }) => (
|
|
||||||
<Link className={linkClass} key={route} to={route}>
|
|
||||||
{title}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</SideNav>
|
|
||||||
}
|
|
||||||
body={
|
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]">
|
<SidebarLayout
|
||||||
<Outlet />
|
sidebar={
|
||||||
</section>
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,10 +1,26 @@
|
|||||||
export default function Index() {
|
import { Link } from "remix"
|
||||||
|
import LandingExample from "~/landing-example.mdx"
|
||||||
|
|
||||||
|
export default function Landing() {
|
||||||
return (
|
return (
|
||||||
<main>
|
<main className="flex min-w-0 min-h-screen p-4 text-center">
|
||||||
<h1>Reacord</h1>
|
<div className="w-full max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
|
||||||
<pre>code snippet here</pre>
|
<h1 className="text-6xl font-light">reacord</h1>
|
||||||
<p>Create interactive Discord messages using React and JSX.</p>
|
<div className="w-full overflow-x-auto">
|
||||||
<button>Get Started</button>
|
<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>
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user