@lukoweb/apitogo 0.1.23 → 0.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -0
- package/cli.js +13 -13
- package/client.d.ts +8 -8
- package/dist/cli/cli.js +1117 -624
- package/dist/declarations/config/config.d.ts +4 -0
- package/dist/declarations/config/loader.d.ts +2 -0
- package/dist/declarations/config/resolve-modules.d.ts +34 -0
- package/dist/declarations/config/validators/InputNavigationSchema.d.ts +7 -7
- package/dist/declarations/config/validators/ModulesSchema.d.ts +417 -0
- package/dist/declarations/config/validators/ZudokuConfig.d.ts +123 -4
- package/dist/declarations/index.d.ts +3 -1
- package/dist/declarations/lib/authentication/components/ProductionUnlockPage.d.ts +1 -0
- package/dist/declarations/lib/authentication/hook.d.ts +3 -19
- package/dist/declarations/lib/authentication/providers/dev-portal-constants.d.ts +16 -0
- package/dist/declarations/lib/authentication/providers/dev-portal-utils.d.ts +9 -0
- package/dist/declarations/lib/authentication/providers/dev-portal.d.ts +39 -0
- package/dist/declarations/lib/authentication/state.d.ts +12 -26
- package/dist/declarations/lib/components/LandingLayout.d.ts +4 -0
- package/dist/declarations/lib/components/index.d.ts +2 -0
- package/dist/declarations/lib/plugins/api-keys/index.d.ts +2 -1
- package/dist/flat-config.d.ts +209 -24
- package/docs/components/alert.mdx +130 -0
- package/docs/components/badge.mdx +70 -0
- package/docs/components/button.mdx +132 -0
- package/docs/components/callout.mdx +112 -0
- package/docs/components/card.mdx +104 -0
- package/docs/components/checkbox.mdx +72 -0
- package/docs/components/client-only.mdx +79 -0
- package/docs/components/code-tabs.mdx +179 -0
- package/docs/components/dialog.mdx +167 -0
- package/docs/components/head.mdx +200 -0
- package/docs/components/icons.mdx +27 -0
- package/docs/components/input.mdx +96 -0
- package/docs/components/label.mdx +86 -0
- package/docs/components/link.mdx +242 -0
- package/docs/components/markdown.mdx +151 -0
- package/docs/components/mermaid.mdx +81 -0
- package/docs/components/playground.mdx +87 -0
- package/docs/components/secret.mdx +79 -0
- package/docs/components/select.mdx +176 -0
- package/docs/components/shadcn.mdx +73 -0
- package/docs/components/slider.mdx +108 -0
- package/docs/components/slot.mdx +119 -0
- package/docs/components/stepper.mdx +138 -0
- package/docs/components/switch.mdx +96 -0
- package/docs/components/syntax-highlight.mdx +602 -0
- package/docs/components/textarea.mdx +78 -0
- package/docs/components/tooltip.mdx +195 -0
- package/docs/components/typography.mdx +61 -0
- package/docs/concepts/auth-provider-api-identities.md +109 -0
- package/docs/configuration/ai-assistants.md +65 -0
- package/docs/configuration/api-catalog.md +109 -0
- package/docs/configuration/api-reference.md +397 -0
- package/docs/configuration/authentication-auth0.md +174 -0
- package/docs/configuration/authentication-azure-ad.md +238 -0
- package/docs/configuration/authentication-clerk.md +110 -0
- package/docs/configuration/authentication-firebase.md +62 -0
- package/docs/configuration/authentication-pingfederate.md +136 -0
- package/docs/configuration/authentication-supabase.md +226 -0
- package/docs/configuration/authentication.md +231 -0
- package/docs/configuration/build-configuration.mdx +147 -0
- package/docs/configuration/docs.md +282 -0
- package/docs/configuration/footer.mdx +214 -0
- package/docs/configuration/llms.md +90 -0
- package/docs/configuration/make-config.mdx +90 -0
- package/docs/configuration/navigation.mdx +422 -0
- package/docs/configuration/overview.md +380 -0
- package/docs/configuration/protected-routes.md +150 -0
- package/docs/configuration/search.md +163 -0
- package/docs/configuration/sentry.mdx +44 -0
- package/docs/configuration/site.md +124 -0
- package/docs/configuration/slots.mdx +125 -0
- package/docs/configuration/vite-config.md +18 -0
- package/docs/custom-plugins.md +285 -0
- package/docs/customization/colors-theme.mdx +276 -0
- package/docs/customization/fonts.md +110 -0
- package/docs/deploy/apache-nginx.md +41 -0
- package/docs/deploy/apitogo.md +139 -0
- package/docs/deploy/cloudflare-pages.md +75 -0
- package/docs/deploy/direct-upload.md +18 -0
- package/docs/deploy/github-pages.md +50 -0
- package/docs/deploy/vercel.md +103 -0
- package/docs/deployment.md +21 -0
- package/docs/extending/events.md +124 -0
- package/docs/guides/custom-pages.md +106 -0
- package/docs/guides/environment-variables.md +99 -0
- package/docs/guides/managing-api-keys-and-identities.md +172 -0
- package/docs/guides/mermaid.mdx +70 -0
- package/docs/guides/navigation-migration.md +87 -0
- package/docs/guides/navigation-rules.mdx +203 -0
- package/docs/guides/processors.mdx +234 -0
- package/docs/guides/static-files.md +55 -0
- package/docs/guides/transforming-examples.md +156 -0
- package/docs/guides/using-multiple-apis.md +87 -0
- package/docs/markdown/admonitions.md +128 -0
- package/docs/markdown/code-blocks.md +196 -0
- package/docs/markdown/frontmatter.md +173 -0
- package/docs/markdown/mdx.md +68 -0
- package/docs/markdown/overview.md +275 -0
- package/docs/plugins.md +5 -0
- package/docs/quickstart.md +87 -0
- package/docs/writing.mdx +72 -0
- package/package.json +170 -116
- package/src/app/ZuploBuildConfig.ts +36 -36
- package/src/app/defaultTheme.css +77 -77
- package/src/app/demo-cdn.html +37 -37
- package/src/app/demo.html +21 -21
- package/src/app/demo.tsx +77 -77
- package/src/app/entry.client.tsx +118 -118
- package/src/app/entry.server.tsx +160 -160
- package/src/app/env.ts +40 -40
- package/src/app/font.geist.css +73 -73
- package/src/app/main.css +390 -390
- package/src/app/main.tsx +8 -1
- package/src/app/polyfills.ts +47 -47
- package/src/app/processRoutes.tsx +51 -25
- package/src/app/sentry.ts +24 -24
- package/src/app/standalone.html +23 -23
- package/src/app/standalone.tsx +60 -60
- package/src/app/utils/createRedirectRoutes.ts +11 -11
- package/src/config/config.ts +32 -0
- package/src/config/create-plugin.ts +71 -71
- package/src/config/file-exists.ts +6 -6
- package/src/config/loader.ts +11 -1
- package/src/config/resolve-modules.ts +260 -0
- package/src/config/validators/BuildSchema.ts +95 -95
- package/src/config/validators/HeaderNavigationSchema.ts +41 -41
- package/src/config/validators/InputNavigationSchema.test-d.ts +178 -178
- package/src/config/validators/InputNavigationSchema.ts +206 -206
- package/src/config/validators/ModulesSchema.ts +312 -0
- package/src/config/validators/ProtectedRoutesSchema.ts +35 -35
- package/src/config/validators/ZudokuConfig.ts +766 -729
- package/src/config/validators/auth.ts +3 -3
- package/src/config/validators/reason-codes.ts +7 -7
- package/src/env.d.ts +11 -11
- package/src/index.ts +31 -0
- package/src/lib/MissingIcon.tsx +22 -22
- package/src/lib/assets/language-icons/bun.tsx +50 -50
- package/src/lib/assets/language-icons/c.tsx +31 -31
- package/src/lib/assets/language-icons/commonlisp.tsx +22 -22
- package/src/lib/assets/language-icons/cpp.tsx +35 -35
- package/src/lib/assets/language-icons/csharp.tsx +35 -35
- package/src/lib/assets/language-icons/css.tsx +36 -36
- package/src/lib/assets/language-icons/dart.tsx +39 -39
- package/src/lib/assets/language-icons/elixir.tsx +19 -19
- package/src/lib/assets/language-icons/go.tsx +19 -19
- package/src/lib/assets/language-icons/graphql.tsx +19 -19
- package/src/lib/assets/language-icons/html.tsx +24 -24
- package/src/lib/assets/language-icons/java.tsx +35 -35
- package/src/lib/assets/language-icons/javascript.tsx +11 -11
- package/src/lib/assets/language-icons/json.tsx +19 -19
- package/src/lib/assets/language-icons/kotlin.tsx +30 -30
- package/src/lib/assets/language-icons/markdown.tsx +19 -19
- package/src/lib/assets/language-icons/mdx.tsx +23 -23
- package/src/lib/assets/language-icons/npm.tsx +15 -15
- package/src/lib/assets/language-icons/objectivec.tsx +23 -23
- package/src/lib/assets/language-icons/ocaml.tsx +34 -34
- package/src/lib/assets/language-icons/php.tsx +19 -19
- package/src/lib/assets/language-icons/pnpm.tsx +32 -32
- package/src/lib/assets/language-icons/powershell.tsx +27 -27
- package/src/lib/assets/language-icons/python.tsx +23 -23
- package/src/lib/assets/language-icons/react.tsx +21 -21
- package/src/lib/assets/language-icons/ruby.tsx +19 -19
- package/src/lib/assets/language-icons/rust.tsx +19 -19
- package/src/lib/assets/language-icons/scala.tsx +19 -19
- package/src/lib/assets/language-icons/shell.tsx +19 -19
- package/src/lib/assets/language-icons/swift.tsx +19 -19
- package/src/lib/assets/language-icons/toml.tsx +23 -23
- package/src/lib/assets/language-icons/typescript.tsx +23 -23
- package/src/lib/assets/language-icons/xml.tsx +19 -19
- package/src/lib/assets/language-icons/yaml.tsx +23 -23
- package/src/lib/assets/language-icons/yarn.tsx +17 -17
- package/src/lib/assets/language-icons/zig.tsx +32 -32
- package/src/lib/auth/issuer.ts +34 -31
- package/src/lib/authentication/AuthenticationPlugin.tsx +33 -33
- package/src/lib/authentication/authentication.ts +48 -48
- package/src/lib/authentication/components/OAuthErrorPage.tsx +197 -197
- package/src/lib/authentication/components/ProductionUnlockPage.tsx +27 -0
- package/src/lib/authentication/components/SignOut.tsx +15 -15
- package/src/lib/authentication/constants.ts +1 -1
- package/src/lib/authentication/errors.ts +34 -34
- package/src/lib/authentication/hook.ts +141 -139
- package/src/lib/authentication/providers/auth0.tsx +91 -91
- package/src/lib/authentication/providers/azureb2c.tsx +223 -223
- package/src/lib/authentication/providers/dev-portal-constants.ts +21 -0
- package/src/lib/authentication/providers/dev-portal-utils.ts +107 -0
- package/src/lib/authentication/providers/dev-portal.tsx +270 -0
- package/src/lib/authentication/providers/firebase.tsx +486 -486
- package/src/lib/authentication/providers/openid.tsx +516 -516
- package/src/lib/authentication/providers/supabase.tsx +412 -412
- package/src/lib/authentication/providers/util.ts +26 -26
- package/src/lib/authentication/state.ts +179 -91
- package/src/lib/authentication/ui/icons/Apple.tsx +10 -10
- package/src/lib/authentication/ui/icons/Facebook.tsx +15 -15
- package/src/lib/authentication/ui/icons/Github.tsx +16 -16
- package/src/lib/authentication/ui/icons/Google.tsx +16 -16
- package/src/lib/authentication/ui/icons/Microsoft.tsx +12 -12
- package/src/lib/authentication/ui/icons/X.tsx +10 -10
- package/src/lib/authentication/utils/relativeRedirectUrl.ts +16 -16
- package/src/lib/components/AnchorLink.tsx +24 -24
- package/src/lib/components/Banner.tsx +52 -52
- package/src/lib/components/Bootstrap.tsx +77 -77
- package/src/lib/components/BuildCheck.tsx +87 -87
- package/src/lib/components/CategoryHeading.tsx +19 -19
- package/src/lib/components/ClientOnly.tsx +19 -19
- package/src/lib/components/ErrorPage.tsx +26 -26
- package/src/lib/components/Footer.tsx +140 -140
- package/src/lib/components/Framed.tsx +51 -51
- package/src/lib/components/Header.tsx +11 -3
- package/src/lib/components/HeaderNavigation.tsx +148 -148
- package/src/lib/components/Heading.tsx +84 -84
- package/src/lib/components/InlineCode.tsx +15 -15
- package/src/lib/components/LandingLayout.tsx +21 -0
- package/src/lib/components/LanguageIcon.tsx +199 -199
- package/src/lib/components/Markdown.tsx +55 -55
- package/src/lib/components/Meta.tsx +46 -46
- package/src/lib/components/MobileTopNavigation.tsx +11 -3
- package/src/lib/components/NotFoundPage.tsx +37 -37
- package/src/lib/components/PageProgress.tsx +28 -28
- package/src/lib/components/PagefindSearchMeta.tsx +14 -14
- package/src/lib/components/Pagination.tsx +44 -44
- package/src/lib/components/PathRenderer.tsx +61 -61
- package/src/lib/components/PluginHeads.tsx +17 -17
- package/src/lib/components/Search.tsx +70 -70
- package/src/lib/components/Slot.tsx +64 -64
- package/src/lib/components/Spinner.tsx +5 -5
- package/src/lib/components/StatusPage.tsx +96 -96
- package/src/lib/components/ThemeSwitch.tsx +49 -49
- package/src/lib/components/Typography.tsx +12 -12
- package/src/lib/components/Zudoku.tsx +106 -106
- package/src/lib/components/cache.ts +27 -27
- package/src/lib/components/context/RenderContext.ts +11 -11
- package/src/lib/components/context/RouterEventsEmitter.tsx +19 -19
- package/src/lib/components/context/SlotProvider.tsx +149 -149
- package/src/lib/components/context/ViewportAnchorContext.tsx +137 -137
- package/src/lib/components/context/ZudokuContext.ts +140 -140
- package/src/lib/components/context/ZudokuProvider.tsx +22 -22
- package/src/lib/components/context/ZudokuReactContext.tsx +17 -17
- package/src/lib/components/index.ts +2 -0
- package/src/lib/components/navigation/Navigation.tsx +51 -51
- package/src/lib/components/navigation/NavigationBadge.tsx +48 -48
- package/src/lib/components/navigation/NavigationFilterContext.tsx +28 -28
- package/src/lib/components/navigation/NavigationWrapper.tsx +49 -49
- package/src/lib/components/navigation/Toc.tsx +137 -137
- package/src/lib/components/navigation/ZudokuLogo.tsx +25 -25
- package/src/lib/components/navigation/ZuploLogo.tsx +14 -14
- package/src/lib/components/navigation/utils.ts +234 -234
- package/src/lib/core/RouteGuard.tsx +11 -1
- package/src/lib/core/ZudokuContext.ts +271 -271
- package/src/lib/core/plugins.ts +138 -138
- package/src/lib/core/react-query.ts +1 -1
- package/src/lib/core/router.ts +1 -1
- package/src/lib/core/transform-config.ts +67 -67
- package/src/lib/demo/DemoAnnouncement.tsx +17 -17
- package/src/lib/errors/ErrorAlert.tsx +28 -28
- package/src/lib/errors/RouterError.tsx +18 -18
- package/src/lib/errors/ServerError.tsx +5 -5
- package/src/lib/errors/TopLevelError.tsx +6 -6
- package/src/lib/hooks/index.ts +13 -13
- package/src/lib/hooks/useEvent.ts +41 -41
- package/src/lib/hooks/useHighlighter.ts +15 -15
- package/src/lib/hooks/useHotkey.ts +70 -70
- package/src/lib/icons.ts +2 -2
- package/src/lib/navigation/applyRules.ts +127 -127
- package/src/lib/navigation/pathMatcher.ts +81 -81
- package/src/lib/oas/graphql/circular.ts +69 -69
- package/src/lib/oas/graphql/constants.ts +2 -2
- package/src/lib/oas/graphql/index.ts +791 -791
- package/src/lib/oas/parser/dereference/index.ts +84 -84
- package/src/lib/oas/parser/dereference/resolveRef.ts +32 -32
- package/src/lib/oas/parser/index.ts +129 -129
- package/src/lib/oas/parser/schemas/v3.0.json +1489 -1489
- package/src/lib/oas/parser/schemas/v3.1.json +1298 -1298
- package/src/lib/oas/parser/upgrade/index.ts +174 -174
- package/src/lib/plugins/api-catalog/index.tsx +119 -119
- package/src/lib/plugins/api-keys/ProtectedRoute.tsx +33 -33
- package/src/lib/plugins/api-keys/index.tsx +274 -272
- package/src/lib/plugins/api-keys/settings/ApiKeyList.tsx +67 -67
- package/src/lib/plugins/custom-pages/index.tsx +32 -32
- package/src/lib/plugins/markdown/assets/ChatGPTLogo.tsx +11 -11
- package/src/lib/plugins/markdown/assets/ClaudeLogo.tsx +19 -19
- package/src/lib/plugins/markdown/index.tsx +62 -62
- package/src/lib/plugins/openapi/ColorizedParam.tsx +115 -115
- package/src/lib/plugins/openapi/Endpoint.tsx +85 -85
- package/src/lib/plugins/openapi/MCPEndpoint.tsx +273 -273
- package/src/lib/plugins/openapi/OasProvider.tsx +74 -74
- package/src/lib/plugins/openapi/OperationList.tsx +275 -275
- package/src/lib/plugins/openapi/ParamInfos.tsx +96 -96
- package/src/lib/plugins/openapi/ParameterList.tsx +53 -53
- package/src/lib/plugins/openapi/ParameterListItem.tsx +161 -161
- package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx +67 -67
- package/src/lib/plugins/openapi/SidecarBox.tsx +57 -57
- package/src/lib/plugins/openapi/SimpleSelect.tsx +46 -46
- package/src/lib/plugins/openapi/client/GraphQLClient.tsx +73 -73
- package/src/lib/plugins/openapi/client/GraphQLContext.tsx +16 -16
- package/src/lib/plugins/openapi/client/createServer.ts +35 -35
- package/src/lib/plugins/openapi/client/useCreateQuery.ts +44 -44
- package/src/lib/plugins/openapi/components/ConstValue.tsx +24 -24
- package/src/lib/plugins/openapi/components/NonHighlightedCode.tsx +22 -22
- package/src/lib/plugins/openapi/components/SelectOnClick.tsx +29 -29
- package/src/lib/plugins/openapi/context.tsx +16 -16
- package/src/lib/plugins/openapi/graphql/fragment-masking.ts +104 -104
- package/src/lib/plugins/openapi/graphql/gql.ts +95 -95
- package/src/lib/plugins/openapi/graphql/graphql.ts +835 -835
- package/src/lib/plugins/openapi/graphql/index.ts +2 -2
- package/src/lib/plugins/openapi/index.tsx +221 -221
- package/src/lib/plugins/openapi/interfaces.ts +100 -100
- package/src/lib/plugins/openapi/playground/Headers.tsx +6 -6
- package/src/lib/plugins/openapi/playground/PathParams.tsx +53 -53
- package/src/lib/plugins/openapi/playground/Spinner.tsx +87 -87
- package/src/lib/plugins/openapi/playground/createUrl.ts +25 -25
- package/src/lib/plugins/openapi/playground/fileUtils.ts +36 -36
- package/src/lib/plugins/openapi/playground/rememberedIdentity.ts +26 -26
- package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx +31 -31
- package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx +29 -29
- package/src/lib/plugins/openapi/playground/request-panel/useKeyValueFieldManager.ts +340 -340
- package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx +117 -117
- package/src/lib/plugins/openapi/playground/result-panel/convertToTypes.ts +36 -36
- package/src/lib/plugins/openapi/playground/serializeQueryParams.ts +125 -125
- package/src/lib/plugins/openapi/playground/useRememberSkipLoginDialog.tsx +23 -23
- package/src/lib/plugins/openapi/processors/removeExtensions.ts +29 -29
- package/src/lib/plugins/openapi/processors/removeParameters.ts +103 -103
- package/src/lib/plugins/openapi/processors/removePaths.ts +57 -57
- package/src/lib/plugins/openapi/processors/traverse.ts +1 -1
- package/src/lib/plugins/openapi/schema/SchemaExampleAndDefault.tsx +39 -39
- package/src/lib/plugins/openapi/schema/UnionView.tsx +132 -132
- package/src/lib/plugins/openapi/schema/union-helpers.ts +123 -123
- package/src/lib/plugins/openapi/schema/utils.ts +49 -49
- package/src/lib/plugins/openapi/state.ts +36 -36
- package/src/lib/plugins/openapi/util/buildTagCategories.ts +54 -54
- package/src/lib/plugins/openapi/util/createHttpSnippet.ts +135 -135
- package/src/lib/plugins/openapi/util/createNavigationCategory.tsx +39 -39
- package/src/lib/plugins/openapi/util/generateSchemaExample.ts +191 -191
- package/src/lib/plugins/openapi/util/getRoutes.tsx +265 -265
- package/src/lib/plugins/openapi/util/methodColorMap.tsx +11 -11
- package/src/lib/plugins/openapi/util/methodToColor.ts +27 -27
- package/src/lib/plugins/openapi/util/sanitizeMarkdownForMetatag.tsx +32 -32
- package/src/lib/plugins/openapi/util/useWarmupSchema.ts +23 -23
- package/src/lib/plugins/search-inkeep/index.tsx +108 -108
- package/src/lib/plugins/search-inkeep/inkeep.ts +24 -24
- package/src/lib/plugins/search-pagefind/get-results.tsx +74 -74
- package/src/lib/plugins/search-pagefind/index.tsx +21 -21
- package/src/lib/plugins/search-pagefind/types.ts +118 -118
- package/src/lib/shiki-constants.ts +24 -24
- package/src/lib/testing/index.tsx +146 -146
- package/src/lib/ui/Accordion.tsx +55 -55
- package/src/lib/ui/Alert.tsx +84 -84
- package/src/lib/ui/AlertDialog.tsx +195 -195
- package/src/lib/ui/AspectRatio.tsx +5 -5
- package/src/lib/ui/Badge.tsx +48 -48
- package/src/lib/ui/Breadcrumb.tsx +115 -115
- package/src/lib/ui/Button.tsx +65 -65
- package/src/lib/ui/ButtonGroup.tsx +80 -80
- package/src/lib/ui/Callout.tsx +113 -113
- package/src/lib/ui/Card.tsx +95 -95
- package/src/lib/ui/Carousel.tsx +259 -259
- package/src/lib/ui/Checkbox.tsx +28 -28
- package/src/lib/ui/CodeBlock.tsx +92 -92
- package/src/lib/ui/CodeTabPanel.tsx +13 -13
- package/src/lib/ui/CodeTabs.tsx +161 -161
- package/src/lib/ui/Collapsible.tsx +31 -31
- package/src/lib/ui/Dialog.tsx +138 -138
- package/src/lib/ui/DismissibleAlert.tsx +74 -74
- package/src/lib/ui/Drawer.tsx +121 -121
- package/src/lib/ui/DropdownMenu.tsx +254 -254
- package/src/lib/ui/EmbeddedCodeBlock.tsx +99 -99
- package/src/lib/ui/Form.tsx +176 -176
- package/src/lib/ui/Frame.tsx +81 -81
- package/src/lib/ui/HoverCard.tsx +26 -26
- package/src/lib/ui/Input.tsx +23 -23
- package/src/lib/ui/InputGroup.tsx +168 -168
- package/src/lib/ui/Item.tsx +213 -213
- package/src/lib/ui/Kbd.tsx +28 -28
- package/src/lib/ui/Label.tsx +23 -23
- package/src/lib/ui/NativeSelect.tsx +48 -48
- package/src/lib/ui/NavigationMenu.tsx +169 -169
- package/src/lib/ui/Pagination.tsx +115 -115
- package/src/lib/ui/Popover.tsx +28 -28
- package/src/lib/ui/Progress.tsx +25 -25
- package/src/lib/ui/RadioGroup.tsx +41 -41
- package/src/lib/ui/ReactComponentDoc.tsx +68 -68
- package/src/lib/ui/ScrollArea.tsx +45 -45
- package/src/lib/ui/Secret.tsx +133 -133
- package/src/lib/ui/Select.tsx +184 -184
- package/src/lib/ui/Separator.tsx +25 -25
- package/src/lib/ui/Skeleton.tsx +15 -15
- package/src/lib/ui/Slider.tsx +25 -25
- package/src/lib/ui/Stepper.tsx +8 -8
- package/src/lib/ui/Switch.tsx +26 -26
- package/src/lib/ui/SyntaxHighlight.tsx +54 -54
- package/src/lib/ui/Tabs.tsx +52 -52
- package/src/lib/ui/Textarea.tsx +22 -22
- package/src/lib/ui/Toggle.tsx +42 -42
- package/src/lib/ui/ToggleGroup.tsx +58 -58
- package/src/lib/ui/Tooltip.tsx +65 -65
- package/src/lib/ui/Value.tsx +42 -42
- package/src/lib/ui/util.tsx +8 -8
- package/src/lib/util/cn.ts +6 -6
- package/src/lib/util/createVariantComponent.tsx +61 -61
- package/src/lib/util/ensureArray.ts +3 -3
- package/src/lib/util/flattenAllOf.ts +72 -72
- package/src/lib/util/flattenAllOfProcessor.ts +74 -74
- package/src/lib/util/hastToJsx.tsx +67 -67
- package/src/lib/util/humanFileSize.ts +15 -15
- package/src/lib/util/invariant.ts +52 -52
- package/src/lib/util/joinUrl.ts +60 -60
- package/src/lib/util/logInit.ts +9 -9
- package/src/lib/util/objectEntries.ts +5 -5
- package/src/lib/util/os.ts +18 -18
- package/src/lib/util/pastellize.ts +25 -25
- package/src/lib/util/problemJson.ts +63 -63
- package/src/lib/util/readFrontmatter.ts +14 -14
- package/src/lib/util/renderIf.ts +4 -4
- package/src/lib/util/scrollIntoViewIfNeeded.ts +18 -18
- package/src/lib/util/slugify.ts +21 -21
- package/src/lib/util/syncZustandState.ts +22 -22
- package/src/lib/util/traverse.ts +70 -70
- package/src/lib/util/types.ts +7 -7
- package/src/lib/util/url.ts +18 -18
- package/src/lib/util/useCopyToClipboard.ts +17 -17
- package/src/lib/util/useExposedProps.tsx +27 -27
- package/src/lib/util/useIsomorphicLayoutEffect.ts +6 -6
- package/src/lib/util/useLatest.ts +18 -18
- package/src/lib/util/useOnScreen.ts +34 -34
- package/src/lib/util/useScrollToAnchor.ts +70 -70
- package/src/lib/util/useScrollToTop.ts +18 -18
- package/src/types.d.ts +57 -53
- package/src/vite/api/SchemaManager.ts +371 -371
- package/src/vite/api/schema-codegen.ts +163 -163
- package/src/vite/config.ts +5 -1
- package/src/vite/css/collect.ts +42 -42
- package/src/vite/css/plugin.ts +105 -105
- package/src/vite/debug.ts +18 -18
- package/src/vite/dev-portal-env.ts +93 -0
- package/src/vite/html.ts +54 -54
- package/src/vite/index.ts +2 -2
- package/src/vite/mdx/rehype-extract-toc-with-jsx-export.ts +19 -19
- package/src/vite/mdx/rehype-extract-toc-with-jsx.ts +70 -70
- package/src/vite/mdx/remark-code-tabs.ts +47 -47
- package/src/vite/mdx/remark-inject-filepath.ts +13 -13
- package/src/vite/mdx/remark-last-modified.ts +103 -103
- package/src/vite/mdx/remark-link-rewrite.ts +23 -23
- package/src/vite/mdx/remark-normalize-image-url.ts +15 -15
- package/src/vite/mdx/remark-static-generation.ts +149 -149
- package/src/vite/mdx/utils.ts +32 -32
- package/src/vite/output.ts +261 -261
- package/src/vite/package-root.ts +12 -12
- package/src/vite/pagefind-dev-index.ts +100 -100
- package/src/vite/plugin-api-keys.ts +6 -1
- package/src/vite/plugin-api.ts +4 -1
- package/src/vite/plugin-auth.ts +5 -1
- package/src/vite/plugin-component.ts +1 -1
- package/src/vite/plugin-config-reload.ts +49 -49
- package/src/vite/plugin-doc-metadata.ts +45 -45
- package/src/vite/plugin-docs.ts +4 -1
- package/src/vite/plugin-metadata.ts +30 -30
- package/src/vite/plugin-modules.ts +144 -0
- package/src/vite/plugin-shiki-register.ts +97 -97
- package/src/vite/plugin-theme.ts +399 -399
- package/src/vite/plugin.ts +2 -0
- package/src/vite/prerender/utils.ts +76 -76
- package/src/vite/prerender/worker.ts +118 -118
- package/src/vite/reporter.ts +34 -34
- package/src/vite/shadcn-registry.ts +48 -48
- package/src/vite/sitemap.ts +78 -78
- package/src/vite/ssr-templates/cloudflare.ts +19 -19
- package/src/vite/ssr-templates/node.ts +25 -25
- package/src/vite/ssr-templates/vercel.ts +22 -22
- package/src/vite/zuplo.ts +30 -30
- package/src/vite-env.d.ts +6 -6
- package/src/zuplo/enrich-with-zuplo-mcp.ts +168 -168
- package/src/zuplo/enrich-with-zuplo.ts +256 -256
- package/src/zuplo/policy-types.ts +46 -46
- package/src/zuplo/with-zuplo-processors.ts +36 -36
- package/src/zuplo/with-zuplo.ts +14 -14
- package/LICENSE.md +0 -18
- package/dist/declarations/lib/components/navigation/ZudokuLogo.d.ts +0 -6
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Head
|
|
3
|
+
sidebar_icon: circle-fading-plus
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
The Head component (alias for Helmet) allows you to manage document head elements like title, meta
|
|
7
|
+
tags, and links from anywhere in your component tree. It uses
|
|
8
|
+
[`react-helmet-async`](https://github.com/staylor/react-helmet-async) under the hood.
|
|
9
|
+
|
|
10
|
+
## Import
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { Head } from "@lukoweb/apitogo/components";
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Props
|
|
17
|
+
|
|
18
|
+
The Head component accepts any valid HTML head elements as children.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### Basic Title
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
<Head>
|
|
26
|
+
<title>My Page Title</title>
|
|
27
|
+
</Head>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Meta Tags
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Head>
|
|
34
|
+
<title>About Us - My Company</title>
|
|
35
|
+
<meta name="description" content="Learn more about our company and mission." />
|
|
36
|
+
<meta name="keywords" content="company, about, mission" />
|
|
37
|
+
</Head>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Social Media Meta Tags
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
<Head>
|
|
44
|
+
<title>My Blog Post</title>
|
|
45
|
+
<meta property="og:title" content="My Blog Post" />
|
|
46
|
+
<meta property="og:description" content="An interesting blog post about..." />
|
|
47
|
+
<meta property="og:image" content="https://example.com/image.jpg" />
|
|
48
|
+
<meta property="og:url" content="https://example.com/blog/my-post" />
|
|
49
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
50
|
+
</Head>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Custom Links
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<Head>
|
|
57
|
+
<link rel="canonical" href="https://example.com/canonical-url" />
|
|
58
|
+
<link rel="alternate" hreflang="es" href="https://example.com/es" />
|
|
59
|
+
</Head>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Favicon
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Head>
|
|
66
|
+
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
|
|
67
|
+
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
|
|
68
|
+
</Head>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Advanced Usage
|
|
72
|
+
|
|
73
|
+
### Dynamic Title with Template
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
function MyPage() {
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
<Head>
|
|
80
|
+
<title>Contact Us</title>
|
|
81
|
+
</Head>
|
|
82
|
+
<h1>Contact Us</h1>
|
|
83
|
+
{/* Page content */}
|
|
84
|
+
</>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Multiple Head Tags
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<Head>
|
|
93
|
+
<title>Product Page - {productName}</title>
|
|
94
|
+
<meta name="description" content={productDescription} />
|
|
95
|
+
<meta property="og:title" content={productName} />
|
|
96
|
+
<meta property="og:description" content={productDescription} />
|
|
97
|
+
<meta property="og:image" content={productImage} />
|
|
98
|
+
<link rel="canonical" href={`https://example.com/products/${productSlug}`} />
|
|
99
|
+
</Head>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Conditional Meta Tags
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
function ProductPage({ product }) {
|
|
106
|
+
return (
|
|
107
|
+
<>
|
|
108
|
+
<Head>
|
|
109
|
+
<title>{product.name} - Our Store</title>
|
|
110
|
+
<meta name="description" content={product.description} />
|
|
111
|
+
{product.inStock && <meta property="product:availability" content="in stock" />}
|
|
112
|
+
{product.price && <meta property="product:price:amount" content={product.price} />}
|
|
113
|
+
</Head>
|
|
114
|
+
{/* Component content */}
|
|
115
|
+
</>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Features
|
|
121
|
+
|
|
122
|
+
- **Server-Side Rendering**: Works with SSR to set proper head tags
|
|
123
|
+
- **Dynamic Updates**: Head tags update when component props change
|
|
124
|
+
- **Multiple Components**: Head tags from multiple components are merged
|
|
125
|
+
- **Override Behavior**: Later Head components can override earlier ones
|
|
126
|
+
- **Template Support**: APIToGo's Layout automatically provides title templates
|
|
127
|
+
|
|
128
|
+
## Common Use Cases
|
|
129
|
+
|
|
130
|
+
### SEO Optimization
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<Head>
|
|
134
|
+
<title>{pageTitle}</title>
|
|
135
|
+
<meta name="description" content={pageDescription} />
|
|
136
|
+
<meta name="keywords" content={pageKeywords} />
|
|
137
|
+
<link rel="canonical" href={canonicalUrl} />
|
|
138
|
+
</Head>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Social Sharing
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
<Head>
|
|
145
|
+
<meta property="og:title" content={shareTitle} />
|
|
146
|
+
<meta property="og:description" content={shareDescription} />
|
|
147
|
+
<meta property="og:image" content={shareImage} />
|
|
148
|
+
<meta property="og:url" content={shareUrl} />
|
|
149
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
150
|
+
<meta name="twitter:site" content="@yourhandle" />
|
|
151
|
+
</Head>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Structured Data
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
<Head>
|
|
158
|
+
<script type="application/ld+json">
|
|
159
|
+
{JSON.stringify({
|
|
160
|
+
"@context": "https://schema.org",
|
|
161
|
+
"@type": "Article",
|
|
162
|
+
headline: articleTitle,
|
|
163
|
+
author: articleAuthor,
|
|
164
|
+
datePublished: publishDate,
|
|
165
|
+
})}
|
|
166
|
+
</script>
|
|
167
|
+
</Head>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
## Integration with APIToGo
|
|
171
|
+
|
|
172
|
+
The Layout component automatically provides:
|
|
173
|
+
|
|
174
|
+
- Title templates based on your APIToGo meta configuration
|
|
175
|
+
- Canonical URLs when `canonicalUrlOrigin` is configured
|
|
176
|
+
- Description meta tags from page meta
|
|
177
|
+
- Favicon links from meta configuration
|
|
178
|
+
|
|
179
|
+
## Notes
|
|
180
|
+
|
|
181
|
+
:::tip
|
|
182
|
+
|
|
183
|
+
The Head component is an alias for the Helmet component from React Helmet Async. You can use either
|
|
184
|
+
`<Head>` or `<Helmet>` - they're identical.
|
|
185
|
+
|
|
186
|
+
:::
|
|
187
|
+
|
|
188
|
+
:::info
|
|
189
|
+
|
|
190
|
+
Head tags are merged across components, so you can set some meta tags globally and override specific
|
|
191
|
+
ones in individual pages.
|
|
192
|
+
|
|
193
|
+
:::
|
|
194
|
+
|
|
195
|
+
:::caution
|
|
196
|
+
|
|
197
|
+
Remember that Head tags need to be valid HTML head elements. Invalid elements will be ignored or may
|
|
198
|
+
cause issues.
|
|
199
|
+
|
|
200
|
+
:::
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Icons
|
|
3
|
+
sidebar_icon: flag
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
import { AtomIcon, PackagePlusIcon } from "@lukoweb/apitogo/icons";
|
|
7
|
+
|
|
8
|
+
Icons are a great way to add visual elements to your content. They can be used to represent actions,
|
|
9
|
+
objects, or ideas. They can also be used to add visual interest to your content.
|
|
10
|
+
|
|
11
|
+
You can use any of the icons from [lucide-react](https://lucide.dev/icons/) in your content. To use
|
|
12
|
+
an icon, you can import it from the APIToGo re-export `@lukoweb/apitogo/icons`:
|
|
13
|
+
|
|
14
|
+
<div className="flex gap-2">
|
|
15
|
+
<AtomIcon size={42} className="text-primary" />
|
|
16
|
+
<PackagePlusIcon size={42} className="text-neutral-300" />
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { AtomIcon, PackagePlusIcon } from "@lukoweb/apitogo/icons";
|
|
21
|
+
|
|
22
|
+
<AtomIcon size={42} className="text-primary" />;
|
|
23
|
+
<PackagePlusIcon size={42} className="text-neutral-300" />;
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
More infos how to use icons in React can be found in the
|
|
27
|
+
[documentation of `lucide-react`](https://lucide.dev/guide/packages/lucide-react#how-to-use).
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Input
|
|
3
|
+
sidebar_icon: type
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
import { Input } from "@lukoweb/apitogo/ui/Input";
|
|
7
|
+
import { Label } from "@lukoweb/apitogo/ui/Label";
|
|
8
|
+
|
|
9
|
+
An input component for forms and user input.
|
|
10
|
+
|
|
11
|
+
## Import
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Input } from "@lukoweb/apitogo/ui/Input";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Basic Usage
|
|
18
|
+
|
|
19
|
+
<Input placeholder="Enter your email" />
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
<Input placeholder="Enter your email" />
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Input Types
|
|
26
|
+
|
|
27
|
+
### Text Input
|
|
28
|
+
|
|
29
|
+
<Input type="text" placeholder="Text input" />
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
<Input type="text" placeholder="Text input" />
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Email Input
|
|
36
|
+
|
|
37
|
+
<Input type="email" placeholder="Email input" />
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
<Input type="email" placeholder="Email input" />
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Password Input
|
|
44
|
+
|
|
45
|
+
<Input type="password" placeholder="Password input" />
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<Input type="password" placeholder="Password input" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Number Input
|
|
52
|
+
|
|
53
|
+
<Input type="number" placeholder="Number input" />
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<Input type="number" placeholder="Number input" />
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## With Label
|
|
60
|
+
|
|
61
|
+
<div className="grid w-full max-w-sm items-center gap-1.5">
|
|
62
|
+
<Label htmlFor="email">Email</Label>
|
|
63
|
+
<Input type="email" id="email" placeholder="Email" />
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<div className="grid w-full max-w-sm items-center gap-1.5">
|
|
68
|
+
<Label htmlFor="email">Email</Label>
|
|
69
|
+
<Input type="email" id="email" placeholder="Email" />
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Disabled State
|
|
74
|
+
|
|
75
|
+
<Input disabled placeholder="Disabled input" />
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<Input disabled placeholder="Disabled input" />
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## File Input
|
|
82
|
+
|
|
83
|
+
<Input type="file" />
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<Input type="file" />
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Custom Styling
|
|
90
|
+
|
|
91
|
+
The Input component accepts all standard input HTML attributes and can be customized with additional
|
|
92
|
+
`className`:
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
<Input className="w-full max-w-xs" placeholder="Custom styled input" />
|
|
96
|
+
```
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Label
|
|
3
|
+
sidebar_icon: tag
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
import { Label } from "@lukoweb/apitogo/ui/Label";
|
|
7
|
+
import { Input } from "@lukoweb/apitogo/ui/Input";
|
|
8
|
+
import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
|
|
9
|
+
import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox";
|
|
10
|
+
|
|
11
|
+
A form label component built on Radix UI primitives with proper accessibility support.
|
|
12
|
+
|
|
13
|
+
## Import
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Label } from "@lukoweb/apitogo/ui/Label";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Basic Usage
|
|
20
|
+
|
|
21
|
+
<Label htmlFor="email">Email</Label>
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
<Label htmlFor="email">Email</Label>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## With Input
|
|
28
|
+
|
|
29
|
+
<div className="grid w-full max-w-sm items-center gap-1.5">
|
|
30
|
+
<Label htmlFor="email">Email</Label>
|
|
31
|
+
<Input type="email" id="email" placeholder="Email" />
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<div className="grid w-full max-w-sm items-center gap-1.5">
|
|
36
|
+
<Label htmlFor="email">Email</Label>
|
|
37
|
+
<Input type="email" id="email" placeholder="Email" />
|
|
38
|
+
</div>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## With Textarea
|
|
42
|
+
|
|
43
|
+
<div className="grid w-full gap-1.5">
|
|
44
|
+
<Label htmlFor="message">Your message</Label>
|
|
45
|
+
<Textarea placeholder="Type your message here." id="message" />
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<div className="grid w-full gap-1.5">
|
|
50
|
+
<Label htmlFor="message">Your message</Label>
|
|
51
|
+
<Textarea placeholder="Type your message here." id="message" />
|
|
52
|
+
</div>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## With Checkbox
|
|
56
|
+
|
|
57
|
+
<div className="flex items-center space-x-2">
|
|
58
|
+
<Checkbox id="terms" />
|
|
59
|
+
<Label
|
|
60
|
+
htmlFor="terms"
|
|
61
|
+
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
62
|
+
>
|
|
63
|
+
Accept terms and conditions
|
|
64
|
+
</Label>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<div className="flex items-center space-x-2">
|
|
69
|
+
<Checkbox id="terms" />
|
|
70
|
+
<Label
|
|
71
|
+
htmlFor="terms"
|
|
72
|
+
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
73
|
+
>
|
|
74
|
+
Accept terms and conditions
|
|
75
|
+
</Label>
|
|
76
|
+
</div>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Accessibility
|
|
80
|
+
|
|
81
|
+
The Label component automatically handles proper accessibility attributes when used with form
|
|
82
|
+
controls:
|
|
83
|
+
|
|
84
|
+
- Associates the label with form controls via `htmlFor` prop
|
|
85
|
+
- Provides screen reader support
|
|
86
|
+
- Enables clicking the label to focus the associated control
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Link
|
|
3
|
+
sidebar_icon: link
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
A navigation component that provides client-side routing capabilities for internal links and
|
|
7
|
+
external link handling.
|
|
8
|
+
|
|
9
|
+
## Import
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
import { Link } from "@lukoweb/apitogo/components";
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Basic Internal Link
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
<Link to="/docs/getting-started">Get Started</Link>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Link with State
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
<Link to="/profile" state={{ from: "header" }}>
|
|
27
|
+
Profile
|
|
28
|
+
</Link>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Replace History Entry
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
<Link to="/login" replace>
|
|
35
|
+
Login
|
|
36
|
+
</Link>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### External Link Behavior
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<Link to="/docs" reloadDocument>
|
|
43
|
+
Full Page Reload
|
|
44
|
+
</Link>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Examples
|
|
48
|
+
|
|
49
|
+
### Navigation Menu
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
function Navigation() {
|
|
53
|
+
return (
|
|
54
|
+
<nav>
|
|
55
|
+
<Link to="/">Home</Link>
|
|
56
|
+
<Link to="/docs">Documentation</Link>
|
|
57
|
+
<Link to="/api">API Reference</Link>
|
|
58
|
+
<Link to="/blog">Blog</Link>
|
|
59
|
+
</nav>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Breadcrumb Navigation
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
function Breadcrumbs({ path }) {
|
|
68
|
+
return (
|
|
69
|
+
<div className="breadcrumbs">
|
|
70
|
+
<Link to="/">Home</Link>
|
|
71
|
+
<span>/</span>
|
|
72
|
+
<Link to="/docs">Docs</Link>
|
|
73
|
+
<span>/</span>
|
|
74
|
+
<span>{path}</span>
|
|
75
|
+
</div>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Dynamic Links
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
function DocsList({ docs }) {
|
|
84
|
+
return (
|
|
85
|
+
<ul>
|
|
86
|
+
{docs.map((doc) => (
|
|
87
|
+
<li key={doc.id}>
|
|
88
|
+
<Link to={`/docs/${doc.slug}`}>{doc.title}</Link>
|
|
89
|
+
</li>
|
|
90
|
+
))}
|
|
91
|
+
</ul>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Conditional Linking
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
function ConditionalLink({ to, disabled, children }) {
|
|
100
|
+
if (disabled) {
|
|
101
|
+
return <span className="disabled-link">{children}</span>;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return <Link to={to}>{children}</Link>;
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Link Types
|
|
109
|
+
|
|
110
|
+
### Relative Links
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
// Relative to current route
|
|
114
|
+
<Link to="../parent-page">Up one level</Link>
|
|
115
|
+
|
|
116
|
+
// Relative to path
|
|
117
|
+
<Link to="./sibling-page" relative="path">
|
|
118
|
+
Sibling page
|
|
119
|
+
</Link>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Absolute Links
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<Link to="/absolute/path">Absolute Path</Link>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Query Parameters
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
<Link to="/search?q=react&type=docs">Search Results</Link>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Hash Links
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
<Link to="/docs/api#authentication">Authentication Section</Link>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Advanced Usage
|
|
141
|
+
|
|
142
|
+
### With Custom Styling
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
<Link to="/important-page" className="text-blue-600 hover:text-blue-800 underline">
|
|
146
|
+
Important Page
|
|
147
|
+
</Link>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Programmatic Navigation
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { useNavigate } from "react-router";
|
|
154
|
+
|
|
155
|
+
function MyComponent() {
|
|
156
|
+
const navigate = useNavigate();
|
|
157
|
+
|
|
158
|
+
const handleClick = () => {
|
|
159
|
+
// Perform some logic
|
|
160
|
+
navigate("/next-page");
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<div>
|
|
165
|
+
<Link to="/direct-link">Direct Link</Link>
|
|
166
|
+
<button onClick={handleClick}>Programmatic Navigation</button>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Link with Confirmation
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
function DeleteLink({ itemId }) {
|
|
176
|
+
const handleClick = (e) => {
|
|
177
|
+
if (!confirm("Are you sure you want to delete this item?")) {
|
|
178
|
+
e.preventDefault();
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
return (
|
|
183
|
+
<Link to={`/items/${itemId}/delete`} onClick={handleClick} className="text-red-600">
|
|
184
|
+
Delete Item
|
|
185
|
+
</Link>
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## Integration with Button
|
|
191
|
+
|
|
192
|
+
Use the Link component with the Button component's `asChild` prop:
|
|
193
|
+
|
|
194
|
+
```tsx
|
|
195
|
+
<Button asChild variant="outline">
|
|
196
|
+
<Link to="/action">Perform Action</Link>
|
|
197
|
+
</Button>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## Accessibility
|
|
201
|
+
|
|
202
|
+
The Link component maintains accessibility best practices:
|
|
203
|
+
|
|
204
|
+
- Proper focus management
|
|
205
|
+
- Keyboard navigation support
|
|
206
|
+
- Screen reader compatibility
|
|
207
|
+
- Semantic HTML structure
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
<Link to="/help" aria-label="Get help and support">
|
|
211
|
+
Help
|
|
212
|
+
</Link>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## Performance
|
|
216
|
+
|
|
217
|
+
- **Client-side routing**: No full page reloads for internal navigation
|
|
218
|
+
- **Prefetching**: Intelligent prefetching of linked resources
|
|
219
|
+
- **View transitions**: Smooth transitions between pages (when supported)
|
|
220
|
+
|
|
221
|
+
## Notes
|
|
222
|
+
|
|
223
|
+
:::tip
|
|
224
|
+
|
|
225
|
+
The Link component is optimized for internal navigation and provides the best user experience for
|
|
226
|
+
single-page application routing.
|
|
227
|
+
|
|
228
|
+
:::
|
|
229
|
+
|
|
230
|
+
:::info
|
|
231
|
+
|
|
232
|
+
For external links, use a regular `<a>` tag instead of the Link component to ensure proper external
|
|
233
|
+
navigation behavior.
|
|
234
|
+
|
|
235
|
+
:::
|
|
236
|
+
|
|
237
|
+
:::caution
|
|
238
|
+
|
|
239
|
+
When using `reloadDocument`, the link will perform a full page reload, which may impact performance
|
|
240
|
+
and user experience.
|
|
241
|
+
|
|
242
|
+
:::
|