Have ideas to improve npm?Join in the discussion! »

    xyaml-webpack-loader

    0.7.1 • Public • Published

    Extended YAML loader

    xyaml-webpack-loader loads YAML files with custom schema. Out of the box it supports:

    It also supports rollupjs.

    Install

    npm i -D xyaml-webpack-loader
    # or 
    yarn add -D xyaml-webpack-loader

    Configure Webpack

    // webpack.config.js
    module.exports = {
      // ...
      module: {
        rules: [{
          type: 'json',
          test: /\.yaml$/,
          use: 'xyaml-webpack-loader',
          options: { // default configuration
            markdown: {
              use: {
                'markdown-it-headinganchor': {} // you can specify `false` to disable plugin
                'markdown-it-attrs': { leftDelimiter: '@{' }
              }
            }
          }
        }]
      }
    }

    You can configure markdown-it parser to use any modules, by specifying them in use option.

    Configure rollup

    // rollup.config.js
    import yaml from 'xyaml-webpack-loader/rollup';
     
    export {
      // ...
      plugins: [
        yaml({
          markdown: { // default configuration, no need to provide
            use: {
              'markdown-it-headinganchor': {} // you can specify `false` to disable plugin
              'markdown-it-attrs': { leftDelimiter: '@{' }
            }
          }
        })
      ]
    }

    Example YAML

    # about-us.page.yml 
    title: About us
    meta:
      title: About
      keywords: About
      description: About description
    content: !md | # Pay attention to the !md prefix 
      My first paragraph
     
      * some bullet points
      * another bullet point
     
      [link to some site](https://some.site.com)
     
      ### Additional information 
     
      * Other bullet points
      * Final words

    Example Usage

    import aboutUs from './about-us.page.yml';
     
    console.log(aboutUs.content) // rendered HTML string

    Use parser

    You can also use parser programatically:

    const { parse } = require('xyaml-webpack-loader/parser');
    const fs = require('fs');
     
    const content = parse(fs.readFileSync('about-us.page.yml'));

    Advanced Markdown configuration

    Some markdown-it plugins accept more than single options argument (e.g., markdown-it-container). In such cases, we can specify an array of options:

    const options = {
      markdown: { // default configuration, no need to provide
        use: {
          'markdown-it-container': ['image', {
            // other options here
          }]
        }
      }
    };

    Or if we need to call the same plugin multiple times, we can use a function:

    const options = {
      markdown: { // default configuration, no need to provide
        use(parser, applyPlugins) {
          applyPlugins(parser); // apply default plugins
          parser.use('markdown-it-container', 'image', {
            // other options here
          });
          parser.use('markdown-it-container', 'spoiler', {
            // other options here
          });
        }
      }
    };

    Keywords

    none

    Install

    npm i xyaml-webpack-loader

    DownloadsWeekly Downloads

    30

    Version

    0.7.1

    License

    none

    Unpacked Size

    8.45 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar