https://github.com/astronomersiva/ember-md
This addon lets you write your EmberJS code in Markdown.
https://github.com/astronomersiva/ember-md
Last synced: about 2 months ago
JSON representation
This addon lets you write your EmberJS code in Markdown.
- Host: GitHub
- URL: https://github.com/astronomersiva/ember-md
- Owner: astronomersiva
- License: mit
- Created: 2019-10-25T11:44:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-08T15:50:43.000Z (over 5 years ago)
- Last Synced: 2025-02-23T19:51:17.260Z (2 months ago)
- Language: JavaScript
- Homepage: https://ember-md.netlify.com/
- Size: 671 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-md(emd)
==============================================================================
This addon lets you write your EmberJS code in Markdown. This is useful
for cases like blogs where Markdown feels more natural than HBS. It also
lets you write your JS and template code in the same file. Single File Components 😝
### **[You can try an interactive demo here](https://ember-md.netlify.com/)**
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.4 or above
* Ember CLI v3.12 or above
* Node.js v8 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-md
```
Usage
------------------------------------------------------------------------------
Write your components(templates and class files) as a single `emd` file.
For example, in `app/components`, you can have the file `greeting.emd` and you
can just use the component in `application.hbs` just like you would in normal applications.
You can use both Glimmer and Ember components.
```md
```javascript
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class GreetComponent extends Component {
@tracked name = 'Emberista';
@action
sayName() {
window.alert(`Hello, ${this.name}!`);
}
}
`` `
---
## let me greet you
Hey! What's your name?
{{input value=name}}
Click Me!
```
Remember to add the Horizontal Rule(`---`) between the JavaScript code and the emplate.
If your editor does not automatically apply Markdown formatting to the `.emd` files, you
can add custom File Associations. I have tested this both in VSCode and Atom.
Known Caveats
------------------------------------------------------------------------------
* Rebuilds(and live reload) will be triggered for the templates but not for
the the component class. I am looking into ways of making this possible.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).