code-hike / codehike Goto Github PK

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

https://shiki.matsu.io/

Instead of

<StepHead>

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

</StepHead>

I want to write

<StepHead>

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

</StepHead>

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)

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

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" }
  ]}
/>

Click on a step to select it

Should be similar to the components from mini-browser:

• MiniEditorWithState => MiniEditor
• MiniEditor => MiniEditorHike

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>

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

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

Instead of this

do this

The last step shouldn't have a border here:

Examples that don't look right centered:

Current	Suggested

I think this shouldn't break:

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

Right now is throwing:

TypeError: Cannot read property 'file' of undefined

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

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

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

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

<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.

Instead of replacing the whole line.

This may be fixed with #30

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

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.

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

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 🤔

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

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

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

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

// TODO description

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.

See this build for example.

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

cc @alexnm

Most warnings are:

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

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

Right now they look bad:

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

Sometimes lines go up and down in the same transition/

Also make the default animation slower