Fix docs link, test fixing relative URLs in Windows (#606)

* Fix #593: don't prevent default on link click * Use absolute/explicit path for settings Trying to test fix for #594 * Broken: replace almost all relative URLs with absolute * add relative jump backs util * dot dot slash everywhere * use usLocation not window.location * the one that got away * fmt 🤦‍♂️ --------- Co-authored-by: Kurt Hutten Irev-Dev <[email protected]>
KittyCAD · Sep 19, 2023 · 488e41a · 488e41a · vercel · Sep 19, 2023
1 parent 8147f5f
commit 488e41a
Show file tree

Hide file tree

Showing 19 changed files with 117 additions and 65 deletions.
diff --git a/src/components/CodeMenu.tsx b/src/components/CodeMenu.tsx
@@ -23,7 +23,8 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
       <div
         className="relative"
         onClick={(e) => {
-          if (e.eventPhase === 3) {
+          const target = e.target as HTMLElement
+          if (e.eventPhase === 3 && target.closest('a') === null) {
             e.stopPropagation()
             e.preventDefault()
           }

diff --git a/src/components/ProjectSidebarMenu.tsx b/src/components/ProjectSidebarMenu.tsx
@@ -16,7 +16,7 @@ const ProjectSidebarMenu = ({
 }) => {
   return renderAsLink ? (
     <Link
-      to={'../'}
+      to={paths.HOME}
       className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
       data-testid="project-sidebar-link"
     >

diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx
@@ -2,7 +2,7 @@ import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useState } from 'react'
 import { paths } from '../Router'
 import makeUrlPathRelative from '../lib/makeUrlPathRelative'
@@ -12,6 +12,7 @@ import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 type User = Models['User_type']
 
 const UserSidebarMenu = ({ user }: { user?: User }) => {
+  const location = useLocation()
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
@@ -126,7 +127,11 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     // since /settings is a nested route the sidebar doesn't close
                     // automatically when navigating to it
                     close()
-                    navigate(makeUrlPathRelative(paths.SETTINGS))
+                    navigate(
+                      (location.pathname.endsWith('/')
+                        ? location.pathname.slice(0, -1)
+                        : location.pathname) + paths.SETTINGS
+                    )
                   }}
                 >
                   Settings

diff --git a/src/hooks/useDotDotSlash.ts b/src/hooks/useDotDotSlash.ts
@@ -0,0 +1,13 @@
+import { useLocation } from 'react-router-dom'
+
+export function useDotDotSlash(): (count?: number) => string {
+  const location = useLocation()
+  const dotDotSlash = (count = 1): string => {
+    // since we can't use relative paths (../) for windows
+    if (location.pathname === '/') return ''
+    const path = location.pathname.slice(0, location.pathname.lastIndexOf('/'))
+    if (count <= 1) return path
+    return dotDotSlash(count - 1)
+  }
+  return dotDotSlash
+}
diff --git a/src/routes/Onboarding/Camera.tsx b/src/routes/Onboarding/Camera.tsx
@@ -9,6 +9,7 @@ import {
   cameraMouseDragGuards,
   cameraSystems,
 } from 'lib/cameraControls'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function Units() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -24,6 +25,7 @@ export default function Units() {
       },
     },
   } = useGlobalStateContext()
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
@@ -72,7 +74,7 @@ export default function Units() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/CmdK.tsx b/src/routes/Onboarding/CmdK.tsx
@@ -2,13 +2,15 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function CmdK() {
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.USER_MENU)
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
@@ -41,7 +43,7 @@ export default function CmdK() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/CodeEditor.tsx b/src/routes/Onboarding/CodeEditor.tsx
@@ -3,13 +3,15 @@ import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function CodeEditor() {
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.PARAMETRIC_MODELING)
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
@@ -60,7 +62,7 @@ export default function CodeEditor() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/Export.tsx b/src/routes/Onboarding/Export.tsx
@@ -2,13 +2,15 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function Export() {
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.SKETCHING)
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
@@ -40,7 +42,7 @@ export default function Export() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/FutureWork.tsx b/src/routes/Onboarding/FutureWork.tsx
@@ -4,12 +4,14 @@ import { useDismiss } from '.'
 import { useEffect } from 'react'
 import { useStore } from 'useStore'
 import { bracket } from 'lib/exampleKcl'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function FutureWork() {
   const dismiss = useDismiss()
   const { deferredSetCode } = useStore((s) => ({
     deferredSetCode: s.deferredSetCode,
   }))
+  const dotDotSlash = useDotDotSlash()
 
   useEffect(() => {
     deferredSetCode(bracket)
@@ -34,7 +36,7 @@ export default function FutureWork() {
         <div className="flex justify-between mt-6">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',
@@ -47,7 +49,7 @@ export default function FutureWork() {
           </ActionButton>
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{ icon: faArrowRight }}
           >
             Finish

diff --git a/src/routes/Onboarding/InteractiveNumbers.tsx b/src/routes/Onboarding/InteractiveNumbers.tsx
@@ -3,13 +3,15 @@ import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function InteractiveNumbers() {
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.COMMAND_K)
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
@@ -33,43 +35,43 @@ export default function InteractiveNumbers() {
             the <kbd>Alt</kbd> (or <kbd>Option</kbd>) key and dragging the
             number left and right. You can hold down different modifier keys to
             change the value by different increments:
-            <table className="border-collapse text-sm mx-auto my-4">
-              <tbody>
-                <tr>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
-                    <kbd>Alt + Shift + Cmd/Win</kbd>
-                  </td>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
-                    0.01
-                  </td>
-                </tr>
-                <tr>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
-                    <kbd>Alt + Cmd/Win</kbd>
-                  </td>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
-                    0.1
-                  </td>
-                </tr>
-                <tr>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
-                    <kbd>Alt</kbd>
-                  </td>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
-                    1
-                  </td>
-                </tr>
-                <tr>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
-                    <kbd>Alt + Shift</kbd>
-                  </td>
-                  <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
-                    10
-                  </td>
-                </tr>
-              </tbody>
-            </table>
           </p>
+          <table className="border-collapse text-sm mx-auto my-4">
+            <tbody>
+              <tr>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
+                  <kbd>Alt + Shift + Cmd/Win</kbd>
+                </td>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
+                  0.01
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
+                  <kbd>Alt + Cmd/Win</kbd>
+                </td>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
+                  0.1
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
+                  <kbd>Alt</kbd>
+                </td>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
+                  1
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70">
+                  <kbd>Alt + Shift</kbd>
+                </td>
+                <td className="border border-solid w-1/2 py-1 px-2 border-chalkboard-40 dark:border-chalkboard-70 text-right">
+                  10
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <p className="my-4">
             Our code editor is built with{' '}
             <a
@@ -100,7 +102,7 @@ export default function InteractiveNumbers() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/Introduction.tsx b/src/routes/Onboarding/Introduction.tsx
@@ -15,13 +15,14 @@ import { isTauri } from 'lib/isTauri'
 import { useNavigate } from 'react-router-dom'
 import { paths } from 'Router'
 import { useEffect } from 'react'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 function OnboardingWithNewFile() {
   const navigate = useNavigate()
+  const dotDotSlash = useDotDotSlash()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.INDEX)
-  const { setCode, code } = useStore((s) => ({
-    code: s.code,
+  const { setCode } = useStore((s) => ({
     setCode: s.setCode,
   }))
   const {
@@ -52,7 +53,7 @@ function OnboardingWithNewFile() {
             <div className="flex justify-between mt-6">
               <ActionButton
                 Element="button"
-                onClick={() => dismiss('../')}
+                onClick={() => dismiss(dotDotSlash())}
                 icon={{
                   icon: faXmark,
                   bgClassName: 'bg-destroy-80',
@@ -90,7 +91,7 @@ function OnboardingWithNewFile() {
             <div className="flex justify-between mt-6">
               <ActionButton
                 Element="button"
-                onClick={() => dismiss('../')}
+                onClick={() => dismiss(dotDotSlash())}
                 icon={{
                   icon: faXmark,
                   bgClassName: 'bg-destroy-80',
@@ -135,6 +136,7 @@ export default function Introduction() {
       : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
+  const dotDotSlash = useDotDotSlash()
 
   useEffect(() => {
     if (code === '') setCode(bracket)
@@ -178,7 +180,7 @@ export default function Introduction() {
         <div className="flex justify-between mt-6">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../')}
+            onClick={() => dismiss(dotDotSlash())}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',

diff --git a/src/routes/Onboarding/ParametricModeling.tsx b/src/routes/Onboarding/ParametricModeling.tsx
@@ -5,6 +5,7 @@ import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 export default function ParametricModeling() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -22,6 +23,7 @@ export default function ParametricModeling() {
       : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.INTERACTIVE_NUMBERS)
+  const dotDotSlash = useDotDotSlash()
 
   return (
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
@@ -60,7 +62,7 @@ export default function ParametricModeling() {
         <div className="flex justify-between">
           <ActionButton
             Element="button"
-            onClick={() => dismiss('../../')}
+            onClick={() => dismiss(dotDotSlash(2))}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',