Move awtis page to app directory
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
import {notFound} from 'next/navigation'
|
||||
import Box from '@mui/material/Box'
|
||||
|
||||
import AwtisDetay from '../../../components/awtis/awtis-detay'
|
||||
import {jwennAwtisEpiSlug} from '../../../lib/oki-api'
|
||||
import {formatKuveti} from '../../../lib/kuveti'
|
||||
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
|
||||
|
||||
async function jwennAwtis(slug) {
|
||||
const awtis = await jwennAwtisEpiSlug(slug)
|
||||
|
||||
if (!awtis) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return awtis
|
||||
}
|
||||
|
||||
export async function generateMetadata({params}) {
|
||||
const {slug} = params
|
||||
const anAwtis = await jwennAwtis(slug)
|
||||
|
||||
const title = `OKI | ${anAwtis.attributes.alias} - Paroles et Traductions`
|
||||
const description = `${anAwtis.attributes.alias}${anAwtis?.attributes?.biographie ? ` : ${anAwtis?.attributes?.biographie.slice(0, 100)}...` : ''}`
|
||||
const url = `${siteUrl}/awtis/${slug}`
|
||||
|
||||
const {photo} = anAwtis.attributes
|
||||
const kuvetiFormat = formatKuveti(photo)
|
||||
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url,
|
||||
siteName: title,
|
||||
images: [
|
||||
{
|
||||
url: `${apiUrl}${kuvetiFormat?.url}`,
|
||||
width: kuvetiFormat?.width,
|
||||
height: kuvetiFormat?.height
|
||||
}
|
||||
],
|
||||
locale: 'fr_FR',
|
||||
type: 'website'
|
||||
},
|
||||
twitter: {
|
||||
site: '@OrganisationKA',
|
||||
card: 'summary_large_image',
|
||||
title,
|
||||
description,
|
||||
creator: '@OrganisationKA',
|
||||
images: {
|
||||
url: `${apiUrl}${kuvetiFormat?.url}`,
|
||||
alt: `Photo de ${anAwtis.attributes.alias}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function AwtisPajSlug({params}) {
|
||||
const {slug} = params
|
||||
const anAwtis = await jwennAwtis(slug)
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'http://schema.org',
|
||||
'@type': 'Person',
|
||||
name: anAwtis.attributes.alias,
|
||||
url: `${siteUrl}/awtis/${slug}`
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||
<AwtisDetay anAwtis={anAwtis.attributes} />
|
||||
</Box>
|
||||
<section>
|
||||
<script
|
||||
type='application/ld+json'
|
||||
dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default async function AwtisLayout({children}) {
|
||||
return (
|
||||
<section>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import {notFound} from 'next/navigation'
|
||||
import Box from '@mui/material/Box'
|
||||
import Container from '@mui/material/Container'
|
||||
import Grid from '@mui/material/Unstable_Grid2'
|
||||
|
||||
import ChecheAwtis from '../../components/awtis/cheche-awtis'
|
||||
import AwtisKat from '../../components/awtis/awtis-kat'
|
||||
import Pajinasyon from '../../components/awtis/pajinasyon'
|
||||
|
||||
import {jwennAwtisPajinasyon} from '../../lib/oki-api'
|
||||
|
||||
export const metadata = {
|
||||
title: 'OKI | Awtis - Liste des artistes',
|
||||
description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
|
||||
openGraph: {
|
||||
title: 'OKI | Awtis - Liste des artistes',
|
||||
description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
|
||||
url: 'https://oki.re/sipote',
|
||||
siteName: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||
images: [
|
||||
{
|
||||
url: 'htts://oki.re/logo-512x512.png',
|
||||
width: 512,
|
||||
height: 512
|
||||
}
|
||||
],
|
||||
locale: 'fr_FR',
|
||||
type: 'website'
|
||||
},
|
||||
twitter: {
|
||||
site: '@OrganisationKA',
|
||||
card: 'summary_large_image',
|
||||
title: 'OKI | Awtis - Liste des artistes',
|
||||
description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
|
||||
creator: '@OrganisationKA',
|
||||
images: {
|
||||
url: 'https://oki.re/logo-512x512.png',
|
||||
alt: 'OKI Logo',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function jwennDone(paj) {
|
||||
const pajParsed = Array.isArray(paj) ? Number.parseInt(paj[1], 10) : Number.parseInt(paj, 10)
|
||||
|
||||
if (Number.isNaN(pajParsed)) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
|
||||
const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
|
||||
|
||||
if (pajParsed > pajTotal || pajParsed < 1) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return {pajTotal, awtisPouChakPaj, pajParsed}
|
||||
}
|
||||
|
||||
export default async function AwitsPaj({searchParams}) {
|
||||
const {paj} = searchParams
|
||||
const {pajTotal, awtisPouChakPaj, pajParsed} = await jwennDone(paj || 1)
|
||||
|
||||
return (
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||
<Pajinasyon pajTotal={pajTotal} paj={pajParsed} />
|
||||
<ChecheAwtis />
|
||||
<Container sx={{marginBottom: 5, flexGrow: 100}}>
|
||||
<Grid container spacing={{xs: 2, md: 3}}>
|
||||
{awtisPouChakPaj.data.map(artiste => <AwtisKat key={artiste.id} artiste={artiste.attributes} />)}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import {Box} from '@mui/material'
|
||||
|
||||
import AwtisDetay from '../../components/awtis/awtis-detay'
|
||||
import Footer from '../../components/footer'
|
||||
import HeadLayout from '../../components/head-layout'
|
||||
import {jwennAwtisEpiSlug} from '../../lib/oki-api'
|
||||
|
||||
import Custom404 from '../404'
|
||||
import Custom500 from '../500'
|
||||
|
||||
export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis}) {
|
||||
if (error404) {
|
||||
return <Custom404 statusCode={error404} />
|
||||
}
|
||||
|
||||
if (errorCode) {
|
||||
console.log('⚠️ error', errorMessage)
|
||||
return <Custom500 statusCode={errorCode} />
|
||||
}
|
||||
|
||||
const {attributes} = anAwtis
|
||||
const {photo} = attributes
|
||||
|
||||
const formatKouveti = () => {
|
||||
if (!photo?.data?.attributes) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (photo.data.attributes && photo.data.attributes.formats && photo.data.attributes.formats.large) {
|
||||
return photo.data.attributes.formats.large
|
||||
}
|
||||
|
||||
if (photo.data.attributes && photo.data.attributes.formats && photo.data.attributes.formats.medium) {
|
||||
return photo.data.attributes.formats.medium
|
||||
}
|
||||
|
||||
if (photo.data.attributes && photo.data.attributes.formats && photo.data.attributes.formats.small) {
|
||||
return photo.data.attributes.formats.small
|
||||
}
|
||||
|
||||
return photo.data.attributes
|
||||
}
|
||||
|
||||
return (
|
||||
<HeadLayout
|
||||
imageUrl={formatKouveti() ? formatKouveti().url : null}
|
||||
imageWidth={formatKouveti() ? formatKouveti().width : null}
|
||||
imageHeight={formatKouveti() ? formatKouveti().height : null}
|
||||
imageMime={formatKouveti() ? formatKouveti().mime : null}
|
||||
title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={3} slug={`awtis/${anAwtis.attributes.slug}`}
|
||||
>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||
<AwtisDetay anAwtis={anAwtis.attributes} />
|
||||
</Box>
|
||||
<Footer />
|
||||
</HeadLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps({query}) {
|
||||
const {slug} = query
|
||||
let anAwtis
|
||||
let error404
|
||||
let errorCode
|
||||
let errorMessage
|
||||
|
||||
try {
|
||||
anAwtis = await jwennAwtisEpiSlug(slug)
|
||||
} catch (error) {
|
||||
errorMessage = error.message
|
||||
errorCode = true
|
||||
}
|
||||
|
||||
if (!anAwtis) {
|
||||
error404 = true
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
error404: error404 || null,
|
||||
errorCode: errorCode || null,
|
||||
errorMessage: errorMessage || null,
|
||||
anAwtis: anAwtis || null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SlugAwtis.defaultProps = {
|
||||
anAwtis: null,
|
||||
error404: null,
|
||||
errorCode: null,
|
||||
errorMessage: null,
|
||||
}
|
||||
|
||||
SlugAwtis.propTypes = {
|
||||
error404: PropTypes.bool,
|
||||
errorCode: PropTypes.bool,
|
||||
errorMessage: PropTypes.string,
|
||||
anAwtis: PropTypes.object
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import {Box, Container, Grid} from '@mui/material'
|
||||
|
||||
import {jwennAwtisPajinasyon} from '../../lib/oki-api'
|
||||
|
||||
import ChecheAwtis from '../../components/awtis/cheche-awtis'
|
||||
import AwtisKat from '../../components/awtis/awtis-kat'
|
||||
import Pajinasyon from '../../components/awtis/pajinasyon'
|
||||
import HeadLayout from '../../components/head-layout'
|
||||
import Footer from '../../components/footer'
|
||||
|
||||
import Custom404 from '../404'
|
||||
import Custom500 from '../500'
|
||||
|
||||
export default function Awtis({errorCode, error404, errorMessage, pajTotal, awtisPouChakPaj, paj}) {
|
||||
if (error404) {
|
||||
return <Custom404 statusCode={error404} />
|
||||
}
|
||||
|
||||
if (errorCode) {
|
||||
console.log('⚠️ error', errorMessage)
|
||||
return <Custom500 statusCode={errorCode} />
|
||||
}
|
||||
|
||||
return (
|
||||
<HeadLayout title='Awtis - Liste des artistes' summary='Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.' tab={3} slug='awtis'>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||
<Pajinasyon pajTotal={pajTotal} paj={paj} />
|
||||
<ChecheAwtis />
|
||||
<Container sx={{marginBottom: 5, flexGrow: 100}}>
|
||||
<Grid container spacing={{xs: 2, md: 3}}>
|
||||
{awtisPouChakPaj.map(artiste => <AwtisKat key={artiste.id} artiste={artiste.attributes} />)}
|
||||
</Grid>
|
||||
</Container>
|
||||
<Footer />
|
||||
</Box>
|
||||
</HeadLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps({query}) {
|
||||
const {paj} = query
|
||||
let error404
|
||||
let errorCode
|
||||
let errorMessage
|
||||
let awtisPouChakPaj
|
||||
|
||||
const pajParsed = Array.isArray(paj) ? Number.parseInt(paj[1], 10) : Number.parseInt(paj, 10)
|
||||
|
||||
try {
|
||||
awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
|
||||
} catch (error) {
|
||||
errorMessage = error.message
|
||||
errorCode = true
|
||||
}
|
||||
|
||||
const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
|
||||
|
||||
if (pajParsed > pajTotal || pajParsed < 1) {
|
||||
error404 = true
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
error404: error404 || null,
|
||||
errorCode: errorCode || null,
|
||||
errorMessage: errorMessage || null,
|
||||
pajTotal,
|
||||
awtisPouChakPaj: awtisPouChakPaj.data,
|
||||
paj: pajParsed
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Awtis.defaultProps = {
|
||||
error404: null,
|
||||
errorCode: null,
|
||||
errorMessage: null,
|
||||
}
|
||||
|
||||
Awtis.propTypes = {
|
||||
error404: PropTypes.bool,
|
||||
errorCode: PropTypes.bool,
|
||||
errorMessage: PropTypes.string,
|
||||
pajTotal: PropTypes.number.isRequired,
|
||||
awtisPouChakPaj: PropTypes.array.isRequired,
|
||||
paj: PropTypes.number.isRequired
|
||||
}
|
||||
Reference in New Issue
Block a user