From db96926d93e779d79819a7c68b0298fc834e7ef1 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Tue, 12 Mar 2024 19:36:53 +1100 Subject: [PATCH 1/3] chore: Update project docs config --- app/components/DocsLayout.tsx | 30 ++++++++++++------------------ app/utils/config.ts | 34 +++++++++++++++++----------------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx index 9c955f91..979ccb20 100644 --- a/app/components/DocsLayout.tsx +++ b/app/components/DocsLayout.tsx @@ -48,13 +48,9 @@ const useMenuConfig = ({ framework: string repo: string }) => { - const frameworkMenuItems = - config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ?? - [] - const localMenu: MenuItem = { - label: 'Menu', - children: [ + name: 'Menu', + items: [ { label: 'Home', to: '..', @@ -81,19 +77,17 @@ const useMenuConfig = ({ return [ localMenu, // Merge the two menus together based on their group labels - ...config.menu.map((d) => { - const match = frameworkMenuItems.find((d2) => d2.label === d.label) + ...config.sections.map((section) => { + const frameworkDocs = section.frameworks.find((f) => f.name === framework) + const frameworkItems = frameworkDocs?.items ?? [] return { - label: d.label, - children: [ - ...d.children.map((d) => ({ ...d, badge: 'core' })), - ...(match?.children ?? []).map((d) => ({ ...d, badge: framework })), + name: section.name, + items: [ + ...section.items.map((d) => ({ ...d, badge: 'core' })), + ...frameworkItems.map((d) => ({ ...d, badge: framework })), ], } }), - ...frameworkMenuItems.filter( - (d) => !config.menu.find((dd) => dd.label === d.label) - ), ].filter(Boolean) } @@ -212,7 +206,7 @@ export function DocsLayout({ const detailsRef = React.useRef(null!) const flatMenu = React.useMemo( - () => menuConfig.flatMap((d) => d.children), + () => menuConfig.flatMap((d) => d.items), [menuConfig] ) @@ -232,10 +226,10 @@ export function DocsLayout({ const menuItems = menuConfig.map((group, i) => { return (
-
{group.label}
+
{group.name}
- {group.children?.map((child, i) => { + {group.items?.map((child, i) => { const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10` return ( diff --git a/app/utils/config.ts b/app/utils/config.ts index ab1e5b16..c74f5876 100644 --- a/app/utils/config.ts +++ b/app/utils/config.ts @@ -7,28 +7,18 @@ export type FrameworkMenu = { } export type MenuItem = { - label: string | React.ReactNode - children: { + name: string | React.ReactNode + items: { label: string | React.ReactNode to: string badge?: string }[] } -const menuItemSchema = z.object({ +const itemSchema = z.object({ label: z.string(), - children: z.array( - z.object({ - label: z.string(), - to: z.string(), - badge: z.string().optional(), - }) - ), -}) - -const frameworkMenuSchema = z.object({ - framework: z.string(), - menuItems: z.array(menuItemSchema), + to: z.string(), + badge: z.string().optional(), }) const configSchema = z.object({ @@ -37,8 +27,18 @@ const configSchema = z.object({ apiKey: z.string(), indexName: z.string(), }), - menu: z.array(menuItemSchema), - frameworkMenus: z.array(frameworkMenuSchema), + sections: z.array( + z.object({ + name: z.string(), + items: z.array(itemSchema), + frameworks: z.array( + z.object({ + name: z.string(), + items: z.array(itemSchema), + }) + ), + }) + ), users: z.array(z.string()).optional(), }) From 410d1d09a98ae11b4baf9d5b4352c581a91616fc Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Tue, 12 Mar 2024 19:49:02 +1100 Subject: [PATCH 2/3] Simplify some changes --- app/components/DocsLayout.tsx | 22 ++++++++++-------- app/utils/config.ts | 39 +++++++++++++++++--------------- tanstack-docs-config.schema.json | 35 +++++++++------------------- 3 files changed, 44 insertions(+), 52 deletions(-) diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx index 979ccb20..b5d10916 100644 --- a/app/components/DocsLayout.tsx +++ b/app/components/DocsLayout.tsx @@ -49,8 +49,8 @@ const useMenuConfig = ({ repo: string }) => { const localMenu: MenuItem = { - name: 'Menu', - items: [ + label: 'Menu', + children: [ { label: 'Home', to: '..', @@ -78,12 +78,14 @@ const useMenuConfig = ({ localMenu, // Merge the two menus together based on their group labels ...config.sections.map((section) => { - const frameworkDocs = section.frameworks.find((f) => f.name === framework) - const frameworkItems = frameworkDocs?.items ?? [] + const frameworkDocs = section.frameworks?.find( + (f) => f.label === framework + ) + const frameworkItems = frameworkDocs?.children ?? [] return { - name: section.name, - items: [ - ...section.items.map((d) => ({ ...d, badge: 'core' })), + label: section.label, + children: [ + ...section.children.map((d) => ({ ...d, badge: 'core' })), ...frameworkItems.map((d) => ({ ...d, badge: framework })), ], } @@ -206,7 +208,7 @@ export function DocsLayout({ const detailsRef = React.useRef(null!) const flatMenu = React.useMemo( - () => menuConfig.flatMap((d) => d.items), + () => menuConfig.flatMap((d) => d.children), [menuConfig] ) @@ -226,10 +228,10 @@ export function DocsLayout({ const menuItems = menuConfig.map((group, i) => { return (
-
{group.name}
+
{group.label}
- {group.items?.map((child, i) => { + {group.children?.map((child, i) => { const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10` return ( diff --git a/app/utils/config.ts b/app/utils/config.ts index c74f5876..b079a03e 100644 --- a/app/utils/config.ts +++ b/app/utils/config.ts @@ -1,26 +1,15 @@ import { z } from 'zod' import { fetchRepoFile } from './documents.server' -export type FrameworkMenu = { - framework: string - menuItems: MenuItem[] -} - export type MenuItem = { - name: string | React.ReactNode - items: { + label: string | React.ReactNode + children: { label: string | React.ReactNode to: string badge?: string }[] } -const itemSchema = z.object({ - label: z.string(), - to: z.string(), - badge: z.string().optional(), -}) - const configSchema = z.object({ docSearch: z.object({ appId: z.string(), @@ -29,14 +18,28 @@ const configSchema = z.object({ }), sections: z.array( z.object({ - name: z.string(), - items: z.array(itemSchema), - frameworks: z.array( + label: z.string(), + children: z.array( z.object({ - name: z.string(), - items: z.array(itemSchema), + label: z.string(), + to: z.string(), + badge: z.string().optional(), }) ), + frameworks: z + .array( + z.object({ + label: z.string(), + children: z.array( + z.object({ + label: z.string(), + to: z.string(), + badge: z.string().optional(), + }) + ), + }) + ) + .optional(), }) ), users: z.array(z.string()).optional(), diff --git a/tanstack-docs-config.schema.json b/tanstack-docs-config.schema.json index cb791dd8..8fb1bef5 100644 --- a/tanstack-docs-config.schema.json +++ b/tanstack-docs-config.schema.json @@ -4,7 +4,7 @@ "title": "TanStack Docs Config", "description": "Config file for the documentation of a TanStack project.", "type": "object", - "required": ["docSearch", "menu", "frameworkMenus"], + "required": ["docSearch", "sections"], "additionalProperties": false, "properties": { "$schema": { @@ -26,8 +26,8 @@ } } }, - "menu": { - "description": "Doc pages that are NOT framework-specific.", + "sections": { + "description": "Section groups for the sidebar.", "type": "array", "items": { "type": "object", @@ -38,6 +38,7 @@ "type": "string" }, "children": { + "description": "Framework-agnostic docs go here.", "type": "array", "items": { "type": "object", @@ -55,36 +56,20 @@ } } } - } - } - } - }, - "frameworkMenus": { - "description": "Doc pages that are framework-specific.", - "type": "array", - "items": { - "type": "object", - "required": ["framework", "menuItems"], - "additionalProperties": false, - "properties": { - "framework": { - "type": "string" }, - "menuItems": { + "frameworks": { "type": "array", "items": { "type": "object", - "required": ["label", "children"], - "additionalProperties": false, "properties": { - "label": { - "type": "string" - }, + "label": { "type": "string" }, "children": { + "description": "Framework-specific docs go here.", "type": "array", "items": { "type": "object", "required": ["label", "to"], + "additionalProperties": false, "properties": { "label": { "type": "string" @@ -98,7 +83,9 @@ } } } - } + }, + "required": ["label", "children"], + "additionalProperties": false } } } From 03449f42eb1d45ce17296851a5f4192bf601fe4d Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Tue, 12 Mar 2024 20:04:20 +1100 Subject: [PATCH 3/3] Fix empty section group --- app/components/DocsLayout.tsx | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx index b5d10916..23538313 100644 --- a/app/components/DocsLayout.tsx +++ b/app/components/DocsLayout.tsx @@ -82,12 +82,19 @@ const useMenuConfig = ({ (f) => f.label === framework ) const frameworkItems = frameworkDocs?.children ?? [] + + const children = [ + ...section.children.map((d) => ({ ...d, badge: 'core' })), + ...frameworkItems.map((d) => ({ ...d, badge: framework })), + ] + + if (children.length === 0) { + return undefined + } + return { label: section.label, - children: [ - ...section.children.map((d) => ({ ...d, badge: 'core' })), - ...frameworkItems.map((d) => ({ ...d, badge: framework })), - ], + children, } }), ].filter(Boolean) @@ -208,7 +215,7 @@ export function DocsLayout({ const detailsRef = React.useRef(null!) const flatMenu = React.useMemo( - () => menuConfig.flatMap((d) => d.children), + () => menuConfig.flatMap((d) => d?.children), [menuConfig] ) @@ -219,7 +226,7 @@ export function DocsLayout({ '' ) - const index = flatMenu.findIndex((d) => d.to === relativePathname) + const index = flatMenu.findIndex((d) => d?.to === relativePathname) const prevItem = flatMenu[index - 1] const nextItem = flatMenu[index + 1] @@ -228,10 +235,10 @@ export function DocsLayout({ const menuItems = menuConfig.map((group, i) => { return (
-
{group.label}
+
{group?.label}
- {group.children?.map((child, i) => { + {group?.children?.map((child, i) => { const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10` return (