storybook-eol / getstorybook.io Goto Github PK

Currently, there are some issues when building the storybook and trying to running it.
Find out the problem and fix it.

Here's one item: storybookjs/storybook#725 (comment)

With this we can get rid of Link at all.
We can use this also to link inside markdown.

Currently, if the preview image is not loaded, our tool doesn't scale it properly. We need to do that on the image onLoad properly too.

We need to create a good docs loader. May be using some markdown but loaded via some JS based loader.

Tasks:

• Add React Router
• Implement a docs Section in Router
• Load data and link it to docs section
• Add support for future docs sections for React Native, Vue, etc

There are some issues when the site is watching on mobile.

Check these featured storybook link texts. They are colored. We need to make them as black. (Original color)

See:

Add some space between header logo and the links. It's hard to click correctly on mobile.

We need to proofread the content.

Implement the SSR support.
Initially we could use something like prerender.io for the simplicity.

We need to add a proper GIF demo of storybook. These are the things it should contain:

• Navigate through stories.
• Show action logger.
• Show keyboard shortcuts
• Change panels location
• Use some knobs
• Try to open the editor and change some code
• Run some tests. (Use the above code block to show some test specs)

We need to implement the docs area for this site.

When someone shares the link https://getstorybook.io/ it should appear good with a nice image and description.

When listing third party addons here, also mention who wrote the addon. Example:

Specs by @mthuret

This is a very special addon where it'll allow you to write test specs directly inside your stories.
You can even run these tests inside a CI box.

Notes by @kadirahq

With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team.

Info by @kadirahq

If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer.

Currently, we've put some demo info for the addon.
Use some proper info.

(Try to use an animated GIF to demo the addon)

Currently we need to use the page we develop in #1 as a CRA app.

This is aready a CRA app. Simply run npm start and use that page.

We need to have following things in that.

• meta tags and title

Fix links in these lines:

• https://github.com/fdaciuk/getstorybook.io/blob/311e152db5608a1da06bde8322a78caf6cb5b121/src/docs/storybook-hub/management-features/env-variables.js#L10
• https://github.com/fdaciuk/getstorybook.io/blob/311e152db5608a1da06bde8322a78caf6cb5b121/src/docs/react-storybook/configurations/env-vars.js#L28

Current page is not responsive. We need to enable that.

In every docs page, we need to add a link saying edit this document. Which send user to this repo and the correct file.

May be in a section called, featured projects.
Try to add some core projects inside it.

In the mobile view, we need to add two dropDown boxes as the navigation.
Just like we do it in kadira.io.

See: https://kadira.io/platform/kadira-debug/overview