diff --git a/.docs/components/HeaderPrimitives.vue b/.docs/components/HeaderPrimitives.vue deleted file mode 100644 index 807d55912..000000000 --- a/.docs/components/HeaderPrimitives.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - diff --git a/.docs/components/PrimitivesHeader.vue b/.docs/components/PrimitivesHeader.vue new file mode 100644 index 000000000..a422358b4 --- /dev/null +++ b/.docs/components/PrimitivesHeader.vue @@ -0,0 +1,54 @@ + + + diff --git a/.docs/components/PrimitivesLogo.vue b/.docs/components/PrimitivesLogo.vue new file mode 100644 index 000000000..ff954422d --- /dev/null +++ b/.docs/components/PrimitivesLogo.vue @@ -0,0 +1,21 @@ + + + diff --git a/.docs/composables/useNavigation.ts b/.docs/composables/useNavigation.ts new file mode 100644 index 000000000..2d090b303 --- /dev/null +++ b/.docs/composables/useNavigation.ts @@ -0,0 +1,66 @@ +import { createSharedComposable } from '@vueuse/core' + +function _usePrimitivesNavigation() { + const headerLinksPrimitive = computed(() => { + const route = useRoute() + + return [ + { + label: 'Primitives', + icon: 'i-ph-book-bookmark-duotone', + to: '/primitives', + search: false, + children: [ + { + label: 'Get Started', + description: 'Learn how to get started with Nuxt.', + icon: 'i-ph-rocket-launch-duotone', + to: '/primitives/getting-started', + active: route.path.startsWith('/primitives/getting-started'), + }, + { + label: 'Components', + description: 'Components', + icon: 'i-ph-squares-four-bold', + to: '/primitives/components', + active: route.path.startsWith('/primitives/components'), + }, + { + label: 'Nuxt Modules', + description: 'Primitives modules for Nuxt.', + icon: 'i-simple-icons-nuxtdotjs', + to: '/primitives/getting-started/nuxt', + active: route.path.startsWith('/primitives/getting-started/nuxt'), + }, + { + label: 'Figma', + description: 'Learn how to use the primitives CLI.', + icon: 'i-simple-icons-figma', + to: '/primitives/getting-started/figma', + active: route.path.startsWith('/primitives/getting-started/figma'), + }, + { + label: 'Community', + description: 'Find answers and support from the community.', + icon: 'i-ph-chats-teardrop-duotone', + to: '/primitives/community', + active: route.path.startsWith('/primitives/community'), + }, + ], + }, + { + label: 'Projects', + icon: 'i-ph-folder-open-duotone', + to: '/', + search: false, + }, + ] + }) + + return { + headerLinksPrimitive, + + } +} + +export const usePrimitivesNavigation = createSharedComposable(_usePrimitivesNavigation) diff --git a/.docs/content/primitives/1.getting-started/1.index.md b/.docs/content/primitives/1.getting-started/1.introduction.md similarity index 53% rename from .docs/content/primitives/1.getting-started/1.index.md rename to .docs/content/primitives/1.getting-started/1.introduction.md index 9cbdae5af..48b210174 100644 --- a/.docs/content/primitives/1.getting-started/1.index.md +++ b/.docs/content/primitives/1.getting-started/1.introduction.md @@ -68,7 +68,7 @@ items: description: 'Learn how to install Primitives in your project.' - title: 'Nuxt Module' icon: 'i-ph-hammer-bold' - to: '/primitives/getting-started/nuxt-module' + to: '/primitives/getting-started/nuxt' description: 'Learn how to install Primitives in your Nuxt project.' --- @@ -78,100 +78,11 @@ items: The following components are available: -::custom-link ---- -items: - - title: 'Accordion' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/accordion' - description: 'A vertical stack of interactive headings used to toggle the visibility of their associated content.' - - title: 'Alert Dialog' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/alert-dialog' - description: 'A modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response.' - - title: 'AspectRatio' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/aspect-ratio' - description: 'Displays content within a desired ratio.' - - title: 'Avatar' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/avatar' - description: 'An image element with a fallback for representing the user.' - - title: 'Checkbox' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/checkbox' - description: 'Renders an accessible checkbox associated with controls.' - - title: 'Collapsible' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/collapsible' - description: 'An interactive component which expands/collapses a panel.' - - title: 'Dialog' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/dialog' - description: 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.' - - title: 'HoverCard' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/hover-card' - description: 'For sighted users to preview content available behind a link.' - - title: 'Label' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/label' - description: 'Renders an accessible label associated with controls.' - - title: 'Popover' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/popover' - description: 'A non-modal dialog that floats around a trigger element.' - - title: 'Progress' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/progress' - description: 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.' - - title: 'RadioGroup' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/radio-group' - description: 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.' - - title: 'Scroll Area' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/scroll-area' - description: 'A scrollable area with hidden scrollbars.' - - title: 'Separator' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/separator' - description: 'Visually or semantically separates content.' - - title: 'Slider' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/slider' - description: 'An input where the user selects a value from within a given range.' - - title: 'Switch' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/switch' - description: 'A control that allows the user to toggle between checked and not checked.' - - title: 'Tabs' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/tabs' - description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.' - - title: 'Toast' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/toast' - description: 'A non-modal dialog that floats around a trigger element.' - - title: 'ToggleGroup' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/toggle-group' - description: 'A set of two-state buttons that can be toggled on or off.' - - title: 'Toggle' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/toggle' - description: 'A two-state button that can be either on or off.' - - title: 'Toolbar' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/toolbar' - description: 'A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.' - - title: 'Tooltip' - icon: 'i-ph-file-code-bold' - to: '/primitives/components/tooltip' - description: 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.' ---- +::card{icon="i-ph-link" title="All Components" to="/primitives/components"} + Get an overview of all available components. :: + ## Features - Supports Tailwind CSS diff --git a/.docs/content/primitives/2.components/_dir.yml b/.docs/content/primitives/2.components/_dir.yml index e1e4425ff..2cba5c20e 100644 --- a/.docs/content/primitives/2.components/_dir.yml +++ b/.docs/content/primitives/2.components/_dir.yml @@ -1,3 +1,2 @@ title: Components -icon: heroicons-outline:bookmark-alt -hide: true +icon: i-ph-activity diff --git a/.docs/content/primitives/2.components/index.md b/.docs/content/primitives/2.components/index.md new file mode 100644 index 000000000..91b6b27d1 --- /dev/null +++ b/.docs/content/primitives/2.components/index.md @@ -0,0 +1,99 @@ +--- +title: Components +description: A collection of components that can be used to build your own design system. +--- + + +::custom-link +--- +items: + - title: 'Accordion' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/accordion' + description: 'A vertical stack of interactive headings used to toggle the visibility of their associated content.' + - title: 'Alert Dialog' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/alert-dialog' + description: 'A modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response.' + - title: 'AspectRatio' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/aspect-ratio' + description: 'Displays content within a desired ratio.' + - title: 'Avatar' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/avatar' + description: 'An image element with a fallback for representing the user.' + - title: 'Checkbox' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/checkbox' + description: 'Renders an accessible checkbox associated with controls.' + - title: 'Collapsible' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/collapsible' + description: 'An interactive component which expands/collapses a panel.' + - title: 'Dialog' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/dialog' + description: 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.' + - title: 'HoverCard' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/hover-card' + description: 'For sighted users to preview content available behind a link.' + - title: 'Label' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/label' + description: 'Renders an accessible label associated with controls.' + - title: 'Popover' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/popover' + description: 'A non-modal dialog that floats around a trigger element.' + - title: 'Progress' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/progress' + description: 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.' + - title: 'RadioGroup' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/radio-group' + description: 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.' + - title: 'Scroll Area' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/scroll-area' + description: 'A scrollable area with hidden scrollbars.' + - title: 'Separator' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/separator' + description: 'Visually or semantically separates content.' + - title: 'Slider' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/slider' + description: 'An input where the user selects a value from within a given range.' + - title: 'Switch' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/switch' + description: 'A control that allows the user to toggle between checked and not checked.' + - title: 'Tabs' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/tabs' + description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.' + - title: 'Toast' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/toast' + description: 'A non-modal dialog that floats around a trigger element.' + - title: 'ToggleGroup' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/toggle-group' + description: 'A set of two-state buttons that can be toggled on or off.' + - title: 'Toggle' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/toggle' + description: 'A two-state button that can be either on or off.' + - title: 'Toolbar' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/toolbar' + description: 'A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.' + - title: 'Tooltip' + icon: 'i-ph-file-code-bold' + to: '/primitives/components/tooltip' + description: 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.' +--- +:: \ No newline at end of file diff --git a/.docs/content/primitives/3.community/1.getting-help.md b/.docs/content/primitives/3.community/1.getting-help.md new file mode 100644 index 000000000..b8d4fb431 --- /dev/null +++ b/.docs/content/primitives/3.community/1.getting-help.md @@ -0,0 +1,9 @@ +--- +title: Getting Help +description: We're a friendly community of developers and we'd love to help. +icon: 'i-ph-folder-simple-duotone' +--- + +## Community Support + +If you have questions or need help with Primitives, please join our [Discord Server](https://discord.oku-ui.com) or [GitHub Discussions](https://github.com/oku-ui/primitives/discussions). \ No newline at end of file diff --git a/.docs/content/primitives/3.community/_dir.yml b/.docs/content/primitives/3.community/_dir.yml new file mode 100644 index 000000000..a251489d5 --- /dev/null +++ b/.docs/content/primitives/3.community/_dir.yml @@ -0,0 +1,2 @@ +title: Community +icon: i-ph-folder-notch-open-duotone diff --git a/.docs/layouts/primitives.vue b/.docs/layouts/primitives.vue index 04433654c..682384e58 100644 --- a/.docs/layouts/primitives.vue +++ b/.docs/layouts/primitives.vue @@ -1,25 +1,65 @@ diff --git a/.docs/nuxt.config.ts b/.docs/nuxt.config.ts index ca5ab803a..f0de5ef34 100644 --- a/.docs/nuxt.config.ts +++ b/.docs/nuxt.config.ts @@ -5,11 +5,16 @@ import { createResolver } from '@nuxt/kit' const { resolve } = createResolver(import.meta.url) +const routeRules = { + '/primitives/getting-started': { redirect: '/primitives/getting-started/introduction', prerender: false }, + '/primitives/community': { redirect: '/primitives/community/getting-help', prerender: false }, +} + const devConfig = { modules: [ '@nuxt/content', '@nuxt/ui', - 'nuxt-og-image', + // 'nuxt-og-image', '@vueuse/nuxt', '@pinia/nuxt', '@oku-ui/primitives-nuxt', @@ -17,10 +22,11 @@ const devConfig = { extends: [ '@nuxt/ui-pro', ], - devtools: { enabled: true }, + devtools: { enabled: false }, routeRules: { '/': { redirect: '/primitives' }, + ...routeRules, }, primitives: { @@ -40,11 +46,12 @@ const devConfig = { export default defineNuxtConfig(defu({}, process.env.DEV && devConfig, { nitro: { prerender: { - ignore: [ - '/primitives', - ], + crawlLinks: true, }, }, + routeRules: { + ...routeRules, + }, components: { dirs: [ { diff --git a/.docs/package.json b/.docs/package.json index 3ade45fcf..32541cc8a 100644 --- a/.docs/package.json +++ b/.docs/package.json @@ -17,7 +17,8 @@ "@radix-ui/colors": "3.0.0", "nuxt-component-meta": "^0.6.0", "nuxt-og-image": "3.0.0-beta.37", - "pinia": "^2.1.7" + "pinia": "^2.1.7", + "vue": "^3.3.11" }, "devDependencies": { "@egoist/tailwindcss-icons": "^1.4.0", @@ -33,5 +34,12 @@ "@vueuse/nuxt": "^10.6.1", "nuxt": "^3.8.2", "typescript": "^5.3.2" + }, + "pnpm": { + "overrides": { + "@vue/compiler-core": "^3.3.11", + "@vue/runtime-core": "^3.3.11", + "vue": "^3.3.11" + } } } diff --git a/.docs/pages/primitives/[...slug].vue b/.docs/pages/primitives/[...slug].vue index e4e3ed768..c6cb954dc 100644 --- a/.docs/pages/primitives/[...slug].vue +++ b/.docs/pages/primitives/[...slug].vue @@ -1,101 +1,129 @@