Example of pages
Closed this issue · 20 comments
I love using this to create a styleguide, but haven't been able to consistently create pages based on the documentation. Could you please add an example showing how to create several styleguide pages?
Thanks!
Can do, will get it into the next release.
Does this stylesheet help you better understand how to achieve multiple pages in the style guide?
I have also had trouble generating pages.
I have setup with three pages (each with sections and subsections). I have defined @page tag in stylesheet with the first occurrence of section tag (example:
@section Buttons
@page components
Running my gulp script runs through, but after finishing throws this stream.push error:
('...' represents part of path to project folder)
[12:04:16] Finished 'release' after 4.71 μs
Error: stream.push() after EOF
at readableAddChunk (/Users/ ... /node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:179:15)
at DestroyableTransform.Readable.push (/Users/.../node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:157:10)
at DestroyableTransform.Transform.push (/Users/.../node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:123:32)
at success (/Users/.../node_modules/gulp-livingcss/index.js:73:17)
Error: stream.push() after EOF
at readableAddChunk (/Users/... /node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:179:15)
at DestroyableTransform.Readable.push (/Users/... /node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:157:10)
at DestroyableTransform.Transform.push (/Users/... /node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:123:32)
at success (/Users/... /node_modules/gulp-livingcss/index.js:73:17)
And html for only first page will be generated. If I run the script again, second file will be generated (with same error) and third time I get the third file.
I have no sorting for the pages/sections defined in gulp.
Am I missing something crucial or what goes wrong here ? Any help appreciated. I can live with running script thrice, but it feels shaky :-)
Hi, the example definitely helped understand the syntax. The documentation has "+" at the line starts instead of '*' which caused some confusion.
/**
+Section belonging to a page.
*
+@section Section Name
+@page Page Name
*/
However, I am also getting stream.push() after EOF errors when testing with you example, but only get one page written out (typography.html) even after repeated runs:
Error: stream.push() after EOF
at readableAddChunk (D:\nodejs\styleguide\node_modules\through2\node_modules
\readable-stream\lib_stream_readable.js:179:15)
at DestroyableTransform.Readable.push (D:\nodejs\styleguide\node_modules\thr
ough2\node_modules\readable-stream\lib_stream_readable.js:157:10)
at DestroyableTransform.Transform.push (D:\nodejs\styleguide\node_modules\th
rough2\node_modules\readable-stream\lib_stream_transform.js:123:32)
at success (D:\nodejs\styleguide\node_modules\gulp-livingcss\index.js:73:17)
I am using your gulp-livingcss. Maybe I'm missing a node module?
If you are see + symbols, those are inserted by git to show changed lines. If you copied the + symbols into your code, that will throw the errors. Instead, you should look at the raw version when copying code.
@epka did you also try to use my example with the + symbols?
I used your raw version to test locally to make sure there were no typos.
The '+' instead of '@' I got from the main page: https://github.com/straker/livingcss
Holy crap, I didn't even know the main page had those +'s! I'll get those fixed ASAP, no wonder everyone's having problems. I'm sorry.
Ok, fixed the docs
Hi, I didn't have +'s on start of line.
I have:
* @section Buttons
* @page components
And to clarify, I get that EOF error in every run.
I'm clueless why, and it seems plain weird:
(so I have three pages defined: components, elements and modules.
On first run, it creates components and fails,
On second it creates elements and fails,
On third it creates modules and fail
I cannot test now if it touches already created files on subsequent runs.
And, actually I get EOF error twice at end of each run :-)
Ok, I just noticed that you're using the gulp-livingcss, so I'll have to investigate why that one's having issues with multiple pages.
Great, thanks! Let me know if you have any questions about my set up.
Alright, latest gulp-livingcss should fix this issue.
Cool. Seems to work now.
Thanks !
This whole LivingCSS is really cool package. So happy came across it, I have been looking for Styleguide engine that's versatile enough for a while.
Hi
Just been able to get back to this to test {markdown} (works nicely!)
However, after updating to gulp-livingcss 2.0.2 this same (above) error resurfaced. 2.0.1. seems to work ok though ??
Thats strange, I'll see why that happened.
So I'm testing this and I can't reproduce the error with this file:
/**
* Page 1
* @section Page 1
* @page Page 1
*/
/**
* Page 2
* @section Page 2
* @page Page 2
*/The gulp task completes and outputs 2 pages as expected.
Hmmm....ok.
Thanks for looking this up.
Then it's probably my file or setup. Have to dig deeper. It's probably best to rebuild the project folder. Are the newest versions released through npm?
I'm also doing preprocess sorting of pages:
sortOrder: [ ['index', 'components', 'elements', 'modules'] ]
@epka any luck figuring out what was going on? (And yes, npm versions are up-to-date)
Hi, thanks for following up.
Unfortunately not. Had to do some firefighting in another project, so this has been on hold. I'm resuming work on style guide next week, starting to try sort this out. I'll report back if or when I get it rollllng again 😁
I'll close for now. If you find anything wrong with livingcss, go ahead create a new issue.