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 { useEffect } from 'react'
|
||||||
import { useLocation } from 'react-router-dom'
|
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'
|
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) {
|
function setAttr(selector, attr, value) {
|
||||||
if (value == null) return null
|
if (value == null) return null
|
||||||
|
|
||||||
const el = document.querySelector(selector)
|
const el = document.querySelector(selector)
|
||||||
if (!el) return null
|
if (!el) return null
|
||||||
|
|
||||||
const previous = el.getAttribute(attr)
|
const previous = el.getAttribute(attr)
|
||||||
el.setAttribute(attr, value)
|
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 } = {}) {
|
export default function usePageMeta({ title, description, image } = {}) {
|
||||||
const { pathname } = useLocation()
|
const { pathname } = useLocation()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const previousTitle = document.title
|
if (title) {
|
||||||
if (title) document.title = title
|
document.title = title
|
||||||
|
}
|
||||||
|
|
||||||
const url = `${SITE_URL}${pathname}`
|
const url = `${SITE_URL}${pathname}`
|
||||||
|
|
||||||
const restores = [
|
const restores = [
|
||||||
setAttr('meta[name="description"]', 'content', description),
|
setAttr('meta[name="description"]', 'content', description),
|
||||||
setAttr('link[rel="canonical"]', 'href', url),
|
setAttr('link[rel="canonical"]', 'href', url),
|
||||||
@@ -45,7 +44,6 @@ export default function usePageMeta({ title, description, image } = {}) {
|
|||||||
].filter(Boolean)
|
].filter(Boolean)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
document.title = previousTitle
|
|
||||||
restores.forEach((restore) => restore())
|
restores.forEach((restore) => restore())
|
||||||
}
|
}
|
||||||
}, [title, description, image, pathname])
|
}, [title, description, image, pathname])
|
||||||
|
|||||||
Reference in New Issue
Block a user