arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 07:50:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(home): clean

Browse Source 
Resolves #3541
This commit is contained in:
Benjamin Canac
2025-03-18 15:27:47 +01:00
parent 4e96dcca42
commit 63b5f2bc2f
1 changed files with 377 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

756
docs/pages/index.vue
View File

@@ -193,16 +193,16 @@
</div> </div>
</ULandingHero> </ULandingHero>
<ULandingSection v-for="(section, index) in page.pro.sections" :key="index" v-bind="section" class="!pt-0"> <!-- <ULandingSection v-for="(section, index) in page.pro.sections" :key="index" v-bind="section" class="!pt-0">
<MDC <MDC
v-if="section.code" v-if="section.code"
:value="section.code" :value="section.code"
tag="pre" tag="pre"
class="prose prose-primary dark:prose-invert max-w-none" class="prose prose-primary dark:prose-invert max-w-none"
/> />
</ULandingSection> </ULandingSection> -->
<div ref="sectionRef" :style="{ '--y': `${y}px`, '--inc': `${inc}px` }" class="_screen_xl"> <!-- <div ref="sectionRef" :style="{ '--y': `${y}px`, '--inc': `${inc}px` }" class="_screen_xl">
<ULandingSection class="sticky h-screen top-0 flex !pb-16" :ui="{ container: 'flex-1 sm:gap-y-12' }"> <ULandingSection class="sticky h-screen top-0 flex !pb-16" :ui="{ container: 'flex-1 sm:gap-y-12' }">
<template #title> <template #title>
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
@@ -282,8 +282,6 @@
<template #page-body> <template #page-body>
<div class="-mt-8 prose prose-primary prose-sm dark:prose-invert max-w-none"> <div class="-mt-8 prose prose-primary prose-sm dark:prose-invert max-w-none">
<MDC :value="md" tag="div" /> <MDC :value="md" tag="div" />
<!-- <hr class="border-gray-800/10 dark:border-gray-200/10 !mt-5"> -->
</div> </div>
</template> </template>
@@ -375,9 +373,9 @@
</ULandingSection> </ULandingSection>
<div class="h-[calc(var(--inc)*42)]" /> <div class="h-[calc(var(--inc)*42)]" />
</div> </div> -->
<div class="_not_screen_xl"> <!-- <div class="_not_screen_xl">
<ULandingSection> <ULandingSection>
<template #title> <template #title>
<span v-html="page.pro.landing?.title" /> <span v-html="page.pro.landing?.title" />
@@ -404,15 +402,15 @@
<source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.ogg" type="video/ogg"> <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.ogg" type="video/ogg">
</video> </video>
</ULandingSection> </ULandingSection>
</div> </div> -->
</template> </template>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { ParsedContent, NavItem } from '@nuxt/content' import type { NavItem } from '@nuxt/content'
import { useElementBounding, useWindowScroll, useElementSize, breakpointsTailwind, useBreakpoints } from '@vueuse/core' import { useElementBounding, useWindowScroll, breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import type { HomeProBlock } from '~/types' // import type { HomeProBlock } from '~/types'
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne()) const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
const { data: module } = await useFetch<{ const { data: module } = await useFetch<{
@@ -442,11 +440,11 @@ useSeoMeta({
// const source = ref('npx nuxi@latest module add ui') // const source = ref('npx nuxi@latest module add ui')
const sectionRef = ref() const sectionRef = ref()
const demoRef = ref(null) // const demoRef = ref(null)
const start = ref(0) const start = ref(0)
const { $ui } = useNuxtApp() // const { $ui } = useNuxtApp()
const { height } = useElementSize(demoRef) // const { height } = useElementSize(demoRef)
const { top } = useElementBounding(sectionRef) const { top } = useElementBounding(sectionRef)
const { y } = useWindowScroll() const { y } = useWindowScroll()
const config = useRuntimeConfig().public const config = useRuntimeConfig().public
@@ -457,300 +455,300 @@ const lgAndLarger = breakpoints.greaterOrEqual('lg')
const { format } = Intl.NumberFormat('en', { notation: 'compact' }) const { format } = Intl.NumberFormat('en', { notation: 'compact' })
const steps = { // const steps = {
header: 0, // header: 0,
footer: 5, // footer: 5,
landing: 10, // landing: 10,
docs: 27 // docs: 27
} // }
// Computed // Computed
const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4) // const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)
const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) // const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs)
? [{ // ? [{
class: 'inset-x-0 top-20 bottom-20 overflow-hidden', // class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
inactive: true, // inactive: true,
children: [{ // children: [{
name: 'ULandingHero', // name: 'ULandingHero',
to: '/pro/components/landing-hero', // to: '/pro/components/landing-hero',
class: [ // class: [
'inset-4', // 'inset-4',
isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]' // isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '), // ].filter(Boolean).join(' '),
style: { // style: {
'--step-y': `${getStepY(steps.landing + 2)}px` // '--step-y': `${getStepY(steps.landing + 2)}px`
}, // },
inactive: isAfterStep(steps.landing + 1), // inactive: isAfterStep(steps.landing + 1),
children: [{ // children: [{
slot: 'landing-hero', // slot: 'landing-hero',
class: 'inset-4' // class: 'inset-4'
}] // }]
}, isAfterStep(steps.landing + 2) && { // }, isAfterStep(steps.landing + 2) && {
name: 'ULandingSection', // name: 'ULandingSection',
to: '/pro/components/landing-section', // to: '/pro/components/landing-section',
class: [ // class: [
'inset-4', // 'inset-4',
isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]', // isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]' // isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '), // ].filter(Boolean).join(' '),
style: { // style: {
'--height': (inc.value * 4) + 'px', // '--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 10)}px`, // '--step-y': `${getStepY(steps.landing + 10)}px`,
'--prev-step-y': `${getStepY(steps.landing + 2)}px` // '--prev-step-y': `${getStepY(steps.landing + 2)}px`
}, // },
inactive: isAfterStep(steps.landing + 7), // inactive: isAfterStep(steps.landing + 7),
children: [{ // children: [{
slot: 'landing-section', // slot: 'landing-section',
class: 'inset-x-4 top-16' // class: 'inset-x-4 top-16'
}, { // }, {
name: 'ULandingGrid', // name: 'ULandingGrid',
to: '/pro/components/landing-grid', // to: '/pro/components/landing-grid',
class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '), // class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
inactive: isAfterStep(steps.landing + 8), // inactive: isAfterStep(steps.landing + 8),
children: [isAfterStep(steps.landing + 9) // children: [isAfterStep(steps.landing + 9)
? { // ? {
slot: 'landing-card-1', // slot: 'landing-card-1',
class: '!relative' // class: '!relative'
} // }
: { // : {
name: 'ULandingCard', // name: 'ULandingCard',
to: '/pro/components/landing-card', // to: '/pro/components/landing-card',
class: '!relative h-full', // class: '!relative h-full',
inactive: false // inactive: false
}, isAfterStep(steps.landing + 9) // }, isAfterStep(steps.landing + 9)
? { // ? {
slot: 'landing-card-2', // slot: 'landing-card-2',
class: '!relative h-full' // class: '!relative h-full'
} // }
: { // : {
name: 'ULandingCard', // name: 'ULandingCard',
to: '/pro/components/landing-card', // to: '/pro/components/landing-card',
class: '!relative h-full', // class: '!relative h-full',
inactive: false // inactive: false
}, isAfterStep(steps.landing + 9) // }, isAfterStep(steps.landing + 9)
? { // ? {
slot: 'landing-card-3', // slot: 'landing-card-3',
class: '!relative h-full' // class: '!relative h-full'
} // }
: { // : {
name: 'ULandingCard', // name: 'ULandingCard',
to: '/pro/components/landing-card', // to: '/pro/components/landing-card',
class: '!relative h-full', // class: '!relative h-full',
inactive: false // inactive: false
}, isAfterStep(steps.landing + 9) // }, isAfterStep(steps.landing + 9)
? { // ? {
slot: 'landing-card-4', // slot: 'landing-card-4',
class: '!relative h-full' // class: '!relative h-full'
} // }
: { // : {
name: 'ULandingCard', // name: 'ULandingCard',
to: '/pro/components/landing-card', // to: '/pro/components/landing-card',
class: '!relative h-full', // class: '!relative h-full',
inactive: false // inactive: false
}] // }]
}] // }]
}, isAfterStep(steps.landing + 10) && { // }, isAfterStep(steps.landing + 10) && {
name: 'ULandingSection', // name: 'ULandingSection',
to: '/pro/components/landing-section', // to: '/pro/components/landing-section',
class: [ // class: [
'inset-4', // 'inset-4',
isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]' // isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
].filter(Boolean).join(' '), // ].filter(Boolean).join(' '),
style: { // style: {
'--height': (inc.value * 4) + 'px', // '--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 18)}px`, // '--step-y': `${getStepY(steps.landing + 18)}px`,
'--prev-step-y': `${getStepY(steps.landing + 10)}px` // '--prev-step-y': `${getStepY(steps.landing + 10)}px`
}, // },
inactive: isAfterStep(steps.landing + 15), // inactive: isAfterStep(steps.landing + 15),
children: [{ // children: [{
name: 'ULandingCTA', // name: 'ULandingCTA',
class: 'inset-4', // class: 'inset-4',
inactive: isAfterStep(steps.landing + 16), // inactive: isAfterStep(steps.landing + 16),
children: [{ // children: [{
slot: 'landing-cta', // slot: 'landing-cta',
class: 'inset-0' // class: 'inset-0'
}] // }]
}] // }]
}].filter(Boolean) // }].filter(Boolean)
}] // }]
: []) // : [])
const docsBlocks = computed(() => [isAfterStep(steps.docs) && { // const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
name: 'UPage', // name: 'UPage',
to: '/pro/components/page', // to: '/pro/components/page',
class: 'inset-x-0 top-20 bottom-20', // class: 'inset-x-0 top-20 bottom-20',
inactive: isAfterStep(steps.docs + 1), // inactive: isAfterStep(steps.docs + 1),
children: [isAfterStep(steps.docs + 2) // children: [isAfterStep(steps.docs + 2)
? { // ? {
name: 'UAside', // name: 'UAside',
to: '/pro/components/aside', // to: '/pro/components/aside',
class: 'left-4 inset-y-4 w-64', // class: 'left-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 3), // inactive: isAfterStep(steps.docs + 3),
children: [isAfterStep(steps.docs + 4) // children: [isAfterStep(steps.docs + 4)
? { // ? {
slot: 'aside-top', // slot: 'aside-top',
class: 'inset-x-4 top-4' // class: 'inset-x-4 top-4'
} // }
: { // : {
name: '#top', // name: '#top',
class: 'inset-x-4 top-4 h-9' // class: 'inset-x-4 top-4 h-9'
}, isAfterStep(steps.docs + 5) // }, isAfterStep(steps.docs + 5)
? { // ? {
name: 'UNavigationTree', // name: 'UNavigationTree',
to: '/pro/components/navigation-tree', // to: '/pro/components/navigation-tree',
class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '), // class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
inactive: isAfterStep(steps.docs + 6), // inactive: isAfterStep(steps.docs + 6),
children: [{ // children: [{
slot: 'aside-default', // slot: 'aside-default',
class: 'inset-0' // class: 'inset-0'
}] // }]
} // }
: { // : {
name: '#default', // name: '#default',
class: 'inset-x-4 top-[4.25rem] bottom-4' // class: 'inset-x-4 top-[4.25rem] bottom-4'
}] // }]
} // }
: { // : {
name: '#left', // name: '#left',
class: 'left-4 inset-y-4 w-64' // class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.docs + 7) // }, isAfterStep(steps.docs + 7)
? { // ? {
name: 'UPage', // name: 'UPage',
to: '/pro/components/page', // to: '/pro/components/page',
class: 'left-72 right-4 inset-y-4', // class: 'left-72 right-4 inset-y-4',
inactive: isAfterStep(steps.docs + 8), // inactive: isAfterStep(steps.docs + 8),
children: [...(isAfterStep(steps.docs + 9) // children: [...(isAfterStep(steps.docs + 9)
? [{ // ? [{
name: 'UPageHeader', // name: 'UPageHeader',
to: '/pro/components/page-header', // to: '/pro/components/page-header',
class: 'top-4 left-4 right-72 h-32', // class: 'top-4 left-4 right-72 h-32',
inactive: isAfterStep(steps.docs + 10), // inactive: isAfterStep(steps.docs + 10),
children: [{ // children: [{
slot: 'page-header', // slot: 'page-header',
class: 'inset-4 justify-start' // class: 'inset-4 justify-start'
}] // }]
}, { // }, {
name: 'UPageBody', // name: 'UPageBody',
to: '/pro/components/page-body', // to: '/pro/components/page-body',
class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto', // class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
inactive: isAfterStep(steps.docs + 11), // inactive: isAfterStep(steps.docs + 11),
children: [{ // children: [{
slot: 'page-body', // slot: 'page-body',
class: 'inset-x-4 top-4 justify-start' // class: 'inset-x-4 top-4 justify-start'
}, isAfterStep(steps.docs + 12) // }, isAfterStep(steps.docs + 12)
? { // ? {
slot: 'content-surround', // slot: 'content-surround',
class: 'bottom-4 inset-x-4 h-28' // class: 'bottom-4 inset-x-4 h-28'
} // }
: { // : {
name: 'UContentSurround', // name: 'UContentSurround',
to: '/pro/components/content-surround', // to: '/pro/components/content-surround',
class: 'bottom-4 inset-x-4 h-28', // class: 'bottom-4 inset-x-4 h-28',
inactive: false // inactive: false
}] // }]
}] // }]
: [{ // : [{
name: '#default', // name: '#default',
class: 'left-4 right-72 inset-y-4' // class: 'left-4 right-72 inset-y-4'
}]), isAfterStep(steps.docs + 13) // }]), isAfterStep(steps.docs + 13)
? { // ? {
name: 'UContentToc', // name: 'UContentToc',
to: '/pro/components/content-toc', // to: '/pro/components/content-toc',
class: 'right-4 inset-y-4 w-64', // class: 'right-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 14), // inactive: isAfterStep(steps.docs + 14),
children: [{ // children: [{
slot: 'content-toc', // slot: 'content-toc',
class: 'inset-4 overflow-y-auto' // class: 'inset-4 overflow-y-auto'
}] // }]
} // }
: { // : {
name: '#right', // name: '#right',
class: 'right-4 inset-y-4 w-64' // class: 'right-4 inset-y-4 w-64'
}] // }]
} // }
: { // : {
name: '#default', // name: '#default',
class: 'left-72 right-4 inset-y-4' // class: 'left-72 right-4 inset-y-4'
}] // }]
}].filter(Boolean)) // }].filter(Boolean))
const blocks = computed(() => [isAfterStep(steps.header) && { // const blocks = computed(() => [isAfterStep(steps.header) && {
name: 'UHeader', // name: 'UHeader',
to: '/pro/components/header', // to: '/pro/components/header',
class: 'h-16 inset-x-0 top-0', // class: 'h-16 inset-x-0 top-0',
inactive: isAfterStep(steps.header + 1), // inactive: isAfterStep(steps.header + 1),
children: [isAfterStep(steps.header + 2) // children: [isAfterStep(steps.header + 2)
? { // ? {
slot: 'header-left', // slot: 'header-left',
class: 'left-4 top-4' // class: 'left-4 top-4'
} // }
: { // : {
name: '#left', // name: '#left',
class: 'left-4 inset-y-4 w-64' // class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.header + 3) // }, isAfterStep(steps.header + 3)
? { // ? {
slot: 'header-center', // slot: 'header-center',
class: 'inset-x-72 top-5' // class: 'inset-x-72 top-5'
} // }
: { // : {
name: '#center', // name: '#center',
class: 'inset-x-72 inset-y-4' // class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.header + 4) // }, isAfterStep(steps.header + 4)
? { // ? {
slot: 'header-right', // slot: 'header-right',
class: 'right-4 top-4' // class: 'right-4 top-4'
} // }
: { // : {
name: '#right', // name: '#right',
class: 'right-4 inset-y-4 w-64' // class: 'right-4 inset-y-4 w-64'
}] // }]
}, isAfterStep(steps.footer) && { // }, isAfterStep(steps.footer) && {
name: 'UFooter', // name: 'UFooter',
to: '/pro/components/footer', // to: '/pro/components/footer',
class: 'h-16 inset-x-0 bottom-0', // class: 'h-16 inset-x-0 bottom-0',
inactive: isAfterStep(steps.footer + 1), // inactive: isAfterStep(steps.footer + 1),
children: [isAfterStep(steps.footer + 2) // children: [isAfterStep(steps.footer + 2)
? { // ? {
slot: 'footer-left', // slot: 'footer-left',
class: 'left-4 bottom-5' // class: 'left-4 bottom-5'
} // }
: { // : {
name: '#left', // name: '#left',
class: 'left-4 inset-y-4 w-64' // class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.footer + 3) // }, isAfterStep(steps.footer + 3)
? { // ? {
slot: 'footer-center', // slot: 'footer-center',
class: 'inset-x-72 bottom-5' // class: 'inset-x-72 bottom-5'
} // }
: { // : {
name: '#center', // name: '#center',
class: 'inset-x-72 inset-y-4' // class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.footer + 4) // }, isAfterStep(steps.footer + 4)
? { // ? {
slot: 'footer-right', // slot: 'footer-right',
class: 'right-4 bottom-4' // class: 'right-4 bottom-4'
} // }
: { // : {
name: '#right', // name: '#right',
class: 'right-4 inset-y-4 w-64' // class: 'right-4 inset-y-4 w-64'
}] // }]
}, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean)) // }, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean))
// Methods // Methods
function isBeforeStep(i = 0) { // function isBeforeStep(i = 0) {
return y.value < (start.value + (i * inc.value)) // return y.value < (start.value + (i * inc.value))
} // }
function isAfterStep(i = 0) { // function isAfterStep(i = 0) {
return y.value >= (start.value + (i * inc.value)) // return y.value >= (start.value + (i * inc.value))
} // }
function getStepY(step: number) { // function getStepY(step: number) {
return start.value + (step * inc.value) // return start.value + (step * inc.value)
} // }
// Hooks // Hooks
@@ -762,94 +760,94 @@ onMounted(() => {
// Slots Data // Slots Data
const headerLinks = [{ // const headerLinks = [{
label: 'Documentation', // label: 'Documentation',
active: true // active: true
}, { // }, {
label: 'Playground' // label: 'Playground'
}, { // }, {
label: 'Roadmap' // label: 'Roadmap'
}, { // }, {
label: 'Pro' // label: 'Pro'
}] // }]
const navigationLinks = [{ // const navigationLinks = [{
label: 'Getting Started', // label: 'Getting Started',
children: [{ // children: [{
label: 'Introduction' // label: 'Introduction'
}, { // }, {
label: 'Installation', // label: 'Installation',
active: true // active: true
}, { // }, {
label: 'Theming' // label: 'Theming'
}, { // }, {
label: 'Shortcuts' // label: 'Shortcuts'
}, { // }, {
label: 'Examples' // label: 'Examples'
}, { // }, {
label: 'Roadmap' // label: 'Roadmap'
}] // }]
}, { // }, {
label: 'Elements', // label: 'Elements',
children: [{ // children: [{
label: 'Alert' // label: 'Alert'
}, { // }, {
label: 'Avatar' // label: 'Avatar'
}, { // }, {
label: 'Badge' // label: 'Badge'
}, { // }, {
label: 'Button' // label: 'Button'
}] // }]
}] // }]
const surround = [{ // const surround = [{
title: 'Introduction', // title: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.', // description: 'Fully styled and customizable components for Nuxt.',
_path: '/' // _path: '/'
}, { // }, {
title: 'Theming', // title: 'Theming',
description: 'Learn how to customize the look and feel of the components.', // description: 'Learn how to customize the look and feel of the components.',
_path: '/' // _path: '/'
}] // }]
const md = ` // const md = `
## Edge // ## Edge
To use the latest updates pushed on the [\`dev\`](https://github.com/nuxt/ui/tree/v2) branch, you can use \`@nuxt/ui-edge\`. // To use the latest updates pushed on the [\`dev\`](https://github.com/nuxt/ui/tree/v2) branch, you can use \`@nuxt/ui-edge\`.
` // `
const toc = [{ // const toc = [{
id: 'quick-start', // id: 'quick-start',
depth: 2, // depth: 2,
text: 'Quick Start' // text: 'Quick Start'
}, { // }, {
id: 'intellisense', // id: 'intellisense',
depth: 2, // depth: 2,
text: 'IntelliSense' // text: 'IntelliSense'
}, { // }, {
id: 'options', // id: 'options',
depth: 2, // depth: 2,
text: 'Options' // text: 'Options'
}, { // }, {
id: 'edge', // id: 'edge',
depth: 2, // depth: 2,
text: 'Edge' // text: 'Edge'
}] // }]
const communityLinks = [{ // const communityLinks = [{
icon: 'i-heroicons-pencil-square', // icon: 'i-heroicons-pencil-square',
label: 'Edit this page' // label: 'Edit this page'
}, { // }, {
icon: 'i-heroicons-star', // icon: 'i-heroicons-star',
label: 'Star on GitHub', // label: 'Star on GitHub',
to: 'https://github.com/nuxt/ui', // to: 'https://github.com/nuxt/ui',
target: '_blank' // target: '_blank'
}, { // }, {
icon: 'i-heroicons-book-open', // icon: 'i-heroicons-book-open',
label: 'Nuxt documentation', // label: 'Nuxt documentation',
to: 'https://nuxt.com', // to: 'https://nuxt.com',
target: '_blank' // target: '_blank'
}] // }]
</script> </script>
<style scoped lang="postcss"> <style scoped lang="postcss">