📝 Webpack Loader for: FrontMatter (.md) -> HTML + Attributes (+ React/Vue Component)
MIT License
Published by hmsk almost 5 years ago
#74 (Solves #41)
<img src="./img/something.png" />
➡ <img src=require("./img/something.png") />
This matches the default behavior of vue-loader
. So this change will support Nuxt's home alias like ~/assets/image.png
naturally.
require(attributeValue)
video
element: src
, poster
attributesource
element: src
attributeimg
element: src
attributeimage
element: xlink:href
, href
attributeuse
element: xlink:href
, href
attribute<child-element>
(without closing tag) shoul be updated to <child-element />
vue.render
, vue.staticRenderFns
return function instead of source stringimport fm from "something.md"
import OtherComponent from "OtherComponent.vue"
export default {
data () {
return {
templateRender: null
}
},
components: {
OtherComponent // If markdown has `<other-component>` in body, will work :)
},
render (createElement) {
return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
},
created () {
- this.templateRender = new Function(fm.vue.render)();
- this.$options.staticRenderFns = new Function(fm.vue.staticRenderFns)()
+ this.templateRender = fm.vue.render;
+ this.$options.staticRenderFns = fm.vue.staticRenderFns;
}
}
See migration guide: https://hmsk.github.io/frontmatter-markdown-loader/migration.html#migrate-to-3
https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.3.0...v3.0.0
Published by hmsk about 5 years ago
vue.transformAssetUrls: false
to disable transformationhttps://github.com/hmsk/frontmatter-markdown-loader/compare/v3.0.0-1...v3.0.0-2
Published by hmsk about 5 years ago
vue.transformAssetUrls
option to configurehttps://github.com/hmsk/frontmatter-markdown-loader/compare/v3.0.0-0...v3.0.0-1
Published by hmsk about 5 years ago
Pre-Release of #74 which supports transpiling assets on markdown body for Vue
https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.3.0...v3.0.0-0
Published by hmsk about 5 years ago
https://github.com/hmsk/frontmatter-markdown-loader/pull/69
Mode.REACT
requests to get function which renders React component.
{
test: /\.md$/,
loader: 'frontmatter-markdown-loader'
options: {
mode: [Mode.REACT]
}
}
import React from 'react'
import { react as Sample } from './sample.md' // <-- THIS
export default function OneComponent() {
return (
<div>
<h1>Content</h1>
<Sample /> <!-- This renders compiled markdown! -->
</div>
);
}
The React component can take prop for components on markdown 🔮
---
title: A frontmatter
description: Having ExternalComponent on the content
---
Hi, I'm a component. <MyDecorator>Apparently, this sentence will be made bold and italic</MyDecorator>
import React from 'react'
import { react as Sample } from './sample.md'
export default function DecoratedMarkdown() {
const BoldAndItalic = ({children}) => <strong><i>{children}</i></strong>
return (
<div>
<h1>Content</h1>
<Sample MyDecorator={BoldAndItalic} />
</div>
);
}
https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.2.0...v2.3.0
Published by hmsk about 5 years ago
.md
returns react
property which is renderable React componenthttps://github.com/hmsk/frontmatter-markdown-loader/compare/v2.2.0...v2.3.0-0
Published by hmsk about 5 years ago
markdownIt
option to configure markdown-it
or giving an instance of markdown-it
renderer
https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.1.0...v2.2.0
markdown-it
9 -> 10https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.0.0...v2.1.0
Published by hmsk about 5 years ago
/doc
and deployed to the page
See the migration guide: https://hmsk.github.io/frontmatter-markdown-loader/migration.html
options.mode
body
vue: true
is replaced with VUE_COMPONENT
mode, VUE_RENDER_FUNCTIONS
modeRefer https://hmsk.github.io/frontmatter-markdown-loader/options.html#mode to understand each mode.
attributes._meta
meta
on the top levelMETA
mode should be enabled to importPublished by hmsk about 5 years ago
https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.0.0-0...v2.0.0-1
Published by hmsk about 5 years ago
mode
option
mode
options selectively #53attributes._meta
to meta
on the top-levelhttps://github.com/hmsk/frontmatter-markdown-loader/compare/v1.8.0...v2.0.0-0
Published by hmsk over 5 years ago
https://github.com/hmsk/frontmatter-markdown-loader/compare/v1.7.0...v1.8.0
Published by hmsk over 5 years ago
import md from "docs/frontmatter.md";
md.attributes._meta.resourcePath //=> "/Users/hmsk/my-webpack-project/docs/frontmatter.md"
https://github.com/hmsk/frontmatter-markdown-loader/compare/v1.6.1...v1.7.0
Update dependencies
https://github.com/hmsk/frontmatter-markdown-loader/compare/b87ade5...v1.6.1
Published by hmsk about 6 years ago
import something from "something.md"
export default {
extends: something.vue.component,
components: {
OtherComponent // If markdown file has `<other-component>` in its body, will work :)
}
}