frontmatter-markdown-loader

Assets paths in markdown body will be transformed

#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.

Breaking Changes

Relative path on assets attributes on Markdown body will be replaced with require(attributeValue)

• video element: src, poster attribute
• source element: src attribute
• img element: src attribute
• image element: xlink:href, href attribute
• use element: xlink:href, href attribute

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

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.3.0...v3.0.0

• Accept vue.transformAssetUrls: false to disable transformation
• Update docs for release

https://github.com/hmsk/frontmatter-markdown-loader/compare/v3.0.0-1...v3.0.0-2

• Accept vue.transformAssetUrls option to configure

https://github.com/hmsk/frontmatter-markdown-loader/compare/v3.0.0-0...v3.0.0-1

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

Import markdown, render as React component 👾

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>
  );
}

Other Changes

• Update devDependencies
• Add optionalDependencies for React
• Start funding on https://www.buymeacoffee.com/hmsk

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.2.0...v2.3.0

• Add "react-component" mode #69
  • Importing .md returns react property which is renderable React component

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.2.0...v2.3.0-0

• Support markdownIt option to configure markdown-it or giving an instance of markdown-it renderer
  • https://hmsk.github.io/frontmatter-markdown-loader/options.html#configure-markdown-it
• Update devDependencies

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.1.0...v2.2.0

Special Thanks

• @selbekk for the new feature #67

• Update dependency: markdown-it 9 -> 10

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.0.0...v2.1.0

• Save importing size as much as possible by introducing selective options
• The whole documentation is moved to /doc and 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: true is replaced with VUE_COMPONENT mode, VUE_RENDER_FUNCTIONS mode

Refer https://hmsk.github.io/frontmatter-markdown-loader/options.html#mode to understand each mode.

Move attributes._meta

• To meta on the top level
• META mode should be enabled to import

Commits from v1.8.0

• https://github.com/hmsk/frontmatter-markdown-loader/compare/v1.8.0...v2.0.0

• Stop exporting multiple members Webpack doesn't expect that 902bc12

https://github.com/hmsk/frontmatter-markdown-loader/compare/v2.0.0-0...v2.0.0-1

• New configuration way with mode option
  • To improve build performance, the loader expects to be given mode options selectively #53
• Move attributes._meta to meta on the top-level
• Update dependencies

https://github.com/hmsk/frontmatter-markdown-loader/compare/v1.8.0...v2.0.0-0

• Update dependencies

https://github.com/hmsk/frontmatter-markdown-loader/compare/v1.7.0...v1.8.0

• Add _meta.resourcePath attribute 2dd5cca

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

Special Thanks

• @christianrank #35

Returns ready-made Vue component object

import something from "something.md"

export default {
  extends: something.vue.component,
  components: {
    OtherComponent // If markdown file has `<other-component>` in its body, will work :)
  }
}