From 2a803a2b7ac986a96d2cd3dea6c1b3fb2aa48068 Mon Sep 17 00:00:00 2001 From: Joe Dixon Date: Fri, 13 Aug 2021 21:54:42 +0100 Subject: [PATCH 1/4] Implement article detail --- .../Articles/ArticlesController.php | 23 ++- app/Http/Livewire/LikeArticle.php | 2 + resources/svg/facebook.svg | 3 + resources/svg/linkedin.svg | 3 + resources/svg/pin.svg | 5 + resources/views/articles/_sidebar.blade.php | 35 ---- resources/views/articles/show.blade.php | 187 ++++++++++++------ .../components/articles/actions.blade.php | 51 +++++ .../components/articles/engage.blade.php | 24 +++ .../components/articles/featured.blade.php | 6 +- .../components/articles/summary.blade.php | 2 +- .../buttons/danger-button.blade.php | 6 +- .../views/components/light-tag.blade.php | 3 + .../views/livewire/like-article.blade.php | 18 +- tailwind.config.js | 2 + 15 files changed, 248 insertions(+), 122 deletions(-) create mode 100644 resources/svg/facebook.svg create mode 100644 resources/svg/linkedin.svg create mode 100644 resources/svg/pin.svg delete mode 100644 resources/views/articles/_sidebar.blade.php create mode 100644 resources/views/components/articles/actions.blade.php create mode 100644 resources/views/components/articles/engage.blade.php create mode 100644 resources/views/components/light-tag.blade.php diff --git a/app/Http/Controllers/Articles/ArticlesController.php b/app/Http/Controllers/Articles/ArticlesController.php index 421f7d2b1..8e7c40a89 100644 --- a/app/Http/Controllers/Articles/ArticlesController.php +++ b/app/Http/Controllers/Articles/ArticlesController.php @@ -2,18 +2,19 @@ namespace App\Http\Controllers\Articles; -use App\Http\Controllers\Controller; -use App\Http\Middleware\Authenticate; -use App\Http\Requests\ArticleRequest; +use App\Models\Tag; +use App\Models\User; +use App\Models\Article; use App\Jobs\CreateArticle; use App\Jobs\DeleteArticle; use App\Jobs\UpdateArticle; -use App\Models\Article; -use App\Models\Tag; -use App\Models\User; use App\Policies\ArticlePolicy; -use Illuminate\Auth\Middleware\EnsureEmailIsVerified; +use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Auth; +use App\Http\Middleware\Authenticate; +use App\Http\Requests\ArticleRequest; +use Illuminate\Support\Facades\Cache; +use Illuminate\Auth\Middleware\EnsureEmailIsVerified; class ArticlesController extends Controller { @@ -45,8 +46,16 @@ public function show(Article $article) 404, ); + $trendingArticles = Cache::remember('trendingArticles', now()->addHour(), function () { + return Article::published() + ->trending() + ->limit(3) + ->get(); + }); + return view('articles.show', [ 'article' => $article, + 'trendingArticles' => $trendingArticles, ]); } diff --git a/app/Http/Livewire/LikeArticle.php b/app/Http/Livewire/LikeArticle.php index 8f45cafe0..985f94767 100644 --- a/app/Http/Livewire/LikeArticle.php +++ b/app/Http/Livewire/LikeArticle.php @@ -15,6 +15,8 @@ final class LikeArticle extends Component public $article; + public $isSidebar = true; + protected $listeners = ['likeToggled']; public function mount(Article $article): void diff --git a/resources/svg/facebook.svg b/resources/svg/facebook.svg new file mode 100644 index 000000000..fc5cd3f74 --- /dev/null +++ b/resources/svg/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/resources/svg/linkedin.svg b/resources/svg/linkedin.svg new file mode 100644 index 000000000..5e1ec38cd --- /dev/null +++ b/resources/svg/linkedin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/resources/svg/pin.svg b/resources/svg/pin.svg new file mode 100644 index 000000000..2b66c483b --- /dev/null +++ b/resources/svg/pin.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/resources/views/articles/_sidebar.blade.php b/resources/views/articles/_sidebar.blade.php deleted file mode 100644 index 382562523..000000000 --- a/resources/views/articles/_sidebar.blade.php +++ /dev/null @@ -1,35 +0,0 @@ -
- @if (Auth::check() && $article->isAuthoredBy(Auth::user())) - - - - @endif - - @if ($article->isNotPublished() && $article->isAwaitingApproval()) - @can(App\Policies\ArticlePolicy::APPROVE, $article) - - - - @endcan - @else - @can(App\Policies\ArticlePolicy::DISAPPROVE, $article) - - - - @endcan - @endif - - @can(App\Policies\ArticlePolicy::DELETE, $article) - - - - @endcan - - @can(App\Policies\ArticlePolicy::PINNED, $article) - - - - @endcan - - -
\ No newline at end of file diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php index 57ae548a3..c025021c7 100644 --- a/resources/views/articles/show.blade.php +++ b/resources/views/articles/show.blade.php @@ -8,88 +8,145 @@ @endpush @section('content') -
-
-

- - {{ $article->title() }} - -

-
- -
-
-
- - - {{ $article->author()->username() }} - - - - -
- -
-

- - {{ $article->author()->username() }} +

+
+
+
+
+ -

-
- @if ($article->isPublished()) - + +
-
+
- @if ($article->isNotPublished()) -
- - @if ($article->isAwaitingApproval()) - Awaiting Approval - @else - Draft - @endif - +
+
+ - @endif -
-
-
- @include('articles._sidebar') -
+
+ -
- {!! $article->body() !!} +
+ {!! $article->body() !!} +
-
- +
+ - - Like this article?
- Let the author know and give them a clap! - +
+ Like this article? + + Let the author know and give them a clap! + +
+
+ +
+
+
+
+ +
+ @if ($article->author()->githubUsername()) + + + + @endif + + @if ($article->author()->hasTwitterAccount()) + + + + @endif +
+
+
-
+
+ +
+
+

+ Other articles you might like +

+ +
+ @foreach ($trendingArticles as $article) + + @endforeach +
+
+
@can(App\Policies\ArticlePolicy::APPROVE, $article) @if ($article->isAwaitingApproval()) diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php new file mode 100644 index 000000000..9b93eded1 --- /dev/null +++ b/resources/views/components/articles/actions.blade.php @@ -0,0 +1,51 @@ +
+
+ @if (Auth::check() && $article->isAuthoredBy(Auth::user())) + + + + Edit article + + + @endif + + @if ($article->isNotPublished() && $article->isAwaitingApproval()) + @can(App\Policies\ArticlePolicy::APPROVE, $article) + + + + Publish article + + + @endcan + @else + @can(App\Policies\ArticlePolicy::DISAPPROVE, $article) + + + + Unpublish article + + + @endcan + @endif + + @can(App\Policies\ArticlePolicy::PINNED, $article) + + + + {{ $article->isPinned() ? 'Unpin article' : 'Pin article' }} + + + @endcan +
+ + @can(App\Policies\ArticlePolicy::DELETE, $article) + + + + Delete article + + + @endcan +
+ diff --git a/resources/views/components/articles/engage.blade.php b/resources/views/components/articles/engage.blade.php new file mode 100644 index 000000000..43f4990e3 --- /dev/null +++ b/resources/views/components/articles/engage.blade.php @@ -0,0 +1,24 @@ +
+
+ + +
+ Share + + title().'" by '. ($article->author()->twitter() ? '@'.$article->author()->twitter() : $article->author()->name()) . ' - ') }}&url={{ urlencode(route('articles.show', $article->slug())) }}"> + + + + title().'" by '.$article->author()->name().' - ') }}"> + + + + title().'" by '.$article->author()->name().' - ') }}"> + + +
+
+
\ No newline at end of file diff --git a/resources/views/components/articles/featured.blade.php b/resources/views/components/articles/featured.blade.php index ac77765d1..eb79f823f 100644 --- a/resources/views/components/articles/featured.blade.php +++ b/resources/views/components/articles/featured.blade.php @@ -1,10 +1,9 @@ @props(['articles']) @unless ($articles->count() < 4) -
+
@@ -12,13 +11,12 @@
-
+
diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php index 636dadcc3..5b27f7ba1 100644 --- a/resources/views/components/articles/summary.blade.php +++ b/resources/views/components/articles/summary.blade.php @@ -3,7 +3,7 @@ 'isFeatured' => false, ]) -
+
@if ($isFeatured) diff --git a/resources/views/components/buttons/danger-button.blade.php b/resources/views/components/buttons/danger-button.blade.php index 1a63339a0..d73802576 100644 --- a/resources/views/components/buttons/danger-button.blade.php +++ b/resources/views/components/buttons/danger-button.blade.php @@ -1,10 +1,10 @@ - + @if ($attributes->has('href')) - merge(['class' => 'bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:ring-red-900 active:bg-red-900 transition duration-150 ease-in-out']) }}> + merge(['class' => 'bg-white border border-red-400 rounded py-2 px-4 inline-flex justify-center text-base text-red-500 hover:bg-red-50 font-medium']) }}> {{ $slot }} @else - @endif diff --git a/resources/views/components/light-tag.blade.php b/resources/views/components/light-tag.blade.php new file mode 100644 index 000000000..a881b632e --- /dev/null +++ b/resources/views/components/light-tag.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/livewire/like-article.blade.php b/resources/views/livewire/like-article.blade.php index 097b07572..b9b9f3be9 100644 --- a/resources/views/livewire/like-article.blade.php +++ b/resources/views/livewire/like-article.blade.php @@ -1,13 +1,17 @@
@guest -
- - {{ count($this->article->likes()) }} +
+ + + {{ count($this->article->likes()) }} +
@else - - - {{ count($this->article->likes()) }} - + @endGuest
diff --git a/tailwind.config.js b/tailwind.config.js index 082869bdd..a9edbaf48 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -41,6 +41,8 @@ module.exports = { 900: '#343636', }, twitter: '#00aaec', + facebook: '#4267b2', + linkedin: '#2977c9', }, fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans], From 52810b1a75fc08c27e2edfaa3c2fd580626b8add Mon Sep 17 00:00:00 2001 From: Joe Dixon Date: Fri, 13 Aug 2021 20:54:56 +0000 Subject: [PATCH 2/4] Apply fixes from StyleCI --- .../Controllers/Articles/ArticlesController.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/Http/Controllers/Articles/ArticlesController.php b/app/Http/Controllers/Articles/ArticlesController.php index 8e7c40a89..19765d627 100644 --- a/app/Http/Controllers/Articles/ArticlesController.php +++ b/app/Http/Controllers/Articles/ArticlesController.php @@ -2,19 +2,19 @@ namespace App\Http\Controllers\Articles; -use App\Models\Tag; -use App\Models\User; -use App\Models\Article; +use App\Http\Controllers\Controller; +use App\Http\Middleware\Authenticate; +use App\Http\Requests\ArticleRequest; use App\Jobs\CreateArticle; use App\Jobs\DeleteArticle; use App\Jobs\UpdateArticle; +use App\Models\Article; +use App\Models\Tag; +use App\Models\User; use App\Policies\ArticlePolicy; -use App\Http\Controllers\Controller; +use Illuminate\Auth\Middleware\EnsureEmailIsVerified; use Illuminate\Support\Facades\Auth; -use App\Http\Middleware\Authenticate; -use App\Http\Requests\ArticleRequest; use Illuminate\Support\Facades\Cache; -use Illuminate\Auth\Middleware\EnsureEmailIsVerified; class ArticlesController extends Controller { From 63f4f5448bcb2c2137e0e8e726e0683ba69b92eb Mon Sep 17 00:00:00 2001 From: Joe Dixon Date: Mon, 16 Aug 2021 17:57:27 +0100 Subject: [PATCH 3/4] Add background filter --- resources/views/articles/show.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php index c025021c7..939503d17 100644 --- a/resources/views/articles/show.blade.php +++ b/resources/views/articles/show.blade.php @@ -9,7 +9,7 @@ @section('content')
-
+
@@ -59,7 +59,7 @@ {{ $article->createdAt()->format('j M, Y') }} - + {{ $article->readTime() }} min read
From 56740af6c39ccd3d8008b70e0f632580187d170f Mon Sep 17 00:00:00 2001 From: Joe Dixon Date: Mon, 16 Aug 2021 21:07:31 +0100 Subject: [PATCH 4/4] Left align author details on mobile --- resources/views/articles/show.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php index 939503d17..e77a84dcb 100644 --- a/resources/views/articles/show.blade.php +++ b/resources/views/articles/show.blade.php @@ -103,7 +103,7 @@ class="prose prose-lg text-gray-800 prose-lio"