Releases: hmsk/frontmatter-markdown-loader
Releases · hmsk/frontmatter-markdown-loader
v3.0.0: Assets Transformation for vue.*
Assets paths in markdown body will be transformed
<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.
Breaking Changes
Relative path on assets attributes on Markdown body will be replaced with require(attributeValue)
videoelement:src,posterattributesourceelement:srcattributeimgelement:srcattributeimageelement:xlink:href,hrefattributeuseelement:xlink:href,hrefattribute
Custom element should have "closing tag" (or close itself) always
<child-element> (without closing tag) shoul be updated to <child-element />
vue.render, vue.staticRenderFns return function instead of source string
import 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
Other Changes
- Update devDependencies
v3.0.0-2
- Accept
vue.transformAssetUrls: falseto disable transformation - Update docs for release
v3.0.0-1
- Accept
vue.transformAssetUrlsoption to configure
v3.0.0-0
v2.3.0: Renderable React Component
Import markdown, render as React component 👾
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>
);
}Other Changes
- Update devDependencies
- Add optionalDependencies for React
- Start funding on https://www.buymeacoffee.com/hmsk
v2.3.0 beta 0
- Add "react-component" mode #69
- Importing
.mdreturnsreactproperty which is renderable React component
- Importing
v2.2.0: Support configuration for markdown-it
- Support
markdownItoption to configuremarkdown-itor giving an instance ofmarkdown-itrenderer - Update devDependencies
Special Thanks
v2.1.0
- Update dependency:
markdown-it9 -> 10
v2.0.0: Selective Import
- Save importing size as much as possible by introducing selective options
- The whole documentation is moved to
/docand deployed to the page
Breaking Changes
See the migration guide: https://hmsk.github.io/frontmatter-markdown-loader/migration.html
Introduce options.mode
- On the default, doesn't return
body vue: trueis replaced withVUE_COMPONENTmode,VUE_RENDER_FUNCTIONSmode
Refer https://hmsk.github.io/frontmatter-markdown-loader/options.html#mode to understand each mode.
Move attributes._meta
- To
metaon the top level METAmode should be enabled to import
Commits from v1.8.0
v2.0.0 beta 1
- Stop exporting multiple members Webpack doesn't expect that 902bc12