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

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

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

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

@ -23,10 +23,30 @@ export interface MapEventListenerProps {
setItemFormPopup: React.Dispatch<React.SetStateAction<any>> setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
} }
// for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef();
function UtopiaMap({
height = "500px",
width = "100%",
center = new LatLng(50.6, 9.5),
zoom = 10,
children }
: UtopiaMapProps) {
let meta = document.getElementsByTagName('meta')
const [metaTags, setMetaTags] = useState<HTMLCollectionOf<HTMLMetaElement>>(meta);
function MapEventListener(props: MapEventListenerProps) { function MapEventListener(props: MapEventListenerProps) {
useMapEvents({ useMapEvents({
click: (e) => { click: (e) => {
window.history.pushState({}, "", "/"); 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); console.log(e.latlng.lat + ',' + e.latlng.lng);
if (props.selectNewItemPosition != null) { if (props.selectNewItemPosition != null) {
props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng }) props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
@ -40,16 +60,6 @@ function MapEventListener(props: MapEventListenerProps) {
}) })
return null return null
} }
// for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef();
function UtopiaMap({
height = "500px",
width = "100%",
center = new LatLng(50.6, 9.5),
zoom = 10,
children }
: UtopiaMapProps) {
const [selectNewItemPosition, setSelectNewItemPosition] = useState<LayerProps | null>(null); const [selectNewItemPosition, setSelectNewItemPosition] = useState<LayerProps | null>(null);
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null); const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);