-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Every section a page? #71
Comments
I wonder if it has something to do with the fact that the code still uses Polymer 1 and polyfills for v0 custom elements. I could try to look to see if that could be improved for performance of large styleguides. If you don't use |
Yeah, removing polyfills and polymer 1 in advantage for polymer 3 or usage of another app that has scoping, will help. I can do that yes (have to manually edit 100 lines though), but I will then have no hierarchy and no menu :( (or?) |
The best way would be if I could keep the |
Another thing I've noticed is that the <!-- user styles -->
{{#each globalStylesheets}}
<link rel="stylesheet" href="{{this}}">
{{/each}}
<!-- /user styles --> The source from the parsed css, but I have no such The css is also not deduplicated. For example, all my components require As of now, my styleguide is over 81 000 lines of html and css, not including some helper javascript stuff: The index file is 4.4 megs: To top it off, I have over 560 examples (as in, usages of the polymer example tag), so that might be better if I use pages to split things up |
How interesting. That's a lot of things going on. I can see why there's massive scale problems with the library. Splitting up everything into its own page seems like it would help. I'll look into what it would take to make everything it's own page, as well as improve the performance at scale. |
Just ping me if you want to check out the repository |
Any progress on this? |
Sorry, I've been so busy lately I completely forgot about this. Thanks for the reminder. I'll schedule some time to look into this. I did do some initial looking into improving performance by upgrading the Polymer library, but wasn't able to find anything that looked Promising. The new version of Polymer requires a build step using their specific tooling to generate the web component output, so that didn't look like it would work. Other shadow DOM libraries do the same. Will continue to keep looking. |
Alright, so I've got this working (I think), but would like your opinion on something. Now that each section is its own page, I've kept the page links at the top for primary pages, and then each primary section within the page is now it's own page. However, this leaves the primary page links without any content. So for example, if I had 2 pages
Each section is now their own page ( My question then is what should go in these top page links? |
Hi! Back from the summer holiday @straker , let's see. What I have done is to manually create an index.html file that links to the documentation (the first top section), and have the same menu present for all pages (the four top sections that are pages for now). Kinda like this:
If every section is a page, I would have the same menu everywhere, so it's easier to jump between the pages and sections. |
Any progress on this? |
I am so sorry for keeping you waiting on this once again. This has been a very busy year for me and I haven't quite yet recovered from it. I'll see if my code still outputs the single page, make the index a simple TOC, and try to get this released soon. |
Alright, if you want to checkout the livingcss('path/to/file.scss', '.', {
everySectionPage: true
}); |
Hi! I've already, manually, added each top level section as an own page, and it does not leviate much. The documentation site we generate now is useless in chrome (chrome freezes/hangs). Is there a way to do something with polymer to fix this? Will test it out, but if it only make top level section (for my usage, it's 5 pages, and only two of them has examples), it will not do much. |
Just tried it, and no effect (since I've already done it manually, but as I'm writing this, it needs to be tested without the manual @page -setting). Is it possible to only instantiate the example when it is close to the viewport, as in, lazy loading? or to look at polymer itself? |
Removed polymer, and things are working better (note, better, not good or perfect) with Chrome. But still, it is remarkably slower than the other browsers. |
I feel that I might have not explained clearly what I want. I not only want to have the top parent sections as pages, but I want to be able to say that for example: I have 7 top parent sections, that has no parent. These are linked too from a custom index.html. |
I believe so. Thinking about it more, does a structure similar to MDN docs make sense? They seem to have every section it's own page with a sidebar nav of every other section that shares the same parent. And they do this for as deep as the nesting goes. Sounds like what you are talking about. |
Styleguide is slow and unresponsive with large styleguides
I'm currently experiencing that the generated styleguide is slow and sometimes unresponsive, especially at load. This makes it hard to use direct linking to sections.. Perhaps due to many examples and lots of components. I've split up the top sections into pages to test it out, but it hasn't improved as much as I'd like, so I was wondering if it's possible to make every section it's own page
Just to clarify, when using
@page
, the html file for that component or section is made, but if it's asectionof
, the file only contains the template, and not the documentation..The text was updated successfully, but these errors were encountered: