Skip to content

Commit e43bae3

Browse files
robinbraemerrobinbraemer
committed
feat: Enhance LandingAfter component with tabbed configuration and Git clone examples
- Introduced a tabbed interface for switching between configuration and Git clone examples in the LandingAfter component. - Updated layout for better responsiveness, allowing mobile users to toggle between examples. - Added functionality to copy configuration and Git clone commands to the clipboard with success feedback. - Improved styling for better visual clarity and user experience. This change aims to streamline the onboarding process for users by providing clear examples and easy access to essential commands.
1 parent b3119ff commit e43bae3

1 file changed

Lines changed: 139 additions & 40 deletions

File tree

‎.web/docs/.vitepress/theme/components/LandingAfter.vue‎

Lines changed: 139 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -503,47 +503,131 @@
503503
</div>
504504

505505
<!-- Quick actions: Quick Start + Learn More -->
506-
<div class="mx-auto mt-6 max-w-2xl lg:max-w-3xl">
507-
<div class="relative group">
506+
<div class="mx-auto mt-6 max-w-2xl lg:max-w-5xl">
507+
<!-- Mobile Toggle -->
508+
<div class="mb-4 flex justify-center lg:hidden">
508509
<div
509-
class="absolute -inset-0.5 bg-gradient-to-r from-[--vp-c-brand-2] to-[--vp-c-brand-1] rounded-xl blur opacity-30 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"
510-
></div>
511-
<div class="relative bg-[--vp-c-bg-alt] rounded-xl p-4">
512-
<div class="flex items-center justify-between mb-2">
513-
<span class="text-sm text-[--vp-c-text-2]">Quick Start</span>
514-
<button
515-
@click="copyBedrockCommand"
516-
class="text-[--vp-c-brand-2] hover:text-[--vp-c-brand-1] transition-all active:scale-90"
517-
:class="{ 'copy-success': showBedrockCopySuccess }"
518-
>
519-
<svg
520-
class="h-5 w-5"
521-
fill="none"
522-
viewBox="0 0 24 24"
523-
stroke="currentColor"
510+
class="inline-flex items-center rounded-full bg-[--vp-c-bg-alt] p-1"
511+
>
512+
<button
513+
@click="bedrockActiveTab = 'config'"
514+
:class="[
515+
'flex items-center gap-2 px-4 py-2 text-sm transition-colors rounded-full',
516+
bedrockActiveTab === 'config'
517+
? 'text-[--vp-c-text-1] bg-[--vp-c-brand-1]'
518+
: 'text-[--vp-c-text-2] hover:text-[--vp-c-text-1]',
519+
]"
520+
>
521+
Config
522+
</button>
523+
<button
524+
@click="bedrockActiveTab = 'git'"
525+
:class="[
526+
'flex items-center gap-2 px-4 py-2 text-sm transition-colors rounded-full',
527+
bedrockActiveTab === 'git'
528+
? 'text-[--vp-c-text-1] bg-[--vp-c-brand-1]'
529+
: 'text-[--vp-c-text-2] hover:text-[--vp-c-text-1]',
530+
]"
531+
>
532+
Git Clone
533+
</button>
534+
</div>
535+
</div>
536+
537+
<!-- Code Examples: Side by side on desktop, toggle on mobile -->
538+
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
539+
<!-- Config Example -->
540+
<div
541+
class="relative group"
542+
:class="bedrockActiveTab === 'git' ? 'hidden lg:block' : 'block'"
543+
>
544+
<div
545+
class="absolute -inset-0.5 bg-gradient-to-r from-[--vp-c-brand-2] to-[--vp-c-brand-1] rounded-xl blur opacity-30 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"
546+
></div>
547+
<div class="relative bg-[--vp-c-bg-alt] rounded-xl p-4">
548+
<div class="flex items-center justify-between mb-2">
549+
<span class="text-sm text-[--vp-c-text-2]">Enable in Config</span>
550+
<button
551+
@click="copyBedrockConfig"
552+
class="text-[--vp-c-brand-2] hover:text-[--vp-c-brand-1] transition-all active:scale-90"
553+
:class="{ 'copy-success': showBedrockConfigCopySuccess }"
524554
>
525-
<path
526-
v-if="!showBedrockCopySuccess"
527-
stroke-linecap="round"
528-
stroke-linejoin="round"
529-
stroke-width="2"
530-
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
531-
/>
532-
<path
533-
v-else
534-
stroke-linecap="round"
535-
stroke-linejoin="round"
536-
stroke-width="2"
537-
d="M5 13l4 4L19 7"
538-
/>
539-
</svg>
540-
</button>
555+
<svg
556+
class="h-5 w-5"
557+
fill="none"
558+
viewBox="0 0 24 24"
559+
stroke="currentColor"
560+
>
561+
<path
562+
v-if="!showBedrockConfigCopySuccess"
563+
stroke-linecap="round"
564+
stroke-linejoin="round"
565+
stroke-width="2"
566+
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
567+
/>
568+
<path
569+
v-else
570+
stroke-linecap="round"
571+
stroke-linejoin="round"
572+
stroke-width="2"
573+
d="M5 13l4 4L19 7"
574+
/>
575+
</svg>
576+
</button>
577+
</div>
578+
<pre
579+
class="text-sm font-mono overflow-x-auto"
580+
><code>config:
581+
bedrock:
582+
managed: true</code></pre>
541583
</div>
542-
<pre
543-
class="text-sm font-mono overflow-x-auto"
544-
><code>git clone https://github.com/minekube/gate.git
584+
</div>
585+
586+
<!-- Git Clone Example -->
587+
<div
588+
class="relative group"
589+
:class="bedrockActiveTab === 'config' ? 'hidden lg:block' : 'block'"
590+
>
591+
<div
592+
class="absolute -inset-0.5 bg-gradient-to-r from-[--vp-c-brand-2] to-[--vp-c-brand-1] rounded-xl blur opacity-30 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"
593+
></div>
594+
<div class="relative bg-[--vp-c-bg-alt] rounded-xl p-4">
595+
<div class="flex items-center justify-between mb-2">
596+
<span class="text-sm text-[--vp-c-text-2]">Git Clone Example</span>
597+
<button
598+
@click="copyBedrockGit"
599+
class="text-[--vp-c-brand-2] hover:text-[--vp-c-brand-1] transition-all active:scale-90"
600+
:class="{ 'copy-success': showBedrockGitCopySuccess }"
601+
>
602+
<svg
603+
class="h-5 w-5"
604+
fill="none"
605+
viewBox="0 0 24 24"
606+
stroke="currentColor"
607+
>
608+
<path
609+
v-if="!showBedrockGitCopySuccess"
610+
stroke-linecap="round"
611+
stroke-linejoin="round"
612+
stroke-width="2"
613+
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
614+
/>
615+
<path
616+
v-else
617+
stroke-linecap="round"
618+
stroke-linejoin="round"
619+
stroke-width="2"
620+
d="M5 13l4 4L19 7"
621+
/>
622+
</svg>
623+
</button>
624+
</div>
625+
<pre
626+
class="text-sm font-mono overflow-x-auto"
627+
><code>git clone https://github.com/minekube/gate.git
545628
cd gate/.examples/bedrock
546629
./start.sh</code></pre>
630+
</div>
547631
</div>
548632
</div>
549633

@@ -1201,18 +1285,33 @@ const copyLiteConfig = () => {
12011285
}, 2000);
12021286
};
12031287
1204-
const showBedrockCopySuccess = ref(false);
1288+
const bedrockActiveTab = ref('config');
1289+
const showBedrockConfigCopySuccess = ref(false);
1290+
const showBedrockGitCopySuccess = ref(false);
1291+
1292+
const copyBedrockConfig = () => {
1293+
const config = `config:
1294+
bedrock:
1295+
managed: true`;
1296+
1297+
navigator.clipboard.writeText(config);
1298+
showBedrockConfigCopySuccess.value = true;
1299+
1300+
setTimeout(() => {
1301+
showBedrockConfigCopySuccess.value = false;
1302+
}, 2000);
1303+
};
12051304
1206-
const copyBedrockCommand = () => {
1305+
const copyBedrockGit = () => {
12071306
const command = `git clone https://github.com/minekube/gate.git
12081307
cd gate/.examples/bedrock
12091308
./start.sh`;
12101309
12111310
navigator.clipboard.writeText(command);
1212-
showBedrockCopySuccess.value = true;
1311+
showBedrockGitCopySuccess.value = true;
12131312
12141313
setTimeout(() => {
1215-
showBedrockCopySuccess.value = false;
1314+
showBedrockGitCopySuccess.value = false;
12161315
}, 2000);
12171316
};
12181317

0 commit comments

Comments
 (0)