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 16 hours 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T04:41:44.000Z (about 2 years ago)
• Last Synced: 2024-11-21T18:34:43.405Z (2 months 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).