WIP: app -> pages

This commit is contained in:
2023-06-14 22:25:00 +04:00
parent a4bed55547
commit d7ed76ae6e
14 changed files with 109 additions and 82 deletions

View File

@@ -1,22 +0,0 @@
import { notFound } from 'next/navigation'
import directus from '~/lib/directus'
async function getPage(slug) {
try {
const page = await directus.items('pages').readOne(slug)
return page
} catch (error) {
notFound()
}
}
export default async function DynamicPage({ params }) {
const page = await getPage(params.slug)
return (
<div>
<h1>{page.title}</h1>
<div dangerouslySetInnerHTML={{__html: page.content}}></div>
</div>
)
}

View File

@@ -1,36 +0,0 @@
import Header from '~/app/components/header'
import Footer from '~/app/components/footer'
import { Providers } from '~/app/providers'
import { Container } from '~/app/ui'
import directus from '~/lib/directus'
async function getGlobals() {
return directus.items('globals').readOne(process.env.GLOBALS_ID)
}
export async function generateMetadata() {
const globals = await getGlobals()
return {
title: globals.meta_title,
description: globals.meta_description,
}
}
export default async function RootLayout({ children }) {
const globals = await getGlobals()
return (
<html lang="en">
<body>
<Providers>
<Container maxW="3xl">
<Header siteName={globals.site_name} />
{children}
<Footer />
</Container>
</Providers>
</body>
</html>
)
}

View File

@@ -1,7 +0,0 @@
export default async function Home() {
return (
<main>
<pre>{JSON.stringify(new Date(), null, 2)}</pre>
</main>
)
}

View File

@@ -1,9 +0,0 @@
import { CacheProvider, ChakraProvider } from '~/app/ui'
export function Providers({ children }) {
return (
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
)
}

View File

@@ -1,3 +0,0 @@
'use client'
export { CacheProvider, Link } from '@chakra-ui/next-js'
export * from '@chakra-ui/react'

View File

@@ -1,6 +1,4 @@
'use client' import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '~/app/ui'
export default function Footer({ siteName }) { export default function Footer({ siteName }) {
return ( return (

View File

@@ -1,7 +1,8 @@
'use client' 'use client'
import { MoonIcon, SunIcon } from '@chakra-ui/icons' import { MoonIcon, SunIcon } from '@chakra-ui/icons'
import { Box, Button, Flex, Heading, Link, Spacer, Stack, useColorMode, useColorModeValue } from '~/app/ui' import { Box, Button, Flex, Heading, Spacer, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
import { Link } from '@chakra-ui/next-js'
export default function Header({ siteName }) { export default function Header({ siteName }) {
const { colorMode, toggleColorMode } = useColorMode() const { colorMode, toggleColorMode } = useColorMode()

View File

@@ -0,0 +1,47 @@
import Header from '~/components/header'
import Footer from '~/components/footer'
import directus from '~/lib/directus'
import { Html, Head, Main, NextScript } from 'next/document'
// async function getGlobals() {
// return directus.items('globals').readOne(process.env.GLOBALS_ID)
// }
// export async function generateMetadata() {
// const globals = await getGlobals()
// return {
// title: globals.meta_title,
// description: globals.meta_description,
// }
// }
// export default async function RootLayout({ children }) {
// const globals = await getGlobals()
// return (
// <H lang="en">
// <body>
// <Providers>
// <Container maxW="3xl">
// <Header siteName={globals.site_name} />
// {children}
// <Footer />
// </Container>
// </Providers>
// </body>
// </H>
// )
// }
export default function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
)
}

View File

@@ -0,0 +1,38 @@
import { notFound } from 'next/navigation'
import directus from '~/lib/directus'
export const getStaticPaths = async () => {
const { data: pages } = await directus.items('pages').readByQuery({
limit: 1,
})
return {
paths: pages.map((p) => ({ params: { slug: p.slug } })),
fallback: false, // false or "blocking"
}
}
export const getStaticProps = async ({ params }) => {
const { slug } = params
const {
data: [page],
} = await directus.items('pages').readByQuery({
limit: 1,
filter: {
slug: {
_eq: slug,
},
},
})
return { props: { page } }
}
export default function Page({ page }) {
return (
<div>
<h1>{page.title}</h1>
<div dangerouslySetInnerHTML={{ __html: page.content }}></div>
</div>
)
}

12
frontend/pages/_app.js Normal file
View File

@@ -0,0 +1,12 @@
import { ChakraProvider } from '@chakra-ui/react'
import Layout from '~/components/layout'
export default function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
)
}

7
frontend/pages/index.js Normal file
View File

@@ -0,0 +1,7 @@
export default function Home() {
return (
<main>
<pre>{JSON.stringify(new Date().toISOString().split('T').join(' ').substring(0, 16), null, 2)}</pre>
</main>
)
}

View File

@@ -1,4 +1,5 @@
import { Card, CardBody, Heading, Image, Link, LinkBox, LinkOverlay, SimpleGrid } from '~/app/ui' import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid } from '@chakra-ui/react'
import directus from '~/lib/directus' import directus from '~/lib/directus'
const PER_PAGE = 50 const PER_PAGE = 50