Wondering what’s next for npm?Check out our public roadmap! »

    mangony

    2.0.0-alpha.9 • Public • Published

    Logo Mangony

    NPM version Build Status NPM install license

    Yet another static site generator - fast, simple, powerful and pluggable.

    Mangony fulfills just one task: It takes files, saves them in cache, use templates and compiles them to an output directory.

    Features

    Think of Assemble (grunt-assemble) with a smooth mango juice - yummy.

    1. Mangony can be used in Grunt, Gulp or standalone as npm module.
    2. By using the provided development server (express) every change is completed in no time, no matter how many pages you have in your project.
    3. Only changed pages get compiled.
    4. Creation of deep ids is possible for all types.
    5. For every type (data, partials, layouts, pages) Mangony adds a watcher (chokidar).
    6. HJSON is available.
    7. Handlebars version 4.x is integrated.
    8. Markdown pages with handlebars are supported.
    9. Markdown-it, markdown-it-attrs and markdown-it-named-headers are available.
    10. Mangony provides many handlebars-helpers:

    Installation

    Install Mangony with

    npm install mangony --save-dev

    For the installation of the Grunt plugin, see grunt-mangony.

    Usage

    Just create a new instance of Mangony:

    const app = new Mangony();

    Then render your mangony instance:

    app.render();

    To render files with a template engine you need to add a plugin. There are two engines provided to you, but you can easily create your own if you want to.

    When using the default options your files get compiled.

    Examples

    dev.js

    Let`s say we want to develop a new app.

    const Mangony = require(`mangony`);
    const app = new Mangony({
        allow: {
            YFMLayout: false,
            YFMContextData: false
        },
        compileStaticFiles: false
        cwd: `src`,
        dest: `dist/`,
        watch: true,
        types: {
            data: {
                dir: 'data',
                files: [
                    '**/*.json',
                    '**/*.hjson'
                ]
            },
            partials: {
                dir: 'partials',
                files: [
                    '**/*.hbs'
                ]
            },
            pages: {
                dir: 'pages',
                files: [
                    '**/*.hbs',
                    '**/*.md'
                ]
            },
            layouts: {
                dir: 'layouts',
                files: [
                    '**/*.hbs'
                ]
            }
        },
        helpers: [
            'helpers/*.js'
        ]
    });
    
    app.render();

    When using the devServer options all routes get registered.

    Now you can open your browser at localhost:3000 and navigate to the page you want to change. The url is the path to your page without a file extension (i.e. /index).

    prod.js

    Let`s say we want to build our app.

    const Mangony = require(`mangony`);
    const app = new Mangony({
        allow: {
            YFMLayout: false,
            YFMContextData: false
        },
        cwd: `src`,
        dest: `dist/`
        types: {
            data: {
                dir: 'data',
                files: [
                    '**/*.json',
                    '**/*.hjson'
                ]
            },
            partials: {
                dir: 'partials',
                files: [
                    '**/*.hbs'
                ]
            },
            pages: {
                dir: 'pages',
                files: [
                    '**/*.hbs',
                    '**/*.md'
                ]
            },
            layouts: {
                dir: 'layouts',
                files: [
                    '**/*.hbs'
                ]
            }
        },
        helpers: [
            'helpers/*.js'
        ]
    });
    
    app.render();

    Now you can find the complete rendered output in the destination folder.

    Options

    allow.YFMLayout (Boolean)

    • default: false

    Add the possibility to reference layouts in YAML front matter. {{{yield}}} will be replaced in your referenced layout with the content of the page.

    allow.YFMContextData (Boolean)

    • default: false

    Flag to add a specific data context for your page by referencing a data file id in YAML front matter.

    assets

    • default: "./"

    Path to your assets in your destination directory.

    collections

    • default: []

    Add your own collections which can be used in YAML front matter.

    compileStaticFiles

    • default: true

    Enable/disable the compiling of your files.

    cwd

    • default: "src"

    The current working directory.

    debug

    • default: false

    Print more comments in your terminal to debug a bit better ;).

    dest

    • default: "app"

    Output directory.

    devServer.bs

    • default: null

    You can pass your own Browser-Sync instance.

    devServer.bsEnabled

    • default: true

    You can disable browser-sync.

    devServer.bsOptions

    • default: null

    You can pass your custom Browser-Sync options object.

    devServer.express

    • default: null

    You can pass your own express instance.

    devServer.injectScript

    • default: true

    Set to false if you want to disable the injection of the browser-sync script.

    devServer.port

    • default: 3000

    Change the port of the development server.

    devServer.start

    • default: false

    Set to true if you want to use the provided development server.

    devServer.useExt

    • default: true

    Set to false if you do not want to use extensions in your routes.

    devServer.usePort

    • default: true

    Set to false if you have already a port provided to express.

    devServer.useAssetsDir

    • default: true

    Set to false if you have already an asset directory provided to express.

    exportData

    • default : false

    Export the complete data stack as JSON file.

    ext

    • default: ".html"

    Define the extension of your output files. This can be overridden per file by using YAML Front Matter or page.settings.json.

    flatten

    • default: false

    Flatten your output directory.

    helpers

    • default: ["helpers/*.js"]
    • relative to cwd

    Register custom handlebars helpers by providing the path. Globbing is possible.

    types (object)

    There are 4 necessary types which needs to be defined:

    • layouts
    • pages
    • partials
    • data

    Each type has the following options:

    types[type].createDeepIds

    For every type you can create deep ids. The whole path to the file will be used. That makes it possible to have multiple identical named data, partial, layout and page files in different folders.

    types[type].dir

    • default: "[type]"
    • relative to cwd

    You can change the type directory to any folder you like.

    Important: for every type directory Mangony creates a watcher if options.watch is true.

    types[type].files

    • default: ["**/*.[typeExtension]"]

    Pass an array of files to the files property. Globbing is possible.

    types[type].pathDelimiter

    • default: "/"

    By using deep ids the id is the path to your file. But using such ids in handlebars is not possible for your data files. That`s why you can define a path delimiter.

    watch

    • default: false

    Just enable the internal watching of file changes.

    Why Mangony?

    Static site generator and server?

    In general I love static site generators. Simply deploy the output and you`re done - great.

    But there is one major problem. When developing every change leads to the compiling of all pages. In large projects this is very time consuming.

    So why not just combine a server for development purpose with a static site generator?

    Special thanks goes to Henri Podolski for the idea and discussion.

    Assemble?

    For a long time I have worked with Assemble. It is a great tool and I like it a lot.

    The new Assemble (a full stack site generator) seems to be pretty nice, but it doesn`t fit so well in my current stack.

    Last but not least

    I just wanted to develop a static site generator.

    Test

    Just checkout the repository, install all dependencies with npm install and execute npm test.

    License

    see LICENSE.md.

    Install

    npm i mangony

    DownloadsWeekly Downloads

    130

    Version

    2.0.0-alpha.9

    License

    MIT

    Unpacked Size

    258 kB

    Total Files

    57

    Last publish

    Collaborators

    • avatar