code-hike / codehike Goto Github PK

Sometimes lines go up and down in the same transition/

Instead of repeating the same file for each step:

<Hike>

<StepHead>

```js somefile.js
console.log(1)
console.log(2)
```

</StepHead>

Markdown for step 1

<StepHead focus="1">

```js somefile.js
console.log(1)
console.log(2)
```

</StepHead>

Markdown for step 2

</Hike>

Use the files defined in the previous step and only override the ones defined in the current step.

<Hike>

<StepHead>

```js somefile.js
console.log(1)
console.log(2)
```

</StepHead>

Markdown for step 1

<StepHead focus="1" />

Markdown for step 2

</Hike>

I want to use the code transitions without the editor frame.

const steps = useMdxSteps(
  children,
  {
    preset: {
      customSetup: {
        files: {
          'public/index.html': `...`,
        },
      },
    },
  },
)

Instead of /public/index.html, /publicindex.html is created.

Currently Storybook is loading styles from every story file globally. That's bad. It should only load the styles for the story it's displaying.

There's an open issue here: storybookjs/storybook#729

<StepHead>

```js One.js
// code 
```

```js Two.js hidden
// code
```

</StepHead>

Add the hide flag to codeblocks so it doesn't display the Two.js tab on the mini editor.

// TODO description

A css like this (from tailwind):

code {
  font-family: ui-monospace, SFMono-Regular, Consolas,
    "Liberation Mono", Menlo, monospace;
}

breaks the line width calculation (see code-spring>longer story)

Instead of this

do this

https://lerna.js.org/
https://intuit.github.io/auto/docs/welcome/getting-started
intuit/auto#1861

https://docusaurus.io/docs/using-plugins#creating-plugins

When you have more than two tabs (depending on the width) things get ugly:

Examples that don't look right centered:

Current	Suggested

Not all terminal output starts with a command. For example, with multiple steps, it sometimes makes sense to "paginate" the output like:

<MiniTerminal
  steps={[
    { text: "$ my-command" },
    { text: "About my-command" }
  ]}
/>

The last step shouldn't have a border here:

Instead of

<StepHead>

```css styles.css hidden
h1 { color: red}
```

</StepHead>

I want to write

<StepHead>

```css
h1 { color: red}
```

</StepHead>

See: https://www.chromatic.com/docs/github-actions

<ClasserProvider classes={props.classes} prefix="some-prefix">

cc @alexnm

Currently, the preview is animated every time the code changes between two steps, even when the output doesn't change or doesn't matter. We should give the content author more control over this animation.

I am trying to use scrollycoding as described in your example video and repo, but parsing the MDX file creates an error:

Error in function getSandpackStateFromProps in ./node_modules/react-smooshpack/dist/esm/utils/sandpack-utils.js:45
(0 , smooshpack__WEBPACK_IMPORTED_MODULE_0__.generatePackageJSON) is not a function

./node_modules/react-smooshpack/dist/esm/utils/sandpack-utils.js:45

Digging a bit into this I think there is a dependency version issue, because smooshpack exports createPackageJSON not generatePackageJSON.

Since the smooshpack and react-smooshpack packages are deprecated in favor for sandpack I don't know how I can enforce a correct version on this, because the code isn't available anymore.

When playing with https://github.com/code-hike/react-tutorial-demo, if you do import Something from "something.mdx" then <Something />, you'll get the following error:

I tried to figure out why, but the steps / sections difference for <Something /> wasn't immediately clear 🤔

https://shiki.matsu.io/

I think this shouldn't break:

<MiniEditor code={code} file="App.js" />

Right now is throwing:

TypeError: Cannot read property 'file' of undefined

Click on a step to select it

Right now they look bad:

• text shouldn't be centered
• it shouldn't break the line
• icon shouldn't be at the bottom

Most warnings are:

• (!) Unresolved dependencies
• (!) Missing global variable names

Maybe also fix the unmet peer dependency warnings from yarn install.

Currently, only index.scss is copied. But src/index.scss may depend on src/foo.scss.

Like in http://worrydream.com/#!/LearnableProgramming or https://www.replay.io/

Show two files maybe with vertical split panes, like vscode:

Also make the default animation slower

Instead of replacing the whole line.

This doesn't work very well:

const code = await highlight({
    code: mdx,
    lang: "mdx",
    theme,
  });

Because 'mdx' depends on 'md' and 'jsx' and so on.

Two potential fixes:

• load all the grammars
• add an optional parameter with dependencies

See this build for example.

We are using fetch to fetch codesandbox info. We should polyfill it because it fails in Remix.

Here </MyBox> is too close to the bottom of the panel:

Should be similar to the components from mini-browser:

• MiniEditorWithState => MiniEditor
• MiniEditor => MiniEditorHike

This may be fixed with #30