eleventy-plugin-text-mapper
v0.1.10
Published
Render TextMapper hex maps in 11ty
Downloads
5
Maintainers
Readme
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.