fix: update dynamic page metadata
Some checks failed
Tests / Backend - Tests skipped: 8, passed: 74
Backend Coverage #### Project Overview
No changes detected, that affect the code coverage.
* Line Coverage: 78.38% (551/703)
* Lines of Code: 703
#### Quality Gates Summary
No active quality gates.
Tests / Frontend - Lint, Tests et Build passed: 83
Frontend Coverage #### Project Overview
No changes detected, that affect the code coverage.
* Line Coverage: 84.94% (547/644)
* Lines of Code: 644
#### Quality Gates Summary
No active quality gates.
THE-TIP-TOP-MULTIBRANCH/pipeline/head There was a failure building this commit
Some checks failed
Tests / Backend - Tests skipped: 8, passed: 74
Backend Coverage #### Project Overview
No changes detected, that affect the code coverage.
* Line Coverage: 78.38% (551/703)
* Lines of Code: 703
#### Quality Gates Summary
No active quality gates.
Tests / Frontend - Lint, Tests et Build passed: 83
Frontend Coverage #### Project Overview
No changes detected, that affect the code coverage.
* Line Coverage: 84.94% (547/644)
* Lines of Code: 644
#### Quality Gates Summary
No active quality gates.
THE-TIP-TOP-MULTIBRANCH/pipeline/head There was a failure building this commit
This commit is contained in:
@@ -1,37 +1,36 @@
|
||||
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 ?? '')
|
||||
|
||||
return () => {
|
||||
if (previous == null) {
|
||||
el.removeAttribute(attr)
|
||||
} else {
|
||||
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
|
||||
if (title) {
|
||||
document.title = title
|
||||
}
|
||||
|
||||
const url = `${SITE_URL}${pathname}`
|
||||
|
||||
const restores = [
|
||||
setAttr('meta[name="description"]', 'content', description),
|
||||
setAttr('link[rel="canonical"]', 'href', url),
|
||||
@@ -45,7 +44,6 @@ export default function usePageMeta({ title, description, image } = {}) {
|
||||
].filter(Boolean)
|
||||
|
||||
return () => {
|
||||
document.title = previousTitle
|
||||
restores.forEach((restore) => restore())
|
||||
}
|
||||
}, [title, description, image, pathname])
|
||||
|
||||
Reference in New Issue
Block a user