Code Hike Experiments

These are some demos of the things I'm trying while working on the next major version of Code Hike.

But first, here's a button to switch to

Code Transitions

A new algorithm to animate the transition between code blocks.

For this demo, I asked ChatGPT to generate a factorial function in several languages, here's the result:

public class Main {
    public static int factorial(int n) {
        if (n == 0) {
            return 1;
        } else {
            return n * factorial(n - 1);
        }
    }
}

Click the language icons

Custom Annotations

More flexible annotations with user-defined components. Custom annotations can be a mix of client components and server components.

Here the user's secret key is loaded in a server component and the tooltip is rendered in a client component:

import stripe
stripe.api_key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc" 

stripe.Payout.create(
  amount=5000,
  currency="usd",
)

The MDX looks like this:

import { SecretKey } from "./my-annotation.js"

```py
import stripe
stripe.api_key = "PLACEHOLDER" # !SecretKey[18:30]

stripe.Payout.create(
  amount=5000,
  currency="usd",
)
```

Notice two things:

We imported a SecretKey component
We added a !SecretKey comment (with a range pointing to the PLACEHOLDER string)

SecretKey is a server component that look like this:

import { SecretKeyTooltip } from "./tooltip"
import { getUserSecretKey } from "./user"

export async function SecretKey() {
  const key = await getUserSecretKey()
  return <SecretKeyTooltip>"{key}"</SecretKeyTooltip>
}

Hover the api key

Selected Token Highlight

One thing I miss while reading code on websites is the ability to highlight all occurrences of a particular piece of code.

This works similar to a code editor, you can select a token and all occurrences of that token will be highlighted.

"use client"

import { useState } from "react"
import { Carousel } from "acme-carousel"

export default function Gallery() {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Show</button>
      {isOpen && <Carousel />}
    </div>
  )
}

Select any token

It also works if you selecte a word from a paragraph, try: button or Carousel.