search

mpetrovich / stylemark

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

AngularJS not rendered #81

Closed alessandro308 closed 4 years ago

alessandro308 commented 5 years ago

I have created the following config file

name: My Styleguide

excludeDir:
  - dist
  - docs

assets:
  - dist
  - fonts

theme:
  logo: logo.png

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

examples:
  htmlTag: <html ng-app="myModule">

  js:
  - www/lib/angular/angular.min.js
  - www/lib/ng-lodash/build/ng-lodash.js
  - www/lib/my-angular-widgets/dist/my-angular-widgets.min.js
  - src/js/main.js

order:
  - +Introduction
  - +Installation
  - -Credits

And the following code

---
name: Button
category: Components
---

Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:
- Default: Standard button
- Primary: Provides extra visual weight and identifies the primary action in a set of buttons
- Success: Indicates a successful or positive action

```buttons.angularjs
    <dmt-button type="control" label="control"></dmt-button>
    <dmt-button type="control" label="background='full'" background="full"></dmt-button>
    <dmt-button type="control" label="radius='less'" radius="less"></dmt-button>
    <dmt-button type="control" label="border='light'" border="light"></dmt-button>
    <dmt-button type="control" label="border='false'" border="false"></dmt-button>
    <dmt-button type="control" label="size='full'" size="full"></dmt-button>
    <dmt-button type="control" label="size='big'" size="big"></dmt-button>
    <dmt-button type="control" label="icon='changes'" icon="changes"></dmt-button>
```

But this is rendered as HTML, and is not managed my angular

alessandro308 commented 5 years ago

If I define the md file as

---
name: Button
category: Components
---

Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:
- Default: Standard button
- Primary: Provides extra visual weight and identifies the primary action in a set of buttons
- Success: Indicates a successful or positive action

```button.html
    <dmt-button type="control" label="control"></dmt-button>
    <dmt-button type="control" label="background='full'" background="full"></dmt-button>
    <dmt-button type="control" label="radius='less'" radius="less"></dmt-button>
    <dmt-button type="control" label="border='light'" border="light"></dmt-button>
    <dmt-button type="control" label="border='false'" border="false"></dmt-button>
    <dmt-button type="control" label="size='full'" size="full"></dmt-button>
    <dmt-button type="control" label="size='big'" size="big"></dmt-button>
    <dmt-button type="control" label="icon='changes'" icon="changes"></dmt-button>
```
```button.angularjs

```

angular is executed but returns this error: https://code.angularjs.org/1.5.9/docs/error/ng/areq?p0=stylemark--&p1=not%20a%20function,%20got%20undefined

alessandro308 commented 5 years ago

This was my issue. I was importing the wrong file.