Using Source as Skins viewer

[ashmigelski]

Source works nice when you have one CSS (main product styles) and want to apply it different HTML elements, thanks for this :+1:

Our main product has different skins (logos, css) for different customers and i want to use source for skins system documentation.

First I'm want to solve such problem - i have one HTML code and want to apply different CSS skins to it. Idea is to show how template page (core/view/skins.ejs) looks with different styles (/skins/ sub folders). To demonstrate i created simple project https://github.com/ashmigelski/sourcejs-skins-viewer compatible with current v.0.4.0 branch. It uses very straightforward logic - every skin is a spec with info.json and index.src inside. Any tips or suggestions how to make it easier and more efficient? Thanks

[robhrt7]

Hi!

Thanks for asking, we're always free to give some usage ideas and recipes.

You did quite a nice job, and this structure looks very nice. It's also possible to add custom data binding to EJS template like this:

<div><%= info.custom %></div>

Filling those from info.json:

{
"custom": "text"
}

Also, as an alternative solution, if you have the same HTML everywhere, you can just write small client-side plugin (here's an example https://github.com/sourcejs/sourcejs-spec-status), to add Theme switcher, which will only add some specified styles on page.

But, if you're fine with current structure, it's also totally okay. Good part of your solutions is that every theme is easy searchable through SourceJS specs.

[ashmigelski]

Thanks, i'll try to create client-side plugin soon and compare results

Also i think about another server solution - special role for spec (additional to current 'spec' and 'navigation'), something like static spec page, that can be viewed with various styles, icons etc. Skin value can be passed as GET parameter or using custom routing. For example, info.js for such spec can look like

{
  "role": "skin",
  "skins": "path/to/skins or [array of skins]",
  ... 
}

If it would work, it will be easy to add new skin (add one more folder) and create "Skins gallery" - special spec shows all skins one-by-one.

What do you think about this variant?

PS just pulled v.0.4.0 after #61 styles reset was added. On screenshot app style has body {background: #222;} and it works nice. But '.source-example' has hardcoded white background rewriting app style. Any solution for examples with dark background?

[robhrt7]

@ashmigelski

Also i think about another server solution - special role for spec (additional to current 'spec' and 'navigation'), something like static spec page, that can be viewed with various styles, icons etc. Skin value can be passed as GET parameter or using custom routing.

We have middleware support landed in 0.4 dev (soon in stable release), with it, you can add any processing you want. Scheme with GET parameters for skins will also work.

What do you think about this variant?

Quite nice, i thinks it's better than client-side plugin.

PS just pulled v.0.4.0 after #61 styles reset was added. On screenshot app style has body {background: #222;} and it works nice. But '.source-example' has hardcoded white background rewriting app style. Any solution for examples with dark background?

We will remove white background from .source_example, you can override it for now from user/assets/css/defaults.css.

[ashmigelski]

Hi again I played with user middleware for skins processing, it works quite well in test env. So https://github.com/ashmigelski/sourcejs-skins-viewer repo now contains two different ways to show skins

But i think that path to user middleware is too long. Here is my case (according to userMiddleware.js:19). Second sourcejs-skins-middleware looks like unnecessary folder

 / node_modules / sourcejs-skins-middleware / core / middleware / sourcejs-skins-middleware / index.js

BTW API in v.0.4.0-rc looks very nice :+1:

[robhrt7]

@ashmigelski Yeah, this is temp path, and definitely will be shortened till stable release. It will be like core/middleware/index.js, as it is with other this kind of includes.

https://github.com/ashmigelski/sourcejs-skins-viewer is great, would love to se more description and maybe some screenshots of result in README. I will soon organise some recommendations for sourcejs- plugins description, with examples on our own plugins.

[robhrt7]

Documentation and examples of plugins and middleware http://sourcejs.com/docs/api/plugins