Welcome

This is my attempt to set up a development environment for working on cohost posts. It's using react because I like react. See the repo at https://github.com/chuckdries/cohost-storybook for TODO and contributing documentation.

Dev Workflow

0. clone this repo and install yarn if you haven't already:

npm i -g yarn
git clone https://github.com/chuckdries/cohost-storybook.git
cd cohost-storybook
Copy

1. install dependencies:

yarn
Copy

2. start storybook:

yarn storybook
Copy

3. copy-paste src/stories/Waterfall.stories.tsx into a new file ending in .stories.tsx inside src/stories
4. Edit the post, including the title under export default and storyName near the bottom, and then select your post in the storybook sidebar
5. Use the "Show HTML" switch in the "controls" panel to grab the generated HTML for your post!
6. I recommend saving as a draft before you post to double check that things look how you expect. This tool attempts to emulate what a post looks like but it's not perfect

Tip: Toggle the "wrap with posts" control in the bottom panel to enable or disable resizeable posts above and below your post (for testing scrolling effects)

React/JSX notes

This is React, which means we're authoring in JSX, not HTML. There are some subtle differences:

All tags must close

All tags must either end in /> or have a corresponding closing tag, including html tags that generally don't need one like <hr> and <img>

<img src="..." alt="..." />
// or
<img src="..." alt="..."></img>
Copy

Inline styles are applied as an object, not a string

See the react docs for more information. I found a helpful website you can paste inline style strings into and spits out an inline style object: https://casbin.org/CssToAndFromReact/

<div style="display: block; background: red;" />
// must be converted to
<div style={{
  display: 'block',
  background: 'red'
}}
Copy

className

The class attribute is called className in react.