Skip to content

Commit eb24334

Browse files
mychidarkomychidarko
committed
feat: update mvc welcome screens
1 parent b95fbc1 commit eb24334

3 files changed

Lines changed: 94 additions & 42 deletions

File tree

‎src/Commands/themes/react/app/views/js/pages/welcome.jsx‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -161,34 +161,52 @@ export default function Welcome({ auth, phpVersion }) {
161161
<h2 id="essentials" className="sr-only">
162162
The essentials, one function away
163163
</h2>
164-
<p className="eyebrow text-stone-500 dark:text-stone-400">The essentials, one function away</p>
164+
<p className="eyebrow text-stone-500 dark:text-stone-400">Ship features, not boilerplate</p>
165165

166166
<div className="mt-6 grid grid-cols-1 gap-px border border-stone-950/10 bg-stone-950/10 dark:border-stone-50/10 dark:bg-stone-50/10 md:grid-cols-3">
167-
<article className="bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
167+
<article className="min-w-0 bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
168+
<p className="font-mono-ds mb-2.5 text-[11px] text-stone-500 dark:text-stone-400">app/routes/_auth.php</p>
168169
<h3 className="font-display text-base font-semibold tracking-tight">Auth in one line</h3>
170+
<p className="mt-1.5 text-[13px] leading-[1.55] text-stone-600 dark:text-stone-400">
171+
Login, signup, sessions and tokens, from one function.
172+
</p>
169173
<pre className="font-mono-ds mt-3.5 overflow-x-auto text-[12.5px] leading-[1.7]">
174+
$email = <span className="text-[#D4542B]">request</span>()-&gt;get(<span className="text-[#7c8a4d]">'email'</span>);{"\n"}
175+
$password = <span className="text-[#D4542B]">request</span>()-&gt;get(<span className="text-[#7c8a4d]">'password'</span>);{"\n"}
176+
{"\n"}
170177
<span className="text-[#D4542B]">auth</span>()-&gt;login([{"\n"}
171-
{" "}<span className="text-[#7c8a4d]">'email'</span> =&gt; <span className="text-[#D4542B]">request</span>()-&gt;get(<span className="text-[#7c8a4d]">'email'</span>),{"\n"}
172-
{" "}<span className="text-[#7c8a4d]">'password'</span> =&gt; <span className="text-[#D4542B]">request</span>()-&gt;get(<span className="text-[#7c8a4d]">'password'</span>),{"\n"}
178+
{" "}<span className="text-[#7c8a4d]">'email'</span> =&gt; $email,{"\n"}
179+
{" "}<span className="text-[#7c8a4d]">'password'</span> =&gt; $password,{"\n"}
173180
]);
174181
</pre>
175182
</article>
176-
<article className="bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
177-
<h3 className="font-display text-base font-semibold tracking-tight">Data without ceremony</h3>
183+
<article className="min-w-0 bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
184+
<p className="font-mono-ds mb-2.5 text-[11px] text-stone-500 dark:text-stone-400">app/database/users.yml</p>
185+
<h3 className="font-display text-base font-semibold tracking-tight">Your database is a YAML file</h3>
186+
<p className="mt-1.5 text-[13px] leading-[1.55] text-stone-600 dark:text-stone-400">
187+
Edit it, run <code className="font-mono-ds">leaf db:migrate</code>, and Leaf diffs the changes in. Seeds included.
188+
</p>
178189
<pre className="font-mono-ds mt-3.5 overflow-x-auto text-[12.5px] leading-[1.7]">
179-
$posts = <span className="text-[#D4542B]">db</span>(){"\n"}
180-
{" "}-&gt;select(<span className="text-[#7c8a4d]">'posts'</span>){"\n"}
181-
{" "}-&gt;where(<span className="text-[#7c8a4d]">'published'</span>, true){"\n"}
182-
{" "}-&gt;orderBy(<span className="text-[#7c8a4d]">'created_at'</span>, <span className="text-[#7c8a4d]">'desc'</span>){"\n"}
183-
{" "}-&gt;all();
190+
<span className="text-[#D4542B]">columns</span>:{"\n"}
191+
{" "}<span className="text-[#D4542B]">email</span>: {"{"} <span className="text-[#D4542B]">type</span>: <span className="text-[#7c8a4d]">string</span>, <span className="text-[#D4542B]">unique</span>: <span className="text-[#7c8a4d]">true</span> {"}"}{"\n"}
192+
{" "}<span className="text-[#D4542B]">plan</span>: <span className="text-[#7c8a4d]">string</span>{"\n"}
193+
<span className="text-[#D4542B]">seeds</span>:{"\n"}
194+
{" "}<span className="text-[#D4542B]">count</span>: <span className="text-[#7c8a4d]">10</span>{"\n"}
195+
{" "}<span className="text-[#D4542B]">data</span>:{"\n"}
196+
{" "}<span className="text-[#D4542B]">email</span>: <span className="text-[#7c8a4d]">'@faker.unique.safeEmail'</span>
184197
</pre>
185198
</article>
186-
<article className="bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
187-
<h3 className="font-display text-base font-semibold tracking-tight">Respond like you mean it</h3>
199+
<article className="min-w-0 bg-white p-[26px] transition hover:bg-stone-50 dark:bg-stone-950 dark:hover:bg-stone-900">
200+
<p className="font-mono-ds mb-2.5 text-[11px] text-stone-500 dark:text-stone-400">app/controllers/SignupController.php</p>
201+
<h3 className="font-display text-base font-semibold tracking-tight">Heavy work leaves the request</h3>
202+
<p className="mt-1.5 text-[13px] leading-[1.55] text-stone-600 dark:text-stone-400">
203+
Queue the slow part, respond instantly. A worker picks it up in the background.
204+
</p>
188205
<pre className="font-mono-ds mt-3.5 overflow-x-auto text-[12.5px] leading-[1.7]">
206+
<span className="text-[#D4542B]">dispatch</span>({"\n"} SendWelcomeEmail::<span className="text-[#D4542B]">with</span>($user-&gt;id){"\n"});{"\n"}
207+
{"\n"}
189208
<span className="text-[#D4542B]">response</span>()-&gt;json([{"\n"}
190209
{" "}<span className="text-[#7c8a4d]">'status'</span> =&gt; <span className="text-[#7c8a4d]">'shipped'</span>,{"\n"}
191-
{" "}<span className="text-[#7c8a4d]">'posts'</span> =&gt; $posts,{"\n"}
192210
]);
193211
</pre>
194212
</article>

‎src/Commands/themes/svelte/app/views/js/pages/welcome.svelte‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,42 @@
5252

5353
<section class="block" aria-labelledby="essentials">
5454
<h2 id="essentials" class="sr">The essentials, one function away</h2>
55-
<p class="eyebrow">The essentials, one function away</p>
55+
<p class="eyebrow">Ship features, not boilerplate</p>
5656
<div class="tilebed">
5757
<article class="tile">
58+
<p class="file">app/routes/_auth.php</p>
5859
<h3>Auth in one line</h3>
59-
<pre class="mono"><span class="fn">auth</span>()-&gt;login([
60-
<span class="str">'email'</span> =&gt; <span class="fn">request</span>()-&gt;get(<span class="str">'email'</span>),
61-
<span class="str">'password'</span> =&gt; <span class="fn">request</span>()-&gt;get(<span class="str">'password'</span>),
60+
<p class="blurb">Login, signup, sessions and tokens, from one function.</p>
61+
<pre class="mono">$email = <span class="fn">request</span>()-&gt;get(<span class="str">'email'</span>);
62+
$password = <span class="fn">request</span>()-&gt;get(<span class="str">'password'</span>);
63+
64+
<span class="fn">auth</span>()-&gt;login([
65+
<span class="str">'email'</span> =&gt; $email,
66+
<span class="str">'password'</span> =&gt; $password,
6267
]);</pre>
6368
</article>
6469
<article class="tile">
65-
<h3>Data without ceremony</h3>
66-
<pre class="mono">$posts = <span class="fn">db</span>()
67-
-&gt;select(<span class="str">'posts'</span>)
68-
-&gt;where(<span class="str">'published'</span>, true)
69-
-&gt;orderBy(<span class="str">'created_at'</span>, <span class="str">'desc'</span>)
70-
-&gt;all();</pre>
70+
<p class="file">app/database/users.yml</p>
71+
<h3>Your database is a YAML file</h3>
72+
<p class="blurb">Edit it, run <code class="mono">leaf db:migrate</code>, and Leaf diffs the changes in. Seeds included.</p>
73+
<pre class="mono"><span class="fn">columns</span>:
74+
<span class="fn">email</span>: {'{'} <span class="fn">type</span>: <span class="str">string</span>, <span class="fn">unique</span>: <span class="str">true</span> {'}'}
75+
<span class="fn">plan</span>: <span class="str">string</span>
76+
<span class="fn">seeds</span>:
77+
<span class="fn">count</span>: <span class="str">10</span>
78+
<span class="fn">data</span>:
79+
<span class="fn">email</span>: <span class="str">'@faker.unique.safeEmail'</span></pre>
7180
</article>
7281
<article class="tile">
73-
<h3>Respond like you mean it</h3>
74-
<pre class="mono"><span class="fn">response</span>()-&gt;json([
82+
<p class="file">app/controllers/SignupController.php</p>
83+
<h3>Heavy work leaves the request</h3>
84+
<p class="blurb">Queue the slow part, respond instantly. A worker picks it up in the background.</p>
85+
<pre class="mono"><span class="fn">dispatch</span>(
86+
SendWelcomeEmail::<span class="fn">with</span>($user-&gt;id)
87+
);
88+
89+
<span class="fn">response</span>()-&gt;json([
7590
<span class="str">'status'</span> =&gt; <span class="str">'shipped'</span>,
76-
<span class="str">'posts'</span> =&gt; $posts,
7791
]);</pre>
7892
</article>
7993
</div>
@@ -141,12 +155,15 @@
141155
section.block { padding: 56px 0; border-top: 1px solid var(--line); }
142156
.tilebed { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
143157
@media (min-width: 768px) { .tilebed { grid-template-columns: repeat(3, 1fr); } }
144-
.tile { background: var(--card); padding: 26px; transition: background .15s; }
158+
.tile { background: var(--card); padding: 26px; transition: background .15s; min-width: 0; }
145159
.tile:hover { background: var(--card-hover); }
160+
.tile .file { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--soft); margin-bottom: 10px; }
146161
.tile h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
162+
.tile p.blurb { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
147163
.tile pre { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--fg); overflow-x: auto; }
148164
.tile pre .fn { color: #D4542B; }
149165
.tile pre .str { color: #7c8a4d; }
166+
.tile pre .cmt { color: var(--soft); }
150167
.install-line { margin-top: 20px; font-size: 13px; color: var(--soft); }
151168
.install-line code { color: var(--fg); border: 1px solid var(--line); padding: 3px 8px; }
152169
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); font-family: "JetBrains Mono", monospace; }

‎src/Commands/themes/vue/app/views/js/pages/welcome.vue‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,28 +56,42 @@ defineProps({
5656

5757
<section class="block" aria-labelledby="essentials">
5858
<h2 id="essentials" class="sr">The essentials, one function away</h2>
59-
<p class="eyebrow">The essentials, one function away</p>
59+
<p class="eyebrow">Ship features, not boilerplate</p>
6060
<div class="tilebed">
6161
<article class="tile">
62+
<p class="file">app/routes/_auth.php</p>
6263
<h3>Auth in one line</h3>
63-
<pre class="mono"><span class="fn">auth</span>()->login([
64-
<span class="str">'email'</span> => <span class="fn">request</span>()->get(<span class="str">'email'</span>),
65-
<span class="str">'password'</span> => <span class="fn">request</span>()->get(<span class="str">'password'</span>),
64+
<p class="blurb">Login, signup, sessions and tokens, from one function.</p>
65+
<pre class="mono">$email = <span class="fn">request</span>()->get(<span class="str">'email'</span>);
66+
$password = <span class="fn">request</span>()->get(<span class="str">'password'</span>);
67+
68+
<span class="fn">auth</span>()->login([
69+
<span class="str">'email'</span> => $email,
70+
<span class="str">'password'</span> => $password,
6671
]);</pre>
6772
</article>
6873
<article class="tile">
69-
<h3>Data without ceremony</h3>
70-
<pre class="mono">$posts = <span class="fn">db</span>()
71-
->select(<span class="str">'posts'</span>)
72-
->where(<span class="str">'published'</span>, true)
73-
->orderBy(<span class="str">'created_at'</span>, <span class="str">'desc'</span>)
74-
->all();</pre>
74+
<p class="file">app/database/users.yml</p>
75+
<h3>Your database is a YAML file</h3>
76+
<p class="blurb">Edit it, run <code class="mono">leaf db:migrate</code>, and Leaf diffs the changes in. Seeds included.</p>
77+
<pre class="mono"><span class="fn">columns</span>:
78+
<span class="fn">email</span>: { <span class="fn">type</span>: <span class="str">string</span>, <span class="fn">unique</span>: <span class="str">true</span> }
79+
<span class="fn">plan</span>: <span class="str">string</span>
80+
<span class="fn">seeds</span>:
81+
<span class="fn">count</span>: <span class="str">10</span>
82+
<span class="fn">data</span>:
83+
<span class="fn">email</span>: <span class="str">'@faker.unique.safeEmail'</span></pre>
7584
</article>
7685
<article class="tile">
77-
<h3>Respond like you mean it</h3>
78-
<pre class="mono"><span class="fn">response</span>()->json([
86+
<p class="file">app/controllers/SignupController.php</p>
87+
<h3>Heavy work leaves the request</h3>
88+
<p class="blurb">Queue the slow part, respond instantly. A worker picks it up in the background.</p>
89+
<pre class="mono"><span class="fn">dispatch</span>(
90+
SendWelcomeEmail::<span class="fn">with</span>($user->id)
91+
);
92+
93+
<span class="fn">response</span>()->json([
7994
<span class="str">'status'</span> => <span class="str">'shipped'</span>,
80-
<span class="str">'posts'</span> => $posts,
8195
]);</pre>
8296
</article>
8397
</div>
@@ -146,12 +160,15 @@ h1 { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.
146160
section.block { padding: 56px 0; border-top: 1px solid var(--line); }
147161
.tilebed { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
148162
@media (min-width: 768px) { .tilebed { grid-template-columns: repeat(3, 1fr); } }
149-
.tile { background: var(--card); padding: 26px; transition: background .15s; }
163+
.tile { background: var(--card); padding: 26px; transition: background .15s; min-width: 0; }
150164
.tile:hover { background: var(--card-hover); }
165+
.tile .file { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--soft); margin-bottom: 10px; }
151166
.tile h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
167+
.tile p.blurb { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
152168
.tile pre { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--fg); overflow-x: auto; }
153169
.tile pre .fn { color: #D4542B; }
154170
.tile pre .str { color: #7c8a4d; }
171+
.tile pre .cmt { color: var(--soft); }
155172
.install-line { margin-top: 20px; font-size: 13px; color: var(--soft); }
156173
.install-line code { color: var(--fg); border: 1px solid var(--line); padding: 3px 8px; }
157174
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); font-family: "JetBrains Mono", monospace; }

0 commit comments

Comments
 (0)