mpetrovich / stylemark

Generate interactive style guides from Markdown.
MIT License
218 stars 35 forks source link

Unable to generate examples #30

Closed mikecockrell closed 6 years ago

mikecockrell commented 6 years ago

I'm trying to stand up a direct working example of stylemark (using your predefined examples you used in the bootstrap example), but what i'm getting is the style guide being generated with no "Example" sections, only HTML sections which show the html code, no live examples seem to show at all... here's an example of my yml and my generation configuration:

yml

name: MyProject

assets:
  - styles.bundle.css

sidebar:
  background: "#3b2a55"
  textColor: "#fff"

headHtml: |
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

bodyHtml: |
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

node script to run stylemark:

var stylemark = require("stylemark");
var cssFile = "../wwwroot";

stylemark({
    input: cssFile,
    output: '../../docs/styleguide',
    configPath: "./docgenerator.yml"
});

comment structure on compiled css file

    /*
    ---
    name: Button
    category: CSS
    ---

    Button tags
    -----------
    Use the button classes on an `<a>`, `<button>`, or `<input>` element.

    ```tags.html
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
<warning>
#### Context-specific usage
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are 
supported within our nav and navbar components.
</warning>
*/

-----

Any help would be appreciated, trying to understand and figure out why  everything else seems to work perfectly, it just won't show interactive examples actually render (the iframe and i-example divs)
mikecockrell commented 6 years ago

It seems updating to your latest npm release 14 hours ago 0.6.7 has fixed the issue! maybe it was line endings? (I noticed that you added that in the latest commit)

mpetrovich commented 6 years ago

If you’re on Windows, it probably was issues with line endings. Glad to see it works now!