Skip to content

Commit 461bff8

Browse files
denisdobra10denisdobra10
committed
feat: Add pagination component and update documentation layout
1 parent 48d4d88 commit 461bff8

File tree

10 files changed

+85
-18
lines changed

10 files changed

+85
-18
lines changed

‎docs-v3/.data/content/contents.sqlite‎

0 Bytes
Binary file not shown.

‎docs-v3/components/docs/DocsPagination.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<nav
3+
v-if="surround && (surround[0] || surround[1])"
4+
class="mt-12 pt-6 border-t border-gray-200 dark:border-gray-700"
5+
>
6+
<div class="flex items-center justify-between gap-4">
7+
<NuxtLink
8+
v-if="surround[0]"
9+
:to="surround[0].path"
10+
class="group flex-1 flex items-center gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all"
11+
>
12+
<ChevronLeftIcon
13+
class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
14+
/>
15+
<div class="min-w-0">
16+
<div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Previous</div>
17+
<div
18+
class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
19+
>
20+
{{ surround[0].title }}
21+
</div>
22+
</div>
23+
</NuxtLink>
24+
25+
<div v-else class="flex-1"></div>
26+
27+
<NuxtLink
28+
v-if="surround[1]"
29+
:to="surround[1].path"
30+
class="group flex-1 flex items-center justify-end gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all text-right"
31+
>
32+
<div class="min-w-0">
33+
<div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Next</div>
34+
<div
35+
class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
36+
>
37+
{{ surround[1].title }}
38+
</div>
39+
</div>
40+
<ChevronRightIcon
41+
class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
42+
/>
43+
</NuxtLink>
44+
45+
<div v-else class="flex-1"></div>
46+
</div>
47+
</nav>
48+
</template>
49+
50+
<script setup lang="ts">
51+
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
52+
53+
const route = useRoute()
54+
55+
const { data: surround } = await useAsyncData(`surround-${route.path}`, () => {
56+
return queryCollectionItemSurroundings('content', route.path)
57+
})
58+
</script>

‎docs-v3/components/website/WebsiteNavbar.vue‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</div>
5757

5858
<div
59-
v-if="isMobileMenuOpen"
59+
v-if="showWebsiteMobileMenu"
6060
class="lg:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
6161
>
6262
<div class="px-2 pt-2 pb-3 space-y-1">
@@ -98,24 +98,43 @@ const navLinks: NavLink[] = [
9898
]
9999
100100
const route = useRoute()
101-
const isMobileMenuOpen = ref(false)
101+
102+
const injectedMobileMenuOpen = inject<Ref<boolean> | null>('isMobileMenuOpen', null)
103+
const injectedToggleMobileMenu = inject<(() => void) | null>('toggleMobileMenu', null)
104+
105+
const localMobileMenuOpen = ref(false)
106+
const isMobileMenuOpen = injectedMobileMenuOpen ?? localMobileMenuOpen
102107
103108
const isDocsPage = computed(() => route.path.startsWith('/docs'))
104109
110+
const showWebsiteMobileMenu = computed(() => isMobileMenuOpen.value && !isDocsPage.value)
111+
105112
function isActiveRoute(path: string): boolean {
106113
return route.path.startsWith(path)
107114
}
108115
109116
function toggleMobileMenu(): void {
110-
isMobileMenuOpen.value = !isMobileMenuOpen.value
117+
if (injectedToggleMobileMenu) {
118+
injectedToggleMobileMenu()
119+
return
120+
}
121+
122+
localMobileMenuOpen.value = !localMobileMenuOpen.value
111123
}
112124
113125
function closeMobileMenu(): void {
114-
isMobileMenuOpen.value = false
126+
if (injectedMobileMenuOpen) {
127+
injectedMobileMenuOpen.value = false
128+
}
129+
130+
localMobileMenuOpen.value = false
115131
}
116132
117133
watch(() => route.path, closeMobileMenu)
118134
119-
provide('isMobileMenuOpen', isMobileMenuOpen)
120-
provide('toggleMobileMenu', toggleMobileMenu)
135+
// Only provide if we're using local state (not on docs pages)
136+
if (!injectedMobileMenuOpen) {
137+
provide('isMobileMenuOpen', isMobileMenuOpen)
138+
provide('toggleMobileMenu', toggleMobileMenu)
139+
}
121140
</script>

‎docs-v3/content/docs/api/relations.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ position: 10
88
## Introduction
99

1010
Eloquent provides a large variety of relationships. You can read about them [here](https://laravel.com/docs/eloquent-relationships).
11-
1211
Restify handles all relationships and gives you an expressive way to list resource relationships.
1312

1413
## Definition

‎docs-v3/content/docs/api/repository-generation.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ category: API
55
position: 12
66
---
77

8-
# Repository Generation
9-
108
Laravel Restify provides powerful repository generation commands for both individual and bulk repository creation, with intelligent path detection and automatic relationship generation.
119

1210
## Intelligent Path Detection

‎docs-v3/content/docs/api/validation-methods.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ category: API
55
position: 15
66
---
77

8-
# Fluent Validation Methods
9-
108
Laravel Restify provides a fluent API for adding validation rules to fields, similar to Laravel Nova. This makes it easy to chain validation methods for cleaner and more readable code.
119

1210
## Basic Usage

‎docs-v3/content/docs/graphql/graphql-generation.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ category: GraphQL
55
position: 17
66
---
77

8-
# GraphQL Schema Generation
9-
108
Laravel Restify can automatically generate GraphQL schemas and resolvers from your existing Restify repositories, allowing you to quickly add GraphQL capabilities to your API.
119

1210
## Overview

‎docs-v3/content/docs/graphql/graphql.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ category: GraphQL
55
position: 16
66
---
77

8-
# GraphQL Integration
9-
108
Laravel Restify provides powerful GraphQL integration, allowing you to automatically generate GraphQL schemas and resolvers from your existing Restify repositories. This enables you to quickly add GraphQL capabilities to your API without rewriting your business logic.
119

1210
## Overview

‎docs-v3/layouts/docs.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
<article class="prose prose-gray dark:prose-invert prose-lg max-w-none">
1717
<slot />
1818
</article>
19+
20+
<DocsPagination />
1921
</div>
2022
</main>
2123

‎docs-v3/pages/docs/[...slug].vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
77
{{ post.title }}
88
</h1>
9-
<p v-if="post.description" class="text-xl text-gray-600 dark:text-gray-400">
10-
{{ post.description }}
11-
</p>
129
</header>
1310

1411
<div class="prose-docs">

0 commit comments

Comments
 (0)