Skip to content

✨ Add a sidebar to blog and article pages #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 3, 2025
Merged

✨ Add a sidebar to blog and article pages #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7f30412
✨ Update styles in hero component for improved responsiveness and con…
HassanZahirnia Sep 2, 2025
9807dff
✨ Update styles for article and blog components to enhance visual con…
HassanZahirnia Sep 2, 2025
807849b
✨ Refactor animations in article component for improved performance a…
HassanZahirnia Sep 2, 2025
f38e934
✨ Add sidebar to blog article
HassanZahirnia Sep 2, 2025
98d5b27
✨ Refactor blog layout for improved structure and responsiveness
HassanZahirnia Sep 2, 2025
a8e372e
✨ Refactor article and blog components to use new sidebar and article…
HassanZahirnia Sep 2, 2025
939c1c2
✨ Replace custom divider implementation with reusable <x-divider /> c…
HassanZahirnia Sep 2, 2025
1049b5c
✨ Enhance sidebar component with new design elements and improved vis…
HassanZahirnia Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 35 additions & 76 deletions resources/views/article.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<x-layout title="Blog">
{{-- Hero --}}
<section
class="mx-auto mt-10 w-full max-w-3xl md:mt-14"
class="mx-auto mt-10 w-full max-w-5xl"
aria-labelledby="article-title"
>
<header class="relative grid place-items-center text-center">
Expand All @@ -15,25 +15,19 @@ class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blu
<div
x-init="
() => {
motion.inView($el, (element) => {
motion.animate(
motion.inView($el, () => {
gsap.fromTo(
$el,
{
opacity: [0, 1],
x: [5, 0],
},
{
duration: 0.7,
ease: motion.easeOut,
},
{ autoAlpha: 0, x: 5 },
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
)
})
}
"
>
<a
href="{{ route('blog') }}"
class="inline-flex items-center gap-2 opacity-60 transition duration-200 will-change-transform hover:-translate-x-0.5 hover:opacity-100"
class="inline-flex items-center gap-2 opacity-60 transition duration-200 hover:-translate-x-0.5 hover:opacity-100"
aria-label="Return to blog listing"
>
<x-icons.right-arrow
Expand All @@ -49,22 +43,16 @@ class="size-3 shrink-0 -scale-x-100"
id="article-title"
x-init="
() => {
motion.inView($el, (element) => {
motion.animate(
motion.inView($el, () => {
gsap.fromTo(
$el,
{
opacity: [0, 1],
x: [-5, 0],
},
{
duration: 0.7,
ease: motion.easeOut,
},
{ autoAlpha: 0, x: -5 },
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
)
})
}
"
class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
class="mt-8 text-3xl font-bold sm:text-4xl"
>
{{ $article->title }}
</h1>
Expand All @@ -88,59 +76,30 @@ class="text-sm"
</header>

{{-- Divider --}}
<div
x-init="
() => {
motion.inView($el, (element) => {
motion.animate(
$el,
{
opacity: [0, 1],
x: [5, 0],
},
{
duration: 0.7,
ease: motion.easeOut,
},
)
})
}
"
class="flex items-center pt-3.5 pb-3 will-change-transform"
aria-hidden="true"
>
<div
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
></div>
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
<div
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
></div>
</div>
<x-divider />

{{-- Content --}}
<article
x-init="
() => {
motion.inView($el, (element) => {
motion.animate(
$el,
{
opacity: [0, 1],
y: [5, 0],
},
{
duration: 0.7,
ease: motion.easeOut,
},
)
})
}
"
class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
aria-labelledby="article-title"
>
{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
</article>
<div class="mt-2 flex items-start gap-5">
{{-- Content --}}
<article
x-init="
() => {
motion.inView($el, () => {
gsap.fromTo(
$el,
{ autoAlpha: 0, y: 5 },
{ autoAlpha: 1, y: 0, duration: 0.7, ease: 'power1.out' },
)
})
}
"
class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
aria-labelledby="article-title"
>
{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
</article>

{{-- Sidebar --}}
<x-blog.sidebar />
</div>
</section>
</x-layout>
Loading