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_ROOT || 'http://localhost:1337'

export default function HeadLayout({
  children,
  imageUrl,
  imageWidth,
  imageHeight,
  imageMime,
  title,
  tab,
  slug,
  summary
}) {
  return (
    <div>
      <Head prefix='website: https://ogp.me/ns/website#'>
        <title>{`${title ? `OKI | ${title}` : 'OKI | 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='monetization' content='$ilp.uphold.com/q7MFmYWNpwnr' />
        <meta name='application-name' content='OKI | Organisation KA Internationale' />
        <meta name='twitter:card' content='summary_large_image' />
        <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <meta name='twitter:title' content={`${title ? title : 'OKI | Organisation KA Internationale'}`} />
        <meta name='twitter:description' content={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
        <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/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={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
        <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={`${title ? title : 'OKI | Organisation KA Internationale'}`} />
        <meta property='og:title' content={`${title ? title : 'OKI | Organisation KA Internationale. Paroles, traductions et Fédiverse'}`} />
        <meta property='og:description' content={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
        <meta property='og:locale' content='fr_FR' />
        <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
        <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
        <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
        <meta property='og:image:width' content={imageWidth ? imageWidth : '512'} />
        <meta property='og:image:height' content={imageHeight ? imageHeight : '512'} />
        <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,
  summary: PropTypes.string
}

HeadLayout.defaultProps = {
  imageUrl: null,
  imageWidth: null,
  imageHeight: null,
  imageMime: null,
  title: null,
  slug: null,
  summary: 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'`
Fix image url 2022-05-20 04:40:17 +04:00			`const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT \|\| '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,`
Add summary to descriptions 2022-11-11 20:01:42 +04:00			`slug,`
			`summary`
Add & use HeadLayout 2020-12-15 23:46:05 +01:00			`}) {`
			`return (`
			`<div>`
Edit open graph 2023-03-04 15:45:11 +04:00			`<Head prefix='website: https://ogp.me/ns/website#'>`
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<title>{`${title ? `OKI \| ${title}` : 'OKI \| 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 favicon 2023-03-20 22:57:10 +04:00			`<link rel='icon' type='image/x-icon' sizes='128x128' href='/favicon.ico' />`
			`<link rel='apple-touch-icon' href='/favicon.ico' />`
Fix lint error 2022-06-12 20:02:36 +04:00			`<meta name='monetization' content='$ilp.uphold.com/q7MFmYWNpwnr' />`
Change OKI name and icons 2023-03-20 20:12:20 +04:00			`<meta name='application-name' content='OKI \| Organisation KA Internationale' />`
Change twitter card to summary_large_image 2022-11-11 20:56:07 +04:00			`<meta name='twitter:card' content='summary_large_image' />`
Edit meta infos 2020-12-24 13:40:04 +01:00			<meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<meta name='twitter:title' content={`${title ? title : 'OKI \| Organisation KA Internationale'}`} />
Add summary to descriptions 2022-11-11 20:01:42 +04:00			<meta name='twitter:description' content={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/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 summary to descriptions 2022-11-11 20:01:42 +04:00			<meta name='description' content={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
Change OKI name and icons 2023-03-20 20:12:20 +04: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' />`
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<meta property='og:site_name' content={`${title ? title : 'OKI \| Organisation KA Internationale'}`} />
			<meta property='og:title' content={`${title ? title : 'OKI \| Organisation KA Internationale. Paroles, traductions et Fédiverse'}`} />
Add summary to descriptions 2022-11-11 20:01:42 +04:00			<meta property='og:description' content={`${summary ? summary : 'Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net'}`} />
Add & use HeadLayout 2020-12-15 23:46:05 +01:00			`<meta property='og:locale' content='fr_FR' />`
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
			<meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
Add mime to teks image 2021-05-28 20:15:26 +02:00			`<meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />`
Change meta content 2022-01-28 10:28:53 +04:00			`<meta property='og:image:width' content={imageWidth ? imageWidth : '512'} />`
			`<meta property='og:image:height' content={imageHeight ? imageHeight : '512'} />`
Change OKI name and icons 2023-03-20 20:12:20 +04:00			<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,`
Add summary to descriptions 2022-11-11 20:01:42 +04:00			`slug: PropTypes.string,`
			`summary: 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,`
Add summary to descriptions 2022-11-11 20:01:42 +04:00			`slug: null,`
			`summary: null`
Add & use HeadLayout 2020-12-15 23:46:05 +01:00			`}`