feat: new docs (#560)

* feat: docs

* chore: update vitepress config

* chore: fix ci

* chore: update docs build

* chore: delete component

* chore: update docs

* chore: upgrade deps

* chore: update package name

* fix: installationtabs

* chore: delete old page

* fix: select

* fix: docs

* fix: code

* fix: build

* chore: upgrade docs

* chore: change tsconfig

* chore: fix ci

* fix: ci

* chore: move `.docs` folder

* chore: update readme

* chore: delete .cache

* chore: update docs

* chore: update color

* chore: update nuxt playground

.docs/.vitepress/components/Announcement.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <a
+    v-if="fm.hero.prelink"
+    :href="fm.hero.prelink.link"
+    :target="fm.hero.prelink.target"
+    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3"
+  >
+    {{ fm.hero.prelink.title }}
+  </a>
+</template>

.docs/.vitepress/components/CardLink.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { AspectRatio } from '@oku-ui/primitives'
+
+defineProps<{
+  title: string
+  description?: string
+  url: string
+  image?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <a
+      class="flex flex-col bg-[var(--vp-c-bg-soft)] hover:bg-[var(--vp-c-bg-alt)] transition duration-300 rounded-xl p-4"
+      target="_blank"
+      :href="url"
+    >
+      <h5 class="font-bold">{{ title }}</h5>
+      <p class="my-1 text-sm text-[var(--vp-c-text-2)]">{{ description }}</p>
+
+      <AspectRatio
+        v-if="image"
+        :ratio="16 / 9"
+        class="rounded-md mt-2 overflow-hidden  "
+      >
+        <img
+          class="w-full h-full object-cover"
+          :src="image"
+          :alt="title"
+        >
+      </AspectRatio>
+
+    </a>
+  </div>
+</template>

.docs/.vitepress/components/ComponentLoader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import Spinner from './Spinner.vue'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const Component = defineAsyncComponent({
+  loadingComponent: Spinner,
+  loader: () => import(`../../components/demo/${props.name}/tailwind/index.vue`),
+  timeout: 5000,
+  suspensible: false,
+})
+</script>
+
+<template>
+  <Component :is="Component" />
+</template>

.docs/.vitepress/components/ComponentPreview.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import HeroContainer from './NewHeroContainer.vue'
+import HeroCodeGroup from './NewHeroCodeGroup.vue'
+import { computed } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+const props = defineProps<{
+  name: string
+  files?: string
+}>()
+
+const cssFramework = useStorage<'css' | 'tailwind' | 'pinceau' >('cssFramework', 'tailwind')
+const parsedFiles = computed(() => JSON.parse(decodeURIComponent(props.files ?? ''))[cssFramework.value])
+</script>
+
+<template>
+  <HeroContainer
+    :folder="name"
+    :files="parsedFiles"
+    :css-framework="cssFramework"
+  >
+    <slot />
+
+    <template #codeSlot>
+      <HeroCodeGroup v-model="cssFramework">
+        <slot name="tailwind" />
+        <slot name="css" />
+      </HeroCodeGroup>
+    </template>
+  </HeroContainer>
+</template>

.docs/.vitepress/components/Contributors.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { contributors } from '../contributors'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2 justify-center">
+    <a
+      v-for="{ name, avatar } of contributors"
+      :key="name"
+      :href="`https://github.com/${name}`"
+      class="m-0"
+      rel="noopener noreferrer"
+      :aria-label="`${name} on GitHub`"
+    >
+      <img
+        loading="lazy"
+        :src="avatar"
+        width="50"
+        height="50"
+        class="rounded-full h-12 w-12"
+        :alt="`${name}'s avatar`"
+      >
+    </a>
+  </div>
+</template>

.docs/.vitepress/components/EmbedIframe.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { AspectRatio } from '@oku-ui/primitives'
+import { onMounted, ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{ src: string }>()
+
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+
+<template>
+  <AspectRatio>
+    <iframe
+      :src="src"
+      class="w-full h-full"
+      v-bind="$attrs"
+    />
+  </AspectRatio>
+</template>

.docs/.vitepress/components/HomePage.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { VPTeamMembers } from 'vitepress/theme-without-fonts'
+import { teamMembers } from '../contributors'
+import Contributors from './Contributors.vue'
+</script>
+
+<template>
+  <div class="content px-6 sm:px-[48px] lg:px-[64px]">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <main class="w-full">
+        <div class="vp-doc flex flex-col items-center mt-10">
+          <h2
+            id="meet-the-team"
+            class="opacity-50 font-medium pt-10 pb-2"
+          >
+            Meet The Team
+          </h2>
+          <div class="w-full">
+            <VPTeamMembers
+              size="small"
+              :members="teamMembers"
+            />
+          </div>
+          <h2
+            id="the-team"
+            class="op50 font-medium pt-5 pb-2"
+          >
+            Contributors
+          </h2>
+          <p class="text-lg max-w-200 text-center leading-7">
+            <Contributors />
+            <br>
+            <a
+              href="https://discord.gg/RCGzQQPtAh"
+              rel="noopener noreferrer"
+            >Join the community</a> and get involved!
+          </p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>

.docs/.vitepress/components/HomePageDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Demos from '../../components/Demos.vue'
+</script>
+
+<template>
+  <div class="mt-12 md:mt-24 content px-6 sm:px-[48px] lg:px-[64px]">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <Demos class="grid w-auto lg:grid-cols-2 gap-6 md:gap-12 lg:gap-6" />
+    </div>
+  </div>
+</template>

.docs/.vitepress/components/InstallationTabs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@oku-ui/primitives'
+import { PACKAGE_MANAGERS } from '../plugins/InstallationTabs'
+import { store } from '../store'
+
+defineProps<{
+  value: string
+}>()
+</script>
+
+<template>
+  <TabsRoot
+    v-model="store.packageManager"
+    class="bg-[var(--vp-code-block-bg)] border border-neutral-700/40 rounded-lg overflow-hidden"
+    default-value="npm"
+  >
+    <div class="bg-[var(--vp-code-block-bg)] border-b-2 border-[#272727] flex pr-2">
+      <div class="flex justify-between items-center w-full text-[13px]">
+        <TabsList class="flex">
+          <TabsTrigger
+            v-for="(pkg, index) in PACKAGE_MANAGERS"
+            :key="index"
+            :value="pkg"
+            tabindex="-1"
+            class="text-white/70 py-2.5 px-4 border-box data-[state=active]:shadow-[0_1px_0_#10b981] data-[state=active]:font-medium data-[state=active]:text-white"
+          >
+            {{ pkg }}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+    </div>
+
+    <div
+      class="[&_>div]:!m-0 custom"
+    >
+      <TabsContent
+        v-for="pkg in PACKAGE_MANAGERS"
+        :key="pkg"
+        :value="pkg"
+        as-child
+      >
+        <slot :name="pkg" />
+      </TabsContent>
+    </div>
+  </TabsRoot>
+</template>