Skip to content

Commit a1e6485

Browse files
rijkvanzantenrijkvanzanten
committed
Get website back up
1 parent bcdb5bb commit a1e6485

7 files changed

Lines changed: 295 additions & 847 deletions

File tree

‎docs/app.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script setup lang="ts">
2+
import type { ContentNavigationItem, PageCollections } from "@nuxt/content";
3+
import * as nuxtUiLocales from "@nuxt/ui/locale";
4+
5+
const { seo } = useAppConfig();
6+
const site = useSiteConfig();
7+
const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n();
8+
const {
9+
app: { baseURL },
10+
} = useRuntimeConfig();
11+
12+
const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en);
13+
const lang = computed(() => nuxtUiLocale.value.code);
14+
const dir = computed(() => nuxtUiLocale.value.dir);
15+
const collectionName = computed(() => (isEnabled.value ? `docs_${locale.value}` : "docs"));
16+
17+
useHead({
18+
htmlAttrs: {
19+
lang,
20+
dir,
21+
},
22+
link: [{ rel: "icon", href: `${baseURL}favicon.ico` }],
23+
meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
24+
});
25+
26+
useSeoMeta({
27+
titleTemplate: seo.titleTemplate,
28+
title: seo.title,
29+
description: seo.description,
30+
ogSiteName: site.name,
31+
twitterCard: "summary_large_image",
32+
});
33+
34+
if (isEnabled.value) {
35+
const route = useRoute();
36+
const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!;
37+
38+
onMounted(() => {
39+
const currentLocale = route.path.split("/")[1];
40+
41+
if (!locales.some((locale) => locale.code === currentLocale)) {
42+
return navigateTo(switchLocalePath(defaultLocale) as string);
43+
}
44+
});
45+
}
46+
47+
const { data: navigation } = await useAsyncData(
48+
() => `navigation_${collectionName.value}`,
49+
() => queryCollectionNavigation(collectionName.value as keyof PageCollections),
50+
{
51+
transform: (data: ContentNavigationItem[]) => {
52+
const rootResult = data.find((item) => item.path === "/docs")?.children || data || [];
53+
54+
return rootResult.find((item) => item.path === `/${locale.value}`)?.children || rootResult;
55+
},
56+
watch: [locale],
57+
},
58+
);
59+
60+
const { data: files } = useLazyAsyncData(
61+
`search_${collectionName.value}`,
62+
() => queryCollectionSearchSections(collectionName.value as keyof PageCollections),
63+
{
64+
server: false,
65+
watch: [locale],
66+
},
67+
);
68+
69+
provide("navigation", navigation);
70+
</script>
71+
72+
<template>
73+
<UApp :locale="nuxtUiLocale">
74+
<NuxtLoadingIndicator color="var(--ui-primary)" />
75+
76+
<AppHeader v-if="$route.meta.header !== false" />
77+
<NuxtLayout>
78+
<NuxtPage />
79+
</NuxtLayout>
80+
<AppFooter v-if="$route.meta.footer !== false" />
81+
82+
<ClientOnly>
83+
<LazyUContentSearch
84+
:files="files"
85+
:navigation="navigation"
86+
/>
87+
</ClientOnly>
88+
</UApp>
89+
</template>

‎docs/content/1.getting-started/2.usage.md‎

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,11 @@ Whether dragging beyond the collapse threshold should collapse or expand the pri
104104

105105
::field{name="collapseThreshold" type="number"}
106106
How far to drag beyond the minSize to collapse/expand the primary panel.
107-
::
107+
::
108108

109109
::field{name="collapsedSize" type="number"}
110110
How much of the collapsed panel is visible in its collapsed state.
111-
::
111+
::
112112

113113
::field{name="transitionDuration" type="number"}
114114
Duration of the collapse/expand transition in ms.
@@ -137,7 +137,7 @@ How close the divider must be to a snap point for snapping to occur.
137137

138138
::field{name="ui" type="{ start?: string, divider?: string, end?: string }"}
139139
Inject additional classes in the slot container elements.
140-
::
140+
::
141141
::
142142

143143
## Examples
@@ -146,68 +146,72 @@ Inject additional classes in the slot container elements.
146146

147147
By setting `sizeUnit` to `px`, the component will use pixel values for `minSize`, `maxSize`, and `size`.
148148

149-
::tabs{.w-full}
150-
::tabs-item{icon="i-lucide-percent" label="Percentages"}
149+
#### Percentages
150+
151151
::code-preview
152152
:example-percentage
153153

154-
#code
155-
```vue
156-
<script lang="ts" setup>
157-
import { SplitPanel } from '@directus/vue-split-panel';
158-
</script>
159-
160-
<template>
161-
<SplitPanel
162-
size-unit="%"
163-
:min-size="20"
164-
:size="30"
165-
:max-size="40"
166-
>
167-
<template #start>
168-
<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
169-
</template>
170-
171-
<template #end>
172-
<div class="h-16 bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
173-
</template>
174-
</SplitPanel>
175-
</template>
176-
```
177-
::
178-
179-
::
180-
181-
::tabs-item{icon="i-lucide-grid-2x2" label="Pixels"}
154+
#code
155+
156+
```vue
157+
<script lang="ts" setup>
158+
import { SplitPanel } from "@directus/vue-split-panel";
159+
</script>
160+
161+
<template>
162+
<SplitPanel
163+
size-unit="%"
164+
:min-size="20"
165+
:size="30"
166+
:max-size="40"
167+
>
168+
<template #start>
169+
<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
170+
Panel A
171+
</div>
172+
</template>
173+
174+
<template #end>
175+
<div class="h-16 bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
176+
</template>
177+
</SplitPanel>
178+
</template>
179+
```
180+
181+
::
182+
183+
#### Pixels
184+
182185
::code-preview
183186
:example-px
184187

185-
#code
186-
```vue
187-
<script lang="ts" setup>
188-
import { SplitPanel } from '@directus/vue-split-panel';
189-
</script>
190-
191-
<template>
192-
<SplitPanel
193-
size-unit="px"
194-
:min-size="300"
195-
:size="400"
196-
:max-size="500"
197-
>
198-
<template #start>
199-
<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
200-
</template>
201-
202-
<template #end>
203-
<div class="h-16 bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
204-
</template>
205-
</SplitPanel>
206-
</template>
207-
```
208-
::
188+
#code
189+
190+
```vue
191+
<script lang="ts" setup>
192+
import { SplitPanel } from "@directus/vue-split-panel";
193+
</script>
194+
195+
<template>
196+
<SplitPanel
197+
size-unit="px"
198+
:min-size="300"
199+
:size="400"
200+
:max-size="500"
201+
>
202+
<template #start>
203+
<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
204+
Panel A
205+
</div>
206+
</template>
207+
208+
<template #end>
209+
<div class="h-16 bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
210+
</template>
211+
</SplitPanel>
212+
</template>
213+
```
209214

210-
::
211215
::
212216

213217
### Collapsible

‎docs/content/index.md‎

Lines changed: 7 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,88 +3,12 @@ seo:
33
title: Vue Split Panel
44
---
55

6-
::u-page-hero{orientation="horizontal"}
7-
#title
8-
Vue Split Panel
6+
# Vue Split Panel
97

10-
#description
11-
A split panel component based on Reka-UI and Web Awesome Split Panel
8+
A split panel component based on Reka-UI and Web Awesome Split Panel.
129

13-
#links
14-
:::u-button
15-
16-
---
17-
18-
color: neutral
19-
size: xl
20-
to: /getting-started/installation
21-
trailing-icon: i-lucide-arrow-right
22-
23-
---
24-
25-
Get started
26-
:::
27-
28-
:::u-button
29-
30-
---
31-
32-
color: neutral
33-
icon: simple-icons-github
34-
size: xl
35-
to: https://github.com/directus/vue-split-panel
36-
variant: outline
37-
38-
---
39-
40-
Star on GitHub
41-
:::
42-
43-
#default
44-
:::div{class="flex flex-col gap-4"}
45-
::::u-page-feature
46-
47-
---
48-
49-
title: Accessible
50-
icon: lucide-person-standing
51-
description: Uses the Window Splitter WAI-ARIA design pattern
52-
53-
---
54-
55-
::::
56-
57-
::::u-page-feature
58-
---
59-
title: Keyboard Interaction
60-
icon: lucide-keyboard
61-
description: Supports keyboard interactions for resizing and collapsing panes
62-
---
63-
::::
64-
65-
::::u-page-feature
66-
---
67-
title: Text Direction
68-
icon: lucide-arrow-left-right
69-
description: Works in either LTR or RTL text directions
70-
---
71-
::::
72-
73-
::::u-page-feature
74-
---
75-
title: Nested Layouts
76-
icon: lucide-layout-panel-left
77-
description: Create rich layouts by nesting split panel components
78-
---
79-
::::
80-
81-
::::u-page-feature
82-
---
83-
title: Transitions
84-
icon: lucide-send-to-back
85-
description: Support for transitions when collapsing/expanding the primary panel
86-
---
87-
::::
88-
89-
:::
90-
::
10+
- Accessible: Uses the Window Splitter WAI-ARIA design pattern.
11+
- Keyboard Interaction: Supports keyboard interactions for resizing and collapsing panes.
12+
- Text Direction: Works in either LTR or RTL text directions.
13+
- Nested Layouts: Create rich layouts by nesting split panel components.
14+
- Transitions: Support for transitions when collapsing/expanding the primary panel.

‎docs/nuxt.config.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1+
const baseURL = process.env.NUXT_APP_BASE_URL ?? "/";
2+
13
export default defineNuxtConfig({
24
extends: ["docus"],
3-
modules: [],
5+
modules: [
6+
(_, nuxt) => {
7+
nuxt.hook("pages:extend", (pages) => {
8+
const docusLandingIndex = pages.findIndex((page) =>
9+
page.path === "/" && page.file?.includes("docus/app/templates/landing.vue")
10+
);
11+
12+
if (docusLandingIndex !== -1) pages.splice(docusLandingIndex, 1);
13+
});
14+
},
15+
],
416
css: ["@directus/vue-split-panel/index.css"],
517
compatibilityDate: "2025-07-18",
18+
app: {
19+
baseURL,
20+
head: {
21+
link: [{ rel: "icon", href: `${baseURL}favicon.ico` }],
22+
},
23+
},
624
components: [{ path: "~/components", global: true }],
725
robots: {
826
robotsTxt: false,

0 commit comments

Comments
 (0)