antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

using react-helmet for og meta tags

Browse Source
This commit is contained in:
Anton 2023-09-14 15:38:07 +02:00
parent 386e47752b
commit 1fccee5b37
3 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@heroicons/react": "^2.0.17",
"leaflet": "^1.9.4",
"prop-types": "^15.8.1",
"react-helmet": "^6.1.0",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"react-router-dom": "^6.16.0",
@ -24,6 +25,7 @@
"@types/leaflet": "^1.7.11",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
@ -308,6 +310,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-helmet": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
"integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-leaflet": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
@ -3776,6 +3787,25 @@
"react": "^18.2.0"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
},
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -3838,6 +3868,14 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-string-replace": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",

2
package.json
View File

@ -20,6 +20,7 @@
"@types/leaflet": "^1.7.11",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
@ -45,6 +46,7 @@
"@heroicons/react": "^2.0.17",
"leaflet": "^1.9.4",
"prop-types": "^15.8.1",
"react-helmet": "^6.1.0",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"react-router-dom": "^6.16.0",

18
src/Components/Map/Layer.tsx
View File

@ -11,10 +11,13 @@ import { useGetItemTags } from './hooks/useTags'
import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
import { Popup } from 'leaflet'
import { useLocation } from 'react-router-dom';
import {Helmet} from "react-helmet";
export const Layer = (props: LayerProps) => {
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
const [ogTitle, setOgTitle] = useState<string>("");
const [ogDescription, setOgDescription] = useState<string>("");
const filterTags = useFilterTags();
@ -45,19 +48,19 @@ export const Layer = (props: LayerProps) => {
if (item?.layer?.name == props.name && window.location.pathname.split("/")[2] != item.id) {
window.history.pushState({}, "", `/${props.name}/${item.id}`)
document.title = document.title.split("-")[0] + " - " + item.name;
document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text);
}
},
})
const openPopup = () => {
console.log(window.location);
if (window.location.pathname.split("/").length <= 2) {
console.log("close");
setOgTitle("");
setOgDescription("");
map.closePopup();
}
else {
@ -71,9 +74,8 @@ export const Layer = (props: LayerProps) => {
marker.openPopup();
});
const item = leafletRefs[id]?.item;
document.title = document.title.split("-")[0] + " - " + item.name;
document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text);
setOgTitle(item.name);
setOgDescription(item.text);
}
}
}
@ -151,6 +153,10 @@ export const Layer = (props: LayerProps) => {
<ItemFormPopup position={props.itemFormPopup!.position} layer={props.itemFormPopup!.layer} setItemFormPopup={setItemFormPopup} item={props.itemFormPopup!.item} />
</>)
}
<Helmet>
<meta property="og:title" content={ogTitle}/>
<meta property="og:description" content={ogDescription} />
</Helmet>
</>
)
}