Skip to content

Commit 3db83b1

Browse files
endigo9740endigo9740
authored
Add REPL links to documentation homepage (#3623)
1 parent 153190d commit 3db83b1

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

‎sites/skeleton.dev/src/components/homepage/HomePlayground.astro

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,61 @@ import { Ellipsis as IconEllipsis } from 'lucide-react';
66
<div class="card bg-noise preset-filled-surface-100-900 px-10 py-8 grid grid-cols-1 xl:grid-cols-[auto_2fr] gap-10">
77
<!-- Text -->
88
<div class="self-center space-y-1">
9-
<h2 class="h2">Frameworks</h2>
10-
<p class="xl:text-balance xl:max-w-96">Browse a collection of world Skeleton projects using your favorite web frameworks.</p>
11-
<p class="pt-4 text-xs opacity-50">Functional components limited to <u>React</u> and <u>Svelte</u>.</p>
9+
<h2 class="h2">Live Demos</h2>
10+
<p class="xl:text-balance xl:max-w-96">Test drive Skeleton directly in your browser for supported frameworks.</p>
11+
<p class="pt-4 text-xs text-surface-600-400">* Functional components limited to <strong>React</strong> and <strong>Svelte</strong>.</p>
1212
</div>
1313
<!-- Options -->
1414
<div class="self-center grid grid-cols-2 md:grid-cols-6 gap-4">
1515
<a
16-
href="https://github.com/skeletonlabs/skeleton-repl-nextjs"
16+
href="https://stackblitz.com/github/skeletonlabs/skeleton-repl-nextjs?file=README.md"
1717
target="_blank"
1818
class="aspect-square flex flex-col justify-center items-center gap-2 rounded-container hover:preset-tonal"
1919
>
2020
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center bg-[#00D8FF]">
2121
<Icon name="react" class="size-10 text-white" />
2222
</div>
23-
<span class="font-bold text-xs">React</span>
23+
<p class="font-bold text-xs">React</p>
2424
</a>
2525
<a
26-
href="https://github.com/skeletonlabs/skeleton-repl-sveltekit"
26+
href="https://stackblitz.com/github/skeletonlabs/skeleton-repl-sveltekit?file=README.md"
2727
target="_blank"
2828
class="aspect-square flex flex-col justify-center items-center gap-2 rounded-container hover:preset-tonal"
2929
>
3030
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center bg-[#FF3E00]">
3131
<Icon name="svelte" class="size-10 text-white" />
3232
</div>
33-
<span class="font-bold text-xs">Svelte</span>
33+
<p class="font-bold text-xs">Svelte</p>
3434
</a>
3535
<a
36-
href="https://github.com/skeletonlabs/skeleton-repl-nuxt"
36+
href="https://stackblitz.com/github/skeletonlabs/skeleton-repl-nuxt?file=README.md"
3737
target="_blank"
3838
class="aspect-square flex flex-col justify-center items-center gap-2 rounded-container hover:preset-tonal"
3939
>
4040
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center bg-[#42B883]">
4141
<Icon name="vue" class="size-10 text-white" />
4242
</div>
43-
<span class="font-bold text-xs">Vue</span>
43+
<p class="font-bold text-xs">Vue <span class="text-surface-700-300">*</span></p>
4444
</a>
4545
<a
46-
href="https://github.com/skeletonlabs/skeleton-repl-solidstart"
46+
href="https://stackblitz.com/github/skeletonlabs/skeleton-repl-solidstart?file=README.md"
4747
target="_blank"
4848
class="aspect-square flex flex-col justify-center items-center gap-2 rounded-container hover:preset-tonal"
4949
>
5050
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center bg-[#57A0FF]">
5151
<Icon name="solid" class="size-10 text-white" />
5252
</div>
53-
<span class="font-bold text-xs">Solid</span>
53+
<p class="font-bold text-xs">Solid <span class="text-surface-700-300">*</span></p>
5454
</a>
5555
<a
56-
href="https://github.com/skeletonlabs/skeleton-repl-astro"
56+
href="https://stackblitz.com/github/skeletonlabs/skeleton-repl-astro?file=README.md"
5757
target="_blank"
5858
class="aspect-square flex flex-col justify-center items-center gap-2 rounded-container hover:preset-tonal"
5959
>
6060
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center bg-[#761CBA]">
6161
<Icon name="astro" class="size-10 text-white" />
6262
</div>
63-
<span class="font-bold text-xs">Astro</span>
63+
<p class="font-bold text-xs">Astro <span class="text-surface-700-300">*</span></p>
6464
</a>
6565
<a
6666
href="/docs/get-started/installation"
@@ -70,7 +70,7 @@ import { Ellipsis as IconEllipsis } from 'lucide-react';
7070
<div class="w-16 xl:w-20 aspect-square rounded-full flex justify-center items-center preset-tonal">
7171
<IconEllipsis className="size-4" />
7272
</div>
73-
<span class="font-bold text-xs">More</span>
73+
<p class="font-bold text-xs">More</p>
7474
</a>
7575
</div>
7676
</div>

0 commit comments

Comments
 (0)