Passing head HTML information from an individual component

[nicetransition]

I do not believe this exists, if it does I can't find it in the source code or any documentation. Is there currently a way to pass code to head of a component? For example headHtml called out in the YAML block.

If not, I can work on an update

Let me know before I make this update, thanks!

/*
---
name: Button
category: Components
headHtml: <link rel="stylesheet" href="specific-css.css" />
---

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

```types.html
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
```
*/
.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    …
}
.btn-default {
    …
}

[mpetrovich]

That feature does not currently exist and it looks useful, so feel free to add!

Implementation note: Make sure to treat that as a multi line block YAML field (using a pipe):

headHtml: |
  <link ...>
  <script>...</script>

[nicetransition]

siccck I should be able to get on this tonight - any dev/contribution reference docs for this project?

Looking forward to contributing ~

[nicetransition]

PR for review :)

~ didn't know how you handle versions/changelog and documentation for THIS @mpetrovich

[nicetransition]

I added one more thing:

• head - gets added to <head/>
• headHtml -Overwrites the headHtml from the ".stylemark.yml" file and replaces it with content from component. Can also be used to remove the defined headHtml from the ".stylemark.yml" file.

---
name: Component Name Here
category: Category Name Here
head: <link rel="stylesheet" href=“extend-head-area.css" />
headHtml: <link rel="stylesheet" href="overrite-headHtml.css" />
---

also include multi line

---
name: Component Name Here
category: Category Name Here
head:  |
  <link rel="stylesheet" href="extra-css-in-head.css">
  <script src="extra-js-in-head.js"></script>
headHtml: <link rel="stylesheet" href="overrite-headHtml.css" />
---

it's available in #26

I'm not sure why it's failing. @mpetrovich any thoughts?

[mpetrovich]

After revisiting this, I wonder if this can already be accomplished with external asset references in the examples:

```example:path/to/file.css
```

Is the intention to include a CSS file for a specific rendered example? or for all of a component’s examples?

[nicetransition]

It's to inject one or many CSS files to a specific component that is then rendered

[mpetrovich]

Ah, so the latter—it should be included for ALL the examples in that component's docs. I totally misunderstood this feature request initially.