Move paroles pages to app directory
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
import {notFound} from 'next/navigation'
|
||||
import Box from '@mui/material/Box'
|
||||
|
||||
import {jwennTeksEpiSlug} from '../../../lib/oki-api'
|
||||
import AnTeks from '../../../components/teks/an-teks'
|
||||
import {getAlias} from '../../../lib/utils/format'
|
||||
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'
|
||||
const drawerWidth = 340
|
||||
|
||||
async function jwennAnTeks(slug) {
|
||||
const teks = await jwennTeksEpiSlug(slug)
|
||||
|
||||
if (!teks) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return teks
|
||||
}
|
||||
|
||||
export async function generateMetadata({params}) {
|
||||
const {slug} = params
|
||||
|
||||
const anTeks = await jwennAnTeks(slug)
|
||||
|
||||
const awtis = anTeks.attributes.artistes.length === 1 ? anTeks.attributes.artistes[0].data.attributes.alias : getAlias(anTeks.attributes.artistes, anTeks.attributes.prioriteArtistes)
|
||||
const title = `OKI | ${awtis} - ${anTeks.attributes.titre} | Paroles et Traductions`
|
||||
const description = `Paroles de « ${anTeks?.attributes?.titre} » : ${anTeks?.attributes?.transcription.slice(0, 100)}...`
|
||||
const url = `${siteUrl}/${slug}`
|
||||
|
||||
const {couverture} = anTeks.attributes
|
||||
const kuvetiFormat = formatKuveti(couverture)
|
||||
|
||||
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: `Couverture ${title}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function AnPawolPaj({params}) {
|
||||
const {slug} = params
|
||||
|
||||
const anTeks = await jwennAnTeks(slug)
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'http://schema.org',
|
||||
'@type': 'MusicRecording',
|
||||
name: anTeks.attributes.titre,
|
||||
url: `${siteUrl}/paroles/${slug}`,
|
||||
byArtist: anTeks.attributes.artistes.data.map(({attributes}) => ({
|
||||
'@type': 'Person',
|
||||
name: attributes.alias,
|
||||
url: `${siteUrl}/awtis/${attributes.slug}`
|
||||
})),
|
||||
datePublished: anTeks.attributes?.annee
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<Box
|
||||
component='main'
|
||||
sx={{flexGrow: 1, p: 2, mt: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
|
||||
>
|
||||
<AnTeks parole={anTeks.attributes} paroleId={anTeks.id} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<section>
|
||||
<script
|
||||
type='application/ld+json'
|
||||
dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import {Suspense} from 'react'
|
||||
import {notFound} from 'next/navigation'
|
||||
import {jwennTeks} from '../../lib/oki-api'
|
||||
import TeksDrawer from '../../components/teks/teks-drawer'
|
||||
import Loading from './loading'
|
||||
|
||||
export const metadata = {
|
||||
title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||
description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
|
||||
openGraph: {
|
||||
title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||
description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
|
||||
url: 'https://oki.re/paroles',
|
||||
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 | Organisation KA Internationale. Paroles et traductions.',
|
||||
description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
|
||||
creator: '@OrganisationKA',
|
||||
images: {
|
||||
url: 'https://oki.re/logo-512x512.png',
|
||||
alt: 'OKI Logo',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
async function jwennDotDone() {
|
||||
const teks = await jwennTeks()
|
||||
|
||||
if (!teks) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return teks
|
||||
}
|
||||
|
||||
export default async function PawolLayout({children}) {
|
||||
const teks = await jwennDotDone()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<TeksDrawer paroles={teks} />
|
||||
</Suspense>
|
||||
<section>
|
||||
{children}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import Skeleton from '@mui/material/Skeleton'
|
||||
import Box from '@mui/material/Box'
|
||||
|
||||
const drawerWidth = 240
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<Box
|
||||
component='main'
|
||||
sx={{flexGrow: 1, p: 2, mt: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
|
||||
>
|
||||
<Skeleton variant='rectangular' width='100%' height='100%' />
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import Box from '@mui/material/Box'
|
||||
import {notFound} from 'next/navigation'
|
||||
|
||||
import {jwennDenyeTeks} from '../../lib/oki-api'
|
||||
import DenyeTeks from '../../components/teks/denye-teks'
|
||||
|
||||
const drawerWidth = 240
|
||||
|
||||
async function jwennDone() {
|
||||
const denyeTeks = await jwennDenyeTeks()
|
||||
|
||||
if (!denyeTeks) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return denyeTeks
|
||||
}
|
||||
|
||||
export default async function PawolPaj() {
|
||||
const denyeTeks = await jwennDone()
|
||||
|
||||
return (
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<Box
|
||||
component='main'
|
||||
sx={{flexGrow: 1, p: 2, mt: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
|
||||
>
|
||||
<DenyeTeks denyeTeks={denyeTeks} />
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import {getAlias} from '../../lib/utils/format'
|
||||
import {jwennTeksEpiSlug} from '../../lib/oki-api'
|
||||
|
||||
import HeadLayout from '../../components/head-layout'
|
||||
import TeksDrawer from '../../components/teks/teks-drawer'
|
||||
|
||||
import Custom500 from '../500'
|
||||
import Custom404 from '../404'
|
||||
|
||||
export default function SlugTeks({hasError, errorMessage, parole, slug}) {
|
||||
if (hasError) {
|
||||
console.log('⚠️ error :', errorMessage)
|
||||
return <Custom500 />
|
||||
}
|
||||
|
||||
if (!parole) {
|
||||
return <Custom404 />
|
||||
}
|
||||
|
||||
const summary = `Paroles de « ${parole?.attributes?.titre} » : ${parole?.attributes?.transcription.slice(0, 100)}...`
|
||||
|
||||
const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : getAlias(parole.attributes.artistes, parole.attributes.prioriteArtistes)
|
||||
const {couverture} = parole.attributes
|
||||
const formatKouveti = () => {
|
||||
if (!couverture?.data?.attributes) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.large) {
|
||||
return couverture.data.attributes.formats.large
|
||||
}
|
||||
|
||||
if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.medium) {
|
||||
return couverture.data.attributes.formats.medium
|
||||
}
|
||||
|
||||
if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.small) {
|
||||
return couverture.data.attributes.formats.small
|
||||
}
|
||||
|
||||
return couverture.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={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={2} slug={`paroles/${slug}`}
|
||||
summary={summary}
|
||||
>
|
||||
<TeksDrawer parole={parole.attributes} paroleId={parole.id} slug={slug} />
|
||||
</HeadLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps({query}) {
|
||||
const {slug} = query
|
||||
let paroles
|
||||
let parole
|
||||
let hasError
|
||||
let errorMessage
|
||||
|
||||
try {
|
||||
parole = await jwennTeksEpiSlug(slug)
|
||||
} catch (error) {
|
||||
errorMessage = error
|
||||
hasError = true
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
hasError: hasError || null,
|
||||
errorMessage: errorMessage ? errorMessage.message : null,
|
||||
paroles: paroles || null,
|
||||
parole: parole || null,
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SlugTeks.defaultProps = {
|
||||
hasError: null,
|
||||
errorMessage: null,
|
||||
parole: null
|
||||
}
|
||||
|
||||
SlugTeks.propTypes = {
|
||||
hasError: PropTypes.bool,
|
||||
errorMessage: PropTypes.string,
|
||||
parole: PropTypes.object,
|
||||
slug: PropTypes.string.isRequired,
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import {jwennDenyeTeks} from '../../lib/oki-api'
|
||||
|
||||
import HeadLayout from '../../components/head-layout'
|
||||
|
||||
import Custom500 from '../500'
|
||||
import TeksDrawer from '../../components/teks/teks-drawer'
|
||||
|
||||
export default function Teks({errorCode, errorMessage, denyeTeks}) {
|
||||
if (errorCode) {
|
||||
console.log('⚠️ error', errorMessage)
|
||||
return <Custom500 />
|
||||
}
|
||||
|
||||
return (
|
||||
<HeadLayout title='Paroles et Traductions' summary='Retrouvez les paroles et traductions de vos chansons préférées.' tab={2} slug='paroles'>
|
||||
<TeksDrawer denyeTeks={denyeTeks} />
|
||||
</HeadLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
let denyeTeks
|
||||
let hasError
|
||||
let errorMessage
|
||||
|
||||
try {
|
||||
denyeTeks = await jwennDenyeTeks()
|
||||
} catch (error) {
|
||||
errorMessage = error.message
|
||||
hasError = true
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
errorCode: hasError || null,
|
||||
errorMessage: errorMessage || null,
|
||||
denyeTeks: denyeTeks || null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Teks.defaultProps = {
|
||||
errorCode: null,
|
||||
errorMessage: null,
|
||||
denyeTeks: null
|
||||
}
|
||||
|
||||
Teks.propTypes = {
|
||||
errorCode: PropTypes.bool,
|
||||
errorMessage: PropTypes.string,
|
||||
denyeTeks: PropTypes.array
|
||||
}
|
||||
Reference in New Issue
Block a user