Add summary to descriptions

components/head-layout.js

@@ -14,7 +14,8 @@ export default function HeadLayout({
   imageMime,
   title,
   tab,
-  slug
+  slug,
+  summary
 }) {
   return (
     <div>
@@ -29,21 +30,21 @@ export default function HeadLayout({
         <meta name='twitter:card' content='summary' />
         <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='Organisation KA Internationale. Paroles, traductions et Fédiverse' />
+        <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}/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='Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net' />
+        <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='Organisation KA Internationale a pour but de promouvoir les langues et les productions afro-diasporiques. Fédiverse ➡️ o-k-i.net' />
+        <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}/oki-logo-512x512.png`}`} />
         <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/oki-logo-512x512.png`}`} />
@@ -66,7 +67,8 @@ HeadLayout.propTypes = {
   imageMime: PropTypes.string,
   title: PropTypes.string,
   tab: PropTypes.number.isRequired,
-  slug: PropTypes.string
+  slug: PropTypes.string,
+  summary: PropTypes.string
 }
 
 HeadLayout.defaultProps = {
@@ -75,5 +77,6 @@ HeadLayout.defaultProps = {
   imageHeight: null,
   imageMime: null,
   title: null,
-  slug: null
+  slug: null,
+  summary: null
 }

pages/paroles/[slug].js

@@ -19,6 +19,8 @@ export default function SlugTeks({hasError, errorMessage, parole, slug}) {
     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 = () => {
@@ -48,6 +50,7 @@ export default function SlugTeks({hasError, errorMessage, parole, slug}) {
       imageHeight={formatKouveti() ? formatKouveti().height : null}
       imageMime={formatKouveti() ? formatKouveti().mime : null}
       title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
+      summary={summary}
     >
       <TeksDrawer parole={parole.attributes} paroleId={parole.id} slug={slug} />
     </HeadLayout>