From 06c4d31e1ac907038a49a1158e801fc54e2a172b Mon Sep 17 00:00:00 2001 From: Aadarsh Thakur <95094057+Aadarsh805@users.noreply.github.com> Date: Sun, 12 Feb 2023 09:45:56 +0530 Subject: [PATCH] feat: prev/next button in docs page to navigate previous and next page respectively (#71) * fix(link): made the logo link to home route * feat(buttons): added prev and next button in guides docs * fix(name): changed button names from prev/next to doc names * fix(line): removed the unnecessary line of code * style: refactored the links and icon issue and fixed display issue in light mode * fix(favicon): addded favicon, removed prev/next icon, fixed guides docs layout --------- Co-authored-by: Sagar Bera --- public/favicon-dark.svg | 4 + public/favicon.svg | 11 +++ .../guidespage/NavigationButton.tsx | 81 +++++++++++++++++++ src/components/utilities/Head.tsx | 2 +- src/components/utilities/Logo.tsx | 6 +- src/pages/guides/[...guide].tsx | 6 +- 6 files changed, 105 insertions(+), 5 deletions(-) create mode 100644 public/favicon-dark.svg create mode 100644 public/favicon.svg create mode 100644 src/components/guidespage/NavigationButton.tsx diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg new file mode 100644 index 0000000..2195eff --- /dev/null +++ b/public/favicon-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..58f3287 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,11 @@ + + GitOpener + + \ No newline at end of file diff --git a/src/components/guidespage/NavigationButton.tsx b/src/components/guidespage/NavigationButton.tsx new file mode 100644 index 0000000..bbeb832 --- /dev/null +++ b/src/components/guidespage/NavigationButton.tsx @@ -0,0 +1,81 @@ +import type { FolderStructure } from '@/types/client/FileSystem'; +import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'; +import { useRouter } from 'next/router'; +import type { FC } from 'react'; + +interface NavigationButtonProps { + menu: FolderStructure; + activeLink: string; +} + +const NavigationButton: FC = ({ menu }) => { + const router = useRouter(); + + const links = Object.entries(menu) + .sort((a, b) => + a[0] === 'starting-contribution' + ? -1 + : b[0] === 'starting-contribution' + ? 1 + : 0 + ) + .flatMap(([folderName, folder]) => + folderName === 'starting-contribution' + ? [ + folder.find((item) => item.name === 'welcome'), + ...folder.filter((item) => item.name !== 'welcome'), + ] + : folder + ) + .flatMap((item) => item?.link); + + let currentRoute = ''; + if (Array.isArray(router.query.guide)) { + currentRoute = router.query.guide.join('/'); + } + const route = links.findIndex((link) => link?.endsWith(currentRoute)); + const prevRoute = + route > 0 && links[route - 1]?.split('/').pop()?.split('-').join(' '); + const nextRoute = + route < links.length - 1 && + links[route + 1]?.split('/').pop()?.split('-').join(' '); + + const handlePrevClick = () => { + if (route === 0) return; + router.push(`${links[route - 1]}`); + }; + + const handleNextClick = () => { + if (route === links.length - 1) return; + router.push(`${links[route + 1]}`); + }; + + return ( +
+
+ {prevRoute && ( + + )} +
+
+ {nextRoute && ( + + )} +
+
+ ); +}; + +export default NavigationButton; diff --git a/src/components/utilities/Head.tsx b/src/components/utilities/Head.tsx index dcdfd58..b606d59 100644 --- a/src/components/utilities/Head.tsx +++ b/src/components/utilities/Head.tsx @@ -16,7 +16,7 @@ const Head: FC = ({ - + ); }; diff --git a/src/components/utilities/Logo.tsx b/src/components/utilities/Logo.tsx index 50a0b7c..a83abca 100644 --- a/src/components/utilities/Logo.tsx +++ b/src/components/utilities/Logo.tsx @@ -1,4 +1,5 @@ import GitOpenerIcon from '@/components/icons/GitOpener'; +import Link from 'next/link'; import type { FC } from 'react'; type LogoProps = { @@ -17,11 +18,12 @@ const Logo: FC = ({ normal = false, small = false }) => { const content = ( <> - Git Opener - + ); diff --git a/src/pages/guides/[...guide].tsx b/src/pages/guides/[...guide].tsx index 3fa280f..342543e 100644 --- a/src/pages/guides/[...guide].tsx +++ b/src/pages/guides/[...guide].tsx @@ -1,3 +1,4 @@ +import NavigationButton from '@/components/guidespage/NavigationButton'; import mdxComponents from '@/components/mdxcomponents'; import TypoComp from '@/components/utilities/TypoComponent'; import { useDocumentationContext } from '@/context/DocumentationContext'; @@ -29,11 +30,12 @@ const Guides: NextPage = ({ activeLink, menu, meta, source }) => { return ( - - + +
{meta.dirName || meta.fileName}
 + );