Skip to content

Commit 08ca2ea

Browse files
mckenzieartsmckenziearts
committed
✨ ajout du filtre sur les tags des articles
1 parent 452a850 commit 08ca2ea

File tree

6 files changed

+67
-18
lines changed

6 files changed

+67
-18
lines changed

‎app/Http/Controllers/ArticlesController.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ public function show(Article $article)
2929
404
3030
);
3131

32+
seo()
33+
->title($article->title)
34+
->description($article->excerpt(100))
35+
->image($article->getFirstMediaUrl('media'))
36+
->twitterTitle($article->title)
37+
->twitterDescription($article->excerpt(100))
38+
->twitterImage($article->getFirstMediaUrl('media'))
39+
->twitterSite('laravelcm')
40+
->withUrl();
41+
3242
return view('articles.show', compact('article'));
3343
}
3444

‎app/Models/Tag.php‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,6 @@ public function name(): string
4040
return $this->name;
4141
}
4242

43-
public function slug(): string
44-
{
45-
return $this->slug;
46-
}
47-
4843
public function articles(): MorphToMany
4944
{
5045
return $this->morphedByMany(Article::class, 'taggable');

‎public/css/app.css‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5323,6 +5323,10 @@ select {
53235323
--tw-border-opacity: 1;
53245324
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
53255325
}
5326+
.border-gray-300 {
5327+
--tw-border-opacity: 1;
5328+
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
5329+
}
53265330
.border-primary-600 {
53275331
--tw-border-opacity: 1;
53285332
border-color: rgba(22, 163, 74, var(--tw-border-opacity));
@@ -5470,6 +5474,10 @@ select {
54705474
--tw-bg-opacity: 1;
54715475
background-color: rgba(212, 212, 216, var(--tw-bg-opacity));
54725476
}
5477+
.bg-white {
5478+
--tw-bg-opacity: 1;
5479+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
5480+
}
54735481
.bg-secondary-50 {
54745482
--tw-bg-opacity: 1;
54755483
background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
@@ -5478,10 +5486,6 @@ select {
54785486
--tw-bg-opacity: 1;
54795487
background-color: rgba(161, 161, 170, var(--tw-bg-opacity));
54805488
}
5481-
.bg-white {
5482-
--tw-bg-opacity: 1;
5483-
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
5484-
}
54855489
.bg-secondary-100 {
54865490
--tw-bg-opacity: 1;
54875491
background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
@@ -6312,6 +6316,10 @@ select {
63126316
--tw-ring-opacity: 1;
63136317
--tw-ring-color: rgba(228, 228, 231, var(--tw-ring-opacity));
63146318
}
6319+
.ring-gray-300 {
6320+
--tw-ring-opacity: 1;
6321+
--tw-ring-color: rgba(209, 213, 219, var(--tw-ring-opacity));
6322+
}
63156323
.ring-secondary-600 {
63166324
--tw-ring-opacity: 1;
63176325
--tw-ring-color: rgba(82, 82, 91, var(--tw-ring-opacity));
@@ -6775,6 +6783,16 @@ html {
67756783
color: rgba(34, 197, 94, var(--tw-text-opacity));
67766784
}
67776785

6786+
.hover\:text-gray-500:hover {
6787+
--tw-text-opacity: 1;
6788+
color: rgba(107, 114, 128, var(--tw-text-opacity));
6789+
}
6790+
6791+
.hover\:text-gray-400:hover {
6792+
--tw-text-opacity: 1;
6793+
color: rgba(156, 163, 175, var(--tw-text-opacity));
6794+
}
6795+
67786796
.hover\:text-green-500:hover {
67796797
--tw-text-opacity: 1;
67806798
color: rgba(16, 185, 129, var(--tw-text-opacity));
@@ -6856,6 +6874,11 @@ html {
68566874
border-color: rgba(239, 68, 68, var(--tw-border-opacity));
68576875
}
68586876

6877+
.focus\:border-blue-300:focus {
6878+
--tw-border-opacity: 1;
6879+
border-color: rgba(147, 197, 253, var(--tw-border-opacity));
6880+
}
6881+
68596882
.focus\:border-primary-600:focus {
68606883
--tw-border-opacity: 1;
68616884
border-color: rgba(22, 163, 74, var(--tw-border-opacity));
@@ -7031,11 +7054,26 @@ html {
70317054
background-color: rgba(var(--color-footer-fill), var(--tw-bg-opacity));
70327055
}
70337056

7057+
.active\:bg-gray-100:active {
7058+
--tw-bg-opacity: 1;
7059+
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
7060+
}
7061+
70347062
.active\:text-skin-base:active {
70357063
--tw-text-opacity: 1;
70367064
color: rgba(var(--color-text-base), var(--tw-text-opacity));
70377065
}
70387066

7067+
.active\:text-gray-700:active {
7068+
--tw-text-opacity: 1;
7069+
color: rgba(55, 65, 81, var(--tw-text-opacity));
7070+
}
7071+
7072+
.active\:text-gray-500:active {
7073+
--tw-text-opacity: 1;
7074+
color: rgba(107, 114, 128, var(--tw-text-opacity));
7075+
}
7076+
70397077
.disabled\:cursor-not-allowed:disabled {
70407078
cursor: not-allowed;
70417079
}

‎resources/views/components/articles/overview.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
@endif
1717
<div class="mt-2">
1818
<a href="{{ route('articles.show', $article) }}" class="group">
19-
<h4 class="font-xl leading-7 font-bold font-sans text-skin-inverted group-hover:text-skin-primary">{{ $article->title }}</h4>
19+
<h4 class="text-xl leading-7 font-bold font-sans text-skin-inverted group-hover:text-skin-primary">{{ $article->title }}</h4>
2020
</a>
21-
<p class="mt-1 text-sm font-normal text-skin-base leading-5">
21+
<p class="mt-1 text-base font-normal text-skin-base leading-6">
2222
{!! $article->excerpt() !!}
2323
</p>
2424
<div class="mt-3 flex items-center font-sans">

‎resources/views/layouts/master.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
<!-- CSRF Token -->
88
<meta name="csrf-token" content="{{ csrf_token() }}">
99

10+
<x-seo::meta />
11+
1012
<title>
11-
{{ isset($title) ? $title.' | ' : '' }}
13+
{{ isset($title) ? $title . ' | ' : '' }}
1214
{{ config('app.name') }}
1315
{{ is_active('home') ? '- La plus grande communauté de développeurs Laravel & PHP au Cameroun' : '' }}
1416
</title>
@@ -19,8 +21,6 @@
1921
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
2022
@livewireStyles
2123

22-
@stack('meta')
23-
2424
<script>
2525
window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!};
2626
</script>

‎resources/views/livewire/articles/browse.blade.php‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,27 @@
55
<x-articles.filter :selectedSortBy="$selectedSortBy" />
66

77
<div class="pt-8">
8-
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-skin-link text-skin-base font-sans">
8+
<span class="inline-flex items-center px-2 py-1 rounded text-sm font-medium bg-skin-link text-skin-base font-sans">
99
<svg class="mr-1.5 h-2 w-2 text-skin-base" fill="currentColor" viewBox="0 0 8 8">
1010
<circle cx="4" cy="4" r="3" />
1111
</svg>
1212
Tous les tags
1313
</span>
1414

15-
<div class="mt-4" aria-labelledby="posts-tags">
15+
<div x-data="{ selectedTag: '{{ $selectedTag ? $selectedTag->id() : null }}' }"
16+
class="mt-4"
17+
aria-labelledby="posts-tags"
18+
>
1619
@foreach($tags as $tag)
17-
<button type="button" class="mb-1.5 group inline-flex items-center px-3 py-1 text-sm font-medium text-skin-inverted rounded-full border border-skin-input font-sans">
20+
<button wire:click="toggleTag('{{ $tag->slug() }}')" type="button" class="mb-1.5 group inline-flex items-center px-3 py-1 text-sm font-medium text-skin-inverted rounded-full border border-skin-input font-sans">
1821
<span class="text-skin-muted group-hover:hidden">#</span>
19-
<svg class="mr-1.5 h-2 w-2 brand-{{ $tag->slug }} hidden group-hover:block" fill="currentColor" viewBox="0 0 8 8">
22+
<svg class="mr-1.5 h-2 w-2 brand-{{ $tag->slug }} hidden group-hover:block" :class="{ 'block' : '{{ $tag->id() }}' === selectedTag }" fill="currentColor" viewBox="0 0 8 8">
2023
<circle cx="4" cy="4" r="3" />
2124
</svg>
2225
<span class="truncate lowercase">{{ $tag->name }}</span>
26+
@if($selectedTag && $selectedTag->id() === $tag->id())
27+
<x-heroicon-o-x-circle class="ml-1.5 w-4 h-4 text-green-500"/>
28+
@endif
2329
</button>
2430
@endforeach
2531
</div>

0 commit comments

Comments
 (0)