vspaceone/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add cms

Browse Source
This commit is contained in:
Enrico Bühler
2024-06-26 22:13:34 +02:00
parent ad650b610d
commit 698b347ccb
35 changed files with 11002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
api/src/app/(app)/globals.scss Normal file
View File

@@ -0,0 +1,191 @@
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #000000;
}
body {
color: #ffffff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 20px;
}
main {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100vh;
max-width: 800px;
margin: 0 auto;
padding-block: 80px;
border-inline-width: 1px;
border-inline-style: solid;
border-image: linear-gradient(180deg, #ffffff00, #ffffff00, #ffffff1a, #ffffff00) 1;
@media screen and (max-width: 600px) {
padding-block: 20px;
}
}
article {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
padding: 60px 80px;
@media screen and (max-width: 600px) {
padding: 40px 40px;
}
}
.badge {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2.6px;
}
h1 {
color: #ffffff;
font-size: 4rem;
font-weight: 600;
line-height: normal;
letter-spacing: -0.02rem;
margin: 0;
@media screen and (max-width: 600px) {
font-size: 2rem;
}
}
p {
color: #ffffff;
font-size: 16px;
font-weight: 300;
line-height: 28px;
margin: 0;
}
a {
color: #ffffff;
text-decoration: underline;
transition: color 0.2s ease-out;
&:hover {
color: #ffffff80;
}
}
.codeBlock {
position: relative;
background-color: #00000066;
margin: 0;
padding: 0;
pre {
margin: 0;
padding: 60px 80px;
overflow-x: auto;
@media screen and (max-width: 600px) {
padding: 40px 40px;
}
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 1px;
background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00);
z-index: 1;
}
&::after {
content: url('/crosshair.svg');
display: block;
height: 19px;
width: 19px;
position: absolute;
top: -9px;
left: -10px;
}
}
code {
font-size: 14px;
line-height: 2;
}
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 1px;
background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00);
z-index: 1;
}
&::after {
content: url('/crosshair.svg');
display: block;
height: 19px;
width: 19px;
position: absolute;
bottom: -9px;
right: -10px;
}
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
div.blur {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url('/blur.png');
background-repeat: repeat;
background-size: 400px 400px;
background-blend-mode: soft-light, normal;
backdrop-filter: blur(60px);
}
div.gradient {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url('/gradient.webp');
background-size: cover;
background-position: center;
z-index: -2;
}
}

19
api/src/app/(app)/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react'
import './globals.scss'
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
/* Our app sits here to not cause any conflicts with payload's root layout */
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<html className={inter.className}>
<body>{children}</body>
</html>
)
}
export default Layout

52
api/src/app/(app)/page.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { Badge } from '@/components/Badge'
import { Background } from '@/components/Background'
import Link from 'next/link'
import React from 'react'
const Page = () => {
return (
<>
<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 { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'
const payload = await getPayloadHMR({ config: configPromise })
const data = await payload.find({
collection: 'posts',
})
return <Posts data={data} />
`}
</code>
</pre>
</div>
</main>
<Background />
</>
)
}
export default Page

22
api/src/app/(payload)/admin/[[...segments]]/not-found.tsx Normal file
View File

@@ -0,0 +1,22 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
import type { Metadata } from 'next'
import config from '@payload-config'
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
type Args = {
params: {
segments: string[]
}
searchParams: {
[key: string]: string | string[]
}
}
export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
generatePageMetadata({ config, params, searchParams })
const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
export default NotFound

22
api/src/app/(payload)/admin/[[...segments]]/page.tsx Normal file
View File

@@ -0,0 +1,22 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
import type { Metadata } from 'next'
import config from '@payload-config'
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
type Args = {
params: {
segments: string[]
}
searchParams: {
[key: string]: string | string[]
}
}
export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
generatePageMetadata({ config, params, searchParams })
const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
export default Page

10
api/src/app/(payload)/api/[...slug]/route.ts Normal file
View File

@@ -0,0 +1,10 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY it because it could be re-written at any time. */
import config from '@payload-config'
import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
export const GET = REST_GET(config)
export const POST = REST_POST(config)
export const DELETE = REST_DELETE(config)
export const PATCH = REST_PATCH(config)
export const OPTIONS = REST_OPTIONS(config)

6
api/src/app/(payload)/api/graphql-playground/route.ts Normal file
View File

@@ -0,0 +1,6 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY it because it could be re-written at any time. */
import config from '@payload-config'
import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
export const GET = GRAPHQL_PLAYGROUND_GET(config)

6
api/src/app/(payload)/api/graphql/route.ts Normal file
View File

@@ -0,0 +1,6 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY it because it could be re-written at any time. */
import config from '@payload-config'
import { GRAPHQL_POST } from '@payloadcms/next/routes'
export const POST = GRAPHQL_POST(config)

0
api/src/app/(payload)/custom.scss Normal file
View File

16
api/src/app/(payload)/layout.tsx Normal file
View File

@@ -0,0 +1,16 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
import configPromise from '@payload-config'
import '@payloadcms/next/css'
import { RootLayout } from '@payloadcms/next/layouts'
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import React from 'react'
import './custom.scss'
type Args = {
children: React.ReactNode
}
const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
export default Layout

14
api/src/app/my-route/route.ts Normal file
View File

@@ -0,0 +1,14 @@
import { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'
export const GET = async () => {
const payload = await getPayloadHMR({
config: configPromise,
})
const data = await payload.find({
collection: 'users',
})
return Response.json(data)
}

8
api/src/components/Background.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const Background = () => {
return (
<div className="background">
<div className="blur" />
<div className="gradient" />
</div>
)
}

20
api/src/components/Badge.tsx Normal file
View File

@@ -0,0 +1,20 @@
export const Badge = () => {
return (
<span className="badge">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.35899 1.59033L16.956 6.233V15.0452L11.2355 18.4097V9.59751L3.62941 4.96095L9.35899 1.59033Z"
fill="#ffffff"
/>
<path d="M8.77667 17.9211V11.0447L3.04407 14.4153L8.77667 17.9211Z" fill="#ffffff" />
</svg>
Beta
</span>
)
}

11
api/src/components/Example.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
import { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'
const Example: React.FC = async () => {
const payload = await getPayloadHMR({ config: configPromise })
const url = payload.getAdminURL()
return <div>The admin panel is running at: {url}</div>
}
export default Example

21
api/src/scripts/standalone-script.js Normal file
View File

@@ -0,0 +1,21 @@
/**
* This is an example of a standalone script that loads in the Payload config
* and uses the Payload Local API to query the database.
*/
import { getPayload } from 'payload'
import { importConfig } from 'payload/node'
async function run() {
const awaitedConfig = await importConfig('../../payload.config.ts')
const payload = await getPayload({ config: awaitedConfig })
const pages = await payload.find({
collection: 'pages',
})
console.log(pages)
process.exit(0)
}
run().catch(console.error)