Skip to content

Commit 939c1c2

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Replace custom divider implementation with reusable <x-divider /> component across multiple views
1 parent a8e372e commit 939c1c2

File tree

7 files changed

+81
-169
lines changed

7 files changed

+81
-169
lines changed

‎resources/views/article.blade.php‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -76,29 +76,7 @@ class="text-sm"
7676
</header>
7777

7878
{{-- Divider --}}
79-
<div
80-
x-init="
81-
() => {
82-
motion.inView($el, () => {
83-
gsap.fromTo(
84-
$el,
85-
{ autoAlpha: 0, x: 5 },
86-
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
87-
)
88-
})
89-
}
90-
"
91-
class="flex items-center pt-3.5 pb-3"
92-
aria-hidden="true"
93-
>
94-
<div
95-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
96-
></div>
97-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
98-
<div
99-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
100-
></div>
101-
</div>
79+
<x-divider />
10280

10381
<div class="mt-2 flex items-start gap-5">
10482
{{-- Content --}}

‎resources/views/blog.blade.php‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -58,29 +58,7 @@ class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 sm:text-lg/relaxed
5858
</header>
5959

6060
{{-- Divider --}}
61-
<div
62-
x-init="
63-
() => {
64-
motion.inView($el, () => {
65-
gsap.fromTo(
66-
$el,
67-
{ autoAlpha: 0, x: 5 },
68-
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
69-
)
70-
})
71-
}
72-
"
73-
class="flex items-center pt-3.5 pb-3"
74-
aria-hidden="true"
75-
>
76-
<div
77-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
78-
></div>
79-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
80-
<div
81-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
82-
></div>
83-
</div>
61+
<x-divider />
8462

8563
{{-- Articles --}}
8664
<section

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div
2+
x-init="
3+
() => {
4+
motion.inView($el, () => {
5+
gsap.fromTo(
6+
$el,
7+
{ autoAlpha: 0, x: 5 },
8+
{ autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
9+
)
10+
})
11+
}
12+
"
13+
class="flex items-center pt-3.5 pb-3"
14+
aria-hidden="true"
15+
>
16+
<div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
17+
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
18+
<div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
19+
</div>

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

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
9494
>
9595
<a
9696
href="/newsletter"
97-
class="group dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10"
97+
class="group relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
9898
>
9999
{{-- Decorative circle --}}
100100
<div
@@ -273,14 +273,14 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
273273
</a>
274274
</li>
275275
{{--
276-
<li>
276+
<li>
277277
<a
278-
href="https://github.com/nativephp/mobile"
279-
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
278+
href="https://github.com/nativephp/mobile"
279+
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
280280
>
281-
GitHub
281+
GitHub
282282
</a>
283-
</li>
283+
</li>
284284
--}}
285285
</ul>
286286
</section>
@@ -329,14 +329,7 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
329329
</div>
330330

331331
{{-- Divider --}}
332-
<div
333-
class="flex items-center pt-3 pb-3"
334-
aria-hidden="true"
335-
>
336-
<div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
337-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
338-
<div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
339-
</div>
332+
<x-divider />
340333

341334
{{-- Copyright --}}
342335
<section

‎resources/views/privacy-policy.blade.php‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -56,35 +56,7 @@ class="text-sm"
5656
</header>
5757

5858
{{-- Divider --}}
59-
<div
60-
x-init="
61-
() => {
62-
motion.inView($el, (element) => {
63-
motion.animate(
64-
$el,
65-
{
66-
opacity: [0, 1],
67-
x: [5, 0],
68-
},
69-
{
70-
duration: 0.7,
71-
ease: motion.easeOut,
72-
},
73-
)
74-
})
75-
}
76-
"
77-
class="flex items-center pt-3.5 pb-3 will-change-transform"
78-
aria-hidden="true"
79-
>
80-
<div
81-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
82-
></div>
83-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
84-
<div
85-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
86-
></div>
87-
</div>
59+
<x-divider />
8860

8961
{{-- Content --}}
9062
<article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
10577
})
10678
}
10779
"
108-
class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
80+
class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
10981
aria-labelledby="article-title"
11082
>
11183
<p>

‎resources/views/sponsoring.blade.php‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class="mx-auto mt-10 w-full max-w-3xl px-5 md:mt-14"
77
<header class="relative grid place-items-center text-center">
88
{{-- Blurred circle - Decorative --}}
99
<div
10-
class="absolute right-1/2 top-0 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
10+
class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
1111
aria-hidden="true"
1212
></div>
1313

@@ -38,35 +38,7 @@ class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
3838
</header>
3939

4040
{{-- Divider --}}
41-
<div
42-
x-init="
43-
() => {
44-
motion.inView($el, (element) => {
45-
motion.animate(
46-
$el,
47-
{
48-
opacity: [0, 1],
49-
x: [5, 0],
50-
},
51-
{
52-
duration: 0.7,
53-
ease: motion.easeOut,
54-
},
55-
)
56-
})
57-
}
58-
"
59-
class="flex items-center pb-3 pt-3.5 will-change-transform"
60-
aria-hidden="true"
61-
>
62-
<div
63-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
64-
></div>
65-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
66-
<div
67-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
68-
></div>
69-
</div>
41+
<x-divider />
7042

7143
{{-- Content --}}
7244
<article
@@ -91,53 +63,81 @@ class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-
9163
aria-labelledby="article-title"
9264
>
9365
<p>
94-
NativePHP is an organization backed by a team of dedicated employees, maintainers, and contributors who commit their time to
95-
ensure its continued development and improvement. Currently, we operate two major projects: NativePHP for Mobile and
96-
NativePHP for Desktop. Together, we can continue to grow NativePHP and ensure it remains a valuable tool for the community.
66+
NativePHP is an organization backed by a team of dedicated
67+
employees, maintainers, and contributors who commit their time
68+
to ensure its continued development and improvement. Currently,
69+
we operate two major projects: NativePHP for Mobile and
70+
NativePHP for Desktop. Together, we can continue to grow
71+
NativePHP and ensure it remains a valuable tool for the
72+
community.
9773
</p>
9874

9975
<h2>NativePHP for Mobile</h2>
10076

10177
<p>
102-
If you're interested in NativePHP for Mobile, you can <a href="/mobile">purchase a license</a>, which is the best way you can
103-
support both projects of the NativePHP organization. These funds are used to cover the costs of development, infrastructure,
104-
and community initiatives for both projects.
78+
If you're interested in NativePHP for Mobile, you can
79+
<a href="/mobile">purchase a license</a>
80+
, which is the best way you can support both projects of the
81+
NativePHP organization. These funds are used to cover the costs
82+
of development, infrastructure, and community initiatives for
83+
both projects.
10584
</p>
10685

10786
<h2>NativePHP for Desktop</h2>
10887

10988
<p>
110-
NativePHP for Desktop is a free, open source project available under an MIT license. We encourage and appreciate any
111-
contributions to the project, whether it's through code, documentation, spreading the word, or a financial sponsorship.
112-
We provide the following ways of making an easy financial contribution:
89+
NativePHP for Desktop is a free, open source project available
90+
under an MIT license. We encourage and appreciate any
91+
contributions to the project, whether it's through code,
92+
documentation, spreading the word, or a financial sponsorship.
93+
We provide the following ways of making an easy financial
94+
contribution:
11395
</p>
11496

11597
<ul>
116-
<li><a href="https://opencollective.com/nativephp">OpenCollective</a></li>
98+
<li>
99+
<a href="https://opencollective.com/nativephp">
100+
OpenCollective
101+
</a>
102+
</li>
117103
</ul>
118104

119105
<p>
120-
All contributions are welcome, at any amount, as a one-off payment or on a recurring schedule. These funds are used to
106+
All contributions are welcome, at any amount, as a one-off
107+
payment or on a recurring schedule. These funds are used to
121108
support the maintainers of the Desktop project.
122109
</p>
123110

124111
<p>
125-
All monthly sponsors above $10/month will be bestowed the <b>Sponsor</b> role on the NativePHP
126-
<a href="https://discord.gg/X62tWNStZK">Discord</a>, granting access to private channels, early access to new releases, and
127-
discounts on future premium services.
112+
All monthly sponsors above $10/month will be bestowed the
113+
<b>Sponsor</b>
114+
role on the NativePHP
115+
<a href="https://discord.gg/X62tWNStZK">Discord</a>
116+
, granting access to private channels, early access to new
117+
releases, and discounts on future premium services.
128118
</p>
129119

130120
<h2>Corporate Partners</h2>
131121

132122
<p>
133-
If your organization is using NativePHP, we strongly encourage you to consider a Corporate Sponsorship. This level of
134-
support will provide your team with the added benefits of increased levels of support, hands-on help directly from the
135-
maintainers of NativePHP and promotion of your brand as a supporter of cutting-edge open source work.
123+
If your organization is using NativePHP, we strongly encourage
124+
you to consider a Corporate Sponsorship. This level of support
125+
will provide your team with the added benefits of increased
126+
levels of support, hands-on help directly from the maintainers
127+
of NativePHP and promotion of your brand as a supporter of
128+
cutting-edge open source work.
136129
</p>
137130

138131
<p>
139-
For more details, please view our <a href="/partners">partners page</a> or email us at
140-
<a href="mailto:[email protected]?subject=Corporate%20Sponsorship">[email protected]</a>.
132+
For more details, please view our
133+
<a href="/partners">partners page</a>
134+
or email us at
135+
<a
136+
href="mailto:[email protected]?subject=Corporate%20Sponsorship"
137+
>
138+
[email protected]
139+
</a>
140+
.
141141
</p>
142142
</article>
143143
</section>

‎resources/views/terms-of-service.blade.php‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -56,35 +56,7 @@ class="text-sm"
5656
</header>
5757

5858
{{-- Divider --}}
59-
<div
60-
x-init="
61-
() => {
62-
motion.inView($el, (element) => {
63-
motion.animate(
64-
$el,
65-
{
66-
opacity: [0, 1],
67-
x: [5, 0],
68-
},
69-
{
70-
duration: 0.7,
71-
ease: motion.easeOut,
72-
},
73-
)
74-
})
75-
}
76-
"
77-
class="flex items-center pt-3.5 pb-3 will-change-transform"
78-
aria-hidden="true"
79-
>
80-
<div
81-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
82-
></div>
83-
<div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
84-
<div
85-
class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
86-
></div>
87-
</div>
59+
<x-divider />
8860

8961
{{-- Content --}}
9062
<article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
10577
})
10678
}
10779
"
108-
class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
80+
class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
10981
aria-labelledby="article-title"
11082
>
11183
<p>

0 commit comments

Comments
 (0)