53 lines
2.3 KiB
JavaScript
53 lines
2.3 KiB
JavaScript
import { useEffect } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
// Domaine de production, utilisé pour construire des URLs absolues
|
|
// (canonical, og:url) à partir du chemin de la route courante.
|
|
const SITE_URL = 'https://www.dsp5-archi-o24a-4-5-g4.fr'
|
|
|
|
// Change la valeur d'un attribut sur le premier élément trouvé par le
|
|
// sélecteur, et retourne de quoi la restaurer plus tard. N'écrit rien si
|
|
// l'élément est absent du <head> (les balises de base vivent dans
|
|
// index.html ; ce hook ne fait que les mettre à jour, jamais les créer).
|
|
function setAttr(selector, attr, value) {
|
|
if (value == null) return null
|
|
const el = document.querySelector(selector)
|
|
if (!el) return null
|
|
const previous = el.getAttribute(attr)
|
|
el.setAttribute(attr, value)
|
|
return () => el.setAttribute(attr, previous ?? '')
|
|
}
|
|
|
|
// Permet à une page de définir son propre <title>, sa meta description, son
|
|
// URL canonique et ses balises Open Graph/Twitter le temps qu'elle est
|
|
// affichée. La SPA n'a qu'un seul index.html : sans ce hook, toutes les
|
|
// routes partagent les mêmes balises. Les valeurs précédentes sont
|
|
// restaurées au démontage, donc quitter la page revient à l'état d'avant
|
|
// (celui d'index.html, ou celui d'une page parente si elles s'enchaînent).
|
|
export default function usePageMeta({ title, description, image } = {}) {
|
|
const { pathname } = useLocation()
|
|
|
|
useEffect(() => {
|
|
const previousTitle = document.title
|
|
if (title) document.title = title
|
|
|
|
const url = `${SITE_URL}${pathname}`
|
|
const restores = [
|
|
setAttr('meta[name="description"]', 'content', description),
|
|
setAttr('link[rel="canonical"]', 'href', url),
|
|
setAttr('meta[property="og:title"]', 'content', title),
|
|
setAttr('meta[property="og:description"]', 'content', description),
|
|
setAttr('meta[property="og:url"]', 'content', url),
|
|
setAttr('meta[property="og:image"]', 'content', image),
|
|
setAttr('meta[name="twitter:title"]', 'content', title),
|
|
setAttr('meta[name="twitter:description"]', 'content', description),
|
|
setAttr('meta[name="twitter:image"]', 'content', image),
|
|
].filter(Boolean)
|
|
|
|
return () => {
|
|
document.title = previousTitle
|
|
restores.forEach((restore) => restore())
|
|
}
|
|
}, [title, description, image, pathname])
|
|
}
|