From 84d46bbe1760192a0230900bb305f9ec46a7b9cb Mon Sep 17 00:00:00 2001 From: hirotomoyamada Date: Fri, 3 May 2024 10:37:38 +0900 Subject: [PATCH] refactor(docs): update version handling and context use --- docs/components/layouts/header.tsx | 7 +++---- docs/contexts/page-context.tsx | 9 +++++++-- docs/package.json | 3 ++- docs/pages/404.page.tsx | 4 ++-- docs/pages/examples/[slug].page.tsx | 12 ++++++++---- docs/pages/index.page.tsx | 4 ++-- docs/utils/next.ts | 18 +++++++++++++++++- pnpm-lock.yaml | 24 ++++-------------------- 8 files changed, 45 insertions(+), 36 deletions(-) diff --git a/docs/components/layouts/header.tsx b/docs/components/layouts/header.tsx index aa1fa2c72..d2090587c 100644 --- a/docs/components/layouts/header.tsx +++ b/docs/components/layouts/header.tsx @@ -56,18 +56,17 @@ import { import { NextLinkIconButton, Tree } from "components/navigation" import { CONSTANT } from "constant" import { useI18n } from "contexts/i18n-context" +import { usePage } from "contexts/page-context" import Link from "next/link" import { useRouter } from "next/router" -import packageJSON from "package.json" import type { FC } from "react" import { memo, useEffect, useRef, useState } from "react" -const version = `v${packageJSON.dependencies["@yamada-ui/react"].split("-")[0]}` - export type HeaderProps = CenterProps & {} export const Header = memo( forwardRef(({ ...rest }, ref) => { + const { currentVersion } = usePage() const headerRef = useRef() const { scrollY } = useScroll() const [y, setY] = useState(0) @@ -132,7 +131,7 @@ export const Header = memo( letterSpacing="1px" minW="auto" > - {version} + {currentVersion} diff --git a/docs/contexts/page-context.tsx b/docs/contexts/page-context.tsx index 45d60996a..3d9fdef3d 100644 --- a/docs/contexts/page-context.tsx +++ b/docs/contexts/page-context.tsx @@ -8,10 +8,14 @@ import type { FC, PropsWithChildren } from "react" import { createContext, useContext, useMemo } from "react" type PageContext = Omit & { - documentMap: Pick[] + documentMap: Pick< + DocumentTypeTree, + "title" | "description" | "label" | "slug" + >[] } const defaultValue = { + currentVersion: undefined, documentTree: [], documentMap: [], } @@ -20,7 +24,7 @@ export const PageContext = createContext(defaultValue) const getDocumentMap = ( tree: DocumentTypeTree[], -): Pick[] => +): Pick[] => tree.flatMap(({ title, slug, label, description, children }) => [ { title, slug, label, description }, ...getDocumentMap(children), @@ -28,6 +32,7 @@ const getDocumentMap = ( export type PageProviderProps = PropsWithChildren< { + currentVersion: string | undefined | null documentTree: DocumentTypeTree[] documentTabs?: DocumentTypesNavigationItem[] documentBreadcrumbs?: DocumentTypesNavigationItem[] diff --git a/docs/package.json b/docs/package.json index c8ea8cd0e..9d2627977 100644 --- a/docs/package.json +++ b/docs/package.json @@ -78,6 +78,7 @@ "remark-slug": "^7.0.1", "typescript": "^5.4.5", "unified": "^10.1.2", - "unist-util-visit": "^5.0.0" + "unist-util-visit": "^5.0.0", + "find-packages": "^10.0.4" } } diff --git a/docs/pages/404.page.tsx b/docs/pages/404.page.tsx index 1bf7bb756..b6ec3ae84 100644 --- a/docs/pages/404.page.tsx +++ b/docs/pages/404.page.tsx @@ -12,11 +12,11 @@ export const getStaticProps = getStaticCommonProps type PageProps = InferGetStaticPropsType -const Page: NextPage = ({ documentTree }) => { +const Page: NextPage = ({ currentVersion, documentTree }) => { const { tc } = useI18n() return ( - + { const { - props: { documentTree }, + props: { currentVersion, documentTree }, } = await getStaticCommonProps({ locale }) const slug = params?.slug as Slug - const props = { documentTree, slug } + const props = { currentVersion, documentTree, slug } return { props } } type PageProps = InferGetStaticPropsType -const Page: NextPage = ({ slug: currentSlug, documentTree }) => { +const Page: NextPage = ({ + currentVersion, + slug: currentSlug, + documentTree, +}) => { const { t, tc } = useI18n() const examples = useMemo(() => { @@ -105,7 +109,7 @@ const Page: NextPage = ({ slug: currentSlug, documentTree }) => { }, [currentSlug]) return ( - + -const Page: NextPage = ({ documentTree }) => { +const Page: NextPage = ({ currentVersion, documentTree }) => { const { t, tc } = useI18n() return ( - + { + const packages = await findPackages( + path.resolve(CONSTANT.PATH.ROOT, "packages", "react"), + ) + + const { version } = packages[0].manifest + + return version ? `v${version}` : null +} export const getStaticCommonProps = async ({ locale, }: GetStaticPropsContext) => { + const currentVersion = await getVersion() const documents = getDocuments(locale) const documentTree = getDocumentTree(omitDocumentTabs(documents))() - return { props: { documents, documentTree } } + return { props: { currentVersion, documents, documentTree } } } export const getStaticDocumentProps = (documentTypeName: DocumentTypeNames) => async ({ params, locale, defaultLocale }: GetStaticPropsContext) => { + const currentVersion = await getVersion() const paths = [ toKebabCase(documentTypeName), ...toArray(params?.slug ?? []), @@ -55,6 +70,7 @@ export const getStaticDocumentProps = return { props: { + currentVersion, ...document, documentTree, documentBreadcrumbs, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b5443b533..ffe8441ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -415,6 +415,9 @@ importers: eslint-config-next: specifier: ^14.2.3 version: 14.2.3(eslint@8.57.0)(typescript@5.4.5) + find-packages: + specifier: ^10.0.4 + version: 10.0.4 github-slugger: specifier: ^2.0.0 version: 2.0.0 @@ -6629,7 +6632,6 @@ packages: /@gwhitney/detect-indent@7.0.1: resolution: {integrity: sha512-7bQW+gkKa2kKZPeJf6+c6gFK9ARxQfn+FKy9ScTBppyKRWH2KzsmweXUoklqeEiHiNVWaeP5csIdsNq6w7QhzA==, tarball: https://registry.npmjs.org/@gwhitney/detect-indent/-/detect-indent-7.0.1.tgz} engines: {node: '>=12.20'} - dev: false /@hapi/hoek@9.3.0: resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==, tarball: https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz} @@ -7808,21 +7810,18 @@ packages: /@pnpm/constants@6.1.0: resolution: {integrity: sha512-L6AiU3OXv9kjKGTJN9j8n1TeJGDcLX9atQlZvAkthlvbXjvKc5SKNWESc/eXhr5nEfuMWhQhiKHDJCpYejmeCQ==, tarball: https://registry.npmjs.org/@pnpm/constants/-/constants-6.1.0.tgz} engines: {node: '>=14.19'} - dev: false /@pnpm/error@4.0.0: resolution: {integrity: sha512-NI4DFCMF6xb1SA0bZiiV5KrMCaJM2QmPJFC6p78FXujn7FpiRSWhT9r032wpuQumsl7DEmN4s3wl/P8TA+bL8w==, tarball: https://registry.npmjs.org/@pnpm/error/-/error-4.0.0.tgz} engines: {node: '>=14.6'} dependencies: '@pnpm/constants': 6.1.0 - dev: false /@pnpm/graceful-fs@2.0.0: resolution: {integrity: sha512-ogUZCGf0/UILZt6d8PsO4gA4pXh7f0BumXeFkcCe4AQ65PXPKfAkHC0C30Lheh2EgFOpLZm3twDP1Eiww18gew==, tarball: https://registry.npmjs.org/@pnpm/graceful-fs/-/graceful-fs-2.0.0.tgz} engines: {node: '>=14.19'} dependencies: graceful-fs: 4.2.11 - dev: false /@pnpm/network.ca-file@1.0.2: resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==, tarball: https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz} @@ -7857,24 +7856,20 @@ packages: read-yaml-file: 2.1.0 sort-keys: 4.2.0 strip-bom: 4.0.0 - dev: false /@pnpm/text.comments-parser@1.0.0: resolution: {integrity: sha512-iG0qrFcObze3uK+HligvzaTocZKukqqIj1dC3NOH58NeMACUW1NUitSKBgeWuNIE4LJT3SPxnyLEBARMMcqVKA==, tarball: https://registry.npmjs.org/@pnpm/text.comments-parser/-/text.comments-parser-1.0.0.tgz} engines: {node: '>=14.6'} dependencies: strip-comments-strings: 1.2.0 - dev: false /@pnpm/types@8.9.0: resolution: {integrity: sha512-3MYHYm8epnciApn6w5Fzx6sepawmsNU7l6lvIq+ER22/DPSrr83YMhU/EQWnf4lORn2YyiXFj0FJSyJzEtIGmw==, tarball: https://registry.npmjs.org/@pnpm/types/-/types-8.9.0.tgz} engines: {node: '>=14.6'} - dev: false /@pnpm/util.lex-comparator@1.0.0: resolution: {integrity: sha512-3aBQPHntVgk5AweBWZn+1I/fqZ9krK/w01197aYVkAJQGftb+BVWgEepxY5GChjSW12j52XX+CmfynYZ/p0DFQ==, tarball: https://registry.npmjs.org/@pnpm/util.lex-comparator/-/util.lex-comparator-1.0.0.tgz} engines: {node: '>=12.22.0'} - dev: false /@pnpm/write-project-manifest@4.1.1: resolution: {integrity: sha512-nRqvPYO8xUVdgy/KhJuaCrWlVT/4uZr97Mpbuizsa6CmvtCQf3NuYnVvOOrpYiKUJcZYtEvm84OooJ8+lJytMQ==, tarball: https://registry.npmjs.org/@pnpm/write-project-manifest/-/write-project-manifest-4.1.1.tgz} @@ -7885,7 +7880,6 @@ packages: json5: 2.2.3 write-file-atomic: 5.0.1 write-yaml-file: 4.2.0 - dev: false /@polka/url@1.0.0-next.25: resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==, tarball: https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz} @@ -10279,7 +10273,7 @@ packages: '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.5) '@vanilla-extract/babel-plugin-debug-ids': 1.0.5 '@vanilla-extract/css': 1.15.1 - esbuild: 0.17.6 + esbuild: 0.19.12 eval: 0.1.8 find-up: 5.0.0 javascript-stringify: 2.1.0 @@ -14637,7 +14631,6 @@ packages: '@pnpm/util.lex-comparator': 1.0.0 fast-glob: 3.3.2 p-filter: 2.1.0 - dev: false /find-pkg@0.1.2: resolution: {integrity: sha512-0rnQWcFwZr7eO0513HahrWafsc3CTFioEB7DRiEYCUM/70QXSY8f3mCST17HXLcPvEhzH/Ty/Bxd72ZZsr/yvw==, tarball: https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz} @@ -16383,7 +16376,6 @@ packages: /is-plain-obj@2.1.0: resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==, tarball: https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz} engines: {node: '>=8'} - dev: false /is-plain-obj@3.0.0: resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==, tarball: https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz} @@ -16533,7 +16525,6 @@ packages: /is-windows@1.0.2: resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==, tarball: https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz} engines: {node: '>=0.10.0'} - dev: false /is-wsl@2.2.0: resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==, tarball: https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz} @@ -20356,7 +20347,6 @@ packages: engines: {node: '>=8'} dependencies: p-map: 2.1.0 - dev: false /p-limit@2.3.0: resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==, tarball: https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz} @@ -20412,7 +20402,6 @@ packages: /p-map@2.1.0: resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==, tarball: https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz} engines: {node: '>=6'} - dev: false /p-map@3.0.0: resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==, tarball: https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz} @@ -22289,7 +22278,6 @@ packages: dependencies: js-yaml: 4.1.0 strip-bom: 4.0.0 - dev: false /readable-stream@2.3.8: resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==, tarball: https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz} @@ -23316,7 +23304,6 @@ packages: engines: {node: '>=8'} dependencies: is-plain-obj: 2.1.0 - dev: false /source-list-map@2.0.1: resolution: {integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==, tarball: https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz} @@ -23716,7 +23703,6 @@ packages: /strip-comments-strings@1.2.0: resolution: {integrity: sha512-zwF4bmnyEjZwRhaak9jUWNxc0DoeKBJ7lwSN/LEc8dQXZcUFG6auaaTQJokQWXopLdM3iTx01nQT8E4aL29DAQ==, tarball: https://registry.npmjs.org/strip-comments-strings/-/strip-comments-strings-1.2.0.tgz} - dev: false /strip-comments@2.0.1: resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==, tarball: https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz} @@ -25833,7 +25819,6 @@ packages: dependencies: imurmurhash: 0.1.4 signal-exit: 4.1.0 - dev: false /write-yaml-file@4.2.0: resolution: {integrity: sha512-LwyucHy0uhWqbrOkh9cBluZBeNVxzHjDaE9mwepZG3n3ZlbM4v3ndrFw51zW/NXYFFqP+QWZ72ihtLWTh05e4Q==, tarball: https://registry.npmjs.org/write-yaml-file/-/write-yaml-file-4.2.0.tgz} @@ -25841,7 +25826,6 @@ packages: dependencies: js-yaml: 4.1.0 write-file-atomic: 3.0.3 - dev: false /ws@7.5.9: resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==, tarball: https://registry.npmjs.org/ws/-/ws-7.5.9.tgz}