Add anchor component

Author: pomber

packages/scrollycoding/src/focus.tsx

@@ -13,10 +13,13 @@ export interface FocusProps {
   file?: string
 }
 
-export function Focus({ children, ...props }: FocusProps) {
+export function Focus({
+  children,
+  ...props
+}: FocusProps): JSX.Element {
   const hikeContext = useHikeContext()
   return hikeContext.layout === "fixed" ? (
-    children
+    (children as JSX.Element)
   ) : (
     <FocusButton
       context={hikeContext}
@@ -91,3 +94,31 @@ function Icon({ isFocused }: { isFocused: boolean }) {
     </svg>
   )
 }
+
+export function withFocusHandler(type: any = "a") {
+  function AnchorWithFocus(props: any) {
+    return <AnchorOrFocus type={type} {...props} />
+  }
+  return AnchorWithFocus
+}
+
+export function AnchorOrFocus({
+  type = "a",
+  href,
+  ...props
+}: any) {
+  if (!href.startsWith("focus://")) {
+    return React.createElement(type, { href, ...props })
+  }
+
+  const [firstPart, secondPart] = decodeURI(href)
+    .substr("focus://".length)
+    .split("#")
+  const hasFile = Boolean(secondPart)
+
+  return hasFile ? (
+    <Focus on={secondPart} file={firstPart} {...props} />
+  ) : (
+    <Focus on={firstPart} {...props} />
+  )
+}

packages/scrollycoding/src/index.tsx

@@ -2,7 +2,11 @@ import * as React from "react"
 import "./index.scss"
 import { Hike } from "./hike"
 
-import { Focus } from "./focus"
+import {
+  Focus,
+  AnchorOrFocus,
+  withFocusHandler,
+} from "./focus"
 import { CodeSlot, PreviewSlot } from "./fixed-layout"
 import { useMdxSteps, StepHead } from "./mdx-steps"
 import {
@@ -21,4 +25,6 @@ export {
   PreviewProps,
   useMdxSteps,
   StepHead,
+  AnchorOrFocus,
+  withFocusHandler,
 }

packages/scrollycoding/src/mdx-steps.tsx

@@ -16,8 +16,8 @@ export interface StepHeadProps {
   previewProps?: Partial<PreviewProps>
 }
 
-function StepHead(props: StepHeadProps) {
-  return null
+function StepHead(props: StepHeadProps): JSX.Element {
+  return (null as any) as JSX.Element
 }
 
 interface Step {