search

mpetrovich / stylemark

Generate interactive style guides from Markdown.
MIT License
218 stars 35 forks source link

Add livereload support #1

Closed sakamies closed 7 years ago

sakamies commented 7 years ago

Making a styleguide using Stylemark at work and wanted live reload. What do you think?

sakamies commented 7 years ago

I haven't gotten quite familiar with code testing yet, does this need a test case?

mpetrovich commented 7 years ago

Thanks for your contribution! Livereload is a great idea.

I haven't gotten quite familiar with code testing yet, does this need a test case?

Not for the functionality you're adding. Your PR passes the existing unit tests (see the green check marks next to each commit), so you're all set.

However, it looks like your code is out of date from the master branch. Could you rebase/merge the latest changes?

mpetrovich commented 7 years ago

Actually, the changes are small enough that I can integrate them manually, so don't worry about fixing this PR. I'll let you know once they're in!

mpetrovich commented 7 years ago

I'm having trouble getting livereload to work out of the box. It's not ideal that it requires a script to be added and a custom browser extension to be installed.

I think Browsersync might be a better tool—it's a trivial npm install and requires no additional code changes or browser extensions.

npm install -g browser-sync
npm install -g stylemark
stylemark -i path/to/my/source -o path/to/style/guide
browser-sync start -s -f path/to/style/guide

…will open a browser window that will automatically reload whenever path/to/style/guide changes.

With those changes, every time you update the style guide via the stylemark -i … command, it will automatically refresh your browser.

Will this work for you instead of livereload?

mpetrovich commented 7 years ago

Stylemark v0.4.0 now has auto-watching and auto-reloading built-in, so this PR is no longer necessary. See the command-line docs.

To automatically launch a browser that will auto-reload whenever you make changes to your source code, it's as simple as adding:

stylemark -i path/to/source/code -o path/to/style/guide -w -b

Please let me know if this works for you!

mpetrovich commented 7 years ago

@sakamies I originally mistook some of your CSS & HTML changes for merge differences, but those were actually legitimate! I've applied those same fixes which are now available as of v0.4.2. Thanks again for your contribution, and sorry about the mixup!

sakamies commented 7 years ago

Wow, sounds excellent, thank you!