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

added og-meta-tags for items

Browse Source
This commit is contained in:
Anton 2023-09-14 12:10:32 +02:00
parent 58380f6b77
commit 8fd1f6e0a6
2 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,11 +52,13 @@ export const Layer = (props: LayerProps) => {
useMapEvents({
popupopen: (e) => {
const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item;
if(item?.layer?.name == props.name )
window.history.pushState({},"",`/${props.name}/${item.id}`)
if(item?.layer?.name == props.name ) {
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);
}
},
})
useEffect(() => {
@ -74,7 +76,7 @@ export const Layer = (props: LayerProps) => {
filter(item => {
return searchPhrase === ''
? item :
item.name.toLowerCase().includes(searchPhrase.toLowerCase())
item.name.toLowerCase().includes(searchPhrase.toLowerCase()) || item.text.toLowerCase().includes(searchPhrase.toLowerCase())
}).
map((item: Item) => {
const tags = getItemTags(item);

42
src/Components/Map/UtopiaMap.tsx
View File

@ -23,23 +23,7 @@ export interface MapEventListenerProps {
setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
}
function MapEventListener(props: MapEventListenerProps) {
useMapEvents({
click: (e) => {
window.history.pushState({}, "", "/");
console.log(e.latlng.lat + ',' + e.latlng.lng);
if (props.selectNewItemPosition != null) {
props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
props.setSelectNewItemPosition(null)
}
},
resize: () => {
console.log("resize");
},
})
return null
}
// for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef();
@ -51,6 +35,32 @@ function UtopiaMap({
children }
: UtopiaMapProps) {
let meta = document.getElementsByTagName('meta')
const [metaTags, setMetaTags] = useState<HTMLCollectionOf<HTMLMetaElement>>(meta);
function MapEventListener(props: MapEventListenerProps) {
useMapEvents({
click: (e) => {
window.history.pushState({}, "", "/");
document.title = document.title.split("-")[0];
document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
meta = metaTags;
console.log(e.latlng.lat + ',' + e.latlng.lng);
if (props.selectNewItemPosition != null) {
props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
props.setSelectNewItemPosition(null)
}
},
resize: () => {
console.log("resize");
},
})
return null
}
const [selectNewItemPosition, setSelectNewItemPosition] = useState<LayerProps | null>(null);
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);