npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eleventy-plugin-text-mapper

v0.1.10

Published

Render TextMapper hex maps in 11ty

Downloads

5

Readme

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:

  1. Add the plugin to package.json:
{
    "devDependencies": {
        "eleventy-plugin-text-mapper": "^0.1.4"
    }
}
  1. 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.