From 11c61c72501749beefc2b4312fd7e5287e733736 Mon Sep 17 00:00:00 2001
From: Walidoux <ma.walidkorchi@icloud.com>
Date: Thu, 24 Mar 2022 01:43:44 +0100
Subject: [PATCH] refactor(components/utils): improve next/head component with
 types

---
 components/Head.tsx | 81 +++++++++++++++++++++++++++++++++------------
 utils/config.ts     | 37 ++++++++++++++++++---
 2 files changed, 92 insertions(+), 26 deletions(-)

diff --git a/components/Head.tsx b/components/Head.tsx
index 94f76d5..f3611b5 100644
--- a/components/Head.tsx
+++ b/components/Head.tsx
@@ -1,40 +1,77 @@
 import NextHead from 'next/head'
 
-const Head: React.FC = () => {
-  const data = {
-    title: process.env.NEXT_PUBLIC_PROJECT_NAME,
-    description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION,
-    image: '/images/icons/64x64.png',
-    url: 'https://urlwebsite.fr/'
+import { projectConfig } from '@/utils/config'
+
+interface HeadProps {
+  longName?: string
+  shortName?: string
+  description?: string
+  color?: string
+}
+
+type HeadDataIconsProps = 'default' | 'image' | 'apple' | '16_16' | '32_32'
+type INextHeadIcons = Record<HeadDataIconsProps, string>
+
+const Head: React.FC<HeadProps> = (props) => {
+  const {
+    longName = projectConfig.longName,
+    shortName = projectConfig.shortName,
+    description = projectConfig.description,
+    color = projectConfig.color,
+    children
+  } = props
+
+  const icons: INextHeadIcons = {
+    image: '/images/Logo.png',
+    default: '/icons/favicons/favicon.ico',
+    apple: '/icons/favicons/apple-touch-icon.png',
+    '16_16': '/icons/favicons/favicon-16x16.png',
+    '32_32': '/icons/favicons/favicon-32x32.png'
   }
 
   return (
     <NextHead>
-      <title>{data.title}</title>
+      <title>
+        {props.longName == null
+          ? longName
+          : props.shortName == null && shortName}
+      </title>
 
-      <link rel='icon' type='image/png' href={data.image} />
-      <link rel='apple-touch-icon' href={data.image} />
+      {/* Link Tags */}
+      <link rel='shortcut icon' href={icons.default} type='image/x-icon' />
+      <link rel='apple-touch-icon' sizes='180x180' href={icons.apple} />
+      <link rel='icon' type='image/png' sizes='16x16' href={icons['16_16']} />
+      <link rel='icon' type='image/png' sizes='32x32' href={icons['32_32']} />
 
-      {/* Meta Tag */}
+      {/* Default meta tags */}
       <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <meta name='description' content={data.description} />
-      <meta name='Language' content='fr, en' />
-      <meta name='theme-color' content='#27B05E' />
+      <meta name='description' content={description} />
+      <meta name='Language' content='en' />
+      <meta name='theme-color' content={color} />
+      <meta name='msapplication-TileColor' content={color} />
+      <meta name='copyright' content={shortName} />
+      <meta name='author' content={shortName} />
+      <meta name='publisher' content={shortName} />
+      <meta name='robots' content='index, follow' />
+      <meta name='rating' content='general' />
+      <meta name='distribution' content='global' />
 
-      {/* Open Graph Metadata */}
-      <meta property='og:title' content={data.title} />
+      {/* Open graph MT */}
+      <meta property='og:title' content={shortName} />
       <meta property='og:type' content='website' />
-      <meta property='og:url' content={data.url} />
-      <meta property='og:image' content={data.image} />
-      <meta property='og:description' content={data.description} />
+      <meta property='og:url' content={projectConfig.url} />
+      <meta property='og:image' content={icons.image} />
+      <meta property='og:description' content={description} />
       <meta property='og:locale' content='en_US' />
-      <meta property='og:site_name' content={data.title} />
+      <meta property='og:site_name' content={longName} />
 
       {/* Twitter card Metadata */}
       <meta name='twitter:card' content='summary' />
-      <meta name='twitter:description' content={data.description} />
-      <meta name='twitter:title' content={data.title} />
-      <meta name='twitter:image:src' content={data.image} />
+      <meta name='twitter:description' content={description} />
+      <meta name='twitter:title' content={longName} />
+      <meta name='twitter:image:src' content={icons.image} />
+
+      {children}
     </NextHead>
   )
 }
diff --git a/utils/config.ts b/utils/config.ts
index 4d3a4d9..7bc951b 100644
--- a/utils/config.ts
+++ b/utils/config.ts
@@ -1,4 +1,33 @@
-export const PROJECT_NAME =
-  process.env.NEXT_PUBLIC_PROJECT_NAME != null
-    ? process.env.NEXT_PUBLIC_PROJECT_NAME
-    : 'unknown project'
+type PCProps = 'shortName' | 'longName' | 'description' | 'url' | 'color'
+type PCDefaultValues = Record<PCProps, string>
+
+const projectDefaultConfigValues: PCDefaultValues = {
+  shortName: 'Unknown project name',
+  longName: 'Unknown project name',
+  description: 'Unknown project description',
+  url: 'Unknown project url',
+  color: '#FF0000'
+}
+
+export const projectConfig = {
+  shortName:
+    process.env.NEXT_PUBLIC_PROJECT_SHORT_NAME != null
+      ? process.env.NEXT_PUBLIC_PROJECT_SHORT_NAME
+      : projectDefaultConfigValues.shortName,
+  longName:
+    process.env.NEXT_PUBLIC_PROJECT_LONG_NAME != null
+      ? process.env.NEXT_PUBLIC_PROJECT_LONG_NAME
+      : projectDefaultConfigValues.longName,
+  description:
+    process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION != null
+      ? process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION
+      : projectDefaultConfigValues.description,
+  url:
+    process.env.NEXT_PUBLIC_PROJECT_URL != null
+      ? process.env.NEXT_PUBLIC_PROJECT_URL
+      : projectDefaultConfigValues.url,
+  color:
+    process.env.NEXT_PUBLIC_PROJECT_COLOR != null
+      ? process.env.NEXT_PUBLIC_PROJECT_COLOR
+      : projectDefaultConfigValues.color
+}