From c4386de9c8400cb3f9ba8a1db48643f9a35f41c9 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Fri, 9 Aug 2024 20:54:24 +1000
Subject: [PATCH 01/29] feat(link-previews): Add meta data parser service

---
 app/Services/MetaData.php | 192 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 app/Services/MetaData.php

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
new file mode 100644
index 000000000..76ec8b07c
--- /dev/null
+++ b/app/Services/MetaData.php
@@ -0,0 +1,192 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Services;
+
+use DOMDocument;
+use DOMElement;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+
+/**
+ * @phpstan-type MetaData = array{
+ *     title: string,
+ *     type: string,
+ *     image: string,
+ *     url: string,
+ *     description: string,
+ *     site_name: string,
+ *     locale: string,
+ * }
+ * @phpstan-type MetaDataCollection = Collection<int, MetaData>
+ */
+final readonly class MetaData
+{
+    /**
+     * The Open Graph data.
+     *
+     * @var MetaDataCollection
+     */
+    private Collection $data;
+
+    /**
+     * Fetch the Open Graph data for a given URL.
+     */
+    public function __construct(
+        private string $url
+    ) {
+        $this->data = Cache::get(
+            $this->url,
+            fn () => $this->getData()
+        );
+    }
+
+    /**
+     * Get the open graph data for a given external URL.
+     *
+     * @return MetaDataCollection
+     */
+    public static function fetch(string $url): Collection
+    {
+        return (new self($url))->data;
+    }
+
+    /**
+     * Get the Open Graph data.
+     *
+     * @return MetaDataCollection
+     */
+    public function getData(): Collection
+    {
+        $response = Http::get($this->url);
+
+        if ($response->ok()) {
+            $opg = $this->parse($response->body());
+            //Cache::put($this->url, $opg, now()->addDay());
+            dump($opg);
+
+            return $opg;
+        }
+
+        return collect();
+    }
+
+    // ensure fb, twitter card, open graph, and oembed are all parsed,
+    // so we can use them in the view to generate a preview
+
+    /**
+     * Parse the response body for MetaData.
+     *
+     * @return Collection<int, DOMElement>
+     */
+    private function parse(string $content): Collection
+    {
+        $doc = new DOMDocument();
+        @$doc->loadHTML($content);
+
+        $interested_in = ['og', 'fb', 'twitter'];
+
+        $data = collect();
+
+        // Open graph
+        $metas = $doc->getElementsByTagName('meta');
+        if ($metas->length > 0) {
+            dump($metas);
+            for ($n = 0; $n < $metas->length; $n++) {
+                $meta = $metas->item($n);
+
+                collect(['name', 'property'])->each(function ($name) use ($meta, $interested_in, $data) {
+                    $meta_bits = explode(':', $meta->getAttribute($name));
+                    //dump($meta_bits);
+                    if (in_array($meta_bits[0], $interested_in)) {
+                        if ($data->has($meta->getAttribute($name)) && ! is_array($data->get($meta->getAttribute($name)))) {
+                            $data->put($meta_bits[0], [$data->get($meta->getAttribute($name)), $meta->getAttribute('content')]);
+                        } elseif ($data->has($meta->getAttribute($name)) && is_array($data->get($meta->getAttribute($name)))) {
+                            $data->push($meta->getAttribute('content'));
+                        } else {
+                            $data->put($meta_bits[0], $meta->getAttribute('content'));
+                        }
+                    }
+                });
+            }
+        }
+
+        // OEmbed
+        $metas = $doc->getElementsByTagName('link');
+        if ($metas->length > 0) {
+            for ($n = 0; $n < $metas->length; $n++) {
+                $meta = $metas->item($n);
+
+                if (mb_strtolower($meta->getAttribute('rel')) === 'alternate') {
+                    if (mb_strtolower($meta->getAttribute('type')) === 'application/json+oembed') {
+                        $data->put('oembed.json', $meta->getAttribute('href'));
+                    }
+                    if (mb_strtolower($meta->getAttribute('type')) === 'text/json+oembed') {
+                        $data->put('oembed.json', $meta->getAttribute('href'));
+                    }
+                    if (mb_strtolower($meta->getAttribute('type')) === 'text/xml+oembed') {
+                        $data->put('oembed.xml', $meta->getAttribute('href'));
+                    }
+                }
+            }
+
+            $data = $this->parseTwitterOEmbed(collect($metas), $data);
+        }
+
+        // Basics
+        $basic = 'title';
+        if (preg_match("#<$basic>(.*?)</$basic>#siu", $content, $matches)) {
+            $data->put($basic, trim($matches[1], " \n"));
+        }
+        $metas = $doc->getElementsByTagName('meta');
+        if ($metas->length > 0) {
+            for ($n = 0; $n < $metas->length; $n++) {
+                $meta = $metas->item($n);
+
+                if (mb_strtolower($meta->getAttribute('name')) === 'description') {
+                    $data->put('description', $meta->getAttribute('content'));
+                }
+                if (mb_strtolower($meta->getAttribute('name')) === 'keywords') {
+                    $data->put('keywords', $meta->getAttribute('content'));
+                }
+            }
+        }
+
+        return $data;
+    }
+
+    /**
+     * Parse Twitter OEmbed data.
+     *
+     * @param  Collection<int, DOMElement>  $metas
+     * @param  Collection<string, array<int, string>>  $data
+     * @return Collection<int, string>
+     */
+    private function parseTwitterOEmbed(Collection $metas, Collection $data): Collection
+    {
+        if ($data->has('oembed.jsonp')) {
+            return $data;
+        }
+
+        $canonicalLinks = $metas->filter(function ($meta) {
+            $canonicalLinks = collect(iterator_to_array($meta->attributes))
+                ->filter(fn ($attr) => $attr->name === 'rel' && $attr->value === 'canonical');
+
+            return $canonicalLinks->isNotEmpty();
+        });
+
+        if ($canonicalLinks->isNotEmpty()) {
+            $firstCanonicalLink = $canonicalLinks->first()->getAttribute('href');
+
+            if (! empty(trim($firstCanonicalLink)) && preg_match('#^https://(www\.|mobile\.)?twitter\.com#i', $firstCanonicalLink) === 1) {
+                $data->put('oembed.jsonp', [
+                    'https://publish.twitter.com/oembed?url='.$firstCanonicalLink.'&align=center',
+                ]);
+            }
+        }
+
+        return $data;
+    }
+}

From 1ae84dcc6878a000bd6d78129971d89ec1aabe12 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Fri, 9 Aug 2024 20:56:57 +1000
Subject: [PATCH 02/29] feat(link-previews): init link preview card view

---
 .../views/components/link-preview-card.blade.php   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 resources/views/components/link-preview-card.blade.php

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
new file mode 100644
index 000000000..0690170da
--- /dev/null
+++ b/resources/views/components/link-preview-card.blade.php
@@ -0,0 +1,14 @@
+<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+    <div class="md:flex">
+        @if(isset($ogData['image']))
+            <div class="md:flex-shrink-0">
+                <img class="h-48 w-full object-cover md:w-48" src="{{ $ogData['image'] }}" alt="OpenGraph Image">
+            </div>
+        @endif
+        <div class="p-8">
+            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">{{ $ogData['site_name'] ?? 'Link Preview' }}</div>
+            <a href="{{ $url }}" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">{{ $ogData['title'] ?? $url }}</a>
+            <p class="mt-2 text-gray-500">{{ $ogData['description'] ?? '' }}</p>
+        </div>
+    </div>
+</div>

From 9159bfd542c48639907801183bb337a3f829f920 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Fri, 9 Aug 2024 20:57:33 +1000
Subject: [PATCH 03/29] feat(link-previews): fetch metadata in the link parser

---
 .../LinkProviderParsable.php                         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index a2b24106e..929044b71 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -5,6 +5,7 @@
 namespace App\Services\ParsableContentProviders;
 
 use App\Contracts\Services\ParsableContentProvider;
+use App\Services\MetaData;
 
 final readonly class LinkProviderParsable implements ParsableContentProvider
 {
@@ -26,6 +27,17 @@ function (array $matches): string {
 
                 $url = $isMail ? 'mailto:'.$humanUrl : $url;
 
+                if (! $isMail && $url) {
+                    $metadata = MetaData::fetch($url);
+
+                    if ($metadata->isNotEmpty()) {
+                        return view('components.link-preview-card', [
+                            'data' => $metadata,
+                            'url' => $url,
+                        ])->render();
+                    }
+                }
+
                 return '<a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="'.$url.'">'.$humanUrl.'</a>';
             },
             str_replace('&amp;', '&', $content)

From 3cedd7f515641ba1b7f0ac46744d73eb4c9fc2d9 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Sun, 22 Sep 2024 13:02:58 +1000
Subject: [PATCH 04/29] feat(previews): format updates to link preview card

---
 .../components/link-preview-card.blade.php    | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
index 0690170da..8be556687 100644
--- a/resources/views/components/link-preview-card.blade.php
+++ b/resources/views/components/link-preview-card.blade.php
@@ -1,14 +1,32 @@
-<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
-    <div class="md:flex">
-        @if(isset($ogData['image']))
-            <div class="md:flex-shrink-0">
-                <img class="h-48 w-full object-cover md:w-48" src="{{ $ogData['image'] }}" alt="OpenGraph Image">
+@if($data->has('image'))
+    <div class="mx-auto min-w-full">
+        <div class="relative w-full overflow-hidden rounded-lg bg-white shadow-md">
+            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
+                <img
+                    x-init="const image = new Image().src = '{{ $data->get('image') }}';
+                    window.onload = (image) => {
+                        if (image.width < 300) {
+                         $el.classList.remove('object-cover');
+                         }
+                    }
+                    "
+
+                    src="{{ $data->get('image') }}" alt="{{ $data->get('title') ?? $url }}"
+                    title="Click to visit: {{ $data->get('title') ?? $url }}"
+                     class="h-[228px] w-[513px] object-cover object-center"/>
+            </a>
+
+            <div class="absolute bottom-0 left-0 w-full bg-pink-900 bg-opacity-15 backdrop-filter backdrop-blur-md p-2 text-white">
+                <h3 class="text-sm font-semibold">{{ $data->get('title') ?? $url }}</h3>
             </div>
-        @endif
-        <div class="p-8">
-            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">{{ $ogData['site_name'] ?? 'Link Preview' }}</div>
-            <a href="{{ $url }}" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">{{ $ogData['title'] ?? $url }}</a>
-            <p class="mt-2 text-gray-500">{{ $ogData['description'] ?? '' }}</p>
         </div>
     </div>
-</div>
+    <!-- Footer Section -->
+    <div class="flex items-center justify-between p-4">
+        <span class="text-xs text-gray-500">From {{ parse_url($url)['host'] }}</span>
+    </div>
+@elseif ($data->has('html'))
+    <div class="md:flex-shrink-0">
+        {!! $data->get('html') !!}
+    </div>
+@endif

From 8244654e3b59ad9479c4bfe6fc68a3cff5087f19 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Sun, 22 Sep 2024 13:07:39 +1000
Subject: [PATCH 05/29] feat(previews): cleanup the MetaData service

---
 app/Services/MetaData.php                     | 173 ++++++------------
 .../LinkProviderParsable.php                  |   1 +
 2 files changed, 57 insertions(+), 117 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 76ec8b07c..a63f41f19 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -5,48 +5,35 @@
 namespace App\Services;
 
 use DOMDocument;
-use DOMElement;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
 
-/**
- * @phpstan-type MetaData = array{
- *     title: string,
- *     type: string,
- *     image: string,
- *     url: string,
- *     description: string,
- *     site_name: string,
- *     locale: string,
- * }
- * @phpstan-type MetaDataCollection = Collection<int, MetaData>
- */
 final readonly class MetaData
 {
     /**
      * The Open Graph data.
-     *
-     * @var MetaDataCollection
      */
     private Collection $data;
 
     /**
      * Fetch the Open Graph data for a given URL.
      */
-    public function __construct(
-        private string $url
-    ) {
-        $this->data = Cache::get(
-            $this->url,
+    public function __construct(private string $url)
+    {
+        $this->data = Cache::remember(
+            Str::of($url)->slug()->prepend('preview_')->value(),
+            now()->addYear(),
+            // NOTE: check why this data is not being cached, we are just caching a Collection in the DB & I can't see the data in the DB
             fn () => $this->getData()
         );
     }
 
     /**
-     * Get the open graph data for a given external URL.
+     * Fetch the parsed meta-data for a given URL.
      *
-     * @return MetaDataCollection
+     * @return Collection<string, string>
      */
     public static function fetch(string $url): Collection
     {
@@ -54,96 +41,60 @@ public static function fetch(string $url): Collection
     }
 
     /**
-     * Get the Open Graph data.
+     * Get the meta-data for a given URL.
      *
-     * @return MetaDataCollection
+     * @return Collection<string, string>
      */
     public function getData(): Collection
     {
         $response = Http::get($this->url);
 
         if ($response->ok()) {
-            $opg = $this->parse($response->body());
-            //Cache::put($this->url, $opg, now()->addDay());
-            dump($opg);
-
-            return $opg;
+            // TODO: add unit test for this service
+            return $this->parse($response->body());
         }
 
         return collect();
     }
 
-    // ensure fb, twitter card, open graph, and oembed are all parsed,
-    // so we can use them in the view to generate a preview
+    /**
+     * Fetch Twitter oEmbed data for a given tweet URL.
+     *
+     * @return Collection<string, string>
+     */
+    private function fetchTwitterOEmbed(string $tweetUrl): Collection
+    {
+        $oEmbedUrl = 'https://publish.twitter.com/oembed?url='.urlencode($tweetUrl);
+
+        $response = Http::get($oEmbedUrl);
+
+        if ($response->ok()) {
+            return collect($response->json());
+        }
+
+        return collect();
+    }
 
     /**
      * Parse the response body for MetaData.
      *
-     * @return Collection<int, DOMElement>
+     * @return Collection<string, string>
      */
     private function parse(string $content): Collection
     {
         $doc = new DOMDocument();
         @$doc->loadHTML($content);
 
-        $interested_in = ['og', 'fb', 'twitter'];
-
+        $interested_in = ['og', 'twitter'];
         $data = collect();
-
-        // Open graph
         $metas = $doc->getElementsByTagName('meta');
-        if ($metas->length > 0) {
-            dump($metas);
-            for ($n = 0; $n < $metas->length; $n++) {
-                $meta = $metas->item($n);
-
-                collect(['name', 'property'])->each(function ($name) use ($meta, $interested_in, $data) {
-                    $meta_bits = explode(':', $meta->getAttribute($name));
-                    //dump($meta_bits);
-                    if (in_array($meta_bits[0], $interested_in)) {
-                        if ($data->has($meta->getAttribute($name)) && ! is_array($data->get($meta->getAttribute($name)))) {
-                            $data->put($meta_bits[0], [$data->get($meta->getAttribute($name)), $meta->getAttribute('content')]);
-                        } elseif ($data->has($meta->getAttribute($name)) && is_array($data->get($meta->getAttribute($name)))) {
-                            $data->push($meta->getAttribute('content'));
-                        } else {
-                            $data->put($meta_bits[0], $meta->getAttribute('content'));
-                        }
-                    }
-                });
-            }
-        }
 
-        // OEmbed
-        $metas = $doc->getElementsByTagName('link');
-        if ($metas->length > 0) {
-            for ($n = 0; $n < $metas->length; $n++) {
-                $meta = $metas->item($n);
-
-                if (mb_strtolower($meta->getAttribute('rel')) === 'alternate') {
-                    if (mb_strtolower($meta->getAttribute('type')) === 'application/json+oembed') {
-                        $data->put('oembed.json', $meta->getAttribute('href'));
-                    }
-                    if (mb_strtolower($meta->getAttribute('type')) === 'text/json+oembed') {
-                        $data->put('oembed.json', $meta->getAttribute('href'));
-                    }
-                    if (mb_strtolower($meta->getAttribute('type')) === 'text/xml+oembed') {
-                        $data->put('oembed.xml', $meta->getAttribute('href'));
-                    }
+        if ($metas->count() > 0) {
+            foreach ($metas as $meta) {
+                // basic meta tags
+                if (mb_strtolower($meta->getAttribute('name')) === 'title') {
+                    $data->put('title', $meta->getAttribute('content'));
                 }
-            }
-
-            $data = $this->parseTwitterOEmbed(collect($metas), $data);
-        }
-
-        // Basics
-        $basic = 'title';
-        if (preg_match("#<$basic>(.*?)</$basic>#siu", $content, $matches)) {
-            $data->put($basic, trim($matches[1], " \n"));
-        }
-        $metas = $doc->getElementsByTagName('meta');
-        if ($metas->length > 0) {
-            for ($n = 0; $n < $metas->length; $n++) {
-                $meta = $metas->item($n);
 
                 if (mb_strtolower($meta->getAttribute('name')) === 'description') {
                     $data->put('description', $meta->getAttribute('content'));
@@ -151,42 +102,30 @@ private function parse(string $content): Collection
                 if (mb_strtolower($meta->getAttribute('name')) === 'keywords') {
                     $data->put('keywords', $meta->getAttribute('content'));
                 }
-            }
-        }
 
-        return $data;
-    }
-
-    /**
-     * Parse Twitter OEmbed data.
-     *
-     * @param  Collection<int, DOMElement>  $metas
-     * @param  Collection<string, array<int, string>>  $data
-     * @return Collection<int, string>
-     */
-    private function parseTwitterOEmbed(Collection $metas, Collection $data): Collection
-    {
-        if ($data->has('oembed.jsonp')) {
-            return $data;
+                // og & twitter meta tags
+                collect(['name', 'property'])
+                    ->map(fn ($name) => $meta->getAttribute($name))
+                    ->filter(fn ($attribute) => in_array(explode(':', $attribute)[0], $interested_in))
+                    ->each(function ($attribute) use ($data, $meta) {
+                        $key = explode(':', $attribute)[1];
+                        if (! $data->has($key)) {
+                            $data->put($key, $meta->getAttribute('content'));
+                        }
+                    });
+            }
         }
 
-        $canonicalLinks = $metas->filter(function ($meta) {
-            $canonicalLinks = collect(iterator_to_array($meta->attributes))
-                ->filter(fn ($attr) => $attr->name === 'rel' && $attr->value === 'canonical');
-
-            return $canonicalLinks->isNotEmpty();
-        });
-
-        if ($canonicalLinks->isNotEmpty()) {
-            $firstCanonicalLink = $canonicalLinks->first()->getAttribute('href');
-
-            if (! empty(trim($firstCanonicalLink)) && preg_match('#^https://(www\.|mobile\.)?twitter\.com#i', $firstCanonicalLink) === 1) {
-                $data->put('oembed.jsonp', [
-                    'https://publish.twitter.com/oembed?url='.$firstCanonicalLink.'&align=center',
-                ]);
+        // if the title is x.com, fetch twitter oEmbed & add to data
+        if ($data->has('site_name') && $data->get('site_name') === 'X (formerly Twitter)') {
+            $x = $this->fetchTwitterOEmbed($this->url);
+            if ($x->isNotEmpty()) {
+                foreach ($x as $key => $value) {
+                    $data->put($key, $value);
+                }
             }
         }
 
-        return $data;
+        return $data->unique();
     }
 }
diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index bd03a7e96..1535d0254 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -35,6 +35,7 @@ function (array $matches): string {
                     $metadata = MetaData::fetch($url);
 
                     if ($metadata->isNotEmpty()) {
+                        // TODO: add tests for this logic to the parser unit test
                         return view('components.link-preview-card', [
                             'data' => $metadata,
                             'url' => $url,

From 482f0dd14a5bb7c1b7a71a5e719b61bb9f0192ce Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 15 Oct 2024 23:23:16 +1100
Subject: [PATCH 06/29] feat: style updates to link preview card

---
 .../components/link-preview-card.blade.php    | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
index 8be556687..aeb310d91 100644
--- a/resources/views/components/link-preview-card.blade.php
+++ b/resources/views/components/link-preview-card.blade.php
@@ -1,30 +1,37 @@
 @if($data->has('image'))
-    <div class="mx-auto min-w-full">
-        <div class="relative w-full overflow-hidden rounded-lg bg-white shadow-md">
-            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
+    @php($shortUrl = parse_url($url)['host'])
+    <div
+        id="link-preview-card"
+        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
+        <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
+            <div
+                title="Click to visit: {{ $shortUrl }}"
+                class="relative w-full
+                bg-slate-100/90
+                border
+                border-slate-300
+                dark:border-0
+                rounded-lg
+                dark:group-hover/preview:border-0
+                overflow-hidden">
                 <img
-                    x-init="const image = new Image().src = '{{ $data->get('image') }}';
-                    window.onload = (image) => {
-                        if (image.width < 300) {
-                         $el.classList.remove('object-cover');
-                         }
-                    }
-                    "
-
-                    src="{{ $data->get('image') }}" alt="{{ $data->get('title') ?? $url }}"
-                    title="Click to visit: {{ $data->get('title') ?? $url }}"
-                     class="h-[228px] w-[513px] object-cover object-center"/>
-            </a>
-
-            <div class="absolute bottom-0 left-0 w-full bg-pink-900 bg-opacity-15 backdrop-filter backdrop-blur-md p-2 text-white">
-                <h3 class="text-sm font-semibold">{{ $data->get('title') ?? $url }}</h3>
+                    src="{{ $data->get('image') }}"
+                    alt="{{ $data->get('title') ?? $url }}"
+                    class="object-cover object-center h-[228px] w-[513px]"
+                />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        {{ $data->get('title') ?? $data->get('site_name') ?? $url }}</h3>
+                </div>
             </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: {{ $shortUrl}}</a>
         </div>
     </div>
-    <!-- Footer Section -->
-    <div class="flex items-center justify-between p-4">
-        <span class="text-xs text-gray-500">From {{ parse_url($url)['host'] }}</span>
-    </div>
 @elseif ($data->has('html'))
     <div class="md:flex-shrink-0">
         {!! $data->get('html') !!}

From 0ce3b89023f19d90395f28610ef4d37987511e4a Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 15 Oct 2024 23:24:03 +1100
Subject: [PATCH 07/29] fix: make closure static so object is not bound

---
 app/Services/ParsableContentProviders/LinkProviderParsable.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 1535d0254..00fbf35e9 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -16,7 +16,7 @@ public function parse(string $content): string
     {
         return (string) preg_replace_callback(
             '/(<(a|code|pre)\s+[^>]*>.*?<\/\2>)|(?<!src=")((https?:\/\/)?((localhost)|((?:\d{1,3}\.){3}\d{1,3})|[\w\-._@:%\+~#=]{1,256}(\.[a-zA-Z]{2,})+)(:\d+)?(\/[\w\-._@:%\+~#=\/]*)?(\?[\w\-._@:%\+~#=\/&]*)?)(?<!\.)((?![^<]*>|[^<>]*<\/))/is',
-            function (array $matches): string {
+            static function (array $matches): string {
                 if ($matches[1] !== '') {
                     return $matches[1];
                 }

From d1bb4240b6c42f967271b4e914c8d75b19f3f859 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 15 Oct 2024 23:46:38 +1100
Subject: [PATCH 08/29] fix: update content test

---
 tests/Unit/Services/ContentTest.php | 34 ++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/tests/Unit/Services/ContentTest.php b/tests/Unit/Services/ContentTest.php
index 4bb957efc..6eb3a97fc 100644
--- a/tests/Unit/Services/ContentTest.php
+++ b/tests/Unit/Services/ContentTest.php
@@ -23,5 +23,37 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('<a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://pinkary.com/@nunomaduro">pinkary.com/@nunomaduro</a>');
+    expect($provider->parse($content))->toBe('<div
+        id="link-preview-card"
+        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
+        <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer">
+            <div
+                title="Click to visit: pinkary.com"
+                class="relative w-full
+                bg-slate-100/90
+                border
+                border-slate-300
+                dark:border-0
+                rounded-lg
+                dark:group-hover/preview:border-0
+                overflow-hidden">
+                <img
+                    src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
+                    alt="Nuno Maduro (@nunomaduro) / Pinkary"
+                    class="object-cover object-center h-[228px] w-[513px]"
+                />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Nuno Maduro (@nunomaduro) / Pinkary</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: pinkary.com</a>
+        </div>
+    </div>
+');
 });

From 1d7e75d00bb33d405e3c0fa38a1e203500e8de72 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 16 Oct 2024 00:03:51 +1100
Subject: [PATCH 09/29] test: only links with images an oembeds are parsed for
 previews

---
 tests/Unit/Services/ContentTest.php | 42 +++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/tests/Unit/Services/ContentTest.php b/tests/Unit/Services/ContentTest.php
index 6eb3a97fc..8a1b8a321 100644
--- a/tests/Unit/Services/ContentTest.php
+++ b/tests/Unit/Services/ContentTest.php
@@ -10,6 +10,48 @@
     expect($provider->parse($content))->toBe('Sure, here is the link: <a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://example.com">example.com</a>. Let me know if you have any questions.');
 });
 
+test('only links with images or html oEmbeds are parsed', function () {
+    $content = 'Sure, here is the link: https://laravel.com. Let me know if you have any questions.';
+
+    $provider = new App\Services\ParsableContent();
+
+    expect($provider->parse($content))->toBe(
+        'Sure, here is the link: <div
+        id="link-preview-card"
+        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
+        <a href="https://laravel.com" target="_blank" rel="noopener noreferrer">
+            <div
+                title="Click to visit: laravel.com"
+                class="relative w-full
+                bg-slate-100/90
+                border
+                border-slate-300
+                dark:border-0
+                rounded-lg
+                dark:group-hover/preview:border-0
+                overflow-hidden">
+                <img
+                    src="https://laravel.com/img/og-image.jpg"
+                    alt="Laravel - The PHP Framework For Web Artisans"
+                    class="object-cover object-center h-[228px] w-[513px]"
+                />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Laravel - The PHP Framework For Web Artisans</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://laravel.com" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.com</a>
+        </div>
+    </div>
+. Let me know if you have any questions.'
+    );
+});
+
 test('mention', function () {
     $content = '@nunomaduro, let me know if you have any questions. Thanks @xiCO2k.';
 

From bb8640289182182f051b45323419e6afdda93504 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 23 Oct 2024 23:46:57 +1100
Subject: [PATCH 10/29] fix: handle when there is a bad response

---
 app/Services/MetaData.php | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index a63f41f19..4a881850c 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -5,6 +5,7 @@
 namespace App\Services;
 
 use DOMDocument;
+use Exception;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
@@ -47,20 +48,23 @@ public static function fetch(string $url): Collection
      */
     public function getData(): Collection
     {
-        $response = Http::get($this->url);
-
-        if ($response->ok()) {
-            // TODO: add unit test for this service
-            return $this->parse($response->body());
+        try {
+            $response = Http::get($this->url);
+            if ($response->ok()) {
+                // TODO: add unit test for this service
+                $data = $this->parse($response->body())->filter(fn ($value) => $value !== '');
+            }
+        } catch (Exception) {
+            $data = collect();
         }
 
-        return collect();
+        return $data ?? collect();
     }
 
     /**
      * Fetch Twitter oEmbed data for a given tweet URL.
      *
-     * @return Collection<string, string>
+     * @return Collection<string, mixed>
      */
     private function fetchTwitterOEmbed(string $tweetUrl): Collection
     {
@@ -69,10 +73,10 @@ private function fetchTwitterOEmbed(string $tweetUrl): Collection
         $response = Http::get($oEmbedUrl);
 
         if ($response->ok()) {
-            return collect($response->json());
+            $data = $response->json();
         }
 
-        return collect();
+        return collect($data ?? []);
     }
 
     /**

From 32af0f205b5b4c5d57e9e12117ac6531a1315029 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 23 Oct 2024 23:47:11 +1100
Subject: [PATCH 11/29] test: add Meta data test

---
 tests/Unit/Services/MetaDataTest.php | 60 ++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 tests/Unit/Services/MetaDataTest.php

diff --git a/tests/Unit/Services/MetaDataTest.php b/tests/Unit/Services/MetaDataTest.php
new file mode 100644
index 000000000..a24774f2a
--- /dev/null
+++ b/tests/Unit/Services/MetaDataTest.php
@@ -0,0 +1,60 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Services\MetaData;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
+
+mutates(MetaData::class);
+
+it('fetches and caches meta data for a given URL', function () {
+    $url = 'https://example.com';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $mockResponse = <<<'HTML'
+    <html>
+        <head>
+            <meta name="title" content="Example Title">
+            <meta name="description" content="Example Description">
+            <meta name="og:title" content="Example Title">
+            <meta name="og:description" content="Example Description">
+        </head>
+    </html>
+    HTML;
+
+    // Mock the HTTP response
+    Http::fake([
+        $url => Http::response($mockResponse),
+    ]);
+
+    // Ensure the cache is empty
+    Cache::shouldReceive('remember')
+        ->once()
+        ->with($cacheKey, Carbon::now()->addYear(), Mockery::type('callable'))
+        ->andReturnUsing(static function ($key, $ttl, $callback) {
+            return $callback();
+        });
+
+    // Fetch the meta data
+    $data = MetaData::fetch($url);
+
+    // Assert the data is as expected
+    expect($data->toArray())->toBe([
+        'title' => 'Example Title',
+        'description' => 'Example Description',
+    ]);
+});
+
+it('returns an empty collection if the HTTP request fails', function () {
+    $url = 'https://example.com';
+
+    Http::fake([
+        $url => Http::response(null, 404),
+    ]);
+
+    $data = MetaData::fetch($url);
+
+    expect($data->isEmpty())->toBeTrue();
+});

From 322a48752b5b04828dcdccc8fcf1bbe4604a68bf Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 23 Oct 2024 23:47:42 +1100
Subject: [PATCH 12/29] fix: make parser conditional more strict

---
 app/Services/ParsableContentProviders/LinkProviderParsable.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 00fbf35e9..f4d2d7902 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -34,7 +34,7 @@ static function (array $matches): string {
                 if (! $isMail && $url) {
                     $metadata = MetaData::fetch($url);
 
-                    if ($metadata->isNotEmpty()) {
+                    if ($metadata->isNotEmpty() && ($metadata->has('image') || $metadata->has('html'))) {
                         // TODO: add tests for this logic to the parser unit test
                         return view('components.link-preview-card', [
                             'data' => $metadata,

From 2007d92fecc1e4a0018b96296fbdca5d205eac3e Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 14:29:02 +1100
Subject: [PATCH 13/29] feat(previews): clean up MetaData service and add
 youtube oembed previews.

---
 app/Services/MetaData.php | 53 ++++++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 4a881850c..0608b355f 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -15,6 +15,8 @@
 {
     /**
      * The Open Graph data.
+     *
+     * @var Collection<string, string>
      */
     private Collection $data;
 
@@ -23,12 +25,14 @@
      */
     public function __construct(private string $url)
     {
-        $this->data = Cache::remember(
+        /** @var Collection<string, string> $cachedData */
+        $cachedData = Cache::remember(
             Str::of($url)->slug()->prepend('preview_')->value(),
             now()->addYear(),
-            // NOTE: check why this data is not being cached, we are just caching a Collection in the DB & I can't see the data in the DB
-            fn () => $this->getData()
+            fn (): Collection => $this->getData()
         );
+
+        $this->data = $cachedData;
     }
 
     /**
@@ -48,35 +52,44 @@ public static function fetch(string $url): Collection
      */
     public function getData(): Collection
     {
+        $data = collect();
+
         try {
             $response = Http::get($this->url);
+
             if ($response->ok()) {
                 // TODO: add unit test for this service
                 $data = $this->parse($response->body())->filter(fn ($value) => $value !== '');
             }
         } catch (Exception) {
-            $data = collect();
+            // Do nothing,
         }
 
-        return $data ?? collect();
+        return $data;
     }
 
     /**
      * Fetch Twitter oEmbed data for a given tweet URL.
      *
-     * @return Collection<string, mixed>
+     * @return Collection<string, string>
      */
-    private function fetchTwitterOEmbed(string $tweetUrl): Collection
+    private function fetchOEmbed(string $service): Collection
     {
-        $oEmbedUrl = 'https://publish.twitter.com/oembed?url='.urlencode($tweetUrl);
+        $data = collect();
 
-        $response = Http::get($oEmbedUrl);
+        try {
+            $response = Http::get(
+                $service.'?url='.urlencode($this->url).'&maxwidth=446&maxheight=251&theme=dark&hide_thread=true&omit_script=true'
+            );
 
-        if ($response->ok()) {
-            $data = $response->json();
+            if ($response->ok()) {
+                $data = collect((array) $response->json())->filter(fn ($value) => $value !== '');
+            }
+        } catch (Exception) {
+            // Do nothing,
         }
 
-        return collect($data ?? []);
+        return $data;
     }
 
     /**
@@ -107,7 +120,7 @@ private function parse(string $content): Collection
                     $data->put('keywords', $meta->getAttribute('content'));
                 }
 
-                // og & twitter meta tags
+                // og, twitter cards & other meta tags
                 collect(['name', 'property'])
                     ->map(fn ($name) => $meta->getAttribute($name))
                     ->filter(fn ($attribute) => in_array(explode(':', $attribute)[0], $interested_in))
@@ -120,9 +133,9 @@ private function parse(string $content): Collection
             }
         }
 
-        // if the title is x.com, fetch twitter oEmbed & add to data
+        // fetch oEmbed data for X / Twitter
         if ($data->has('site_name') && $data->get('site_name') === 'X (formerly Twitter)') {
-            $x = $this->fetchTwitterOEmbed($this->url);
+            $x = $this->fetchOEmbed(service: 'https://publish.twitter.com/oembed');
             if ($x->isNotEmpty()) {
                 foreach ($x as $key => $value) {
                     $data->put($key, $value);
@@ -130,6 +143,16 @@ private function parse(string $content): Collection
             }
         }
 
+        // fetch oEmbed data for YouTube
+        if ($data->has('site_name') && $data->get('site_name') === 'YouTube') {
+            $youtube = $this->fetchOEmbed(service: 'https://www.youtube.com/oembed');
+            if ($youtube->isNotEmpty()) {
+                foreach ($youtube as $key => $value) {
+                    $data->put($key, $value);
+                }
+            }
+        }
+
         return $data->unique();
     }
 }

From e03bfec0959d03c49123158c8f417cc991b75740 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 14:29:30 +1100
Subject: [PATCH 14/29] test(previews): add full coverage & mutation for the
 MetaData service

---
 tests/Unit/Services/MetaDataTest.php | 65 ++++++++++++++--------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/tests/Unit/Services/MetaDataTest.php b/tests/Unit/Services/MetaDataTest.php
index a24774f2a..a3c3fefaf 100644
--- a/tests/Unit/Services/MetaDataTest.php
+++ b/tests/Unit/Services/MetaDataTest.php
@@ -3,55 +3,56 @@
 declare(strict_types=1);
 
 use App\Services\MetaData;
-use Carbon\Carbon;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
 
 mutates(MetaData::class);
 
-it('fetches and caches meta data for a given URL', function () {
-    $url = 'https://example.com';
+it('returns the cached meta data if it exists', function () {
+    $url = 'https://laravel.com';
     $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
-    $mockResponse = <<<'HTML'
-    <html>
-        <head>
-            <meta name="title" content="Example Title">
-            <meta name="description" content="Example Description">
-            <meta name="og:title" content="Example Title">
-            <meta name="og:description" content="Example Description">
-        </head>
-    </html>
-    HTML;
-
-    // Mock the HTTP response
-    Http::fake([
-        $url => Http::response($mockResponse),
+    $cachedData = collect([
+        'title' => 'Laravel - The PHP Framework For Web Artisans',
+        'description' => 'Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.',
+        'type' => 'website',
+        'url' => 'https://laravel.com/',
+        'image' => 'https://laravel.com/img/og-image.jpg',
+        'card' => 'summary_large_image',
     ]);
 
-    // Ensure the cache is empty
-    Cache::shouldReceive('remember')
-        ->once()
-        ->with($cacheKey, Carbon::now()->addYear(), Mockery::type('callable'))
-        ->andReturnUsing(static function ($key, $ttl, $callback) {
-            return $callback();
-        });
+    $data = MetaData::fetch($url);
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->toArray())->toBe($cachedData->toArray());
+});
 
-    // Fetch the meta data
+it('gets the youtube oembed data', function () {
+    $url = 'https://youtu.be/emMYyeBfYlM';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
     $data = MetaData::fetch($url);
 
-    // Assert the data is as expected
-    expect($data->toArray())->toBe([
-        'title' => 'Example Title',
-        'description' => 'Example Description',
-    ]);
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('title'))->toBe('Migrating Brent’s PHPUnit Test Suite to Pest')
+        ->and($data->get('type'))->toBe('video')
+        ->and($data->has('html'))->toBeTrue();
+});
+
+it('get the twitter oembed data', function () {
+    $url = 'https://x.com/enunomaduro/status/1845794776886493291';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $data = MetaData::fetch($url);
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('type'))->toBe('rich')
+        ->and($data->has('html'))->toBeTrue();
 });
 
 it('returns an empty collection if the HTTP request fails', function () {
-    $url = 'https://example.com';
+    $url = 'https://aurlthatdoesnotexist.com';
 
     Http::fake([
-        $url => Http::response(null, 404),
+        $url => Http::response('', 404),
     ]);
 
     $data = MetaData::fetch($url);

From b32dbacdd18e8a8ebf454febcc1a5b54517729df Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 21:10:16 +1100
Subject: [PATCH 15/29] test(previews): trim rendered preview card markup
 strings

---
 .../ParsableContentProviders/LinkProviderParsable.php        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 5013647d6..082431d78 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -42,11 +42,10 @@ function (array $matches): string {
                     $metadata = MetaData::fetch($url);
 
                     if ($metadata->isNotEmpty() && ($metadata->has('image') || $metadata->has('html'))) {
-                        // TODO: add tests for this logic to the parser unit test
-                        return view('components.link-preview-card', [
+                        return trim(view('components.link-preview-card', [
                             'data' => $metadata,
                             'url' => $url,
-                        ])->render();
+                        ])->render());
                     }
                 }
 

From bfcad88c0c3afbb01b6d8bcd269c16a53744f10b Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 21:38:32 +1100
Subject: [PATCH 16/29] test(previews): add script for twitter widget

---
 resources/views/layouts/components/head.blade.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/views/layouts/components/head.blade.php b/resources/views/layouts/components/head.blade.php
index 7d3d00a69..9c0ccd4a6 100644
--- a/resources/views/layouts/components/head.blade.php
+++ b/resources/views/layouts/components/head.blade.php
@@ -207,6 +207,8 @@
     }
 </style>
 
+<script id="twitter-widget" async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
 <script>
     function isDarkTheme() {
         return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)

From f4b7c3a3184724fa2fc5d8369aa02e1cade29e03 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 21:39:03 +1100
Subject: [PATCH 17/29] test(previews): handle case for og:player tags (vimeo,
 etc)

---
 .../components/link-preview-card.blade.php    | 61 +++++++++++--------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
index aeb310d91..7b89bfaec 100644
--- a/resources/views/components/link-preview-card.blade.php
+++ b/resources/views/components/link-preview-card.blade.php
@@ -1,24 +1,39 @@
-@if($data->has('image'))
+<div
+    id="link-preview-card"
+    data-url="{{ $url }}"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+@if ($data->has('html'))
+    @if ($data->get('site_name') === 'X (formerly Twitter)')
+        @php($tweetId = explode('/', $url))
+        <div data-tweet-id="{{ end($tweetId) }}" class="w-full overflow-hidden">
+            {!! $data->get('html') !!}
+        </div>
+    @else
+        <div class="w-full overflow-hidden">
+            {!! $data->get('html') !!}
+        </div>
+    @endif
+@elseif ($data->has('player'))
+    <iframe
+        class="w-full
+        h-[250px]"
+        src="{{ $data->get('player') }}"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+    ></iframe>
+@elseif($data->has('image'))
     @php($shortUrl = parse_url($url)['host'])
-    <div
-        id="link-preview-card"
-        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
-        <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
-            <div
-                title="Click to visit: {{ $shortUrl }}"
-                class="relative w-full
-                bg-slate-100/90
-                border
-                border-slate-300
-                dark:border-0
-                rounded-lg
-                dark:group-hover/preview:border-0
-                overflow-hidden">
-                <img
-                    src="{{ $data->get('image') }}"
-                    alt="{{ $data->get('title') ?? $url }}"
-                    class="object-cover object-center h-[228px] w-[513px]"
-                />
+    <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: {{ $shortUrl }}"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="{{ $data->get('image') }}"
+                        alt="{{ $data->get('title') ?? $url }}"
+                        class="object-cover object-center h-[228px] w-[513px]"
+                    />
                 <div
                     class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
                     <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
@@ -31,9 +46,5 @@ class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100
             <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: {{ $shortUrl}}</a>
         </div>
-    </div>
-@elseif ($data->has('html'))
-    <div class="md:flex-shrink-0">
-        {!! $data->get('html') !!}
-    </div>
 @endif
+</div>

From 025f692978e0c4cc4ce2a06622595f8f69d238c5 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 21:40:11 +1100
Subject: [PATCH 18/29] test(previews): update theme switcher for the twitter
 embeds

---
 resources/js/theme-switch.js | 54 +++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/resources/js/theme-switch.js b/resources/js/theme-switch.js
index 1c13eb19f..58e5d2b07 100644
--- a/resources/js/theme-switch.js
+++ b/resources/js/theme-switch.js
@@ -1,26 +1,60 @@
 const themeSwitch = () => ({
-
     theme: 'system',
+    currentTheme: null,
 
     init() {
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
 
-        const currentTheme = localStorage.getItem('theme') || this.theme;
-
-        this.setTheme(currentTheme);
+        const savedTheme = localStorage.getItem('theme') || this.theme;
+        this.setTheme(savedTheme);
     },
 
     setTheme(theme) {
-        this.theme = theme
+        this.theme = theme;
 
-        if (theme == 'dark' || theme == 'light') {
-            localStorage.setItem('theme', theme)
+        if (theme === 'dark' || theme === 'light') {
+            localStorage.setItem('theme', theme);
         } else {
             localStorage.removeItem('theme');
         }
 
-        updateTheme();
+        this.updateTheme();
+    },
+
+    getCurrentTheme() {
+        if (this.theme === 'system') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return this.theme;
+    },
+
+    updateTheme() {
+        const newTheme = this.getCurrentTheme();
+
+        document.documentElement.classList.remove('dark', 'light');
+        document.documentElement.classList.add(newTheme);
+
+        if (this.currentTheme !== newTheme) {
+            this.currentTheme = newTheme;
+            this.renderTweets(newTheme);
+        }
+    },
+
+    renderTweets(theme) {
+        const tweetContainers = document.querySelectorAll('div[data-tweet-id]');
+
+        if (tweetContainers.length > 0) {
+            tweetContainers.forEach(container => {
+                container.innerHTML = '';
+
+                window.twttr.widgets.createTweet(container.dataset.tweetId, container, {
+                    theme: theme,
+                    conversation: 'none',
+                    align: 'center',
+                });
+            });
+        }
     },
-})
+});
 
-export { themeSwitch }
+export { themeSwitch };

From ef27a478b38b98c2aa2f59eff8474b2891957a37 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 21:48:33 +1100
Subject: [PATCH 19/29] test(previews): handle sanitizing sharable content to
 remove link-preview-cards

---
 .../views/livewire/questions/show.blade.php   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index 1cbae092d..5643f9967 100644
--- a/resources/views/livewire/questions/show.blade.php
+++ b/resources/views/livewire/questions/show.blade.php
@@ -318,6 +318,23 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                             >
                                 <x-heroicon-o-link class="size-4" />
                             </button>
+                            @php
+                                // we need to handle sharing the content when we have a link-preview-card
+                                $sharableQuestion = str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content);
+                                $link = null;
+
+                                // we will extract the preview card markup from the content.
+                                if (preg_match('/<div\s+id="link-preview-card"[^>]*>(.*)<\/div>(?!.*<\/div>)/si', $sharableQuestion, $matches)) {
+                                    $linkPreviewCard = $matches[0];
+
+                                    if (preg_match('/data-url="([^"]*)"/', $linkPreviewCard, $urlMatches)) {
+                                        $link = " {$urlMatches[1]} ";
+                                    }
+                                }
+
+                                // return the sanitized sharable content
+                                $sharable = $link ? str_replace($linkPreviewCard, $link, $sharableQuestion) : $sharableQuestion;
+                            @endphp
                             <button
                                 data-navigate-ignore="true"
                                 x-cloak
@@ -325,7 +342,7 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                                 x-on:click="
                                     twitter({
                                         url: '{{ route('questions.show', ['username' => $question->to->username, 'question' => $question]) }}',
-                                        question: '{{ str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content) }}',
+                                        question: '{{ $sharable }}',
                                         message: '{{ $question->isSharedUpdate() ? 'See it on Pinkary' : 'See response on Pinkary' }}',
                                     })
                                 "
@@ -377,6 +394,7 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                 </div>
             </div>
         </x-modal>
+
     @elseif (auth()->user()?->is($user))
         <livewire:questions.edit
             :questionId="$question->id"

From d97199ce4da749080b146195dddb568e9fdb26af Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 22:00:23 +1100
Subject: [PATCH 20/29] chore: lint

---
 app/Services/MetaData.php                          | 11 +++++------
 .../LinkProviderParsable.php                       | 14 +++++++++-----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 0608b355f..8d9649e91 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -58,8 +58,7 @@ public function getData(): Collection
             $response = Http::get($this->url);
 
             if ($response->ok()) {
-                // TODO: add unit test for this service
-                $data = $this->parse($response->body())->filter(fn ($value) => $value !== '');
+                $data = $this->parse($response->body())->filter(fn ($value): bool => $value !== '');
             }
         } catch (Exception) {
             // Do nothing,
@@ -83,7 +82,7 @@ private function fetchOEmbed(string $service): Collection
             );
 
             if ($response->ok()) {
-                $data = collect((array) $response->json())->filter(fn ($value) => $value !== '');
+                $data = collect((array) $response->json())->filter(fn ($value): bool => $value !== '');
             }
         } catch (Exception) {
             // Do nothing,
@@ -122,9 +121,9 @@ private function parse(string $content): Collection
 
                 // og, twitter cards & other meta tags
                 collect(['name', 'property'])
-                    ->map(fn ($name) => $meta->getAttribute($name))
-                    ->filter(fn ($attribute) => in_array(explode(':', $attribute)[0], $interested_in))
-                    ->each(function ($attribute) use ($data, $meta) {
+                    ->map(fn ($name): string => $meta->getAttribute($name))
+                    ->filter(fn ($attribute): bool => in_array(explode(':', (string) $attribute)[0], $interested_in))
+                    ->each(function ($attribute) use ($data, $meta): void {
                         $key = explode(':', $attribute)[1];
                         if (! $data->has($key)) {
                             $data->put($key, $meta->getAttribute('content'));
diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 082431d78..207b5c68f 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -5,8 +5,8 @@
 namespace App\Services\ParsableContentProviders;
 
 use App\Contracts\Services\ParsableContentProvider;
-use Illuminate\Support\Str;
 use App\Services\MetaData;
+use Illuminate\Support\Str;
 
 final readonly class LinkProviderParsable implements ParsableContentProvider
 {
@@ -42,10 +42,14 @@ function (array $matches): string {
                     $metadata = MetaData::fetch($url);
 
                     if ($metadata->isNotEmpty() && ($metadata->has('image') || $metadata->has('html'))) {
-                        return trim(view('components.link-preview-card', [
-                            'data' => $metadata,
-                            'url' => $url,
-                        ])->render());
+                        $trimmed = trim(
+                            view('components.link-preview-card', [
+                                'data' => $metadata,
+                                'url' => $url,
+                            ])->render()
+                        );
+
+                        return (string) preg_replace('/<!--(.|\s)*?-->/', '', $trimmed);
                     }
                 }
 

From f50a45040a71424862c5ae681e7c83d014a0272e Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Tue, 29 Oct 2024 22:00:45 +1100
Subject: [PATCH 21/29] test: update content test for the expected output of
 the final preview card

---
 tests/Unit/Services/ContentTest.php | 69 +++++++++++++----------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/tests/Unit/Services/ContentTest.php b/tests/Unit/Services/ContentTest.php
index c4c28fda7..295262906 100644
--- a/tests/Unit/Services/ContentTest.php
+++ b/tests/Unit/Services/ContentTest.php
@@ -17,24 +17,20 @@
 
     expect($provider->parse($content))->toBe(
         'Sure, here is the link: <div
-        id="link-preview-card"
-        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
+    id="link-preview-card"
+    data-url="https://laravel.com"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
         <a href="https://laravel.com" target="_blank" rel="noopener noreferrer">
-            <div
-                title="Click to visit: laravel.com"
-                class="relative w-full
-                bg-slate-100/90
-                border
-                border-slate-300
-                dark:border-0
-                rounded-lg
-                dark:group-hover/preview:border-0
-                overflow-hidden">
-                <img
-                    src="https://laravel.com/img/og-image.jpg"
-                    alt="Laravel - The PHP Framework For Web Artisans"
-                    class="object-cover object-center h-[228px] w-[513px]"
-                />
+        <div
+            title="Click to visit: laravel.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://laravel.com/img/og-image.jpg"
+                        alt="Laravel - The PHP Framework For Web Artisans"
+                        class="object-cover object-center h-[228px] w-[513px]"
+                    />
                 <div
                     class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
                     <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
@@ -47,8 +43,9 @@ class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100
             <a href="https://laravel.com" target="_blank" rel="noopener noreferrer"
                class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.com</a>
         </div>
-    </div>
-. Let me know if you have any questions.'
+
+</div>. Let me know if you have any questions.'
+
     );
 });
 
@@ -66,24 +63,20 @@ class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.c
     $provider = new App\Services\ParsableContent();
 
     expect($provider->parse($content))->toBe('<div
-        id="link-preview-card"
-        class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true">
+    id="link-preview-card"
+    data-url="https://pinkary.com/<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
         <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer">
-            <div
-                title="Click to visit: pinkary.com"
-                class="relative w-full
-                bg-slate-100/90
-                border
-                border-slate-300
-                dark:border-0
-                rounded-lg
-                dark:group-hover/preview:border-0
-                overflow-hidden">
-                <img
-                    src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
-                    alt="Nuno Maduro (@nunomaduro) / Pinkary"
-                    class="object-cover object-center h-[228px] w-[513px]"
-                />
+        <div
+            title="Click to visit: pinkary.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
+                        alt="Nuno Maduro (@nunomaduro) / Pinkary"
+                        class="object-cover object-center h-[228px] w-[513px]"
+                    />
                 <div
                     class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
                     <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
@@ -96,6 +89,6 @@ class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100
             <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer"
                class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: pinkary.com</a>
         </div>
-    </div>
-');
+
+</div>');
 });

From a4d12c9fe90e562f4e64209c1a39ce5308a1ae66 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:04:29 +1100
Subject: [PATCH 22/29] fix: remove inline comments

---
 app/Services/MetaData.php                         | 3 ---
 resources/views/livewire/questions/show.blade.php | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 8d9649e91..557e957e9 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -107,7 +107,6 @@ private function parse(string $content): Collection
 
         if ($metas->count() > 0) {
             foreach ($metas as $meta) {
-                // basic meta tags
                 if (mb_strtolower($meta->getAttribute('name')) === 'title') {
                     $data->put('title', $meta->getAttribute('content'));
                 }
@@ -119,7 +118,6 @@ private function parse(string $content): Collection
                     $data->put('keywords', $meta->getAttribute('content'));
                 }
 
-                // og, twitter cards & other meta tags
                 collect(['name', 'property'])
                     ->map(fn ($name): string => $meta->getAttribute($name))
                     ->filter(fn ($attribute): bool => in_array(explode(':', (string) $attribute)[0], $interested_in))
@@ -132,7 +130,6 @@ private function parse(string $content): Collection
             }
         }
 
-        // fetch oEmbed data for X / Twitter
         if ($data->has('site_name') && $data->get('site_name') === 'X (formerly Twitter)') {
             $x = $this->fetchOEmbed(service: 'https://publish.twitter.com/oembed');
             if ($x->isNotEmpty()) {
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index 5643f9967..ff5de8985 100644
--- a/resources/views/livewire/questions/show.blade.php
+++ b/resources/views/livewire/questions/show.blade.php
@@ -319,11 +319,9 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                                 <x-heroicon-o-link class="size-4" />
                             </button>
                             @php
-                                // we need to handle sharing the content when we have a link-preview-card
                                 $sharableQuestion = str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content);
                                 $link = null;
 
-                                // we will extract the preview card markup from the content.
                                 if (preg_match('/<div\s+id="link-preview-card"[^>]*>(.*)<\/div>(?!.*<\/div>)/si', $sharableQuestion, $matches)) {
                                     $linkPreviewCard = $matches[0];
 
@@ -332,7 +330,6 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                                     }
                                 }
 
-                                // return the sanitized sharable content
                                 $sharable = $link ? str_replace($linkPreviewCard, $link, $sharableQuestion) : $sharableQuestion;
                             @endphp
                             <button

From e0adde84c387009be17fe3f1c8992fcbc388e04d Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:08:12 +1100
Subject: [PATCH 23/29] fix: move to lazy evaluation of the metadata.

---
 app/Services/MetaData.php                     | 47 +++++++++++--------
 .../LinkProviderParsable.php                  |  3 +-
 tests/Unit/Services/MetaDataTest.php          | 25 ++++++++--
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 557e957e9..f03baea07 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -13,36 +13,29 @@
 
 final readonly class MetaData
 {
-    /**
-     * The Open Graph data.
-     *
-     * @var Collection<string, string>
-     */
-    private Collection $data;
-
     /**
      * Fetch the Open Graph data for a given URL.
      */
     public function __construct(private string $url)
     {
-        /** @var Collection<string, string> $cachedData */
-        $cachedData = Cache::remember(
-            Str::of($url)->slug()->prepend('preview_')->value(),
-            now()->addYear(),
-            fn (): Collection => $this->getData()
-        );
-
-        $this->data = $cachedData;
+        //
     }
 
     /**
-     * Fetch the parsed meta-data for a given URL.
+     * Fetch the parsed meta-data for the URL
      *
      * @return Collection<string, string>
      */
-    public static function fetch(string $url): Collection
+    public function fetch(): Collection
     {
-        return (new self($url))->data;
+        /** @var Collection<string, string> $cachedData */
+        $cachedData = Cache::remember(
+            Str::of($this->url)->slug()->prepend('preview_')->value(),
+            now()->addYear(),
+            fn (): Collection => $this->getData()
+        );
+
+        return $cachedData;
     }
 
     /**
@@ -68,7 +61,7 @@ public function getData(): Collection
     }
 
     /**
-     * Fetch Twitter oEmbed data for a given tweet URL.
+     * Fetch the oEmbed data for a given URL.
      *
      * @return Collection<string, string>
      */
@@ -139,7 +132,21 @@ private function parse(string $content): Collection
             }
         }
 
-        // fetch oEmbed data for YouTube
+        if ($data->has('site_name') && $data->get('site_name') === 'Vimeo') {
+            $vimeo = $this->fetchOEmbed(
+                service: 'https://vimeo.com/api/oembed.json',
+                options: [
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]
+            );
+            if ($vimeo->isNotEmpty()) {
+                foreach ($vimeo as $key => $value) {
+                    $data->put($key, $value);
+                }
+            }
+        }
+
         if ($data->has('site_name') && $data->get('site_name') === 'YouTube') {
             $youtube = $this->fetchOEmbed(service: 'https://www.youtube.com/oembed');
             if ($youtube->isNotEmpty()) {
diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 207b5c68f..8764ca1af 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -39,7 +39,8 @@ function (array $matches): string {
                 $url = $isMail ? 'mailto:'.$humanUrl : $url;
 
                 if (! $isMail && $url) {
-                    $metadata = MetaData::fetch($url);
+                    $service = new MetaData($url);
+                    $metadata = $service->fetch();
 
                     if ($metadata->isNotEmpty() && ($metadata->has('image') || $metadata->has('html'))) {
                         $trimmed = trim(
diff --git a/tests/Unit/Services/MetaDataTest.php b/tests/Unit/Services/MetaDataTest.php
index a3c3fefaf..11284196f 100644
--- a/tests/Unit/Services/MetaDataTest.php
+++ b/tests/Unit/Services/MetaDataTest.php
@@ -21,7 +21,8 @@
         'card' => 'summary_large_image',
     ]);
 
-    $data = MetaData::fetch($url);
+    $service = new MetaData($url);
+    $data = $service->fetch();
 
     expect(Cache::get($cacheKey))->toBe($data)
         ->and($data->toArray())->toBe($cachedData->toArray());
@@ -30,7 +31,8 @@
 it('gets the youtube oembed data', function () {
     $url = 'https://youtu.be/emMYyeBfYlM';
     $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
-    $data = MetaData::fetch($url);
+    $service = new MetaData($url);
+    $data = $service->fetch();
 
     expect(Cache::get($cacheKey))->toBe($data)
         ->and($data->get('title'))->toBe('Migrating Brent’s PHPUnit Test Suite to Pest')
@@ -38,16 +40,28 @@
         ->and($data->has('html'))->toBeTrue();
 });
 
-it('get the twitter oembed data', function () {
+it('gets the twitter oembed data', function () {
     $url = 'https://x.com/enunomaduro/status/1845794776886493291';
     $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
-    $data = MetaData::fetch($url);
+    $service = new MetaData($url);
+    $data = $service->fetch();
 
     expect(Cache::get($cacheKey))->toBe($data)
         ->and($data->get('type'))->toBe('rich')
         ->and($data->has('html'))->toBeTrue();
 });
 
+it('gets the vimdeo oembed data', function () {
+    $url = 'https://vimeo.com/123';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('type'))->toBe('video')
+        ->and($data->has('html'))->toBeTrue();
+});
+
 it('returns an empty collection if the HTTP request fails', function () {
     $url = 'https://aurlthatdoesnotexist.com';
 
@@ -55,7 +69,8 @@
         $url => Http::response('', 404),
     ]);
 
-    $data = MetaData::fetch($url);
+    $service = new MetaData($url);
+    $data = $service->fetch();
 
     expect($data->isEmpty())->toBeTrue();
 });

From ce79d00bd0d14f040c38c2e49fbfb8400cfb106d Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:34:16 +1100
Subject: [PATCH 24/29] fix: remove the player card, in favor of oEmbed api
 iframes

---
 resources/views/components/link-preview-card.blade.php | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
index 7b89bfaec..76ed677e8 100644
--- a/resources/views/components/link-preview-card.blade.php
+++ b/resources/views/components/link-preview-card.blade.php
@@ -14,14 +14,6 @@ class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
             {!! $data->get('html') !!}
         </div>
     @endif
-@elseif ($data->has('player'))
-    <iframe
-        class="w-full
-        h-[250px]"
-        src="{{ $data->get('player') }}"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-    ></iframe>
 @elseif($data->has('image'))
     @php($shortUrl = parse_url($url)['host'])
     <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">

From 15333947ca798f133f93c837214b01e407b248cb Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:34:45 +1100
Subject: [PATCH 25/29] fix: updated style of the objects in card

---
 resources/views/components/link-preview-card.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
index 76ed677e8..a800c8383 100644
--- a/resources/views/components/link-preview-card.blade.php
+++ b/resources/views/components/link-preview-card.blade.php
@@ -10,7 +10,7 @@ class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
             {!! $data->get('html') !!}
         </div>
     @else
-        <div class="w-full overflow-hidden">
+        <div class="w-full overflow-hidden rounded-lg border border-slate-300 dark:border-0">
             {!! $data->get('html') !!}
         </div>
     @endif
@@ -24,7 +24,7 @@ class="relative w-full bg-slate-100/90 border border-slate-300
                     <img
                         src="{{ $data->get('image') }}"
                         alt="{{ $data->get('title') ?? $url }}"
-                        class="object-cover object-center h-[228px] w-[513px]"
+                        class="object-cover object-center w-full h-56"
                     />
                 <div
                     class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">

From d9ef396c5d0dc51cfb2923828256dd5bcfda6796 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:36:57 +1100
Subject: [PATCH 26/29] fix: catch specific exception

---
 app/Services/MetaData.php | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index f03baea07..fce1429ba 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -5,7 +5,7 @@
 namespace App\Services;
 
 use DOMDocument;
-use Exception;
+use Illuminate\Http\Client\ConnectionException;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
@@ -43,7 +43,7 @@ public function fetch(): Collection
      *
      * @return Collection<string, string>
      */
-    public function getData(): Collection
+    private function getData(): Collection
     {
         $data = collect();
 
@@ -51,10 +51,11 @@ public function getData(): Collection
             $response = Http::get($this->url);
 
             if ($response->ok()) {
-                $data = $this->parse($response->body())->filter(fn ($value): bool => $value !== '');
+                $data = $this->parse($response->body())
+                    ->filter(fn ($value): bool => $value !== '');
             }
-        } catch (Exception) {
-            // Do nothing,
+        } catch (ConnectionException) {
+            // Catch but not capture the exception
         }
 
         return $data;
@@ -75,10 +76,11 @@ private function fetchOEmbed(string $service): Collection
             );
 
             if ($response->ok()) {
-                $data = collect((array) $response->json())->filter(fn ($value): bool => $value !== '');
+                $data = collect((array) $response->json())
+                    ->filter(fn ($value): bool => $value !== '');
             }
-        } catch (Exception) {
-            // Do nothing,
+        } catch (ConnectionException) {
+            // Catch but not capture the exception
         }
 
         return $data;

From ad87efaa2e8ce23822107ff561600f3732c0105a Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 14:57:37 +1100
Subject: [PATCH 27/29] fix: add allow list for the tags which we want to
 prevent any change of XSS with 'html' key

---
 app/Services/MetaData.php | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index fce1429ba..0fcde3a0c 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -64,15 +64,16 @@ private function getData(): Collection
     /**
      * Fetch the oEmbed data for a given URL.
      *
+     * @param  array<string, string>  $options
      * @return Collection<string, string>
      */
-    private function fetchOEmbed(string $service): Collection
+    private function fetchOEmbed(string $service, array $options): Collection
     {
         $data = collect();
 
         try {
             $response = Http::get(
-                $service.'?url='.urlencode($this->url).'&maxwidth=446&maxheight=251&theme=dark&hide_thread=true&omit_script=true'
+                url: $service.'?url='.urlencode($this->url).'&'.http_build_query($options)
             );
 
             if ($response->ok()) {
@@ -97,6 +98,7 @@ private function parse(string $content): Collection
         @$doc->loadHTML($content);
 
         $interested_in = ['og', 'twitter'];
+        $allowed = ['title', 'description', 'keywords', 'image', 'site_name', 'url', 'type'];
         $data = collect();
         $metas = $doc->getElementsByTagName('meta');
 
@@ -116,9 +118,9 @@ private function parse(string $content): Collection
                 collect(['name', 'property'])
                     ->map(fn ($name): string => $meta->getAttribute($name))
                     ->filter(fn ($attribute): bool => in_array(explode(':', (string) $attribute)[0], $interested_in))
-                    ->each(function ($attribute) use ($data, $meta): void {
+                    ->each(function ($attribute) use ($data, $allowed, $meta): void {
                         $key = explode(':', $attribute)[1];
-                        if (! $data->has($key)) {
+                        if (! $data->has($key) && in_array($key, $allowed, true)) {
                             $data->put($key, $meta->getAttribute('content'));
                         }
                     });
@@ -126,7 +128,15 @@ private function parse(string $content): Collection
         }
 
         if ($data->has('site_name') && $data->get('site_name') === 'X (formerly Twitter)') {
-            $x = $this->fetchOEmbed(service: 'https://publish.twitter.com/oembed');
+            $x = $this->fetchOEmbed(
+                service: 'https://publish.twitter.com/oembed',
+                options: [
+                    'dnt' => 'true',
+                    'omit_script' => 'true',
+                    'hide_thread' => 'true',
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]);
             if ($x->isNotEmpty()) {
                 foreach ($x as $key => $value) {
                     $data->put($key, $value);
@@ -150,7 +160,12 @@ private function parse(string $content): Collection
         }
 
         if ($data->has('site_name') && $data->get('site_name') === 'YouTube') {
-            $youtube = $this->fetchOEmbed(service: 'https://www.youtube.com/oembed');
+            $youtube = $this->fetchOEmbed(
+                service: 'https://www.youtube.com/oembed',
+                options: [
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]);
             if ($youtube->isNotEmpty()) {
                 foreach ($youtube as $key => $value) {
                     $data->put($key, $value);

From a6e7a973cbe52f65dd50992e6776692e6d913355 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 15:02:41 +1100
Subject: [PATCH 28/29] fix: change tests to use snapshots

---
 .../it_ignores_mention_inside__a_.snap        | 29 ++++++++
 .../Unit/Services/ContentTest/link.snap       |  1 +
 .../Unit/Services/ContentTest/mention.snap    |  1 +
 ...ith_images_or_html_oEmbeds_are_parsed.snap | 29 ++++++++
 tests/Unit/Services/ContentTest.php           | 70 +++----------------
 5 files changed, 68 insertions(+), 62 deletions(-)
 create mode 100644 tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap
 create mode 100644 tests/.pest/snapshots/Unit/Services/ContentTest/link.snap
 create mode 100644 tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap
 create mode 100644 tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap

diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap
new file mode 100644
index 000000000..0c17ab3a1
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap
@@ -0,0 +1,29 @@
+<div
+    id="link-preview-card"
+    data-url="https://pinkary.com/<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+        <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: pinkary.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
+                        alt="Nuno Maduro (@nunomaduro) / Pinkary"
+                        class="object-cover object-center w-full h-56"
+                    />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Nuno Maduro (@nunomaduro) / Pinkary</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: pinkary.com</a>
+        </div>
+
+</div>
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap
new file mode 100644
index 000000000..25f8f2fb8
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap
@@ -0,0 +1 @@
+Sure, here is the link: <a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://example.com">example.com</a>. Let me know if you have any questions.
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap
new file mode 100644
index 000000000..1edebaa07
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap
@@ -0,0 +1 @@
+<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>, let me know if you have any questions. Thanks <a href="/@xiCO2k" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@xiCO2k</a>.
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap
new file mode 100644
index 000000000..2b2f09667
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap
@@ -0,0 +1,29 @@
+Sure, here is the link: <div
+    id="link-preview-card"
+    data-url="https://laravel.com"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+        <a href="https://laravel.com" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: laravel.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://laravel.com/img/og-image.jpg"
+                        alt="Laravel - The PHP Framework For Web Artisans"
+                        class="object-cover object-center w-full h-56"
+                    />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Laravel - The PHP Framework For Web Artisans</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://laravel.com" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.com</a>
+        </div>
+
+</div>. Let me know if you have any questions.
\ No newline at end of file
diff --git a/tests/Unit/Services/ContentTest.php b/tests/Unit/Services/ContentTest.php
index 295262906..f26965da3 100644
--- a/tests/Unit/Services/ContentTest.php
+++ b/tests/Unit/Services/ContentTest.php
@@ -7,7 +7,8 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('Sure, here is the link: <a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://example.com">example.com</a>. Let me know if you have any questions.');
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 });
 
 test('only links with images or html oEmbeds are parsed', function () {
@@ -15,38 +16,8 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe(
-        'Sure, here is the link: <div
-    id="link-preview-card"
-    data-url="https://laravel.com"
-    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
->
-        <a href="https://laravel.com" target="_blank" rel="noopener noreferrer">
-        <div
-            title="Click to visit: laravel.com"
-            class="relative w-full bg-slate-100/90 border border-slate-300
-            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
-                    <img
-                        src="https://laravel.com/img/og-image.jpg"
-                        alt="Laravel - The PHP Framework For Web Artisans"
-                        class="object-cover object-center h-[228px] w-[513px]"
-                    />
-                <div
-                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
-                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
-                    ">
-                        Laravel - The PHP Framework For Web Artisans</h3>
-                </div>
-            </div>
-        </a>
-        <div class="flex items-center justify-between pt-4">
-            <a href="https://laravel.com" target="_blank" rel="noopener noreferrer"
-               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.com</a>
-        </div>
-
-</div>. Let me know if you have any questions.'
-
-    );
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 });
 
 test('mention', function () {
@@ -54,7 +25,8 @@ class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.c
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>, let me know if you have any questions. Thanks <a href="/@xiCO2k" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@xiCO2k</a>.');
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 });
 
 it('ignores mention inside <a>', function () {
@@ -62,33 +34,7 @@ class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.c
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('<div
-    id="link-preview-card"
-    data-url="https://pinkary.com/<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>"
-    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
->
-        <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer">
-        <div
-            title="Click to visit: pinkary.com"
-            class="relative w-full bg-slate-100/90 border border-slate-300
-            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
-                    <img
-                        src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
-                        alt="Nuno Maduro (@nunomaduro) / Pinkary"
-                        class="object-cover object-center h-[228px] w-[513px]"
-                    />
-                <div
-                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
-                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
-                    ">
-                        Nuno Maduro (@nunomaduro) / Pinkary</h3>
-                </div>
-            </div>
-        </a>
-        <div class="flex items-center justify-between pt-4">
-            <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer"
-               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: pinkary.com</a>
-        </div>
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 
-</div>');
 });

From 74ed75338a554d0fe4c999b55f82b194d2309747 Mon Sep 17 00:00:00 2001
From: Cam Kemshal-Bell <cam@iterated.tech>
Date: Wed, 30 Oct 2024 15:23:00 +1100
Subject: [PATCH 29/29] fix: lint

---
 app/Services/MetaData.php            | 2 +-
 tests/Unit/Services/MetaDataTest.php | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
index 0fcde3a0c..e7950bc70 100644
--- a/app/Services/MetaData.php
+++ b/app/Services/MetaData.php
@@ -117,7 +117,7 @@ private function parse(string $content): Collection
 
                 collect(['name', 'property'])
                     ->map(fn ($name): string => $meta->getAttribute($name))
-                    ->filter(fn ($attribute): bool => in_array(explode(':', (string) $attribute)[0], $interested_in))
+                    ->filter(fn ($attribute): bool => in_array(explode(':', $attribute)[0], $interested_in))
                     ->each(function ($attribute) use ($data, $allowed, $meta): void {
                         $key = explode(':', $attribute)[1];
                         if (! $data->has($key) && in_array($key, $allowed, true)) {
diff --git a/tests/Unit/Services/MetaDataTest.php b/tests/Unit/Services/MetaDataTest.php
index 11284196f..f65dc660d 100644
--- a/tests/Unit/Services/MetaDataTest.php
+++ b/tests/Unit/Services/MetaDataTest.php
@@ -18,7 +18,6 @@
         'type' => 'website',
         'url' => 'https://laravel.com/',
         'image' => 'https://laravel.com/img/og-image.jpg',
-        'card' => 'summary_large_image',
     ]);
 
     $service = new MetaData($url);
@@ -52,7 +51,7 @@
 });
 
 it('gets the vimdeo oembed data', function () {
-    $url = 'https://vimeo.com/123';
+    $url = 'https://vimeo.com/76979871';
     $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
     $service = new MetaData($url);
     $data = $service->fetch();