Skip to content

Commit cfe5b49

Browse files
mckenzieartsmckenziearts
committed
✨ ajout des boutons de partage
1 parent 90ff376 commit cfe5b49

File tree

6 files changed

+78
-11
lines changed

6 files changed

+78
-11
lines changed

‎public/images/notify.png‎ renamed to ‎public/images/ads/notify.png‎

File renamed without changes.

‎resources/js/helpers.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,53 @@ window.highlightCode = (element) => {
1515

1616
// Create Capitalize string
1717
window.capitalize = (string) => string.replace(/^\w/, (c) => c.toUpperCase());
18+
1819
// Create a snake case string
1920
window.snakeCase = (string) => string && string.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).map(s => s.toLowerCase()).join('_');
21+
22+
// Share a content to social Media
23+
const share = function () {
24+
function popupCenter (url, title, width, height) {
25+
let popupWidth = width || 640
26+
let popupHeight = height || 440
27+
let windowLeft = window.screenLeft || window.screenX
28+
let windowTop = window.screenTop || window.screenY
29+
let windowWidth = window.innerWidth || document.documentElement.clientWidth
30+
let windowHeight = window.innerHeight || document.documentElement.clientHeight
31+
let popupLeft = windowLeft + windowWidth / 2 - popupWidth / 2
32+
let popupTop = windowTop + windowHeight / 2 - popupHeight / 2
33+
window.open(url, title, 'scrollbars=yes, width=' + popupWidth + ', height=' + popupHeight + ', top=' + popupTop + ', left=' + popupLeft)
34+
}
35+
36+
let twitter = document.querySelector('.share_twitter')
37+
if (twitter) {
38+
twitter.addEventListener('click', function (e) {
39+
e.preventDefault()
40+
let url = this.getAttribute('data-url')
41+
let shareUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&via=johns_corp' + '&url=' + encodeURIComponent(url)
42+
popupCenter(shareUrl, 'Partager sur Twitter')
43+
})
44+
}
45+
46+
let facebook = document.querySelector('.share_facebook')
47+
if (facebook) {
48+
facebook.addEventListener('click', function (e) {
49+
e.preventDefault()
50+
let url = this.getAttribute('data-url')
51+
let shareUrl = 'https://facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url)
52+
popupCenter(shareUrl, 'Partager sur Facebook')
53+
})
54+
}
55+
56+
let linkedin = document.querySelector('.share_linkedin')
57+
if (linkedin) {
58+
linkedin.addEventListener('click', function (e) {
59+
e.preventDefault()
60+
let url = this.getAttribute('data-url')
61+
let shareUrl = 'https://www.linkedin.com/shareArticle?url=' + encodeURIComponent(url)
62+
popupCenter(shareUrl, 'Partager sur LinkedIn')
63+
})
64+
}
65+
}
66+
67+
share()

‎resources/views/articles/show.blade.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,21 @@ class="mt-8 prose prose-lg prose-green text-skin-base mx-auto md:prose-xl lg:max
122122
<x-markdown-content :content="$article->body" />
123123
</div>
124124

125+
<div class="py-6">
126+
<p class="text-base text-skin-base font-normal">Vous aimez cet article ? Faite le savoir en partageant</p>
127+
<div class="mt-4 flex items-center space-x-3">
128+
<button type="button" data-url="{{ route('articles.show', $article) }}" class="share_twitter inline-flex items-center p-2 border border-skin-base rounded-full shadow-sm bg-skin-button rounded-full shadow-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500">
129+
<x-icon.twitter class="h-5 w-5" />
130+
</button>
131+
<button type="button" data-url="{{ route('articles.show', $article) }}" class="share_facebook inline-flex items-center p-2 border border-skin-base rounded-full shadow-sm bg-skin-button rounded-full shadow-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500">
132+
<x-icon.facebook class="h-5 w-5" />
133+
</button>
134+
<button type="button" data-url="{{ route('articles.show', $article) }}" class="share_linkedin inline-flex items-center p-2 border border-skin-base rounded-full shadow-sm bg-skin-button rounded-full shadow-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500">
135+
<x-icon.linkedin class="h-5 w-5" />
136+
</button>
137+
</div>
138+
</div>
139+
125140
@if(auth()->check() && auth()->id() === $article->user_id)
126141

127142
<div class="relative mt-10">

‎resources/views/components/ads.blade.php‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
@php($ads = Illuminate\Support\Arr::random(config('lcm.ads')))
2+
13
<div id="laravelcm-ads">
2-
<a href="https://github.com/mckenziearts/laravel-notify/?utm_source=laravelcm&amp;utm_medium=sidebar-widget" class="block">
3-
<img class="rounded-lg" src="{{ asset('/images/notify.png') }}" alt="Laravel Notify" width="457" height="336">
4+
<a href="{{ $ads['url'] }}" class="block">
5+
<img class="rounded-lg" src="{{ asset("/images/ads/{$ads['image']}.png") }}" alt="{{ $ads['alt'] }}" width="457" height="336">
46
</a>
57
<p class="mt-4 font-normal">
6-
<a href="https://github.com/mckenziearts/laravel-notify/?utm_source=laravelcm&amp;utm_medium=sidebar-widget" class="text-sm leading-5 text-skin-base">
7-
Découvrez la nouvelle version de Laravel Notify pour vos projets Laravel.
8+
<a href="{{ $ads['url'] }}" class="text-sm leading-5 text-skin-base">
9+
{{ $ads['description'] }}
810
</a>
911
</p>
1012
<div class="mt-2">
11-
<a href="https://github.com/mckenziearts/laravel-notify/?utm_source=laravelcm&amp;utm_medium=sidebar-widget" class="text-sm text-skin-primary hover:text-skin-primary-hover font-medium hover:underline">En savoir plus →</a>
13+
<a href="{{ $ads['url'] }}" class="text-sm text-skin-primary hover:text-skin-primary-hover font-medium hover:underline">En savoir plus →</a>
1214
</div>
1315
</div>

‎resources/views/components/default-button.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@props(['link' => null])
22

33
@if($link)
4-
<a href="{{ $link }}" {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-input rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
4+
<a href="{{ $link }}" {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
55
{{ $slot }}
66
</a>
77
@else
8-
<button {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-input rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
8+
<button {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
99
{{ $slot }}
1010
</button>
1111
@endif

‎resources/views/user/profile.blade.php‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@
3333
Éditer
3434
</x-default-button>
3535
@endif
36-
<x-default-button type="button">
37-
<x-heroicon-o-user-add class="-ml-1 mr-2 h-5 w-5 text-skin-muted" />
38-
<span>{{ __('Suivre') }}</span>
39-
</x-default-button>
36+
@if (! $user->isLoggedInUser())
37+
<x-default-button type="button">
38+
<x-heroicon-o-user-add class="-ml-1 mr-2 h-5 w-5 text-skin-muted" />
39+
<span>{{ __('Suivre') }}</span>
40+
</x-default-button>
41+
@endif
4042
</div>
4143
</div>
4244
</div>

0 commit comments

Comments
 (0)