Make steps clickable

Author: pomber

external/new-react-website

@@ -139,14 +139,21 @@ function StepContent({
   stepIndex: number
 }) {
   const c = useClasser("ch-hike-step")
-  const { hikeState } = useFluidContext()
+  const { dispatch, hikeState } = useFluidContext()
   const focusStepIndex =
     hikeState.focusStepIndex ?? hikeState.scrollStepIndex
   const isOn = stepIndex === focusStepIndex
   return (
     <Step
       as="div"
       index={stepIndex}
+      onClick={() =>
+        dispatch({
+          type: "set-focus",
+          stepIndex,
+          codeProps: {},
+        })
+      }
       className={c("", isOn ? "focused" : "unfocused")}
     >
       {stepIndex > 0 && <div className={c("gap")} />}

packages/scrollycoding/src/fluid-layout.tsx

@@ -53,15 +53,16 @@ function FocusButton({
         isFocused ? "focus-active" : "focus-inactive"
       )}
       title="Show code"
-      onClick={() =>
+      onClick={e => {
         isFocused
           ? dispatch({ type: "reset-focus" })
           : dispatch({
               type: "set-focus",
               stepIndex,
               codeProps,
             })
-      }
+        e.stopPropagation()
+      }}
     >
       {children}
       <Icon isFocused={isFocused} />

packages/scrollycoding/src/focus.tsx

@@ -24,7 +24,7 @@ export default function App() {
 
 ## Step 1
 
-Sed quis ipsum nisl. Ut eget turpis id justo lobortis molestie sed in turpis. Pellentesque maximus erat ut eleifend rutrum. Nulla lectus sem, pulvinar eu tortor at, lacinia auctor felis. Aenean semper, quam a pellentesque laoreet, ex diam vehicula urna, eget ornare nulla enim vitae massa. Nulla lacus sem, sodales non felis quis, tincidunt porta turpis. Donec suscipit vulputate purus eu elementum.
+Sed quis ipsum nisl. Ut eget [turpis](https://codehike.org) id justo lobortis molestie sed in turpis. Pellentesque maximus erat ut eleifend rutrum. Nulla lectus sem, pulvinar eu tortor at, lacinia auctor felis. Aenean semper, quam a pellentesque laoreet, ex diam vehicula urna, eget ornare nulla enim vitae massa. Nulla lacus sem, sodales non felis quis, tincidunt porta turpis. Donec suscipit vulputate purus eu elementum.
 
 <CodeSlot style={{ height: 200 }} />