Move awtis page to app directory

app/awtis/[slug]/page.js

@@ -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>
+    </>
+  )
+}

app/awtis/layout.js

@@ -0,0 +1,7 @@
+export default async function AwtisLayout({children}) {
+  return (
+    <section>
+      {children}
+    </section>
+  )
+}

app/awtis/page.js

@@ -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>
+  )
+}

pages/awtis/[slug].js

@@ -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
-}

pages/awtis/index.js

@@ -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
-}