Merge pull request #139 from code-hike/better-sections

Better sections

Author: pomber

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run playground
+
+

package.json

@@ -19,7 +19,8 @@
   },
   "devDependencies": {
     "auto": "^10.18.7",
-    "lerna": "^4.0.0"
+    "lerna": "^4.0.0",
+    "prettier": "^2.5.1"
   },
   "repository": "code-hike/codehike",
   "author": "pomber <[email protected]>",

packages/highlighter/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@code-hike/utils": "^0.3.0-next.0",
-    "shiki": "^0.9.14"
+    "shiki": "^0.10.1"
   },
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",

packages/mdx/package.json

@@ -34,7 +34,8 @@
     "node-fetch": "^2.0.0",
     "remark-rehype": "^8.1.0",
     "unified": "^9.2.2",
-    "unist-util-visit": "^2.0.0"
+    "unist-util-visit": "^2.0.0",
+    "unist-util-visit-parents": "^3.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.3 || ^17 || ^18"

packages/mdx/src/client/inline-code.tsx

@@ -4,19 +4,28 @@ import {
   getColor,
   transparent,
   ColorName,
+  Code,
 } from "@code-hike/utils"
 
 export function InlineCode({
   className,
   codeConfig,
   children,
+  code,
   ...rest
 }: {
   className: string
+  code: Code
   children?: React.ReactNode
   codeConfig: { theme: EditorTheme }
 }) {
   const { theme } = codeConfig
+  const { lines } = code
+  const allTokens = lines.flatMap(line => line.tokens)
+  const foreground = getColor(
+    theme,
+    ColorName.CodeForeground
+  )
   return (
     <span
       className={
@@ -27,14 +36,19 @@ export function InlineCode({
     >
       <code
         style={{
+          ["--ch-code-foreground" as any]: foreground,
           background: transparent(
             getColor(theme, ColorName.CodeBackground),
             0.9
           ),
-          color: getColor(theme, ColorName.CodeForeground),
+          color: foreground,
         }}
       >
-        {children}
+        {allTokens.map((token, j) => (
+          <span key={j} {...token.props}>
+            {token.content}
+          </span>
+        ))}
       </code>
     </span>
   )

packages/mdx/src/client/scrollycoding.tsx

@@ -9,6 +9,7 @@ import {
   Step as ScrollerStep,
 } from "@code-hike/scroller"
 import { Preview, PresetConfig } from "./preview"
+import { LinkableSection } from "./section"
 
 export function Scrollycoding({
   children,
@@ -45,6 +46,19 @@ export function Scrollycoding({
     setState({ ...state, step: newStep })
   }
 
+  function onLinkActivation(
+    stepIndex: number,
+    filename: string | undefined,
+    focus: string | null
+  ) {
+    const newStep = updateEditorStep(
+      editorSteps[stepIndex],
+      filename,
+      focus
+    )
+    setState({ ...state, stepIndex, step: newStep })
+  }
+
   return (
     <section
       className={`ch-scrollycoding ${
@@ -64,7 +78,16 @@ export function Scrollycoding({
                 i === state.stepIndex ? "true" : undefined
               }
             >
-              {children}
+              <LinkableSection
+                onActivation={({ fileName, focus }) => {
+                  onLinkActivation(i, fileName, focus)
+                }}
+                onReset={() => {
+                  onStepChange(i)
+                }}
+              >
+                {children}
+              </LinkableSection>
             </ScrollerStep>
           ))}
         </Scroller>

packages/mdx/src/client/section.tsx

@@ -4,17 +4,14 @@ import { InnerCode, updateEditorStep } from "./code"
 
 const SectionContext = React.createContext<{
   props: EditorProps
-  selectedId?: string
   setFocus: (x: {
     fileName?: string
     focus: string | null
     id: string
   }) => void
-  resetFocus: () => void
 }>({
   props: null!,
   setFocus: () => {},
-  resetFocus: () => {},
 })
 
 export function Section({
@@ -48,23 +45,27 @@ export function Section({
   const { selectedId, ...rest } = state
 
   return (
-    <SectionContext.Provider
-      value={{
-        props: rest,
-        setFocus,
-        resetFocus,
-        selectedId,
-      }}
-    >
-      <section>{children}</section>
-    </SectionContext.Provider>
+    <section>
+      <SectionContext.Provider
+        value={{
+          props: rest,
+          setFocus,
+        }}
+      >
+        <LinkableSection
+          onActivation={setFocus}
+          onReset={resetFocus}
+        >
+          {children}
+        </LinkableSection>
+      </SectionContext.Provider>
+    </section>
   )
 }
 
 export function SectionCode() {
-  const { props, setFocus } = React.useContext(
-    SectionContext
-  )
+  const { props, setFocus } =
+    React.useContext(SectionContext)
 
   const onTabClick = (filename: string) => {
     setFocus({ fileName: filename, focus: null, id: "" })
@@ -73,6 +74,8 @@ export function SectionCode() {
   return <InnerCode {...props} onTabClick={onTabClick} />
 }
 
+// ---
+
 export function SectionLink({
   focus,
   file,
@@ -84,27 +87,79 @@ export function SectionLink({
   file?: string
   children: React.ReactNode
 }) {
-  const {
-    setFocus,
-    resetFocus,
-    selectedId,
-  } = React.useContext(SectionContext)
+  const { activate, reset, activatedId } =
+    React.useContext(LinkableContext)
 
-  const isSelected = selectedId === id
-  const handleClick = isSelected
-    ? resetFocus
-    : () => setFocus({ fileName: file, focus, id })
+  const isSelected = activatedId === id
+  // const handleClick = isSelected
+  //   ? resetFocus
+  //   : () => setFocus({ fileName: file, focus, id })
 
   return (
     <span
-      style={{
-        textDecoration: "underline",
-        textDecorationStyle: "dotted",
-        cursor: "pointer",
-        backgroundColor: isSelected ? "yellow" : undefined,
-      }}
-      onClick={handleClick}
+      className="ch-section-link"
+      data-active={isSelected}
+      // onClick={handleClick}
       children={children}
+      onMouseOver={() =>
+        activate({ fileName: file, focus, id })
+      }
+      onMouseOut={reset}
     />
   )
 }
+
+const LinkableContext = React.createContext<{
+  activate: (x: {
+    fileName?: string
+    focus: string | null
+    id: string
+  }) => void
+  reset: () => void
+  activatedId: string | undefined
+}>({
+  activatedId: undefined,
+  activate: () => {},
+  reset: () => {},
+})
+
+export function LinkableSection({
+  onActivation,
+  onReset,
+  children,
+}: {
+  onActivation: (x: {
+    fileName?: string
+    focus: string | null
+    id: string
+  }) => void
+  onReset: () => void
+  children: React.ReactNode
+}) {
+  const [activatedId, setActivatedId] =
+    React.useState<any>(undefined)
+
+  const activate = React.useCallback(
+    x => {
+      setActivatedId(x.id)
+      onActivation(x)
+    },
+    [onActivation]
+  )
+  const reset = React.useCallback(() => {
+    setActivatedId(undefined)
+    onReset()
+  }, [onReset])
+
+  return (
+    <LinkableContext.Provider
+      value={{
+        activate,
+        reset,
+        activatedId,
+      }}
+    >
+      {children}
+    </LinkableContext.Provider>
+  )
+}

packages/mdx/src/index.scss

@@ -27,8 +27,27 @@
 }
 
 .ch-inline-code > code {
-  padding: 0.2em 0.4em;
-  margin: 0.1em -0.1em;
+  padding: 0.2em 0.15em;
+  margin: 0.1em -0.05em;
   border-radius: 0.25em;
   font-size: 0.9em;
 }
+
+.ch-section-link,
+.ch-section-link * {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(
+    --ch-code-foreground,
+    currentColor
+  );
+}
+.ch-section-link[data-active="true"] {
+  background-color: #bae6fd66;
+}
+
+.ch-section-link[data-active="true"],
+.ch-section-link[data-active="true"] * {
+  text-decoration-thickness: 1.5px;
+}

packages/mdx/src/plugin.ts

@@ -34,20 +34,19 @@ export function remarkCodeHike(
       }
     })
 
-
     addConfig(tree as Parent, config)
 
     if (config.autoImport && !hasCodeHikeImport) {
       addImportNode(tree as Parent)
     }
 
     try {
-      await transformInlineCodes(tree)
       await transformPreviews(tree)
       await transformScrollycodings(tree, config)
       await transformSpotlights(tree, config)
       await transformSlideshows(tree, config)
       await transformSections(tree, config)
+      await transformInlineCodes(tree, config)
       await transformEditorNodes(tree, config)
       await transformCodeNodes(tree, config)
     } catch (e) {
@@ -60,7 +59,11 @@ export function remarkCodeHike(
 function addConfigDefaults(
   config: Partial<CodeHikeConfig> | undefined
 ): CodeHikeConfig {
-  return { ...config, theme: config?.theme || {}, autoImport: config?.autoImport === false ? false : true  }
+  return {
+    ...config,
+    theme: config?.theme || {},
+    autoImport: config?.autoImport === false ? false : true,
+  }
 }
 
 function addConfig(tree: Parent, config: CodeHikeConfig) {
@@ -124,8 +127,7 @@ function addImportNode(tree: Parent) {
               type: "Literal",
               value:
                 "@code-hike/mdx/dist/components.cjs.js",
-              raw:
-                '"@code-hike/mdx/dist/components.cjs.js"',
+              raw: '"@code-hike/mdx/dist/components.cjs.js"',
             },
           },
         ],