Eleventy-plugin-text-mapper NPM

TextMapper plugin for 11ty

A plugin to bring the beautiful hex maps of Alex Schroeder's TextMapper to 11ty.

A thin plugin wrapper around text-mapper.js.

Usage

For the TextMapper syntax, see the examples in text-mapper.js, those generated by the original TextMapper and the help pages.

To enable the plugin for your 11ty website:

Add the plugin to package.json:

{
    "devDependencies": {
        "eleventy-plugin-text-mapper": "^0.1.4"
    }
}

Add the plugin to .eleventy.js:

const eleventyTextMapperPlugin = require("eleventy-plugin-text-mapper")
module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(eleventyTextMapperPlugin)
}

Maps as asset

After you have enabled the plugin, you can add *.txtmap files to your assets/ folder and use the rendered SVG file in your pages.

For example, if your TextMapper file is at assets/gnomeyland-example.txtmap, you would include the resulting SVG as <img src="/assets/img/gnomeyland-example.svg" style="display: block; margin: 0 auto" width="80%" alt="..." /> in your Markdown pages.

Embed maps

Alternatively you can use TextMapper hex maps directly in your Markdown page using the TextMapper template tag:

## Visiting

You should visit Gnomeyland, the land of gnomes.  So you will not get lost, please take this map:

{% TextMapper 'width="30%"' %}
0106 dark-green fir-forest "Deep Forest" 30
0206 green bushes
0306 soil keep "The Keep"
0406 light-soil town "Safe Town"
0005-0506 trail

include gnomeyland.txt
{% endTextMapper %}

This will render as:

It optionally takes a parameter ('width="30%"' in the example above) that allows you to set custom attributes on the <svg /> tag, e.g. to control the size. The syntax supported for that attribute string is very basic: A comma-separated list of attr="value" pairs.