https://github.com/cjsaylor/design-for-success-slides
Slides for Design for Success with Storybook.js and React.
https://github.com/cjsaylor/design-for-success-slides
cleaver react slides storybook
Last synced: about 2 months ago
JSON representation
Slides for Design for Success with Storybook.js and React.
- Host: GitHub
- URL: https://github.com/cjsaylor/design-for-success-slides
- Owner: cjsaylor
- Created: 2017-11-29T16:16:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T04:41:44.000Z (over 3 years ago)
- Last Synced: 2025-01-22T10:36:32.322Z (over 1 year ago)
- Topics: cleaver, react, slides, storybook
- Language: Shell
- Homepage: https://www.chris-saylor.com/design-for-success-slides/slides
- Size: 6.56 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Design for Success Slides and Examples
This repo contains the slide content (and generation capability) for the talk "Design for Success with [React](https://reactjs.org/) and [Storybook.js](https://storybook.js.org/)".
View the slides on [Speaker Deck](https://speakerdeck.com/cjsaylor/design-for-success-with-react-and-storybooks)
- [Building Slides](#building-slides)
- [Quick Start](#quick-start)
- [Hacking](#hacking)
- [Running example storybook](#running-example-storybook)
- [View the example storybook](#view-the-example-storybook)
## Building slides
### Quick Start
```bash
npm install
npm run build
open index.html
```
### Hacking
```bash
npm run watch
open storybook-cleaver
```
The slides use [Cleaver](https://github.com/jdan/cleaver) as the mechanism to render the slides (all of which are written in markdown) with a custom theme that produces a [reveal.js](https://github.com/hakimel/reveal.js) presentation.
See [Reveal Cleaver Theme](https://github.com/cjsaylor/reveal-cleaver-theme) for how the reveal.js presentation is rendered.
## Running example storybook
```bash
cd example
npm install
npm run storybook
```
Running the above will start a node server that serves the storybook files and sets up webpack that allows automatic refreshing of changes over websockets.
### View the example storybook
You can view the example storybook [here](https://www.chris-saylor.com/design-for-success-slides/example).