fix for routes without using ...prev

Author: birkskyum

src/components/DocsLayout.tsx

@@ -57,6 +57,11 @@ const useLocalCurrentFramework = create<{
  */
 function useCurrentFramework(frameworks: Framework[]) {
   const navigate = useNavigate()
+  const matches = useMatches()
+  const lastMatch = last(matches)
+  const { libraryId, version } = useParams({
+    from: '/$libraryId/$version/docs',
+  })
 
   const { framework: paramsFramework } = useParams({
     strict: false,
@@ -72,15 +77,29 @@ function useCurrentFramework(frameworks: Framework[]) {
 
   const setFramework = React.useCallback(
     (framework: string) => {
+      const currentPath = lastMatch.pathname
+      const frameworkIndex = currentPath.indexOf('/framework/')
+      
+      if (frameworkIndex === -1) {
+        // If we're not on a framework path, just update the framework in localStorage
+        localCurrentFramework.setCurrentFramework(framework)
+        return
+      }
+
+      const pathAfterFramework = currentPath.slice(frameworkIndex + '/framework/'.length).split('/').slice(1).join('/')
+
       navigate({
-        params: (prev) => ({
-          ...prev,
+        to: '/$libraryId/$version/docs/framework/$framework/$',
+        params: {
+          libraryId,
+          version: version || 'latest',
           framework,
-        }),
+          _splat: pathAfterFramework,
+        },
       })
       localCurrentFramework.setCurrentFramework(framework)
     },
-    [localCurrentFramework, navigate]
+    [localCurrentFramework, navigate, libraryId, version, lastMatch.pathname]
   )
 
   React.useEffect(() => {
@@ -128,6 +147,9 @@ const useLocalCurrentVersion = create<{
  */
 function useCurrentVersion(versions: string[]) {
   const navigate = useNavigate()
+  const { libraryId } = useParams({
+    from: '/$libraryId/$version/docs',
+  })
 
   const { version: paramsVersion } = useParams({
     strict: false,
@@ -142,14 +164,15 @@ function useCurrentVersion(versions: string[]) {
   const setVersion = React.useCallback(
     (version: string) => {
       navigate({
-        params: (prev: Record<string, string>) => ({
-          ...prev,
+        to: '/$libraryId/$version/docs',
+        params: {
+          libraryId,
           version,
-        }),
+        },
       })
       localCurrentVersion.setCurrentVersion(version)
     },
-    [localCurrentVersion, navigate]
+    [localCurrentVersion, navigate, libraryId]
   )
 
   React.useEffect(() => {
@@ -326,9 +349,12 @@ export function DocsLayout({
   children,
 }: DocsLayoutProps) {
   const params = useParams({ strict: false })
-  const libraryId = params.libraryId || ''
-
+  const { libraryId } = useParams({
+    from: '/$libraryId/$version/docs',
+  })
   const { _splat } = params
+
+  const { framework: currentFramework } = useCurrentFramework(frameworks)
   const frameworkConfig = useFrameworkConfig({ frameworks })
   const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
@@ -402,12 +428,21 @@ export function DocsLayout({
                     to={
                       child.to.startsWith('/')
                         ? child.to
+                        : child.to.includes('framework/')
+                        ? '/$libraryId/$version/docs/framework/$framework/$'
                         : '/$libraryId/$version/docs/$'
                     }
                     params={{
                       libraryId,
                       version: params.version || 'latest',
-                      _splat: child.to,
+                      ...(child.to.includes('framework/')
+                        ? {
+                            framework: currentFramework,
+                            _splat: child.to.split('/').slice(2).join('/'),
+                          }
+                        : {
+                            _splat: child.to,
+                          }),
                     }}
                     onClick={() => {
                       detailsRef.current.removeAttribute('open')
@@ -580,34 +615,92 @@ export function DocsLayout({
         <div className="sticky flex items-center flex-wrap bottom-2 z-10 right-0 text-xs md:text-sm px-1 print:hidden">
           <div className="w-1/2 px-1 flex justify-end flex-wrap">
             {prevItem ? (
-              <Link
-                to={prevItem.to}
-                params
-                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-              >
-                <div className="flex gap-2 items-center font-bold">
-                  <FaArrowLeft />
-                  {prevItem.label}
-                </div>
-              </Link>
+              prevItem.to.startsWith('http') ? (
+                <a
+                  href={prevItem.to}
+                  className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+                >
+                  <div className="flex gap-2 items-center font-bold">
+                    <FaArrowLeft />
+                    {prevItem.label}
+                  </div>
+                </a>
+              ) : (
+                <Link
+                  to={prevItem.to.startsWith('/')
+                    ? prevItem.to
+                    : prevItem.to.includes('framework/')
+                    ? '/$libraryId/$version/docs/framework/$framework/$'
+                    : '/$libraryId/$version/docs/$'}
+                  params={{
+                    libraryId,
+                    version: params.version || 'latest',
+                    ...(prevItem.to.includes('framework/')
+                      ? {
+                          framework: currentFramework,
+                          _splat: prevItem.to.split('/').slice(2).join('/'),
+                        }
+                      : {
+                          _splat: prevItem.to,
+                        }),
+                  }}
+                  className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+                >
+                  <div className="flex gap-2 items-center font-bold">
+                    <FaArrowLeft />
+                    {prevItem.label}
+                  </div>
+                </Link>
+              )
             ) : null}
           </div>
           <div className="w-1/2 px-1 flex justify-start flex-wrap">
             {nextItem ? (
-              <Link
-                to={nextItem.to}
-                params
-                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-              >
-                <div className="flex gap-2 items-center font-bold">
-                  <span
-                    className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-                  >
-                    {nextItem.label}
-                  </span>{' '}
-                  <FaArrowRight className={textColor} />
-                </div>
-              </Link>
+              nextItem.to.startsWith('http') ? (
+                <a
+                  href={nextItem.to}
+                  className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+                >
+                  <div className="flex gap-2 items-center font-bold">
+                    <span
+                      className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+                    >
+                      {nextItem.label}
+                    </span>{' '}
+                    <FaArrowRight className={textColor} />
+                  </div>
+                </a>
+              ) : (
+                <Link
+                  to={nextItem.to.startsWith('/')
+                    ? nextItem.to
+                    : nextItem.to.includes('framework/')
+                    ? '/$libraryId/$version/docs/framework/$framework/$'
+                    : '/$libraryId/$version/docs/$'}
+                  params={{
+                    libraryId,
+                    version: params.version || 'latest',
+                    ...(nextItem.to.includes('framework/')
+                      ? {
+                          framework: currentFramework,
+                          _splat: nextItem.to.split('/').slice(2).join('/'),
+                        }
+                      : {
+                          _splat: nextItem.to,
+                        }),
+                  }}
+                  className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+                >
+                  <div className="flex gap-2 items-center font-bold">
+                    <span
+                      className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+                    >
+                      {nextItem.label}
+                    </span>{' '}
+                    <FaArrowRight className={textColor} />
+                  </div>
+                </Link>
+              )
             ) : null}
           </div>
         </div>