chore: restyles start page (#114)

* restyles start page

* chore: start page style tweaks

* chore: adjust codeblock overflow

* chore: satisfies the design gods
This commit is contained in:
Tylan Davis
2024-04-15 16:19:08 -04:00
committed by GitHub
parent 6e7f241ce0
commit a9e5257194
10 changed files with 259 additions and 77 deletions

View File

@ -1,56 +1,51 @@
import Example from '@/components/Example'
import { Badge } from '@/components/Badge'
import { Background } from '@/components/Background'
import Link from 'next/link'
import React from 'react'
const Page = () => {
return (
<article className={['container'].filter(Boolean).join(' ')}>
<h1>
Payload 3.0 <span className="rainbow">BETA</span>!
</h1>
<p>
This BETA is rapidly evolving, you can report any bugs against{' '}
<a href="https://github.com/payloadcms/payload-3.0-demo/issues" target="_blank">
the repo
</a>{' '}
or in the{' '}
<a
href="https://discord.com/channels/967097582721572934/1215659716538273832"
target="_blank"
>
dedicated channel in Discord
</a>
.
</p>
<p>
<strong>
Payload is running at <Link href="/admin">/admin</Link>
</strong>
</p>
<p>
<Link href="/my-route" target="_blank">
/my-route
</Link>{' '}
contains an example of a custom route running the Local API.
</p>
<Example />
<p>You can use the Local API in your server components like this:</p>
<pre>
<code>
{`import { getPayload } from 'payload'
<>
<main>
<article>
<Badge />
<h1>Payload 3.0</h1>
<p>
This BETA is rapidly evolving, you can report any bugs against{' '}
<Link href="https://github.com/payloadcms/payload-3.0-demo/issues" target="_blank">
the repo
</Link>{' '}
or in the{' '}
<Link
href="https://discord.com/channels/967097582721572934/1215659716538273832"
target="_blank"
>
dedicated channel in Discord
</Link>
. Payload is running at <Link href="/admin">/admin</Link>. An example of a custom route
running the Local API can be found at <Link href="/my-route">/my-route</Link>.
</p>
<p>You can use the Local API in your server components like this:</p>
</article>
<div className="codeBlock">
<pre>
<code>
{`import { getPayload } from 'payload'
import configPromise from "@payload-config";
const payload = await getPayload({ config: configPromise })
const data = await payload.find({
collection: 'posts',
})`}
</code>
</pre>
</article>
})
return <Posts data={data} />
`}
</code>
</pre>
</div>
</main>
<Background />
</>
)
}