Replace index pages by app folder
This commit is contained in:
@@ -0,0 +1,74 @@
|
|||||||
|
import Footer from '../components/footer'
|
||||||
|
import Navigasyon from '../components/navigasyon'
|
||||||
|
import AuthProvider from './auth-provider'
|
||||||
|
import ThemeRegistry from './theme-registy'
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
metadataBase: new URL('https://oki.re'),
|
||||||
|
manifest: '/manifest.json',
|
||||||
|
title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||||
|
description: 'Organisation KA Internationale a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
|
||||||
|
author: 'OKI',
|
||||||
|
category: 'music',
|
||||||
|
creator: 'OKI',
|
||||||
|
publisher: 'OKI',
|
||||||
|
applicationName: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||||
|
openGraph: {
|
||||||
|
title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
|
||||||
|
description: 'Organisation KA Internationale a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
|
||||||
|
url: 'https://oki.re',
|
||||||
|
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: 'Organisation KA Internationale a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
|
||||||
|
creator: '@OrganisationKA',
|
||||||
|
images: {
|
||||||
|
url: 'https://oki.re/logo-512x512.png',
|
||||||
|
alt: 'OKI Logo',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const jsonLd = {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'Organization',
|
||||||
|
url: 'https://oki.re',
|
||||||
|
email: 'kontak@oki.re',
|
||||||
|
keywords: ['OKI', 'Organisation KA Internationale', 'Paroles', 'Pawol', 'Medukam', 'Wanni Wannan'],
|
||||||
|
legalName: 'Organisation KA Internationale',
|
||||||
|
location: 'Île de La Réunion'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function RootLayout({children, Session}) {
|
||||||
|
return (
|
||||||
|
<html lang='fr'>
|
||||||
|
<body>
|
||||||
|
<AuthProvider session={Session}>
|
||||||
|
<ThemeRegistry>
|
||||||
|
<Navigasyon />
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</ThemeRegistry>
|
||||||
|
</AuthProvider>
|
||||||
|
<section>
|
||||||
|
<script
|
||||||
|
type='application/ld+json'
|
||||||
|
dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
+32
@@ -0,0 +1,32 @@
|
|||||||
|
import Box from '@mui/material/Box'
|
||||||
|
import Container from '@mui/material/Container'
|
||||||
|
import {notFound} from 'next/navigation'
|
||||||
|
import {jwennStats} from '../lib/oki-api'
|
||||||
|
|
||||||
|
import Statistik from '../components/akey/statistik'
|
||||||
|
import Akey from '../components/akey'
|
||||||
|
|
||||||
|
import okiLogo from '../public/logo-512x512.png'
|
||||||
|
|
||||||
|
async function jwennDone() {
|
||||||
|
const statistik = await jwennStats()
|
||||||
|
|
||||||
|
if (!statistik) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
return statistik
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function Page() {
|
||||||
|
const statistik = await jwennDone()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||||
|
<Akey logo={okiLogo} />
|
||||||
|
<Container sx={{flexGrow: 100}}>
|
||||||
|
<Statistik statistik={statistik} />
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
-164
@@ -1,164 +0,0 @@
|
|||||||
import {useEffect, useMemo, useState} from 'react'
|
|
||||||
import {useRouter} from 'next/router'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import {createTheme, ThemeProvider} from '@mui/material/styles'
|
|
||||||
import CssBaseline from '@mui/material/CssBaseline'
|
|
||||||
import {SessionProvider, useSession} from 'next-auth/react'
|
|
||||||
import {CacheProvider} from '@emotion/react'
|
|
||||||
import PlausibleProvider from 'next-plausible'
|
|
||||||
import {grey, green, red} from '@mui/material/colors'
|
|
||||||
import NProgress from 'nprogress'
|
|
||||||
import createEmotionCache from '../lib/create-emotion-cache'
|
|
||||||
import {ParolesListContextProvider} from '../contexts/paroles-list'
|
|
||||||
|
|
||||||
import '@fontsource/roboto/300.css'
|
|
||||||
import '@fontsource/roboto/400.css'
|
|
||||||
import '@fontsource/roboto/500.css'
|
|
||||||
import '@fontsource/roboto/700.css'
|
|
||||||
import '../styles/nprogress.css'
|
|
||||||
|
|
||||||
import SwitchTheme from '../components/switch-theme'
|
|
||||||
|
|
||||||
const getDesignTokens = mode => ({
|
|
||||||
palette: {
|
|
||||||
mode,
|
|
||||||
...(mode === 'light'
|
|
||||||
? {
|
|
||||||
// Palette values for light mode
|
|
||||||
primary: green,
|
|
||||||
secondary: red,
|
|
||||||
divider: green[200],
|
|
||||||
info: {
|
|
||||||
main: grey[900]
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
primary: grey[900],
|
|
||||||
secondary: grey[800],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
// Palette values for dark mode
|
|
||||||
primary: green,
|
|
||||||
secondary: red,
|
|
||||||
info: {
|
|
||||||
main: '#fff'
|
|
||||||
},
|
|
||||||
divider: green[700],
|
|
||||||
background: {
|
|
||||||
default: '#082211',
|
|
||||||
paper: '#082211',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
primary: '#fff',
|
|
||||||
secondary: grey[100],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const clientSideEmotionCache = createEmotionCache()
|
|
||||||
|
|
||||||
export default function MyApp(props) {
|
|
||||||
const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
|
|
||||||
const [mode, setMode] = useState('light')
|
|
||||||
const [switchFixed, setSwitchFixed] = useState(false)
|
|
||||||
const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleStart = () => {
|
|
||||||
NProgress.start()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleStop = () => {
|
|
||||||
NProgress.done()
|
|
||||||
}
|
|
||||||
|
|
||||||
router.events.on('routeChangeStart', handleStart)
|
|
||||||
router.events.on('routeChangeComplete', handleStop)
|
|
||||||
router.events.on('routeChangeError', handleStop)
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
router.events.off('routeChangeStart', handleStart)
|
|
||||||
router.events.off('routeChangeComplete', handleStop)
|
|
||||||
router.events.off('routeChangeError', handleStop)
|
|
||||||
}
|
|
||||||
}, [router])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.router.pathname.slice(0, 8) === '/paroles') {
|
|
||||||
setSwitchFixed(true)
|
|
||||||
} else {
|
|
||||||
setSwitchFixed(false)
|
|
||||||
}
|
|
||||||
}, [props])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const oldLocalMode = localStorage.getItem('oki-dark')
|
|
||||||
const localMode = localStorage.getItem('oki-theme')
|
|
||||||
if (localMode === 'dark' || (oldLocalMode && oldLocalMode === 'true')) {
|
|
||||||
setMode('dark')
|
|
||||||
} else {
|
|
||||||
setMode('light')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (localMode && oldLocalMode) {
|
|
||||||
localStorage.removeItem('oki-dark')
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PlausibleProvider domain='oki.re'>
|
|
||||||
<CacheProvider value={emotionCache}>
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<CssBaseline />
|
|
||||||
<ParolesListContextProvider>
|
|
||||||
<SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
|
|
||||||
<SwitchTheme switchFixed={switchFixed} mode={mode} setMode={setMode} />
|
|
||||||
{Component.auth ? (
|
|
||||||
<Auth><Component {...pageProps} /></Auth>
|
|
||||||
) : (
|
|
||||||
<Component {...pageProps} />
|
|
||||||
)}
|
|
||||||
</SessionProvider>
|
|
||||||
</ParolesListContextProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
</CacheProvider>
|
|
||||||
</PlausibleProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Auth({children}) {
|
|
||||||
const {data: session, status} = useSession()
|
|
||||||
const loading = status === 'loading'
|
|
||||||
const isUser = Boolean(session?.user)
|
|
||||||
const router = useRouter()
|
|
||||||
useEffect(() => {
|
|
||||||
if (loading) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isUser) {
|
|
||||||
router.push('/soumet')
|
|
||||||
}
|
|
||||||
}, [isUser, loading, router])
|
|
||||||
|
|
||||||
if (isUser) {
|
|
||||||
return children
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>Loading...</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
MyApp.propTypes = {
|
|
||||||
Component: PropTypes.elementType.isRequired,
|
|
||||||
pageProps: PropTypes.object.isRequired,
|
|
||||||
emotionCache: PropTypes.object,
|
|
||||||
router: PropTypes.object.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
Auth.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import Document, {
|
|
||||||
Html, Head, Main, NextScript
|
|
||||||
} from 'next/document'
|
|
||||||
|
|
||||||
import createEmotionServer from '@emotion/server/create-instance'
|
|
||||||
import createEmotionCache from '../lib/create-emotion-cache'
|
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Html lang='fr' prefix='og: https://ogp.me/ns#'>
|
|
||||||
<Head>
|
|
||||||
<link rel='manifest' href='/manifest.json' />
|
|
||||||
<link rel='icon' type='image/x-icon' sizes='128x128' href='/favicon.ico' />
|
|
||||||
<link rel='apple-touch-icon' href='/favicon.ico' />
|
|
||||||
{this.props.emotionStyleTags}
|
|
||||||
<meta name='application-name' content='OKI | Organisation KA Internationale' />
|
|
||||||
<meta name='theme-color' content='#303030' />
|
|
||||||
<meta name='apple-mobile-web-app-status-bar' content='#303030' />
|
|
||||||
<meta charSet='utf-8' />
|
|
||||||
</Head>
|
|
||||||
<body>
|
|
||||||
<Main />
|
|
||||||
<NextScript />
|
|
||||||
</body>
|
|
||||||
</Html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
MyDocument.getInitialProps = async ctx => {
|
|
||||||
const originalRenderPage = ctx.renderPage
|
|
||||||
const cache = createEmotionCache()
|
|
||||||
const {extractCriticalToChunks} = createEmotionServer(cache)
|
|
||||||
|
|
||||||
ctx.renderPage = () =>
|
|
||||||
originalRenderPage({
|
|
||||||
enhanceApp: App =>
|
|
||||||
function EnhanceApp(props) { // eslint-disable-line react/function-component-definition
|
|
||||||
return <App emotionCache={cache} {...props} />
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const initialProps = await Document.getInitialProps(ctx)
|
|
||||||
const emotionStyles = extractCriticalToChunks(initialProps.html)
|
|
||||||
const emotionStyleTags = emotionStyles.styles.map(style => (
|
|
||||||
<style
|
|
||||||
key={style.key}
|
|
||||||
data-emotion={`${style.key} ${style.ids.join(' ')}`}
|
|
||||||
dangerouslySetInnerHTML={{__html: style.css}}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
|
|
||||||
return {
|
|
||||||
...initialProps,
|
|
||||||
emotionStyleTags
|
|
||||||
}
|
|
||||||
}
|
|
||||||
-106
@@ -1,106 +0,0 @@
|
|||||||
import {useRouter} from 'next/router'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import Container from '@mui/material/Container'
|
|
||||||
import Typography from '@mui/material/Typography'
|
|
||||||
import Box from '@mui/material/Box'
|
|
||||||
import Grid from '@mui/material/Grid'
|
|
||||||
import Button from '@mui/material/Button'
|
|
||||||
|
|
||||||
import Image from 'next/image'
|
|
||||||
import HeadLayout from '../components/head-layout'
|
|
||||||
import Footer from '../components/footer'
|
|
||||||
import {jwennStats} from '../lib/oki-api'
|
|
||||||
import okiLogo from '../public/logo-72x72.png'
|
|
||||||
|
|
||||||
import KatKayLa from '../components/kat-kay-la'
|
|
||||||
|
|
||||||
import Custom500 from './500'
|
|
||||||
|
|
||||||
export default function Home({errorCode, errorMessage, stats}) {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
if (errorCode) {
|
|
||||||
console.log('⚠️ error', errorMessage)
|
|
||||||
return <Custom500 statusCode={errorCode} />
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HeadLayout tab={0}>
|
|
||||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
|
||||||
<Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 3}}>
|
|
||||||
<Container align='center'>
|
|
||||||
<Box sx={{display: 'flex', alignItems: 'cetner', justifyContent: 'center'}}>
|
|
||||||
|
|
||||||
<Typography sx={{fontWeight: 'bold', mr: 1}} variant='h6' component='h1'>
|
|
||||||
OKI
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Image
|
|
||||||
width={32}
|
|
||||||
height={32}
|
|
||||||
atl='OKI logo'
|
|
||||||
src={okiLogo}
|
|
||||||
placeholder='blur'
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
|
|
||||||
Organisation KA Internationale
|
|
||||||
</Typography>
|
|
||||||
<Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
|
|
||||||
Paroles et traductions
|
|
||||||
</Typography>
|
|
||||||
</Container>
|
|
||||||
<Container sx={{marginTop: 2}}>
|
|
||||||
<Grid container justifyContent='center' spacing={2}>
|
|
||||||
<Grid item>
|
|
||||||
<Button variant='outlined' onClick={() => router.push('/soumet')}>
|
|
||||||
<strong>Soumettre des paroles</strong>
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
</Box>
|
|
||||||
<Container sx={{flexGrow: 100}}>
|
|
||||||
<Grid container spacing={2} sx={{marginBottom: 3}}>
|
|
||||||
<KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
|
|
||||||
<KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
<Footer />
|
|
||||||
</Box>
|
|
||||||
</HeadLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getServerSideProps() {
|
|
||||||
let stats
|
|
||||||
let errorCode
|
|
||||||
let errorMessage
|
|
||||||
|
|
||||||
try {
|
|
||||||
stats = await jwennStats()
|
|
||||||
} catch (error) {
|
|
||||||
errorMessage = error.message
|
|
||||||
errorCode = true
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
errorCode: errorCode || null,
|
|
||||||
errorMessage: errorMessage || null,
|
|
||||||
stats: stats || null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Home.defaultProps = {
|
|
||||||
errorCode: null,
|
|
||||||
errorMessage: null,
|
|
||||||
stats: null
|
|
||||||
}
|
|
||||||
|
|
||||||
Home.propTypes = {
|
|
||||||
errorCode: PropTypes.bool,
|
|
||||||
errorMessage: PropTypes.string,
|
|
||||||
stats: PropTypes.object
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user