refactor(components/utils): improve next/head component with types
This commit is contained in:
parent
cf9cdb0fe1
commit
11c61c7250
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user