Skip to content

Instantly share code, notes, and snippets.

@RhysSullivan

RhysSullivan/gist:9f8d11443b70deadabfe3b6bdfb762d0

Created September 27, 2023 06:08
Show Gist options
  • Save RhysSullivan/9f8d11443b70deadabfe3b6bdfb762d0 to your computer and use it in GitHub Desktop.
Save RhysSullivan/9f8d11443b70deadabfe3b6bdfb762d0 to your computer and use it in GitHub Desktop.
Download ZIP
Drop in OG error detector
Raw
gistfile1.tsx
import { useEffect, useState } from 'react';
import { PopoverContent, PopoverTrigger } from '../primitives/ui/popover';
import { Popover } from '../primitives/ui/popover';
import { BsCardHeading } from 'react-icons/bs';
import { Button } from '~ui/components/primitives/ui/button';
import { FiAlertCircle } from 'react-icons/fi';
import { TbAlertCircleFilled } from 'react-icons/tb';
type HeadValues = {
title?: string;
canonical?: string;
icon?: string;
meta: {
robots?: string;
description?: string;
siteName?: string;
title?: string;
type?: string;
image?: string;
imageWidth?: string;
imageHeight?: string;
url?: string;
};
};
function useHeadWatcher() {
const [headValues, setHeadValues] = useState<HeadValues>({
meta: {},
});
useEffect(() => {
const handleHeadChange = () => {
const newHeadValues: HeadValues = {
...headValues,
};
const headElements = document.head.children;
for (const element of headElements) {
switch (element.tagName.toLowerCase()) {
case 'title': {
newHeadValues.title = element.textContent ?? undefined;
break;
}
case 'meta': {
const property =
element.getAttribute('property') ?? element.getAttribute('name');
switch (property) {
case 'robots':
newHeadValues.meta.robots =
element.getAttribute('content') ?? undefined;
break;
case 'description':
newHeadValues.meta.description =
element.getAttribute('content') ?? undefined;
break;
case 'og:site_name':
newHeadValues.meta.siteName =
element.getAttribute('content') ?? undefined;
break;
case 'title':
newHeadValues.meta.title =
element.getAttribute('content') ?? undefined;
break;
case 'type':
newHeadValues.meta.type =
element.getAttribute('content') ?? undefined;
break;
case 'og:image':
newHeadValues.meta.image =
element.getAttribute('content') ?? undefined;
}
break;
}
case 'link': {
const rel = element.getAttribute('rel');
switch (rel) {
case 'canonical':
newHeadValues.canonical =
element.getAttribute('href') ?? undefined;
break;
case 'icon':
newHeadValues.icon = element.getAttribute('href') ?? undefined;
break;
}
break;
}
}
}
setHeadValues(newHeadValues);
};
document.head.addEventListener('DOMContentLoaded', handleHeadChange);
document.head.addEventListener('DOMSubtreeModified', handleHeadChange);
return () => {
document.head.removeEventListener('DOMContentLoaded', handleHeadChange);
document.head.removeEventListener('DOMSubtreeModified', handleHeadChange);
};
}, []);
return headValues;
}
export function HeadPreview() {
const headValues = useHeadWatcher();
console.log(headValues.meta?.image);
const HeadPopover = () => (
<div
className={
'z-50 flex grid h-full w-full grid-cols-1 gap-4 overflow-x-hidden overflow-y-scroll'
}
>
<span className={'text-xl font-bold'}>OG Data</span>
<img src={headValues.meta?.image} className={'max-h-[200px]'} />
<div className={'grid grid-cols-2 divide-x-1 divide-y-1 border-solid '}>
<span>Title</span>
<span>{headValues.title}</span>
<span>Canonical</span>
<span>{headValues.canonical}</span>
<span>Icon</span>
<span className="bg-red-300">{headValues.icon}</span>
<span>Description</span>
<span>{headValues.meta?.description}</span>
<span>Site Name</span>
<span>{headValues.meta?.siteName}</span>
</div>
</div>
);
return (
<Popover>
<PopoverTrigger className={'absolute bottom-10 right-10 z-50'}>
<div className={'relative'}>
<BsCardHeading className={' h-10 w-10'} />
<TbAlertCircleFilled
className={
'absolute right-0 top-0 z-10 h-4 w-4 font-bold text-red-600'
}
/>
</div>
</PopoverTrigger>
<PopoverContent className=" h-[400px] w-[800px]">
<HeadPopover />
</PopoverContent>
</Popover>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment