Add Open Graph preview functionality

CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.125.0] - Not released
+### Added
+- Add OpenGraphPreview component and integrate into LinkPreview
+  - Add OpenGraphPreview component to fetch and parse Open Graph metadata from pages
+  - Integrated OpenGraphPreview into LinkPreview to show open graph preview if no other specific preview available for a URL
+  - Created thoughtful styling for the OpenGraphPreview for a clean, polished, and readable design
+  - OpenGraphPreview provides a fallback preview option for sites that implement Open Graph metadata
+  - Parsing logic simplified using DOMParser and meta tag selectors
+
+### Changed
+- Update LinkPreview component to check for Open Graph data and show OpenGraphPreview
 
 ## [1.124.2] - 2023-10-25
 ### Fixed

src/components/link-preview/open-graph.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+export default function OpenGraphPreview({ url }) {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    if (url.startsWith(window.location.origin)) {
+      return;
+    }
+    async function fetchData() {
+      const response = await fetch(`https://corsproxy.io/?${encodeURIComponent(url)}`);
+      const html = await response.text();
+      const doc = new DOMParser().parseFromString(html, 'text/html');
+
+      const metaContent = (property) =>
+        doc.querySelector(`meta[property="${property}"]`)?.getAttribute('content');
+
+      const [title, description, image, source] = [
+        'og:title',
+        'og:description',
+        'og:image',
+        'og:site_name',
+      ].map(metaContent);
+      setData({ title, description, image, source });
+    }
+    fetchData();
+  }, [url]);
+  if (!data || data.title === undefined) {
+    return null;
+  }
+
+  return (
+    <div className="opengraph-preview">
+      {data.image && <img className="opengraph-image" src={data.image} alt={data.title} />}
+      <div>
+        <div className="opengraph-title">{data.title}</div>
+        <div className="opengraph-description">{data.description}</div>
+        <div className="opengraph-source">{data.source}</div>
+      </div>
+    </div>
+  );
+}

src/components/link-preview/preview.jsx

@@ -11,7 +11,7 @@ import TikTokPreview, { canShowURL as tikTokCanShowURL } from './tiktok';
 import SoundCloudPreview, { canShowURL as soundCloudCanShowURL } from './soundcloud';
 import SpotifyPreview, { canShowURL as spotifyCanShowURL } from './spotify';
 import AppleMusicPreview, { canShowUrl as appleMusicCanShowURL } from './apple-music';
-
+import OpenGraphPreview from './open-graph';
 import EmbedlyPreview from './embedly';
 
 export default function LinkPreview({ allowEmbedly, url }) {
@@ -41,12 +41,10 @@ export default function LinkPreview({ allowEmbedly, url }) {
   } else if (appleMusicCanShowURL(url)) {
     return <AppleMusicPreview url={url} />;
   }
-
   if (allowEmbedly) {
     return <EmbedlyPreview url={url} />;
   }
-
-  return false;
+  return <OpenGraphPreview url={url} />;
 }
 
 LinkPreview.propTypes = {

styles/shared/post.scss

@@ -772,6 +772,48 @@ $post-line-height: rem(20px);
   .tiktok-video-iframe {
     width: 100%;
   }
+
+  .opengraph-preview {
+    max-width: 500px;
+    border-radius: 10px;
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-color: #f8f8f8;
+    border: 1px solid #555;
+    .dark-theme & {
+      background-color: #222;
+    }
+  }
+
+  .opengraph-image {
+    max-width: 100%;
+    max-height: 300px;
+  }
+
+  .opengraph-title {
+    font-size: 1.2em;
+    margin-top: 0.5em;
+    color: #111;
+    .dark-theme & {
+      color: #d9d9d9;
+    }
+  }
+
+  .opengraph-description {
+    font-size: 1em;
+    margin-top: 0.5em;
+    color: #333;
+    .dark-theme & {
+      color: #a9a9a9;
+    }
+  }
+
+  .opengraph-source {
+    font-size: 1em;
+    margin-top: 0.5em;
+    color: #777;
+  }
 }
 
 .submit-mode-hint {