From bd05a01331613b5d5f9a4dfbd86ff96cdee2bc57 Mon Sep 17 00:00:00 2001 From: Victoria Zhizhonkova Date: Sat, 22 Feb 2025 00:42:51 +0700 Subject: [PATCH] feat(docs): add nextra v4 support (#8289) * feat(docs): add nextra v4 support * Resolve yarn.lock * fix next public env * fix types linting * fix types linting * fix types linting --- .../workflows/deploy_docs_on_branch_push.yml | 2 +- .github/workflows/pull_request_packages.yml | 2 +- .stylelintignore | 1 + packages/vkui-docs-theme/.eslintrc.json | 3 + packages/vkui-docs-theme/index.ts | 13 +- packages/vkui-docs-theme/package.json | 4 +- .../vkui-docs-theme/src/blog/PostsLayout.tsx | 34 +-- .../src/blog/components/Post/Post.tsx | 9 +- .../src/blog/components/PostHeader.tsx | 19 +- packages/vkui-docs-theme/src/blog/helpers.ts | 4 +- packages/vkui-docs-theme/src/blog/index.ts | 1 + packages/vkui-docs-theme/src/blog/tags.tsx | 26 +- .../vkui-docs-theme/src/components/Anchor.tsx | 2 + .../Breadcrumbs/Breadcrumbs.module.css | 8 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 18 +- .../src/components/ColorSchemeSwitch.tsx | 22 +- .../vkui-docs-theme/src/components/Head.tsx | 30 +- .../src/components/NavLinks/NavLinks.tsx | 22 +- .../src/components/Navbar/Navbar.module.css | 2 +- .../src/components/Navbar/Navbar.tsx | 106 ++++--- .../src/components/ProjectButton.tsx | 15 +- .../src/components/Search/Search.tsx | 7 + .../Sidebar/Accordion/Accordion.tsx | 21 +- .../components/Sidebar/Menu/Menu.module.css | 4 +- .../src/components/Sidebar/Menu/Menu.tsx | 90 +++--- .../Sidebar/MobileSidebar/MobileSidebar.tsx | 39 ++- .../src/components/Sidebar/Sidebar.tsx | 25 +- .../vkui-docs-theme/src/components/index.ts | 1 + packages/vkui-docs-theme/src/constants.tsx | 38 +-- .../src/contexts/color-scheme/index.tsx | 4 +- .../src/contexts/color-scheme/types.ts | 2 +- .../vkui-docs-theme/src/contexts/config.tsx | 50 +--- .../vkui-docs-theme/src/contexts/menu.tsx | 2 + .../vkui-docs-theme/src/contexts/theme.tsx | 4 +- packages/vkui-docs-theme/src/index.tsx | 61 ---- packages/vkui-docs-theme/src/layout.tsx | 28 ++ packages/vkui-docs-theme/src/mdx/H1.tsx | 5 + .../vkui-docs-theme/src/mdx/Main/Main.tsx | 31 +- .../src/mdx/Overview/Overview.tsx | 2 + packages/vkui-docs-theme/src/mdx/Pre/Pre.tsx | 2 + packages/vkui-docs-theme/src/mdx/index.tsx | 13 +- packages/vkui-docs-theme/src/types.ts | 62 +--- .../src/wrappers/content/index.tsx | 21 +- .../src/wrappers/vkui/index.tsx | 2 + packages/vkui-docs-theme/tsconfig.json | 3 +- tsconfig.json | 2 +- website/.eslintrc.json | 3 + website/app/[[...mdxPath]]/page.tsx | 30 ++ website/app/_components/ExtraButtons.tsx | 26 ++ .../_components}/Versions/Versions.tsx | 24 +- .../_components}/Versions/VersionsModal.tsx | 0 .../components => app/_components}/index.ts | 1 + website/app/layout.tsx | 35 +++ website/{pages => content}/_meta.tsx | 10 +- website/{pages => content}/blog.mdx | 0 .../blog/testing-vkui-apps.mdx | 2 +- .../blog/vkui-v7-release.mdx | 2 +- .../{pages => content}/components/index.mdx | 0 website/content/overview/_meta.tsx | 10 + website/{pages => content}/overview/about.mdx | 0 .../overview/adaptivity.mdx | 0 .../overview/advanced/_meta.tsx | 0 .../overview/advanced/css-modules.mdx | 0 .../overview/advanced/customize.mdx | 0 .../overview/advanced/helpers.mdx | 0 .../overview/advanced/ssr.mdx | 0 .../overview/advanced/unstable.mdx | 0 .../overview/integrations/_meta.tsx | 0 .../overview/integrations/design.mdx | 0 .../overview/integrations/icons.mdx | 0 .../overview/integrations/vk-mini-apps.mdx | 0 .../overview/platforms-and-themes.mdx | 0 .../overview/quick-start.mdx | 0 .../overview/setup-modes.mdx | 0 .../{pages => content}/overview/structure.mdx | 0 website/mdx-components.ts | 8 + website/next-env.d.ts | 2 +- website/next.config.mjs | 7 +- website/package.json | 2 +- website/pages/_app.tsx | 6 - website/pages/blog/_meta.tsx | 5 - website/pages/blog/tags/[tag].mdx | 23 -- website/pages/overview/_meta.tsx | 45 --- website/theme.config.tsx | 33 --- website/tsconfig.json | 20 +- yarn.lock | 276 ++++++++---------- 86 files changed, 644 insertions(+), 788 deletions(-) create mode 100644 packages/vkui-docs-theme/src/components/Search/Search.tsx delete mode 100644 packages/vkui-docs-theme/src/index.tsx create mode 100644 packages/vkui-docs-theme/src/layout.tsx create mode 100644 packages/vkui-docs-theme/src/mdx/H1.tsx create mode 100644 website/app/[[...mdxPath]]/page.tsx create mode 100644 website/app/_components/ExtraButtons.tsx rename website/{src/components => app/_components}/Versions/Versions.tsx (51%) rename website/{src/components => app/_components}/Versions/VersionsModal.tsx (100%) rename website/{src/components => app/_components}/index.ts (50%) create mode 100644 website/app/layout.tsx rename website/{pages => content}/_meta.tsx (77%) rename website/{pages => content}/blog.mdx (100%) rename website/{pages => content}/blog/testing-vkui-apps.mdx (99%) rename website/{pages => content}/blog/vkui-v7-release.mdx (99%) rename website/{pages => content}/components/index.mdx (100%) create mode 100644 website/content/overview/_meta.tsx rename website/{pages => content}/overview/about.mdx (100%) rename website/{pages => content}/overview/adaptivity.mdx (100%) rename website/{pages => content}/overview/advanced/_meta.tsx (100%) rename website/{pages => content}/overview/advanced/css-modules.mdx (100%) rename website/{pages => content}/overview/advanced/customize.mdx (100%) rename website/{pages => content}/overview/advanced/helpers.mdx (100%) rename website/{pages => content}/overview/advanced/ssr.mdx (100%) rename website/{pages => content}/overview/advanced/unstable.mdx (100%) rename website/{pages => content}/overview/integrations/_meta.tsx (100%) rename website/{pages => content}/overview/integrations/design.mdx (100%) rename website/{pages => content}/overview/integrations/icons.mdx (100%) rename website/{pages => content}/overview/integrations/vk-mini-apps.mdx (100%) rename website/{pages => content}/overview/platforms-and-themes.mdx (100%) rename website/{pages => content}/overview/quick-start.mdx (100%) rename website/{pages => content}/overview/setup-modes.mdx (100%) rename website/{pages => content}/overview/structure.mdx (100%) create mode 100644 website/mdx-components.ts delete mode 100644 website/pages/_app.tsx delete mode 100644 website/pages/blog/_meta.tsx delete mode 100644 website/pages/blog/tags/[tag].mdx delete mode 100644 website/pages/overview/_meta.tsx delete mode 100644 website/theme.config.tsx diff --git a/.github/workflows/deploy_docs_on_branch_push.yml b/.github/workflows/deploy_docs_on_branch_push.yml index 216eea4237..6090dab3b0 100644 --- a/.github/workflows/deploy_docs_on_branch_push.yml +++ b/.github/workflows/deploy_docs_on_branch_push.yml @@ -124,7 +124,7 @@ jobs: - name: Build run: yarn docs:beta:build env: - VKUI_DOCS_BASE_PATH: /next/docs-beta + NEXT_PUBLIC_VKUI_DOCS_BASE_PATH: /next/docs-beta - name: Upload to S3 id: deploy diff --git a/.github/workflows/pull_request_packages.yml b/.github/workflows/pull_request_packages.yml index cf10b873c8..f62032cdb6 100644 --- a/.github/workflows/pull_request_packages.yml +++ b/.github/workflows/pull_request_packages.yml @@ -215,7 +215,7 @@ jobs: - name: Build run: yarn docs:beta:build env: - VKUI_DOCS_BASE_PATH: /pull/${{ github.event.pull_request.number }}/${{ github.event.pull_request.head.sha }}/docs-beta + NEXT_PUBLIC_VKUI_DOCS_BASE_PATH: /pull/${{ github.event.pull_request.number }}/${{ github.event.pull_request.head.sha }}/docs-beta - name: Upload dist uses: actions/upload-artifact@v4 diff --git a/.stylelintignore b/.stylelintignore index 9d44726387..c8bb11fc40 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -5,3 +5,4 @@ coverage/ !packages/vkui tmp/ storybook-static/ +out/ \ No newline at end of file diff --git a/packages/vkui-docs-theme/.eslintrc.json b/packages/vkui-docs-theme/.eslintrc.json index 7850681887..235c4c4703 100644 --- a/packages/vkui-docs-theme/.eslintrc.json +++ b/packages/vkui-docs-theme/.eslintrc.json @@ -1,5 +1,8 @@ { "root": false, + "parserOptions": { + "project": "./tsconfig.json" + }, "rules": { "react/react-in-jsx-scope": "off", "no-restricted-globals": "off" diff --git a/packages/vkui-docs-theme/index.ts b/packages/vkui-docs-theme/index.ts index f491c34243..d26b40729a 100644 --- a/packages/vkui-docs-theme/index.ts +++ b/packages/vkui-docs-theme/index.ts @@ -1,9 +1,8 @@ -import Layout from './src/index'; -import type { PartialDocsThemeConfig as DocsThemeConfig } from './src/types'; - export { useFetch } from './src/hooks/useFetch'; -export { StorybookIcon, GithubIcon, FigmaIcon } from './src/icons'; -export { type DocsThemeConfig }; -export default Layout; +export { StorybookIcon, GithubIcon, FigmaIcon, LogoIcon } from './src/icons'; + +export { getStaticPathsTags } from './src/blog/tags'; -export { TagTitle, TagName, getStaticPathsTags } from './src/blog/tags'; +export { Head, Navbar } from './src/components'; +export { Layout } from './src/layout'; +export { getMdxComponents } from './src/mdx'; diff --git a/packages/vkui-docs-theme/package.json b/packages/vkui-docs-theme/package.json index febd8579d1..6cca9b0089 100644 --- a/packages/vkui-docs-theme/package.json +++ b/packages/vkui-docs-theme/package.json @@ -33,13 +33,13 @@ }, "devDependencies": { "next": "^15.1.7", - "nextra": "^3.2.5", + "nextra": "^4.2.4", "react": "^18.3.1", "react-dom": "^18.3.1" }, "peerDependencies": { "next": "^15.1.7", - "nextra": "^3.2.5", + "nextra": "^4.2.4", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/packages/vkui-docs-theme/src/blog/PostsLayout.tsx b/packages/vkui-docs-theme/src/blog/PostsLayout.tsx index f1815e665a..79d1037eeb 100644 --- a/packages/vkui-docs-theme/src/blog/PostsLayout.tsx +++ b/packages/vkui-docs-theme/src/blog/PostsLayout.tsx @@ -1,42 +1,34 @@ +'use client'; + import { SimpleGrid } from '@vkontakte/vkui'; -import { useRouter } from 'next/router'; import { useConfig } from '../contexts'; import { Post } from './components/Post'; -import { findPosts } from './helpers'; import { getTags } from './tags'; export function PostsLayout() { const config = useConfig(); - const { pageMap, frontMatter } = config; - const posts = findPosts(pageMap); - const router = useRouter(); - const { type } = frontMatter; - const tagName = type === 'tag' ? router.query.tag : null; - + const { + normalizePagesResult: { activePath }, + } = config; + const posts = ( + activePath.find((item) => item.type === 'page' && item.children.length > 0)?.children || [] + ).filter((post) => post.name !== 'index'); return ( {posts.map((post) => { - const tags = getTags(post.frontMatter); - if (tagName) { - if (!Array.isArray(tagName) && !tags.includes(tagName)) { - return null; - } - } else if (type === 'tag') { - return null; - } - - const postTitle = post.frontMatter?.title || post.name; - const date: Date | null = post.frontMatter?.date ? new Date(post.frontMatter.date) : null; + const tags = getTags(post.frontMatter.tags); + const postTitle = post.frontMatter.title || post.name; + const date: Date | null = post.frontMatter.date ? new Date(post.frontMatter.date) : null; return ( ); })} diff --git a/packages/vkui-docs-theme/src/blog/components/Post/Post.tsx b/packages/vkui-docs-theme/src/blog/components/Post/Post.tsx index 1c354f0723..238118326d 100644 --- a/packages/vkui-docs-theme/src/blog/components/Post/Post.tsx +++ b/packages/vkui-docs-theme/src/blog/components/Post/Post.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Card, Link, Text } from '@vkontakte/vkui'; import NextLink from 'next/link'; -import { useRouter } from 'next/router'; import { PostHeading } from './PostHeading'; import { PostMeta, type PostMetaProps } from './PostMeta'; import styles from './Post.module.css'; @@ -14,11 +13,13 @@ interface PostProps extends PostMetaProps { } export function Post({ title, description, tags, publishDate, route, image }: PostProps) { - const router = useRouter(); - return ( - {`Лого + {`Лого
diff --git a/packages/vkui-docs-theme/src/blog/components/PostHeader.tsx b/packages/vkui-docs-theme/src/blog/components/PostHeader.tsx index 698dfb1909..175c05ccf3 100644 --- a/packages/vkui-docs-theme/src/blog/components/PostHeader.tsx +++ b/packages/vkui-docs-theme/src/blog/components/PostHeader.tsx @@ -1,15 +1,22 @@ +'use client'; + import { Icon12ChevronLeft } from '@vkontakte/icons'; import { Button } from '@vkontakte/vkui'; -import { useRouter } from 'next/router'; -import { useConfig } from '../../contexts'; +import { useRouter } from 'next/navigation'; import { getTags } from '../tags'; import { PostHeading, PostMeta } from './Post'; -export function PostHeader() { - const config = useConfig(); - const { frontMatter } = config; +interface PostHeaderProps { + frontMatter: { + tags?: string; + date?: string; + title?: string; + }; +} + +export function PostHeader({ frontMatter }: PostHeaderProps) { const router = useRouter(); - const tags = getTags(frontMatter); + const tags = getTags(frontMatter.tags); const back = () => { void router.push('/blog'); diff --git a/packages/vkui-docs-theme/src/blog/helpers.ts b/packages/vkui-docs-theme/src/blog/helpers.ts index 82dd7911f1..46c5b14148 100644 --- a/packages/vkui-docs-theme/src/blog/helpers.ts +++ b/packages/vkui-docs-theme/src/blog/helpers.ts @@ -1,4 +1,4 @@ -import type { MdxFile, PageMapItem, PageOpts } from 'nextra'; +import type { MdxFile, PageMapItem } from 'nextra'; const sortPosts = (a: MdxFile, b: MdxFile): number => { if (!a.frontMatter?.date || !b.frontMatter?.date) { @@ -16,7 +16,7 @@ export const isPost = (page: PageMapItem): page is MdxFile => { return false; }; -export function findPosts(pageMap: PageOpts['pageMap']) { +export function findPosts(pageMap: PageMapItem[]) { const posts: MdxFile[] = []; for (const item of pageMap) { diff --git a/packages/vkui-docs-theme/src/blog/index.ts b/packages/vkui-docs-theme/src/blog/index.ts index 73163f276f..c119bdbe5c 100644 --- a/packages/vkui-docs-theme/src/blog/index.ts +++ b/packages/vkui-docs-theme/src/blog/index.ts @@ -1,2 +1,3 @@ export { PostsLayout } from './PostsLayout'; export { PostHeader } from './components/PostHeader'; +export { getTags } from './tags'; diff --git a/packages/vkui-docs-theme/src/blog/tags.tsx b/packages/vkui-docs-theme/src/blog/tags.tsx index 18b82623d1..c2ecb2db49 100644 --- a/packages/vkui-docs-theme/src/blog/tags.tsx +++ b/packages/vkui-docs-theme/src/blog/tags.tsx @@ -1,31 +1,13 @@ import type { GetStaticPaths } from 'next'; -import Head from 'next/head'; -import type { FrontMatter, PageMapItem } from 'nextra'; -import { useData } from 'nextra/hooks'; +import type { PageMapItem } from 'nextra'; import { isPost } from './helpers'; const NEXTRA_INTERNAL = Symbol.for('__nextra_internal__'); -export const TagTitle = () => { - const { tag } = useData(); - const title = `Посты по теме ${tag}`; - return ( - - {title} - - ); -}; - -export const TagName = () => { - const { tag } = useData(); - return tag || null; -}; - -export function getTags(frontMatter: FrontMatter | undefined) { - if (!frontMatter) { +export function getTags(tags?: string[] | string) { + if (!tags) { return []; } - const tags: string | string[] = frontMatter.tag || []; return (Array.isArray(tags) ? tags : tags.split(',')).map((s) => s.trim()); } @@ -36,7 +18,7 @@ const getStaticTags = (pageMap: PageMapItem[]) => { if ('children' in item && item.name === 'blog') { for (const pageMapItem of item.children) { if (isPost(pageMapItem)) { - tags.push(...getTags(pageMapItem.frontMatter)); + tags.push(...getTags(pageMapItem.frontMatter?.tags)); } } } diff --git a/packages/vkui-docs-theme/src/components/Anchor.tsx b/packages/vkui-docs-theme/src/components/Anchor.tsx index 77581dac34..2902a009f5 100644 --- a/packages/vkui-docs-theme/src/components/Anchor.tsx +++ b/packages/vkui-docs-theme/src/components/Anchor.tsx @@ -1,3 +1,5 @@ +'use client'; + import * as React from 'react'; import { type LinkProps, Link as VKUILink } from '@vkontakte/vkui'; import NextLink from 'next/link'; diff --git a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css index 2f919d9ad4..c17251ab18 100644 --- a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css +++ b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css @@ -16,10 +16,10 @@ --vkui--color_text_link: var(--vkui--color_text_secondary); } -.icon { - color: var(--vkui--color_icon_secondary); +.item:last-child { + color: var(--vkui--color_text_primary); } -.activeItem { - color: var(--vkui--color_text_primary); +.icon { + color: var(--vkui--color_icon_secondary); } diff --git a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx index 6fc07ae3ed..dde5d0490b 100644 --- a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,4 +1,6 @@ -import { Fragment } from 'react'; +'use client'; + +import * as React from 'react'; import { Icon12ChevronOutline } from '@vkontakte/icons'; import { classNames, Footnote } from '@vkontakte/vkui'; import type { Item } from 'nextra/normalize-pages'; @@ -8,17 +10,17 @@ import styles from './Breadcrumbs.module.css'; export function Breadcrumbs({ activePath }: { activePath: Item[] }) { return (
- {activePath.map((item, index) => { - const isLink = !item.children || item.withIndexPage; - const isActive = index === activePath.length - 1; + {activePath.map((item, index, arr) => { + const nextItem = arr[index + 1]; + const href = nextItem ? (item.frontMatter ? item.route : '') : ''; return ( - + {index > 0 && } - - {isLink && !isActive ? {item.title} : item.title} + + {href ? {item.title} : item.title} - + ); })}
diff --git a/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx b/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx index 982a167c7c..45ea376825 100644 --- a/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx +++ b/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx @@ -1,5 +1,7 @@ +'use client'; + import { Icon20MoonOutline, Icon20SunOutline } from '@vkontakte/icons'; -import { AdaptivityProvider, SegmentedControl, Skeleton } from '@vkontakte/vkui'; +import { SegmentedControl, Skeleton } from '@vkontakte/vkui'; import { useMounted } from 'nextra/hooks'; import { useColorScheme } from '../contexts'; @@ -19,15 +21,13 @@ export function ColorSchemeSwitch() { } return ( - - - + ); } diff --git a/packages/vkui-docs-theme/src/components/Head.tsx b/packages/vkui-docs-theme/src/components/Head.tsx index 67bbc51097..d532dfb993 100644 --- a/packages/vkui-docs-theme/src/components/Head.tsx +++ b/packages/vkui-docs-theme/src/components/Head.tsx @@ -1,30 +1,16 @@ -import NextHead from 'next/head'; -import { useMounted } from 'nextra/hooks'; -import { useColorScheme, useThemeConfig } from '../contexts'; - -export function Head() { - const themeConfig = useThemeConfig(); - const { resolvedColorScheme } = useColorScheme(); - const mounted = useMounted(); - - const ThemeConfigHead = themeConfig.head; - const head = typeof ThemeConfigHead === 'function' ? : ThemeConfigHead; +import * as React from 'react'; +export function Head({ children }: React.PropsWithChildren) { return ( - - {mounted ? ( - - ) : ( - <> - - - - )} + + {children} + + + - {head} - + ); } diff --git a/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx index 2212cbc735..91e4ee78e7 100644 --- a/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx +++ b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx @@ -1,17 +1,13 @@ +'use client'; + import * as React from 'react'; import { Icon16ChevronLeft, Icon16ChevronOutline } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; import { Footnote, Headline, Tappable } from '@vkontakte/vkui'; import NextLink from 'next/link'; -import type { Item } from 'nextra/normalize-pages'; -import { useThemeConfig } from '../../contexts'; +import { useConfig, useThemeConfig } from '../../contexts'; import styles from './NavLinks.module.css'; -interface NavLinkProps { - currentIndex: number; - flatDirectories: Item[]; -} - interface NavLinkItemProps { route: string; children: React.ReactNode; @@ -32,12 +28,14 @@ function NavLinkItem({ type = 'prev', route, children, className }: NavLinkItemP ); } -export function NavLinks({ flatDirectories, currentIndex }: NavLinkProps) { - const themeConfig = useThemeConfig(); - const nav = themeConfig.navigation; +export function NavLinks() { + const { + normalizePagesResult: { flatDocsDirectories, activeIndex }, + } = useConfig(); + const { navigation: nav } = useThemeConfig(); const navigation = typeof nav === 'boolean' ? { prev: nav, next: nav } : nav; - let prev = navigation.prev && flatDirectories[currentIndex - 1]; - let next = navigation.next && flatDirectories[currentIndex + 1]; + let prev = navigation.prev && flatDocsDirectories[activeIndex - 1]; + let next = navigation.next && flatDocsDirectories[activeIndex + 1]; if (prev && !prev.isUnderCurrentDocsTree) { prev = false; diff --git a/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css b/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css index 6cf9ad8c59..adfd27dc5e 100644 --- a/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css +++ b/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css @@ -76,7 +76,7 @@ color: var(--vkui_docs--color_stroke_separator_secondary); } -.logoLink { +.logo { color: var(--vkui--color_text_primary); } diff --git a/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx b/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx index 1caf51d7b2..0d4fe5d8d8 100644 --- a/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx +++ b/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx @@ -1,7 +1,10 @@ +'use client'; + import * as React from 'react'; import { Icon24MenuOutline } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; import { + AdaptivityProvider, ButtonGroup, Flex, Headline, @@ -12,81 +15,88 @@ import { } from '@vkontakte/vkui'; import NextLink from 'next/link'; import { useFSRoute } from 'nextra/hooks'; -import type { PageItem } from 'nextra/normalize-pages'; -import { useMenu, useThemeConfig } from '../../contexts'; -import { renderComponent } from '../../helpers/render'; -import { type DocsThemeConfig } from '../../types'; +import type { MenuItem, PageItem } from 'nextra/normalize-pages'; +import { useConfig, useMenu, useThemeConfig } from '../../contexts'; import { ColorSchemeSwitch } from '../ColorSchemeSwitch'; import { ProjectButton } from '../ProjectButton'; import styles from './Navbar.module.css'; export type NavbarProps = { - items: PageItem[]; + /** + * Лого документации + */ + logo: React.ReactElement; }; -export function Navbar({ items }: NavbarProps): React.ReactElement { +const isMenu = (page: PageItem | MenuItem): page is MenuItem => page.type === 'menu'; + +export function Navbar({ logo }: NavbarProps): React.ReactElement { const themeConfig = useThemeConfig(); const activeRoute = useFSRoute(); const { setMenu } = useMenu(); + const { + normalizePagesResult: { topLevelNavbarItems: items }, + } = useConfig(); return (
); @@ -94,11 +104,13 @@ export function Navbar({ items }: NavbarProps): React.ReactElement { function NavBarLink({ title, - newWindow, + href = '', ...restProps }: TappableProps & { title: PageItem['title']; newWindow?: boolean }) { + const newWindow = /^https?:\/\//.test(href); return ( ) { - return ( - - {renderComponent(logo)} - - ); -} - function Separator() { return ; } diff --git a/packages/vkui-docs-theme/src/components/ProjectButton.tsx b/packages/vkui-docs-theme/src/components/ProjectButton.tsx index 0d837ac558..99f3e0f838 100644 --- a/packages/vkui-docs-theme/src/components/ProjectButton.tsx +++ b/packages/vkui-docs-theme/src/components/ProjectButton.tsx @@ -1,11 +1,20 @@ import { Button } from '@vkontakte/vkui'; +import { GithubIcon } from '../icons'; import { type DocsThemeConfig } from '../types'; -export function ProjectButton({ icon, link }: Pick['project']) { +export function ProjectButton({ projectLink }: Pick) { return (