From cfc06421634c391c2c86d33fd49903e203d72b9d Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 18:43:47 +0000
Subject: [PATCH 01/14] feat: add fallback image to article image on summary
 page

---
 resources/views/components/articles/summary.blade.php | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index 1dfa30c9c..b564b5e95 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -7,7 +7,14 @@
     <div class="break-words">
         @if ($isFeatured)
             <a href="{{ route('articles.show', $article->slug()) }}">
-                <div class="w-full h-72 mb-6 rounded-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800" style="background-image: url({{ $article->heroImage() }});"></div>
+                <img class="w-full h-72 mb-6 rounded-lg bg-center bg-gray-800"
+                     src="{{ $article->heroImage() }}"
+                     alt="Example image"
+                     onerror="
+                          this.onerror=null;
+                          this.src='images/default-background.svg';
+                          this.classList.add('image-error');"
+                >
             </a>
         @endif
 

From 0ed6bea320944ac3c88856de84ba3afbb6abfbd5 Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 18:44:33 +0000
Subject: [PATCH 02/14] feat: we don't need to add class

---
 resources/views/components/articles/summary.blade.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index b564b5e95..bc5bd7370 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -13,7 +13,6 @@
                      onerror="
                           this.onerror=null;
                           this.src='images/default-background.svg';
-                          this.classList.add('image-error');"
                 >
             </a>
         @endif

From b699459cfd1b9f0204da42199225e59a99cb01d2 Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 18:45:50 +0000
Subject: [PATCH 03/14] feat: fix quotes

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

diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index bc5bd7370..43f46cefa 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -11,8 +11,8 @@
                      src="{{ $article->heroImage() }}"
                      alt="Example image"
                      onerror="
-                          this.onerror=null;
-                          this.src='images/default-background.svg';
+                        this.onerror=null;
+                        this.src='images/default-background.svg';"
                 >
             </a>
         @endif

From 93c2da3cc33eb835a914b1b8d814fd76658d50a3 Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 21:46:50 +0000
Subject: [PATCH 04/14] feat: add fallback image to article image on show page

---
 resources/views/articles/show.blade.php | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index b473b2936..bf2a42a5a 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -20,10 +20,15 @@
 
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
-                <div
-                    class="w-full bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 p-6 lg:p-8"
-                    style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url({{ $article->heroImage(2000,384) }});"
-                >
+                <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
+                    <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
+                         style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))"
+                         src="{{ $article->heroImage(2000,384) }}"
+                         alt="Example image"
+                         onerror="
+                        this.onerror=null;
+                        this.src='images/default-background.svg';"
+                    >
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />

From 9bd1f577b25af9d3ae6f54af99ca722d77549935 Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 21:54:51 +0000
Subject: [PATCH 05/14] fix: update alt tag

---
 resources/views/articles/show.blade.php               | 6 +++---
 resources/views/components/articles/summary.blade.php | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index bf2a42a5a..515087775 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -24,10 +24,10 @@
                     <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
                          style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))"
                          src="{{ $article->heroImage(2000,384) }}"
-                         alt="Example image"
+                         alt="Article Hero Image"
                          onerror="
-                        this.onerror=null;
-                        this.src='images/default-background.svg';"
+                            this.onerror=null;
+                            this.src='images/default-background.svg';"
                     >
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index 43f46cefa..e6fc367f9 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -9,7 +9,7 @@
             <a href="{{ route('articles.show', $article->slug()) }}">
                 <img class="w-full h-72 mb-6 rounded-lg bg-center bg-gray-800"
                      src="{{ $article->heroImage() }}"
-                     alt="Example image"
+                     alt="Article Hero Image"
                      onerror="
                         this.onerror=null;
                         this.src='images/default-background.svg';"

From 46ac6e5e84957106f2ae582374c2a0e23b2076ca Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Thu, 7 Nov 2024 22:00:50 +0000
Subject: [PATCH 06/14] fix: use asset so the fallback image loads

---
 resources/views/articles/show.blade.php               | 4 ++--
 resources/views/components/articles/summary.blade.php | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 515087775..510b74acb 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -26,8 +26,8 @@
                          src="{{ $article->heroImage(2000,384) }}"
                          alt="Article Hero Image"
                          onerror="
-                            this.onerror=null;
-                            this.src='images/default-background.svg';"
+                            this.onerror=null
+                            this.src='{{ asset('images/default-background.svg') }}'"
                     >
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index e6fc367f9..58fb65381 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -12,7 +12,7 @@
                      alt="Article Hero Image"
                      onerror="
                         this.onerror=null;
-                        this.src='images/default-background.svg';"
+                        this.src='{{ asset('images/default-background.svg') }}'"
                 >
             </a>
         @endif

From 56cbf23024bb0bbf18ab415f164e263ff403b0cb Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 11:48:46 +0000
Subject: [PATCH 07/14] feat: add object-over to img to match behaviour when it
 used to be div

---
 resources/views/components/articles/summary.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
index 58fb65381..9ad87ff51 100644
--- a/resources/views/components/articles/summary.blade.php
+++ b/resources/views/components/articles/summary.blade.php
@@ -7,7 +7,7 @@
     <div class="break-words">
         @if ($isFeatured)
             <a href="{{ route('articles.show', $article->slug()) }}">
-                <img class="w-full h-72 mb-6 rounded-lg bg-center bg-gray-800"
+                <img class="w-full h-72 mb-6 rounded-lg bg-center bg-gray-800 object-cover"
                      src="{{ $article->heroImage() }}"
                      alt="Article Hero Image"
                      onerror="

From b2ddd584f24bc34df8351a857b2608b1616ee4e1 Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 14:43:04 +0000
Subject: [PATCH 08/14] feat: add back up image to article on overview summary

---
 .../components/articles/overview-summary.blade.php   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/articles/overview-summary.blade.php b/resources/views/components/articles/overview-summary.blade.php
index b0cfa6a1a..e738ebe4f 100644
--- a/resources/views/components/articles/overview-summary.blade.php
+++ b/resources/views/components/articles/overview-summary.blade.php
@@ -6,12 +6,14 @@
 
 <div class="h-full rounded-lg shadow-lg bg-white lg:p-5">
     <div class="flex flex-col gap-x-8 lg:flex-row">
-        <a href="{{ route('articles.show', $article->slug()) }}" class="block">
-            <div
-                class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 lg:w-48 lg:h-full lg:rounded-lg"
-                style="background-image: url({{ $article->heroImage() }});"
+        <a href="{{ route('articles.show', $article->slug()) }}" class="block lg:aspect-video">
+            <img class="w-full h-32 rounded-t-lg bg-center bg-gray-800 lg:h-full lg:w-48 lg:rounded-lg object-none max-w-none"
+                 src="{{ $article->heroImage() }}"
+                 alt="Article Hero Image"
+                 onerror="
+                    this.onerror=null;
+                    this.src='images/default-background.svg';"
             >
-            </div>
         </a>
 
         <div class="flex flex-col gap-y-3 p-4 lg:p-0 lg:gap-y-3.5 w-full">

From b48e5caa7430625c7b349370471a60da8fc7d1bd Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 15:47:35 +0000
Subject: [PATCH 09/14] feat: add back up image to article on user summary

---
 .../views/components/articles/user-summary.blade.php   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/articles/user-summary.blade.php b/resources/views/components/articles/user-summary.blade.php
index bc97c7a19..9c0cf7908 100644
--- a/resources/views/components/articles/user-summary.blade.php
+++ b/resources/views/components/articles/user-summary.blade.php
@@ -5,11 +5,13 @@
 <div class="h-full rounded-lg shadow-lg bg-white">
     <div class="flex flex-col h-full gap-x-8">
         <a href="{{ route('articles.show', $article->slug()) }}" class="block">
-            <div
-                class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 lg:h-40"
-                style="background-image: url({{ $article->heroImage() }});"
+            <img class="w-full h-32 rounded-t-lg bg-center bg-gray-800 lg:h-40 object-cover"
+                 src="{{ $article->heroImage() }}"
+                 alt="Article Hero Image"
+                 onerror="
+                    this.onerror=null;
+                    this.src='{{ asset('images/default-background.svg') }}'"
             >
-            </div>
         </a>
 
         <div class="flex flex-col h-full gap-y-3 p-4">

From 59092d899a5b8b0eecbd8b1c6b10f7df4e36f62a Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 16:51:11 +0000
Subject: [PATCH 10/14] feat: add gradient background

---
 resources/views/articles/show.blade.php | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 510b74acb..1c8fa1092 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -21,14 +21,16 @@
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
                 <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
-                    <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
-                         style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))"
-                         src="{{ $article->heroImage(2000,384) }}"
-                         alt="Article Hero Image"
-                         onerror="
-                            this.onerror=null
-                            this.src='{{ asset('images/default-background.svg') }}'"
-                    >
+                    <div class="-z-10">
+                        <img class="absolute w-full h-full left-0 top-0 object-cover"
+                             src="{{ $article->heroImage(2000,384) }}"
+                             alt="Article Hero Image"
+                             onerror="
+                                this.onerror=null
+                                this.src='{{ asset('images/default-background.svg') }}'"
+                        >
+                        <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40"></div>
+                    </div>
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />

From 2067a75a686b689b59e0cc38a5e27c0223df083a Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 16:57:15 +0000
Subject: [PATCH 11/14] feat: fix gradient background

---
 resources/views/articles/show.blade.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 1c8fa1092..99aedcb41 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -21,16 +21,14 @@
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
                 <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
-                    <div class="-z-10">
-                        <img class="absolute w-full h-full left-0 top-0 object-cover"
+                        <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
                              src="{{ $article->heroImage(2000,384) }}"
                              alt="Article Hero Image"
                              onerror="
                                 this.onerror=null
                                 this.src='{{ asset('images/default-background.svg') }}'"
                         >
-                        <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40"></div>
-                    </div>
+                        <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40 -z-10"></div>
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />

From 13985d4d5263b9c30772ebc3fe1604244686551c Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 17:09:43 +0000
Subject: [PATCH 12/14] feat: remove hasHeroImage because it is now handled in
 front end

---
 app/Models/Article.php | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/app/Models/Article.php b/app/Models/Article.php
index 770aa7973..c3543c7ef 100644
--- a/app/Models/Article.php
+++ b/app/Models/Article.php
@@ -101,11 +101,6 @@ public function excerpt(int $limit = 100): string
         return Str::limit(strip_tags(md_to_html($this->body())), $limit);
     }
 
-    public function hasHeroImage(): bool
-    {
-        return $this->hero_image_url !== null;
-    }
-
     public function hasHeroImageAuthor(): bool
     {
         return $this->hero_image_author_name !== null &&
@@ -114,11 +109,7 @@ public function hasHeroImageAuthor(): bool
 
     public function heroImage($width = 400, $height = 300): string
     {
-        if ($this->hasHeroImage()) {
-            return "{$this->hero_image_url}&fit=clip&w={$width}&h={$height}&utm_source=Laravel.io&utm_medium=referral";
-        }
-
-        return asset('images/default-background.svg');
+        return "{$this->hero_image_url}&fit=clip&w={$width}&h={$height}&utm_source=Laravel.io&utm_medium=referral";
     }
 
     public function originalUrl(): ?string

From 7faf8a732a5a5ec8675b4d8188089ef337e24e0a Mon Sep 17 00:00:00 2001
From: nathan <nathancowin01@gmail.com>
Date: Sat, 9 Nov 2024 17:31:01 +0000
Subject: [PATCH 13/14] feat: fix indentation

---
 resources/views/articles/show.blade.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 99aedcb41..4492c0fc7 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -21,14 +21,14 @@
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
                 <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
-                        <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
-                             src="{{ $article->heroImage(2000,384) }}"
-                             alt="Article Hero Image"
-                             onerror="
-                                this.onerror=null
-                                this.src='{{ asset('images/default-background.svg') }}'"
-                        >
-                        <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40 -z-10"></div>
+                    <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
+                         src="{{ $article->heroImage(2000,384) }}"
+                         alt="Article Hero Image"
+                         onerror="
+                            this.onerror=null
+                            this.src='{{ asset('images/default-background.svg') }}'"
+                    >
+                    <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40 -z-10"></div>
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />

From 01c98e2bf8a5f0be1ab88c54826c46c89b2ff9ea Mon Sep 17 00:00:00 2001
From: Dries Vints <dries@vints.be>
Date: Fri, 22 Nov 2024 15:33:25 +0100
Subject: [PATCH 14/14] wip

---
 resources/views/articles/show.blade.php | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 05d782b06..87e631c9b 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -20,13 +20,17 @@
 
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
-                <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
+                <div
+                    class="w-full bg-center bg-gray-800"
+                    style="background-image: url('{{ asset('images/default-background.svg') }}')"
+                >
+                <div class="relative w-full bg-center p-6 lg:p-8 z-10">
                     <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
                          src="{{ $article->heroImage(2000,384) }}"
                          alt="Article Hero Image"
                          onerror="
                             this.onerror=null
-                            this.src='{{ asset('images/default-background.svg') }}'"
+                            this.src=''"
                     >
                     <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40 -z-10"></div>
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
@@ -163,7 +167,7 @@ class="prose prose-lg text-gray-800 prose-lio"
                                 @endif
 
                                 @if ($article->author()->hasTwitterAccount())
-                                    <a href="https://x.com/{{ $article->author()->twitter() }}" class="text-twitter">
+                                    <a href="https://twitter.com/{{ $article->author()->twitter() }}" class="text-twitter">
                                         <x-si-x class="w-6 h-6" />
                                     </a>
                                 @endif