components/head-layout.js

import PropTypes from 'prop-types'
import Head from 'next/head'

import Navigasyon from './navigasyon'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'

export default function HeadLayout({
  children,
  imageUrl,
  imageWidth,
  imageHeight,
  imageMime,
  title,
  tab,
  slug
}) {
  return (
    <div>
      <Head>
        <title>#OKi | {title ? title : 'Organisation KA Internationale'}</title>
        <link rel='canonical' href={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <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' />
        <meta name='application-name' content='#OKi | Organisation KA Internationale' />
        <meta name='twitter:card' content='summary' />
        <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <meta name='twitter:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
        <meta name='twitter:description' content='Organisation KA Internationale. Musiques et actualités.' />
        <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-192x192.png`}`} />
        <meta name='twitter:creator' content='@OrganisationKA' />
        <meta name='twitter:site' content='@OrganisationKA' />
        <meta name='theme-color' content='#303030' />
        <meta name='apple-mobile-web-app-status-bar' content='#303030' />
        <meta charSet='utf-8' />
        <meta name='description' content='#OKi (Organisation KA Internationale) a pour but de promouvoir les langues et les productions afro-diasporiques. Nous traitons de l’actualité via #OKi Nouvèl' />
        <meta name='author' content='#OKi' />
        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
        <meta property='og:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <meta property='og:type' content='website' />
        <meta property='og:site_name' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
        <meta property='og:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
        <meta property='og:description' content='#OKi (Organisation KA Internationale) a pour but de promouvoir les langues et les productions afro-diasporiques. Nous traitons de l’actualité via #OKi Nouvèl' />
        <meta property='og:locale' content='fr_FR' />
        <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-72x72.png`}`} />
        <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-72x72.png`}`} />
        <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
        <meta property='og:image:width' content={imageWidth ? imageWidth : '72'} />
        <meta property='og:image:height' content={imageHeight ? imageHeight : '72'} />
        <meta property='og:image:alt' content={`${title && imageUrl ? title : '#OKi Logo'} | Organisation KA Internationale`} />
      </Head>
      <Navigasyon selectedTab={tab} />
      {children}
    </div>
  )
}

HeadLayout.propTypes = {
  children: PropTypes.node.isRequired,
  imageUrl: PropTypes.string,
  imageWidth: PropTypes.number,
  imageHeight: PropTypes.number,
  imageMime: PropTypes.string,
  title: PropTypes.string,
  tab: PropTypes.number.isRequired,
  slug: PropTypes.string
}

HeadLayout.defaultProps = {
  imageUrl: null,
  imageWidth: null,
  imageHeight: null,
  imageMime: null,
  title: null,
  slug: null
}
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								import PropTypes from 'prop-types'
 								import Head from 'next/head'
 								import Navigasyon from './navigasyon'
-											Edit meta infos
										
										
											2020-12-24 13:40:04 +01:00
+								const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
-											Add image thumbnail teks to head
										
										
											2021-05-28 18:29:15 +02:00
+								const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
-											Edit meta infos
										
										
											2020-12-24 13:40:04 +01:00
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								export default function HeadLayout({
 								  children,
-											Add image thumbnail teks to head
										
										
											2021-05-28 18:29:15 +02:00
+								  imageUrl,
 								  imageWidth,
 								  imageHeight,
-											Add mime to teks image
										
										
											2021-05-28 20:15:26 +02:00
+								  imageMime,
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								  title,
-											Add slug to HeadLayout
										
										
											2020-12-24 13:39:07 +01:00
+								  tab,
 								  slug
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								}) {
 								  return (
 								    <div>
 								      <Head>
-											Edit meta title
										
										
											2021-03-07 15:46:30 +01:00
+								        <title>#OKi | {title ? title : 'Organisation KA Internationale'}</title>
-											Edit meta infos
										
										
											2020-12-24 13:40:04 +01:00
+								        <link rel='canonical' href={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
-											Include manifest to head
										
										
											2020-12-23 00:08:43 +01:00
+								        <link rel='manifest' href='/manifest.json' />
-											Change image & favicon
										
										
											2020-12-24 14:01:15 +01:00
+								        <link rel='icon' type='image/x-icon' sizes='128x128' href='/favicon.ico' />
 								        <link rel='apple-touch-icon' href='/favicon.ico' />
-											Fix meta title
										
										
											2021-03-07 15:26:41 +01:00
+								        <meta name='application-name' content='#OKi | Organisation KA Internationale' />
-											Add new logo size & twitter card to head
										
										
											2020-12-23 23:39:20 +01:00
+								        <meta name='twitter:card' content='summary' />
-											Edit meta infos
										
										
											2020-12-24 13:40:04 +01:00
+								        <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
-											Fix meta title
										
										
											2021-03-07 15:26:41 +01:00
+								        <meta name='twitter:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
-											Add more description
										
										
											2022-01-27 23:18:54 +04:00
+								        <meta name='twitter:description' content='Organisation KA Internationale. Musiques et actualités.' />
-											Rename logo files
										
										
											2022-01-26 18:45:43 +04:00
+								        <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-192x192.png`}`} />
-											Change Twitter link
										
										
											2021-09-28 23:16:54 +02:00
+								        <meta name='twitter:creator' content='@OrganisationKA' />
 								        <meta name='twitter:site' content='@OrganisationKA' />
-											Include manifest to head
										
										
											2020-12-23 00:08:43 +01:00
+								        <meta name='theme-color' content='#303030' />
 								        <meta name='apple-mobile-web-app-status-bar' content='#303030' />
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								        <meta charSet='utf-8' />
-											Add more description
										
										
											2022-01-27 23:18:54 +04:00
+								        <meta name='description' content='#OKi (Organisation KA Internationale) a pour but de promouvoir les langues et les productions afro-diasporiques. Nous traitons de l’actualité via #OKi Nouvèl' />
-											Change author site
										
										
											2021-05-28 18:38:54 +02:00
+								        <meta name='author' content='#OKi' />
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
-											Edit meta infos
										
										
											2020-12-24 13:40:04 +01:00
+								        <meta property='og:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								        <meta property='og:type' content='website' />
-											Fix meta title
										
										
											2021-03-07 15:26:41 +01:00
+								        <meta property='og:site_name' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
 								        <meta property='og:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
-											Add more description
										
										
											2022-01-27 23:18:54 +04:00
+								        <meta property='og:description' content='#OKi (Organisation KA Internationale) a pour but de promouvoir les langues et les productions afro-diasporiques. Nous traitons de l’actualité via #OKi Nouvèl' />
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								        <meta property='og:locale' content='fr_FR' />
-											Rename logo files
										
										
											2022-01-26 18:45:43 +04:00
+								        <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-72x72.png`}`} />
 								        <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-72x72.png`}`} />
-											Add mime to teks image
										
										
											2021-05-28 20:15:26 +02:00
+								        <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
-											Add image thumbnail teks to head
										
										
											2021-05-28 18:29:15 +02:00
+								        <meta property='og:image:width' content={imageWidth ? imageWidth : '72'} />
 								        <meta property='og:image:height' content={imageHeight ? imageHeight : '72'} />
 								        <meta property='og:image:alt' content={`${title && imageUrl ? title : '#OKi Logo'} | Organisation KA Internationale`} />
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								      </Head>
 								      <Navigasyon selectedTab={tab} />
 								      {children}
 								    </div>
 								  )
 								}
 								HeadLayout.propTypes = {
 								  children: PropTypes.node.isRequired,
-											Add image thumbnail teks to head
										
										
											2021-05-28 18:29:15 +02:00
+								  imageUrl: PropTypes.string,
 								  imageWidth: PropTypes.number,
 								  imageHeight: PropTypes.number,
-											Add mime to teks image
										
										
											2021-05-28 20:15:26 +02:00
+								  imageMime: PropTypes.string,
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								  title: PropTypes.string,
-											Add slug to HeadLayout
										
										
											2020-12-24 13:39:07 +01:00
+								  tab: PropTypes.number.isRequired,
 								  slug: PropTypes.string
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								}
 								HeadLayout.defaultProps = {
-											Add image thumbnail teks to head
										
										
											2021-05-28 18:29:15 +02:00
+								  imageUrl: null,
 								  imageWidth: null,
 								  imageHeight: null,
-											Add mime to teks image
										
										
											2021-05-28 20:15:26 +02:00
+								  imageMime: null,
-											Add slug to HeadLayout
										
										
											2020-12-24 13:39:07 +01:00
+								  title: null,
 								  slug: null
-											Add & use HeadLayout
										
										
											2020-12-15 23:46:05 +01:00
+								}