75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
import { getTDK } from './tdk';
|
||
|
|
|
||
|
|
export function useTDK(locale: string, page: string) {
|
||
|
|
useEffect(() => {
|
||
|
|
const tdk = getTDK(locale, page);
|
||
|
|
|
||
|
|
// Update document title
|
||
|
|
document.title = tdk.title;
|
||
|
|
|
||
|
|
// Update meta description
|
||
|
|
let metaDescription = document.querySelector('meta[name="description"]');
|
||
|
|
if (metaDescription) {
|
||
|
|
metaDescription.setAttribute('content', tdk.description);
|
||
|
|
} else {
|
||
|
|
metaDescription = document.createElement('meta');
|
||
|
|
metaDescription.setAttribute('name', 'description');
|
||
|
|
metaDescription.setAttribute('content', tdk.description);
|
||
|
|
document.head.appendChild(metaDescription);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update meta keywords
|
||
|
|
let metaKeywords = document.querySelector('meta[name="keywords"]');
|
||
|
|
if (metaKeywords) {
|
||
|
|
metaKeywords.setAttribute('content', tdk.keywords);
|
||
|
|
} else {
|
||
|
|
metaKeywords = document.createElement('meta');
|
||
|
|
metaKeywords.setAttribute('name', 'keywords');
|
||
|
|
metaKeywords.setAttribute('content', tdk.keywords);
|
||
|
|
document.head.appendChild(metaKeywords);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update Open Graph tags
|
||
|
|
const ogTags = [
|
||
|
|
{ property: 'og:title', content: tdk.title },
|
||
|
|
{ property: 'og:description', content: tdk.description },
|
||
|
|
{ property: 'og:type', content: 'website' },
|
||
|
|
{ property: 'og:locale', content: locale },
|
||
|
|
];
|
||
|
|
|
||
|
|
ogTags.forEach((tag) => {
|
||
|
|
let ogTag = document.querySelector(`meta[property="${tag.property}"]`);
|
||
|
|
if (ogTag) {
|
||
|
|
ogTag.setAttribute('content', tag.content);
|
||
|
|
} else {
|
||
|
|
ogTag = document.createElement('meta');
|
||
|
|
ogTag.setAttribute('property', tag.property);
|
||
|
|
ogTag.setAttribute('content', tag.content);
|
||
|
|
document.head.appendChild(ogTag);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update Twitter Card tags
|
||
|
|
const twitterTags = [
|
||
|
|
{ name: 'twitter:card', content: 'summary_large_image' },
|
||
|
|
{ name: 'twitter:title', content: tdk.title },
|
||
|
|
{ name: 'twitter:description', content: tdk.description },
|
||
|
|
];
|
||
|
|
|
||
|
|
twitterTags.forEach((tag) => {
|
||
|
|
let twitterTag = document.querySelector(`meta[name="${tag.name}"]`);
|
||
|
|
if (twitterTag) {
|
||
|
|
twitterTag.setAttribute('content', tag.content);
|
||
|
|
} else {
|
||
|
|
twitterTag = document.createElement('meta');
|
||
|
|
twitterTag.setAttribute('name', tag.name);
|
||
|
|
twitterTag.setAttribute('content', tag.content);
|
||
|
|
document.head.appendChild(twitterTag);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, [locale, page]);
|
||
|
|
}
|