konnosDashboard
DocsLayout.utils.tsx124 lines · main
1import { ArrowUpRight, Book, BookOpen } from 'lucide-react'
2import SVG from 'react-inlinesvg'
3
4import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
5import { BASE_PATH, DOCS_URL } from '@/lib/constants'
6
7export const getActivePage = (params: {
8 page?: string
9 resource?: string
10 rpc?: string
11}): string => {
12 const { page, resource, rpc } = params
13 if (!page && !resource && !rpc) return 'introduction'
14 return (page || rpc || resource) as string
15}
16
17export const generateDocsMenu = (
18 ref: string,
19 tables: Array<string>,
20 functions: Array<string>,
21 flags?: { authEnabled: boolean },
22 basePath?: string
23): Array<ProductMenuGroup> => {
24 const docsBasePath = basePath ?? `/project/${ref}/integrations/data_api/docs`
25
26 return [
27 {
28 title: 'Getting Started',
29 items: [
30 { name: 'Introduction', key: 'introduction', url: docsBasePath, items: [] },
31 {
32 name: 'Authentication',
33 key: 'auth',
34 url: `${docsBasePath}?page=auth`,
35 items: [],
36 },
37 ...(flags?.authEnabled
38 ? [
39 {
40 name: 'User Management',
41 key: 'users-management',
42 url: `${docsBasePath}?page=users-management`,
43 items: [],
44 },
45 ]
46 : []),
47 ],
48 },
49 {
50 title: 'Tables and Views',
51 items: [
52 {
53 name: 'Introduction',
54 key: 'tables-intro',
55 url: `${docsBasePath}?page=tables-intro`,
56 items: [],
57 },
58 ...tables.sort().map((table) => {
59 return {
60 name: table,
61 key: table,
62 url: `${docsBasePath}?resource=${table}`,
63 items: [],
64 }
65 }),
66 ],
67 },
68 {
69 title: 'Functions',
70 items: [
71 {
72 name: 'Introduction',
73 key: 'rpc-intro',
74 url: `${docsBasePath}?page=rpc-intro`,
75 items: [],
76 },
77 ...functions.map((fn) => {
78 return { name: fn, key: fn, url: `${docsBasePath}?rpc=${fn}`, items: [] }
79 }),
80 ],
81 },
82 {
83 title: 'GraphQL',
84 items: [
85 {
86 name: 'GraphiQL',
87 key: 'graphiql',
88 url: `/project/${ref}/integrations/graphiql`,
89 icon: (
90 <SVG
91 src={`${BASE_PATH}/img/graphql.svg`}
92 style={{ width: `${16}px`, height: `${16}px` }}
93 className="text-foreground"
94 preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
95 />
96 ),
97 items: [],
98 rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
99 },
100 ],
101 },
102 {
103 title: 'More Resources',
104 items: [
105 {
106 name: 'Guides',
107 key: 'guides',
108 url: DOCS_URL,
109 icon: <Book size={14} strokeWidth={2} />,
110 items: [],
111 isExternal: true,
112 },
113 {
114 name: 'API Reference',
115 key: 'api-reference',
116 url: `${DOCS_URL}/guides/api`,
117 icon: <BookOpen size={14} strokeWidth={2} />,
118 items: [],
119 isExternal: true,
120 },
121 ],
122 },
123 ]
124}