Adds card for fetching displaying social meta tags

src/components/Results/SocialTags.tsx

@@ -0,0 +1,44 @@
+
+import { Card } from 'components/Form/Card';
+import Row from 'components/Form/Row';
+import colors from 'styles/colors';
+
+const cardStyles = `
+  .banner-image img {
+    width: 100%;
+    border-radius: 4px;
+    margin: 0.5rem 0;
+  }
+  .color-field {
+    border-radius: 4px;
+    &:hover {
+      color: ${colors.primary};
+    }
+  }
+`;
+
+const SocialTagsCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
+  const tags = props.data;
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
+      { tags.title && <Row lbl="Title" val={tags.title} /> }
+      { tags.description && <Row lbl="Description" val={tags.description} /> }
+      { tags.keywords && <Row lbl="Keywords" val={tags.keywords} /> }
+      { tags.canonicalUrl && <Row lbl="Canonical URL" val={tags.canonicalUrl} /> }
+      { tags.themeColor && <Row lbl="" val="">
+        <span className="lbl">Theme Color</span>
+        <span className="val color-field" style={{background: tags.themeColor}}>{tags.themeColor}</span>
+      </Row> }
+      { tags.twitterSite && <Row lbl="" val="">
+        <span className="lbl">Twitter Site</span>
+        <span className="val"><a href={`https://x.com/${tags.twitterSite}`}>{tags.twitterSite}</a></span>
+      </Row> }
+      { tags.author && <Row lbl="Author" val={tags.author} />}
+      { tags.publisher && <Row lbl="Publisher" val={tags.publisher} />}
+      { tags.generator && <Row lbl="Generator" val={tags.generator} />}
+      { tags.ogImage && <div className="banner-image"><img src={tags.ogImage} alt="Banner" /></div> }
+    </Card>
+  );
+}
+
+export default SocialTagsCard;

src/pages/Results.tsx

@@ -46,6 +46,7 @@ import DnsServerCard from 'components/Results/DnsServer';
 import TechStackCard from 'components/Results/TechStack';
 import SecurityTxtCard from 'components/Results/SecurityTxt';
 import ContentLinksCard from 'components/Results/ContentLinks';
+import SocialTagsCard from 'components/Results/SocialTags';
 
 import keys from 'utils/get-keys';
 import { determineAddressType, AddressType } from 'utils/address-type-checker';
@@ -341,6 +342,14 @@ const Results = (): JSX.Element => {
     fetchRequest: () => fetch(`${api}/security-txt?url=${address}`).then(res => parseJson(res)),
   });
 
+  // Get social media previews, from a sites social meta tags
+  const [socialTagResults, updateSocialTagResults] = useMotherHook({
+    jobId: 'social-tags',
+    updateLoadingJobs,
+    addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly },
+    fetchRequest: () => fetch(`${api}/social-tags?url=${address}`).then(res => parseJson(res)),
+  });
+
   // Get site features from BuiltWith
   const [siteFeaturesResults, updateSiteFeaturesResults] = useMotherHook({
     jobId: 'features',
@@ -435,6 +444,7 @@ const Results = (): JSX.Element => {
     { id: 'hsts', title: 'HSTS Check', result: hstsResults, Component: HstsCard, refresh: updateHstsResults },
     { id: 'whois', title: 'Domain Info', result: whoIsResults, Component: WhoIsCard, refresh: updateWhoIsResults },
     { id: 'dns-server', title: 'DNS Server', result: dnsServerResults, Component: DnsServerCard, refresh: updateDnsServerResults },
+    { id: 'social-tags', title: 'Social Tags', result: socialTagResults, Component: SocialTagsCard, refresh: updateSocialTagResults },
     { id: 'linked-pages', title: 'Linked Pages', result: linkedPagesResults, Component: ContentLinksCard, refresh: updateLinkedPagesResults },
     { id: 'features', title: 'Site Features', result: siteFeaturesResults, Component: SiteFeaturesCard, refresh: updateSiteFeaturesResults },
     { id: 'sitemap', title: 'Pages', result: sitemapResults, Component: SitemapCard, refresh: updateSitemapResults },