Code Surfer v3

[pomber]

Rewriting Code Surfer from scratch.

---

Features for v2.0.0:

• compatibility with mdx-deck v2.0 (Seems to be incompatible with mdx-deck 2.0 #53 Make CodeSurfer compatible with mdx-deck 2.x #54)
• highlight lines
• zoom in and out
• code transitions
• zoom out if code is too long (Zoom-in moves code on left side out of the window #29)
• title and subtitle
• more themes
• allow overriding styles (Allow overriding container styles #52)
• create-code-surfer-deck package
• load more language syntaxes
• support diffs
• highlight tokens
• error handling
• load code from file
• split layout (CodeSurferSplit doesn't render #44)
• notes
• read offOpacity from theme (Customize offOpacity in animations #63)
• logo
• readme

After v2.0.0:

• line annotations (Line Annotations #51)
• live preview layout (tweet)

---

v2 api looks like this:

import { CodeSurferLayout } from "code-surfer"

# My Deck

---

<CodeSurferLayout>

```js
module.exports = {
  entry: "./path/to/my/entry/file.js",
}
```

```js 4,7 subtitle="Entry and Output"
const path = require("path")

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js",
  },
}
```

```js 5,7:9
const path = require("path")

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js",
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }],
  },
}
```

</CodeSurferLayout>

[pomber]

It's far from done, but if you wanna try the new version:

$ npm init code-surfer-deck my-deck
$ cd my-deck
$ npm start

[karlhorky]

Hey, this looks cool! Let me know if I can help with either of the issues that I filed :) I totally understand if you think you're faster by yourself though.

[karlhorky]

I think I may try upgrading to this version with a slide deck that I'm making right now and seeing whether the things that I'm doing (annotations, splitting) still all work.

[pomber]

Hey, this looks cool! Let me know if I can help with either of the issues that I filed :) I totally understand if you think you're faster by yourself though.

Right now the code isn't very stable, I'm still refactoring a lot. So it will be better to wait a bit.

I think I may try upgrading to this version with a slide deck that I'm making right now and seeing whether the things that I'm doing (annotations, splitting) still all work.

This version is like 99% breaking changes, so make sure you have a backup before upgrading :)

[HoverBaum]

I have a question on my mind that might fit the context of rewriting: How compatible is CodeSurfer with things other than mdx-deck?

Just curious because the readme only mentions mdx-deck. From looking through components like this for multiple deck frameworks I cam to think that it would be really valuable to have a base component that the community can invest time into and then write adaptors for different frameworks.

[pomber]

How compatible is CodeSurfer with things other than mdx-deck?

It's not very well documented, but you can use the current version as a react component anywhere: https://codesurfer.js.org/react-docs/

The reason it's not well documented is because I'm only using it with mdx-deck. But after I finish with v2, I want to use it also for a blog post with gatsby, so the API and docs should be better after that.

[pomber]

I'll merge this soon. See #70.