mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 01:40:34 +01:00
docs: integrate @nuxt/ui-pro (#739)
Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: Florent Delerue <florentdelerue@hotmail.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
GitHub
@@ -7,7 +7,7 @@
|
||||
|
||||
<hr v-if="surround?.length">
|
||||
|
||||
<UDocsSurround :surround="(surround as ParsedContent[])" />
|
||||
<UDocsSurround :surround="surround" />
|
||||
</UPageBody>
|
||||
|
||||
<template v-if="page.body?.toc?.links?.length" #right>
|
||||
@@ -26,7 +26,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { withoutTrailingSlash } from 'ufo'
|
||||
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
|
||||
|
||||
const route = useRoute()
|
||||
const { branch } = useContentSource()
|
||||
|
||||
11
docs/pages/examples/[...slug].vue
Normal file
11
docs/pages/examples/[...slug].vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="p-4 flex flex-col justify-center h-screen overflow-auto">
|
||||
<component :is="name" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
|
||||
const name = route.params.slug[0]
|
||||
</script>
|
||||
@@ -1,7 +1,19 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div>
|
||||
<ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
|
||||
<ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
|
||||
<template #headline>
|
||||
<UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
|
||||
<NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version}`" target="_blank" class="focus:outline-none" tabindex="-1">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
|
||||
<span class="flex items-center gap-1">
|
||||
Nuxt UI {{ config.version.split('.').slice(0, -1).join('.') }} is out!
|
||||
</span>
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<span v-html="page.hero?.title" />
|
||||
</template>
|
||||
@@ -72,16 +84,14 @@
|
||||
}"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div v-if="card.image">
|
||||
<UColorModeImage
|
||||
:light="`${card.image.path}-light.svg`"
|
||||
:dark="`${card.image.path}-dark.svg`"
|
||||
:width="card.image.width"
|
||||
:height="card.image.height"
|
||||
:alt="card.title"
|
||||
class="object-cover w-full"
|
||||
/>
|
||||
</div>
|
||||
<UColorModeImage
|
||||
:light="`${card.image.path}-light.svg`"
|
||||
:dark="`${card.image.path}-dark.svg`"
|
||||
:width="card.image.width"
|
||||
:height="card.image.height"
|
||||
:alt="card.title"
|
||||
class="object-cover w-full"
|
||||
/>
|
||||
</ULandingCard>
|
||||
</ULandingGrid>
|
||||
</template>
|
||||
@@ -199,6 +209,7 @@ const { data: module } = await useFetch<{
|
||||
|
||||
const source = ref('npm i @nuxt/ui')
|
||||
|
||||
const config = useRuntimeConfig().public
|
||||
const { copy, copied } = useClipboard({ source })
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ defineOgImage({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[calc(100vh-var(--header-height))]">
|
||||
<div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
|
||||
<ClientOnly>
|
||||
<iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${$colorMode.preference}`" width="100%" height="100%" />
|
||||
</ClientOnly>
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<UMain>
|
||||
<ULandingHero>
|
||||
<template #top>
|
||||
<svg class="hidden dark:block absolute inset-0 -z-10 h-full w-full stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
|
||||
<defs>
|
||||
<pattern
|
||||
id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
|
||||
width="200"
|
||||
height="200"
|
||||
x="50%"
|
||||
y="-1"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
|
||||
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" />
|
||||
</svg>
|
||||
<rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
|
||||
</svg>
|
||||
|
||||
<svg class="dark:hidden absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
|
||||
<defs>
|
||||
<pattern
|
||||
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
|
||||
width="200"
|
||||
height="200"
|
||||
x="50%"
|
||||
y="-1"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" stroke-width="0" fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" />
|
||||
</svg>
|
||||
|
||||
<div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)] right-0" aria-hidden="true">
|
||||
<div class="aspect-[1108/632] w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/20 opacity-20" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #badges>
|
||||
<UBadge color="primary" size="lg" variant="subtle">
|
||||
Coming Soon 🚀
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #links>
|
||||
<UButton
|
||||
trailing-icon="i-heroicons-arrow-right"
|
||||
color="gray"
|
||||
size="md"
|
||||
variant="solid"
|
||||
to="https://ui.nuxt.com/pro/purchase"
|
||||
>
|
||||
Early access
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.
|
||||
</template>
|
||||
|
||||
<MDC
|
||||
:value="pro.code"
|
||||
tag="pre"
|
||||
class="prose prose-primary dark:prose-invert max-w-none -mt-6"
|
||||
/>
|
||||
</ULandingHero>
|
||||
</UMain>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const title = 'Nuxt UI Pro: The Building Blocks for Modern Web Apps'
|
||||
const description = 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, marketing pages, blogs, documentations or entire SaaS products.'
|
||||
|
||||
useSeoMeta({
|
||||
titleTemplate: '',
|
||||
title: title,
|
||||
ogTitle: `${title} - Nuxt UI`,
|
||||
description: description,
|
||||
ogDescription: description
|
||||
})
|
||||
</script>
|
||||
31
docs/pages/roadmap.vue
Normal file
31
docs/pages/roadmap.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const title = 'Roadmap'
|
||||
const description = 'Discover our Volta board for @nuxt/ui development status.'
|
||||
|
||||
useSeoMeta({
|
||||
title,
|
||||
ogTitle: 'Nuxt UI Roadmap',
|
||||
description
|
||||
})
|
||||
|
||||
defineOgImage({
|
||||
component: 'Docs',
|
||||
title,
|
||||
description
|
||||
})
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
|
||||
|
||||
const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
|
||||
<ClientOnly>
|
||||
<iframe :src="src" width="100%" height="100%" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user