Skip to content

Commit 83dae26

Browse files
✨ Add a sidebar to blog and article pages (#205)
* ✨ Update styles in hero component for improved responsiveness and consistency * ✨ Update styles for article and blog components to enhance visual consistency and responsiveness * ✨ Refactor animations in article component for improved performance and consistency * ✨ Add sidebar to blog article * ✨ Refactor blog layout for improved structure and responsiveness * ✨ Refactor article and blog components to use new sidebar and article card structure * ✨ Replace custom divider implementation with reusable <x-divider /> component across multiple views * ✨ Enhance sidebar component with new design elements and improved visuals
1 parent 63abd62 commit 83dae26

File tree

10 files changed

+371
-365
lines changed

10 files changed

+371
-365
lines changed

resources/views/article.blade.php

Lines changed: 35 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<x-layout title="Blog">
22
{{-- Hero --}}
33
<section
4-
class="mx-auto mt-10 w-full max-w-3xl md:mt-14"
4+
class="mx-auto mt-10 w-full max-w-5xl"
55
aria-labelledby="article-title"
66
>
77
<header class="relative grid place-items-center text-center">
@@ -15,25 +15,19 @@ class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blu
1515
<div
1616
x-init="
1717
() => {
18-
motion.inView($el, (element) => {
19-
motion.animate(
18+
motion.inView($el, () => {
19+
gsap.fromTo(
2020
$el,
21-
{
22-
opacity: [0, 1],
23-
x: [5, 0],
24-
},
25-
{
26-
duration: 0.7,
27-
ease: motion.easeOut,
28-
},
21+
{ autoAlpha: 0, x: 5 },
22+
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
2923
)
3024
})
3125
}
3226
"
3327
>
3428
<a
3529
href="{{ route('blog') }}"
36-
class="inline-flex items-center gap-2 opacity-60 transition duration-200 will-change-transform hover:-translate-x-0.5 hover:opacity-100"
30+
class="inline-flex items-center gap-2 opacity-60 transition duration-200 hover:-translate-x-0.5 hover:opacity-100"
3731
aria-label="Return to blog listing"
3832
>
3933
<x-icons.right-arrow
@@ -49,22 +43,16 @@ class="size-3 shrink-0 -scale-x-100"
4943
id="article-title"
5044
x-init="
5145
() => {
52-
motion.inView($el, (element) => {
53-
motion.animate(
46+
motion.inView($el, () => {
47+
gsap.fromTo(
5448
$el,
55-
{
56-
opacity: [0, 1],
57-
x: [-5, 0],
58-
},
59-
{
60-
duration: 0.7,
61-
ease: motion.easeOut,
62-
},
49+
{ autoAlpha: 0, x: -5 },
50+
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
6351
)
6452
})
6553
}
6654
"
67-
class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
55+
class="mt-8 text-3xl font-bold sm:text-4xl"
6856
>
6957
{{ $article->title }}
7058
</h1>
@@ -88,59 +76,30 @@ class="text-sm"
8876
</header>
8977

9078
{{-- Divider --}}
91-
<div
92-
x-init="
93-
() => {
94-
motion.inView($el, (element) => {
95-
motion.animate(
96-
$el,
97-
{
98-
opacity: [0, 1],
99-
x: [5, 0],
100-
},
101-
{
102-
duration: 0.7,
103-
ease: motion.easeOut,
104-
},
105-
)
106-
})
107-
}
108-
"
109-
class="flex items-center pt-3.5 pb-3 will-change-transform"
110-
aria-hidden="true"
111-
>
112-
<div
113-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
114-
></div>
115-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
116-
<div
117-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
118-
></div>
119-
</div>
79+
<x-divider />
12080

121-
{{-- Content --}}
122-
<article
123-
x-init="
124-
() => {
125-
motion.inView($el, (element) => {
126-
motion.animate(
127-
$el,
128-
{
129-
opacity: [0, 1],
130-
y: [5, 0],
131-
},
132-
{
133-
duration: 0.7,
134-
ease: motion.easeOut,
135-
},
136-
)
137-
})
138-
}
139-
"
140-
class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
141-
aria-labelledby="article-title"
142-
>
143-
{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
144-
</article>
81+
<div class="mt-2 flex items-start gap-5">
82+
{{-- Content --}}
83+
<article
84+
x-init="
85+
() => {
86+
motion.inView($el, () => {
87+
gsap.fromTo(
88+
$el,
89+
{ autoAlpha: 0, y: 5 },
90+
{ autoAlpha: 1, y: 0, duration: 0.7, ease: 'power1.out' },
91+
)
92+
})
93+
}
94+
"
95+
class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
96+
aria-labelledby="article-title"
97+
>
98+
{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
99+
</article>
100+
101+
{{-- Sidebar --}}
102+
<x-blog.sidebar />
103+
</div>
145104
</section>
146105
</x-layout>

0 commit comments

Comments
 (0)