Scss/CSS/Less styleguide recipe

[airtonix]

• A comment analyzer that js/css multiline comments in the KSS fashion.
• instead of handlebars, we should be able to use razor templates (or use razor files in our server Views directory)
• Would be used in a similar way to AnalyzeCSharp metadata module.
• end result is .net teams would use wyam as their living styleguide tool.

I see it being used like:

Pipelines.Add("Styleguide",
	ReadFiles("./server/**/*.css"),
	KnyleSimpleStyleguide()
	Razor()
	WriteFiles()
);

Some comments would look like:

/**
Author Card // component title

some multi line markdown compatible description text

Example:
<div class=""author-card">
  <div class="author-card__container">
    <img class="author-card__author-profile-image" src="@Model.ProfileImage.Url">
     <div class="author-card__first-name">@Model.Firstname</div>
     ...
  </div>
</div>

- author-card--dark-grey - A dark grey variant of the author card
- author-card--green - A green variant of the author card
- author-card--hero - A hero variant of the author card that spans the full page canvas width

Styleguide ABC123.Components.AuthorCard
*/

.author-card {}
  .author-card__container {}
  .author-card__first-name {}


.author-card--dark-grey {}
.author-card--green {}
.author-card--hero {}

The output would be a directory like:

styleguide/
  index.html
  abc123.html
  abc123-item__components-authorcard.html

[daveaglick]

This is a neat idea, though I actually see it as more of a recipe (with a module that can read these kinds of comments). I.e., the recipe would contain all of the functionality needed to produce the kind of output you describe.

[airtonix]

@daveaglick noting this down here for future refernce. There's a great nodejs project called tunic that could provide a great example of how you'd approach this.

In fact most of that TogaJs collection is great for this kind of thing.

Apologies if you're already down a path of architecting something around this.