Code Hike v1.0

[pomber]

I'm working on the next major version of Code Hike. The plan is to release it in April 2024 with a new website, playground, and docs. Beta versions will be available before that.

A key focus for v1.0 is more flexibility. We're introducing features like custom annotations and layouts. This will also make Code Hike smaller since we can move some of the current features to copypastable components that you can adapt to your needs, like what https://ui.shadcn.com/ does.

I'm going to list my ideas for v1.0 in this discussion but I'd love to hear yours too. Your early feedback is crucial to influence v1.0's development before we get too far along.

The new website and docs (work in progress): https://v1.codehike.org/

[pomber]

Custom annotations

Use your own components (even server components) as annotations.

For example:

import { MyComponent } from "./MyComponent"

```js
console.log(1)
// !MyComponent foo
console.log(2)
```

MyComponent will receive the syntax highlighted console.log(2) as children and "foo" as another prop.

---

Here's an example of a tooltip annotation

tooltip.mp4

For this kind of annotation, I still trying to figure out a good syntax to pass extra markdown as a prop to the component (the content of the tooltip).

---

Another example that uses React Context:

context.mp4

[pomber]

Custom Layouts

Instead of providing components like <CH.Scrollycoding>, <CH.Spotlight>, and <CH.Slideshow> provide one component to rule them all: <Hike>.

Hike will have a prop where you pass the component you want to use as the layout.

Considerations:

• Provide the current layouts as copypastable components (like https://ui.shadcn.com/)
• Provide utils to manage the steps and reduce the amount of work those copypastable should do

For example, a custom layout with a UI similar to Instagram Stories:

stories.mp4

Live demo: https://ch-stories.vercel.app/

[pomber]

Code transitions

New transition between two pieces of code that works better with small changes.

animation.mp4

[tomByrer]

Other art & markup ideas:
https://antfu.me/posts/shiki-magic-move

[DanielFGray]

absolutely love this! especially the last one with more fine-grained animations

my blog makes heavy use of code hike, and if you are offering early access I would love to be considered for it

[pomber]

will start adding more info here https://v1.codehike.org/

[eric-horodyski]

Code folding, please!

[pomber]

Coming soon (as a custom annotation, so you can customize it as much as you want).

I already have this one working:

collapse.mp4

[eric-horodyski]

Awesome! As far as customization goes, can we set the initial state (either collapsed or expanded)? I haven't had much time to read into what custom annotations would look like/how they're constructed.

[pomber]

Yes, you can set the initial state. I'm still refining the API, but as soon I have something stable I'll start adding examples

Edit: https://v1.codehike.org/docs/code/collapse

[Jokcy]

Seems there is no branch for this new release right now?

[pomber]

work is happening here https://github.com/code-hike/v1

[stern-shawn]

If we'd like to make contributions, would it make the most sense to do so against the new repo, or this one? 😄

[pomber]

the new one, feel free to open any issue with more details there

[chrisjaure]

Awesome to see the next iteration of Code Hike! Thanks for sharing 🙂

One thing I would love to see from a tool like this is to be able to make relationships more discoverable. I've considered using monaco editor for this in the past. These are features I miss the most from VSCode that would be cool to see in Code Hike:

• Peek -- show related code inline
• Go to Definition -- quickly jump through tabs
• Hover Information -- for Typescript, get type information that may not be present in the visible code

I realize the changes you're making now would support some of these. At the least they would make some cool copy/paste examples.

Thanks again for sharing Code Hike with us!

[pomber]

I think you will be able to do all three.

I'll add a copypastable example for the typescript one (using twoslash) soon. But it will probably only work with React Server Components.

Edit: https://v1.codehike.org/docs/code/twoslash