https://github.com/5t111111/middleman-emojifire

middleman-emojifire is a quite easy-to-use emoji extension for Middleman
https://github.com/5t111111/middleman-emojifire

Last synced: 2 days ago
JSON representation

middleman-emojifire is a quite easy-to-use emoji extension for Middleman

• Host: GitHub
• URL: https://github.com/5t111111/middleman-emojifire
• Owner: 5t111111
• Created: 2017-02-20T14:32:38.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-02-20T14:36:25.000Z (over 7 years ago)
• Last Synced: 2024-09-16T18:38:49.366Z (about 2 months ago)
• Language: Ruby
• Size: 6.84 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# middleman-emojifire 🔥

middleman-emojifire is a quite easy-to-use emoji extension for Middleman.

Given the below HTML source:

```html

The love :cat:

I move like cagey :tiger:

```


middleman-emojifire will convert it into like the following:

```html

The love 🐱

I move like cagey 🐯

```


In fact, emojifire wraps emojis with `` tags for future use (as be described later):

```html

The love 🐱



```


Note that these emojis are characters respresented by unicode.

Unlike the ways of most extensions to display emoji, they are not replaced by images.

This means that modern OS/browsers can display them without extra downloads.

However, what if you want to put popular emoji which does not have unicode representation like :shipit:?

When a unicode repsentation for an emoji is not found, emojifire fallbacks it to an image with inline styles:

```html



```

## Usage

Add the following to Gemfile:

```ruby

gem "middleman-emojifire"

```

And add the following to your `config.rb`:

```ruby

activate :emojifire

```

That's all.

## Fallback on platforms which do not natively support emoji

Since middleman-emojifire set some data-attributes including an image source URL in tag, you can easily write a fallback script to display images instead of characters.

Simply adding the below snippet into your JavaScript assets will work:

```javascript

document.addEventListener('DOMContentLoaded', function() {

  var emojiSupported = (function() {

    var node = document.createElement('canvas');

    if (!node.getContext || !node.getContext('2d') ||

      typeof node.getContext('2d').fillText !== 'function')

      return false;

    var ctx = node.getContext('2d');

    ctx.textBaseline = 'top';

    ctx.font = '32px Arial';

    ctx.fillText('\ud83d\ude03', 0, 0);

    return ctx.getImageData(16, 16, 1, 1).data[0] !== 0;

  })();

  if (emojiSupported) { return; }

  var emojiElements = document.getElementsByClassName('emoji');

  for (var i = 0; i < emojiElements.length; i++) {

    var element = emojiElements[i];

    var srcPath = element.dataset.fallback;

    if (typeof srcPath !== 'undefined') {

      element.innerHTML = '';

      element.style.overflow = 'hidden';

      element.style.display = 'inline-block';

      element.style.width = '1em';

      element.style.height = '1em';

      element.style.margin = '0 0.1em';

      element.style.backgroundSize =  '100% 100%';

      element.style.backgroundImage = "url('" + srcPath + "')";

      delete element.dataset.fallback;

    }

  }

});

```

It will detect if a platform supports emoji, and fallback to images if it does not.

## Thanks

- [middleman-gemoji](https://github.com/yterajima/middleman-gemoji) as reference for both concept and implementation

- http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript for native emoji support detection snippet in JS