feat: Add support for MDX (#104)

This is an attempt to create our docs and blogs website
This commit is contained in:
Wanjohi
2024-08-31 21:37:45 +03:00
committed by GitHub
parent a90fe4ba7a
commit 22d43411b1
72 changed files with 1103 additions and 542 deletions

View File

@@ -18,7 +18,7 @@ export default component$(() => {
as="div"
>
<div class="px-2" >
<section class="flex flex-col gap-4 justify-center items-center mx-auto w-full text-left max-w-xl pt-20 pb-4">
<section class="flex flex-col gap-4 justify-center items-center mx-auto w-full text-left max-w-xl pb-4">
<div class="flex flex-col gap-4 justify-center items-center">
<div class="flex sm:flex-row flex-col w-[90%] sm:w-full h-min p-1.5 overflow-hidden bg-gray-200/70 ring-2 ring-gray-300 dark:ring-gray-700 dark:bg-gray-800/70 rounded-xl gap-4">
<div class="gap-3 w-full p-6 flex flex-col rounded-lg bg-white dark:bg-black">
@@ -30,7 +30,7 @@ export default component$(() => {
<p class="text-base font-medium">Free</p>
</div>
<div class="break-words [word-break:break-word] [text-wrap:balance] [word-wrap:break-word] w-full relative whitespace-pre-wrap">
<p class="text-base text-primary-950/70 dark:text-primary-50/70">
<p class="text-base text-gray-950/70 dark:text-gray-50/70">
Perfect for casual gamers and those new to Nestri. Dive into cloud gaming without spending a dime.
</p>
</div>
@@ -55,7 +55,7 @@ export default component$(() => {
<hr class="h-[2px] bg-gray-200 dark:bg-gray-800" />
<div class="w-full relative sm:text-sm text-base gap-3 flex flex-col">
<div class="flex item-center flex-col gap-2 w-full">
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M8.21 17.32L7 16.8a2.13 2.13 0 1 0 1.17-2.93l1.28.53a1.58 1.58 0 0 1-1.22 2.92z" /><path fill="currentColor" d="M12 2a10 10 0 0 0-10 9.34l5.38 2.21a2.31 2.31 0 0 1 .47-.24A2.62 2.62 0 0 1 9 13.1l2.44-3.56a3.8 3.8 0 1 1 3.8 3.8h-.08l-3.51 2.5a2.77 2.77 0 0 1-5.47.68l-3.77-1.6A10 10 0 1 0 12 2" /><path fill="currentColor" d="M17.79 9.5a2.53 2.53 0 1 0-2.53 2.5a2.54 2.54 0 0 0 2.53-2.5m-4.42 0a1.9 1.9 0 1 1 1.9 1.91a1.9 1.9 0 0 1-1.9-1.92z" /></svg>
</div>
@@ -63,7 +63,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 10c0-1.414 0-2.121.44-2.56C7.878 7 8.585 7 10 7h4c1.414 0 2.121 0 2.56.44c.44.439.44 1.146.44 2.56v4c0 1.414 0 2.121-.44 2.56c-.439.44-1.146.44-2.56.44h-4c-1.414 0-2.121 0-2.56-.44C7 16.122 7 15.415 7 14z" opacity=".5" />
@@ -77,7 +77,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" /><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd" /></svg>
</div>
@@ -85,7 +85,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="6" r="4" /><path stroke-linecap="round" d="M18 9c1.657 0 3-1.12 3-2.5S19.657 4 18 4M6 9C4.343 9 3 7.88 3 6.5S4.343 4 6 4" opacity=".5" /><ellipse cx="12" cy="17" rx="6" ry="4" /><path stroke-linecap="round" d="M20 19c1.754-.385 3-1.359 3-2.5s-1.246-2.115-3-2.5M4 19c-1.754-.385-3-1.359-3-2.5s1.246-2.115 3-2.5" opacity=".5" /></g></svg>
</div>
@@ -93,7 +93,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -103,7 +103,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -113,7 +113,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -123,7 +123,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -133,7 +133,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -143,7 +143,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -153,7 +153,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -174,7 +174,7 @@ export default component$(() => {
<h2 class="text-base font-medium">TBD</h2>
</div>
<div class="break-words [word-break:break-word] [text-wrap:balance] [word-wrap:break-word] w-full relative whitespace-pre-wrap">
<p class="text-base text-primary-950/70 dark:text-primary-50/70">
<p class="text-base text-gray-950/70 dark:text-gray-50/70">
Ideal for dedicated gamers who crave more power, flexibility, and social gaming experiences.
</p>
</div>
@@ -198,7 +198,7 @@ export default component$(() => {
<hr class="h-[2px] bg-gray-300 dark:bg-gray-700" />
<div class="w-full sm:text-sm text-base relative gap-3 flex flex-col">
<div class="flex item-center flex-col gap-2 w-full">
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M8.21 17.32L7 16.8a2.13 2.13 0 1 0 1.17-2.93l1.28.53a1.58 1.58 0 0 1-1.22 2.92z" /><path fill="currentColor" d="M12 2a10 10 0 0 0-10 9.34l5.38 2.21a2.31 2.31 0 0 1 .47-.24A2.62 2.62 0 0 1 9 13.1l2.44-3.56a3.8 3.8 0 1 1 3.8 3.8h-.08l-3.51 2.5a2.77 2.77 0 0 1-5.47.68l-3.77-1.6A10 10 0 1 0 12 2" /><path fill="currentColor" d="M17.79 9.5a2.53 2.53 0 1 0-2.53 2.5a2.54 2.54 0 0 0 2.53-2.5m-4.42 0a1.9 1.9 0 1 1 1.9 1.91a1.9 1.9 0 0 1-1.9-1.92z" /></svg>
</div>
@@ -209,7 +209,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 10c0-1.414 0-2.121.44-2.56C7.878 7 8.585 7 10 7h4c1.414 0 2.121 0 2.56.44c.44.439.44 1.146.44 2.56v4c0 1.414 0 2.121-.44 2.56c-.439.44-1.146.44-2.56.44h-4c-1.414 0-2.121 0-2.56-.44C7 16.122 7 15.415 7 14z" opacity=".5" />
@@ -223,7 +223,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" /><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd" /></svg>
</div>
@@ -231,7 +231,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="6" r="4" /><path stroke-linecap="round" d="M18 9c1.657 0 3-1.12 3-2.5S19.657 4 18 4M6 9C4.343 9 3 7.88 3 6.5S4.343 4 6 4" opacity=".5" /><ellipse cx="12" cy="17" rx="6" ry="4" /><path stroke-linecap="round" d="M20 19c1.754-.385 3-1.359 3-2.5s-1.246-2.115-3-2.5M4 19c-1.754-.385-3-1.359-3-2.5s1.246-2.115 3-2.5" opacity=".5" /></g></svg>
</div>
@@ -239,7 +239,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -249,7 +249,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -259,7 +259,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -269,7 +269,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -279,7 +279,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -289,7 +289,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -299,7 +299,7 @@ export default component$(() => {
</div>
</div>
<div class="gap-2.5 flex relative items-center w-full" >
<div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
<div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -318,7 +318,7 @@ export default component$(() => {
<div class="rounded-full size-4 overflow-hidden bg-gradient-to-tr from-[#a0f906] to-[#e60d0d]" />
<p class="text-base font-medium">Enterprise</p>
</div>
<p class="text-neutral-800/70 dark:text-neutral-200/70 text-base" >
<p class="text-neutral-900/70 dark:text-neutral-100/70 text-base" >
Looking for a custom cloud gaming platform? Use Nestri as your own on our servers or yours. Flexible licensing and white-glove onboarding included.
</p>
<Link class="underline underline-offset-1 font-medium font-title hover:opacity-70" href="mailto:enterprise@nestri.io">