Add OpenGraph preview

Create OpenGraphPreview component to fetch and parse metadata. Integrate into LinkPreview to show if no other preview available. Implement polished styling for clean, readable design.

Author: MMDJafari

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

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+export default function OpenGraphPreview({ url }) {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      const response = await fetch(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 {