Ember Single File Component (markdown approach)

.explanation.md

Ember Single File Component (markdown approach)

A syntax we are widely used to write is markdown, which also has a syntax to write blocks of code. In this variant of a potential SFC thingy, the only allowed "top-level-syntaxes" are code blocks. Based on the language they are assigned script, template or style. Everything other than code blocks is ignored (= comment)

References

• Introduction to MDJS
• Literate Programming
• Markk by @kennethlarsen

ember-component.md

title
Foo

Hello I'm just documentation here with mdjs like notation to the code snippets

import Component from '@glimmer/component';
import Button from './button.embr';

interface TextInputArgs {
  value: unknown;
  update: (value: unknown) => void;
}

export default class TextInputComponent extends Component<TextInputArgs> {
}

I am another documentation section here

<input value={{@value}} {{on "input" @update}} local-class="foo"/>
<Button>Go</Button>

Look I even got styles

.foo {
  background-color: blue;
}