Add image thumbnail teks to head

components/head-layout.js

@@ -4,9 +4,13 @@ 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,
   title,
   tab,
   slug
@@ -24,7 +28,7 @@ export default function HeadLayout({
         <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' />
-        <meta name='twitter:image' content='https://o-k-i.net/logo-192x192.png' />
+        <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-192x192.png`}`} />
         <meta name='twitter:creator' content='@oki_972' />
         <meta name='twitter:site' content='@oki_972' />
         <meta name='theme-color' content='#303030' />
@@ -39,12 +43,12 @@ export default function HeadLayout({
         <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.' />
         <meta property='og:locale' content='fr_FR' />
-        <meta property='og:image' content='http://o-k-i.net/logo-72x72.png' />
+        <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-72x72.png`}`} />
-        <meta property='og:image:secure_url' content='https://o-k-i.net/logo-72x72.png' />
+        <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-72x72.png`}`} />
         <meta property='og:image:type' content='image/png' />
-        <meta property='og:image:width' content='72' />
+        <meta property='og:image:width' content={imageWidth ? imageWidth : '72'} />
-        <meta property='og:image:height' content='72' />
+        <meta property='og:image:height' content={imageHeight ? imageHeight : '72'} />
-        <meta property='og:image:alt' content='Logo #OKi | Organisation KA Internationale' />
+        <meta property='og:image:alt' content={`${title && imageUrl ? title : '#OKi Logo'} | Organisation KA Internationale`} />
       </Head>
       <Navigasyon selectedTab={tab} />
       {children}
@@ -54,12 +58,18 @@ export default function HeadLayout({
 
 HeadLayout.propTypes = {
   children: PropTypes.node.isRequired,
+  imageUrl: PropTypes.string,
+  imageWidth: PropTypes.number,
+  imageHeight: PropTypes.number,
   title: PropTypes.string,
   tab: PropTypes.number.isRequired,
   slug: PropTypes.string
 }
 
 HeadLayout.defaultProps = {
+  imageUrl: null,
+  imageWidth: null,
+  imageHeight: null,
   title: null,
   slug: null
 }

pages/teks/[slug].js

@@ -11,9 +11,15 @@ const jwennAwtis = awtis => {
 
 export default function SlugTeks({teks, anTeks, slug}) {
   const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
+  const {kouveti} = anTeks
 
   return (
-    <HeadLayout title={`${awtis} - ${anTeks.tit}`} tab={2} slug={`teks/${slug}`}>
+    <HeadLayout
+      imageWidth={kouveti ? kouveti.formats.thumbnail.width : null}
+      imageHeight={kouveti ? kouveti.formats.thumbnail.height : null}
+      imageUrl={kouveti ? kouveti.formats.thumbnail.url : null}
+      title={`${awtis} - ${anTeks.tit}`} tab={2} slug={`teks/${slug}`}
+    >
       <TeksDrawer teks={teks} anTeks={anTeks} />
     </HeadLayout>
   )