Show Bootstrap examples inline

[TobiasDev]

Hello! I've love DevDocs, especially the speed of it! However, there is one thing I feel is lacking. When I use for example the bootstrap documentation the images are quite a big help to find what I'm looking for and in DevDocs I can't see any images. Is there any chance we could see this added? Thanks!

[j-f1]

It seems like the scraper removes the examples (I’m assuming that that’s what you’re talking about):

https://github.com/freeCodeCamp/devdocs/blob/58c44bf332d6fca75b1d249439f8ea19c81f5326/lib/docs/filters/bootstrap/clean_html_v4.rb#L19-L33

I think this is intentional, because DevDocs doesn’t include Bootstrap’s stylesheet. One way to fix this without messing up the styles of DevDocs itself would be to embed the examples in iframes:

<style>
  iframe {
    border: none;
    width: 100%;
  }
</style>
<iframe srcdoc='
  <link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet">
  [example code goes here]
'></iframe>

The only downside to this would be that it would require Internet access for the demos to look correct since the Bootstrap CSS has to be loaded over the network.

If you wanted to submit a PR that either uses my suggested approach or another one that avoids leaking Bootstrap’s styles into the main DevDocs app, I’d probably accept it.

Sorry for the delay in replying!

[mandrasch]

Mh, offline usage would be the main goal, right?

I did a quick research, it seems possible to isolate the boostrap styles to certain div areas:

a) https://formden.com/blog/isolate-bootstrap (tutorial for v3, v4 uses scss instead of less) b) https://github.com/toert/Isolated-Bootstrap

Thanks for providing devdocs!

[TobiasDev]

Sorry! I've been gone for a long time! Yeah, offline usage would really be the main goal for me if possible. :)

[koraysels]

any prgress on this ?

[koraysels]

there is this repo: https://github.com/libracoder/bootstrap-offline-docs It runs offline aswell. Maybe helpfull ? I don't know