code-hike · pomber · Aug 29, 2024 · Aug 29, 2024 · Aug 29, 2024 · Aug 29, 2024
diff --git a/with-next-mdx-remote-rsc/.gitignore b/with-next-mdx-remote-rsc/.gitignore
@@ -0,0 +1,27 @@
+# deps
+/node_modules
+
+# generated content
+.map.ts
+.contentlayer
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts
diff --git a/with-next-mdx-remote-rsc/app/layout.tsx b/with-next-mdx-remote-rsc/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/with-next-mdx-remote-rsc/app/page.tsx b/with-next-mdx-remote-rsc/app/page.tsx
@@ -0,0 +1,49 @@
+import { compileMDX } from "next-mdx-remote/rsc"
+import { promises as fs } from "fs"
+import { remarkCodeHike, recmaCodeHike, CodeHikeConfig } from "codehike/mdx"
+import { Pre, RawCode, highlight } from "codehike/code"
+import { callout } from "../components/annotations/callout"
+
+const components = { Code }
+
+const chConfig: CodeHikeConfig = {
+  components: { code: "Code" },
+}
+
+export default async function Home() {
+  const source = await fs.readFile("./content/index.md", "utf-8")
+
+  const { content } = await compileMDX({
+    source,
+    components,
+    options: {
+      mdxOptions: {
+        remarkPlugins: [[remarkCodeHike, chConfig]],
+        recmaPlugins: [[recmaCodeHike, chConfig]],
+      },
+    },
+  })
+  return (
+    <main
+      style={{
+        padding: "1rem",
+        margin: "0 auto",
+        maxWidth: "800px",
+        fontFamily: "sans-serif",
+      }}
+    >
+      {content}
+    </main>
+  )
+}
+
+export async function Code({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "github-dark")
+  return (
+    <Pre
+      code={highlighted}
+      style={{ ...highlighted.style, padding: "1rem", borderRadius: "0.5rem" }}
+      handlers={[callout]}
+    />
+  )
+}
diff --git a/with-next-mdx-remote-rsc/app/scrollycoding/page.tsx b/with-next-mdx-remote-rsc/app/scrollycoding/page.tsx
@@ -0,0 +1,52 @@
+import { compileMDX } from "next-mdx-remote/rsc"
+import { promises as fs } from "fs"
+import { remarkCodeHike, recmaCodeHike, CodeHikeConfig } from "codehike/mdx"
+import { Pre, RawCode, highlight } from "codehike/code"
+import { callout } from "../../components/annotations/callout"
+import { Scrollycoding } from "./scrollycoding"
+import Link from "next/link"
+
+const components = { Code, Scrollycoding }
+
+const chConfig: CodeHikeConfig = {
+  components: { code: "Code" },
+}
+
+export default async function Home() {
+  const source = await fs.readFile("./content/scrollycoding.mdx", "utf-8")
+
+  const { content } = await compileMDX({
+    source,
+    components,
+    options: {
+      mdxOptions: {
+        remarkPlugins: [[remarkCodeHike, chConfig]],
+        recmaPlugins: [[recmaCodeHike, chConfig]],
+      },
+    },
+  })
+  return (
+    <main
+      style={{
+        padding: "1rem",
+        margin: "0 auto",
+        maxWidth: "800px",
+        fontFamily: "sans-serif",
+      }}
+    >
+      <Link href="/">Back</Link>
+      {content}
+    </main>
+  )
+}
+
+export async function Code({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "github-dark")
+  return (
+    <Pre
+      code={highlighted}
+      style={{ ...highlighted.style, padding: "1rem", borderRadius: "0.5rem" }}
+      handlers={[callout]}
+    />
+  )
+}
diff --git a/with-next-mdx-remote-rsc/app/scrollycoding/scrollycoding.module.css b/with-next-mdx-remote-rsc/app/scrollycoding/scrollycoding.module.css
@@ -0,0 +1,42 @@
+.container {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.stepsContainer {
+  flex: 1;
+  margin-top: 8rem;
+  margin-bottom: 90vh;
+  margin-left: 0.5rem;
+  min-width: 14rem;
+}
+
+.step {
+  border-left: 4px solid transparent;
+  padding: 0.5rem 1.25rem;
+  margin-bottom: 6rem;
+  border-radius: 0.25rem;
+  background-color: #8881;
+}
+
+.step[data-selected="true"] {
+  border-left-color: #60a5fa;
+}
+
+.stepTitle {
+  margin-top: 1rem;
+  font-size: 1.25rem;
+}
+
+.sticker {
+  width: 40vw;
+  max-width: 36rem;
+  background-color: #212121;
+}
+
+.stickyCode {
+  position: sticky;
+  top: 4rem;
+  overflow: auto;
+}
diff --git a/with-next-mdx-remote-rsc/app/scrollycoding/scrollycoding.tsx b/with-next-mdx-remote-rsc/app/scrollycoding/scrollycoding.tsx
@@ -0,0 +1,61 @@
+import { z } from "zod"
+import {
+  Selection,
+  Selectable,
+  SelectionProvider,
+} from "codehike/utils/selection"
+import { Block, CodeBlock, parseProps } from "codehike/blocks"
+import { highlight, Pre, RawCode } from "codehike/code"
+
+import { tokenTransitions } from "../../components/annotations/token-transitions"
+import { wordWrap } from "../../components/annotations/word-wrap"
+import styles from "./scrollycoding.module.css"
+
+const Schema = Block.extend({
+  steps: z.array(
+    Block.extend({
+      code: CodeBlock,
+    })
+  ),
+})
+
+export function Scrollycoding(props: unknown) {
+  const { steps } = parseProps(props, Schema)
+  return (
+    <SelectionProvider className={styles.container}>
+      <div className={styles.stepsContainer}>
+        {steps.map((step, i) => (
+          <Selectable
+            key={i}
+            index={i}
+            selectOn={["click", "scroll"]}
+            className={styles.step}
+          >
+            <h2 className={styles.stepTitle}>{step.title}</h2>
+            <div>{step.children}</div>
+          </Selectable>
+        ))}
+      </div>
+      <Selection
+        from={steps.map((step) => (
+          <CodeSticker codeblock={step.code} />
+        ))}
+      />
+    </SelectionProvider>
+  )
+}
+
+async function CodeSticker({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "github-dark")
+  return (
+    <div className={styles.sticker}>
+      <div className={styles.stickyCode}>
+        <Pre
+          code={highlighted}
+          handlers={[tokenTransitions, wordWrap]}
+          style={{ minHeight: "40rem", backgroundColor: "transparent" }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/with-next-mdx-remote-rsc/components/annotations/callout.tsx b/with-next-mdx-remote-rsc/components/annotations/callout.tsx
@@ -0,0 +1,52 @@
+import { InlineAnnotation, AnnotationHandler } from "codehike/code"
+
+export const callout: AnnotationHandler = {
+  name: "callout",
+  transform: (annotation: InlineAnnotation) => {
+    const { name, query, lineNumber, fromColumn, toColumn, data } = annotation
+    return {
+      name,
+      query,
+      fromLineNumber: lineNumber,
+      toLineNumber: lineNumber,
+      data: { ...data, column: (fromColumn + toColumn) / 2 },
+    }
+  },
+  Block: ({ annotation, children }) => {
+    const { column } = annotation.data
+    return (
+      <>
+        {children}
+        <div
+          style={{
+            minWidth: `${column + 4}ch`,
+            width: "fit-content",
+            border: "1px solid currentColor",
+            borderRadius: "0.25rem",
+            backgroundColor: "#222",
+            padding: "0 0.5rem",
+            position: "relative",
+            marginLeft: "-1ch",
+            marginTop: "0.25rem",
+            whiteSpace: "break-spaces",
+          }}
+        >
+          <div
+            style={{
+              left: `${column}ch`,
+              position: "absolute",
+              borderLeft: "1px solid currentColor",
+              borderTop: "1px solid currentColor",
+              width: "0.5rem",
+              height: "0.5rem",
+              transform: "rotate(45deg) translate(-50%, -50%)",
+              backgroundColor: "#222",
+              top: "1px",
+            }}
+          />
+          {annotation.query}
+        </div>
+      </>
+    )
+  },
+}
diff --git a/with-next-mdx-remote-rsc/components/annotations/token-transitions.client.tsx b/with-next-mdx-remote-rsc/components/annotations/token-transitions.client.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { CustomPreProps, InnerPre, getPreRef } from "codehike/code"
+import {
+  TokenTransitionsSnapshot,
+  calculateTransitions,
+  getStartingSnapshot,
+} from "codehike/utils/token-transitions"
+import React from "react"
+
+const MAX_TRANSITION_DURATION = 900 // milliseconds
+
+export class SmoothPre extends React.Component<CustomPreProps> {
+  ref: React.RefObject<HTMLPreElement>
+  constructor(props: CustomPreProps) {
+    super(props)
+    this.ref = getPreRef(this.props)
+  }
+
+  render() {
+    return <InnerPre merge={this.props} style={{ position: "relative" }} />
+  }
+
+  getSnapshotBeforeUpdate() {
+    return getStartingSnapshot(this.ref.current!)
+  }
+
+  componentDidUpdate(
+    prevProps: never,
+    prevState: never,
+    snapshot: TokenTransitionsSnapshot
+  ) {
+    const transitions = calculateTransitions(this.ref.current!, snapshot)
+    transitions.forEach(({ element, keyframes, options }) => {
+      const { translateX, translateY, ...kf } = keyframes as any
+      if (translateX && translateY) {
+        kf.translate = [
+          `${translateX[0]}px ${translateY[0]}px`,
+          `${translateX[1]}px ${translateY[1]}px`,
+        ]
+      }
+      element.animate(kf, {
+        duration: options.duration * MAX_TRANSITION_DURATION,
+        delay: options.delay * MAX_TRANSITION_DURATION,
+        easing: options.easing,
+        fill: "both",
+      })
+    })
+  }
+}
diff --git a/with-next-mdx-remote-rsc/components/annotations/token-transitions.tsx b/with-next-mdx-remote-rsc/components/annotations/token-transitions.tsx
@@ -0,0 +1,10 @@
+import { AnnotationHandler, InnerToken } from "codehike/code"
+import { SmoothPre } from "./token-transitions.client"
+
+export const tokenTransitions: AnnotationHandler = {
+  name: "token-transitions",
+  PreWithRef: SmoothPre,
+  Token: (props) => (
+    <InnerToken merge={props} style={{ display: "inline-block" }} />
+  ),
+}
diff --git a/with-next-mdx-remote-rsc/components/annotations/word-wrap.tsx b/with-next-mdx-remote-rsc/components/annotations/word-wrap.tsx
@@ -0,0 +1,21 @@
+import {
+  AnnotationHandler,
+  InnerLine,
+  InnerPre,
+  InnerToken,
+} from "codehike/code"
+
+export const wordWrap: AnnotationHandler = {
+  name: "word-wrap",
+  Pre: (props) => <InnerPre merge={props} style={{ whiteSpace: "pre-wrap" }} />,
+  Line: (props) => (
+    <InnerLine
+      merge={props}
+      style={{
+        textIndent: `${-props.indentation}ch`,
+        marginLeft: `${props.indentation}ch`,
+      }}
+    />
+  ),
+  Token: (props) => <InnerToken merge={props} style={{ textIndent: 0 }} />,
+}