While writing my last post I seeked for information about how to include plugins in Jekyll. Jekyll repo wiki describes how easy is to write and hook specific logic to your Jekyll site.

Nonetheless, if you are using Github as hosting to deploy your Jekyll site, you cannot use plugins :worried:.

1. Include the gemoji dependency in your Gemfile

gem 'gemoji', :require => 'emoji/railtie'

2. Add a configuration attribute in the _config.yml file

This folder will contain the emoji icons.

emoji:    gfx/emoji

3. Write a rake task into the Rakefile

This rake task copies the icons included in the gemoji gem into your Jekyll site folder. It also generates a CSS file.

desc 'Generate emoji CSS styles'
task :emoji do
  puts green 'Generating emoji CSS...'

  require 'jekyll'

  site = Jekyll::Site.new(Jekyll.configuration({}))

  path = site.config['emoji']

  if !path.empty? and !File.exists?("#{path}") and !File.exists?("#{path}/smiley.png")
    Dir::mkdir path

    _css = %[.emoji {
  width: 20px;
  display: inline-block;
  text-indent: -2000px;
}

]

    Dir["#{Emoji.images_path}/emoji/*.png"].each do |src|
      FileUtils.cp src, path
      *_, file = src.split("/")
      *emoji_name, _ = file.split(".")
      _css += %[.emoji_#{emoji_name.join(".")} {
  background:url("/#{path}/#{file}") no-repeat scroll 0 center transparent;
  background-size: 20px auto;
}

]
    end

    File.open "css/emoji.css", 'w+' do |file|
      file.write _css
    end
  end
  puts green 'Done!'
end

4. Execute the rake task

rake emoji

Now you can check the generated CSS file that defines a specific style per emoji icon and the png files (the emoji icons) copied into the configured folder.

5. Include the generated CSS file into HTML layouts

<link rel="stylesheet" href="/css/style.css">

6. Write a plugin that converts the emoji tags in HTML tags

Copy this content into the file _plugins/emoji.rb

require "gemoji"

module Jekyll
  module EmojiFilter

    def emojify(content)
      if @context.registers[:site].config['emoji']
        content.to_str.gsub(/:([a-z0-9\+\-_]+):/) do |match|
          if Emoji.names.include?($1)
            "<span class='emoji emoji_#{$1}'>#{$1} emoji</span>"
          else
            match
          end
        end
      else
        content
      end
    end # emojify

  end # EmojiFilter
end # Jekyll

Liquid::Template.register_filter(Jekyll::EmojiFilter)

7. Emojify your content!

Concat the filter emojify in the layouts where you want to include emojies.

<div id="post" role="main">
  <header>
  <h2><a class="fadedlink" href="/" title="Home">&laquo;</a> CSS changes
    <small>28 Oct 2012</small></h2>

  <nav>
    <ul class="clearfix">
      
      <li><a href="/categories/index.html#css">css</a></li>
      
    </ul>
  </nav>
</header>

<div id="post" role="main">
  <p>Today I’ve been changing a bit the CSS that creates the layout of this site. Almost the whole style was defined by my pal <a href="http://www.twitter.com/rafeca">@rafeca</a> while creating <a href="http://www.rafeca.com">his blog</a>. I have borrowed it :smile:.</p>

<p>Although I am not an expert on CSS, I like hacking a bit of this :squirrel:.</p>

<p>I summarize the changes in the following sections.</p>

<h2 id="bottom-links-showing-a---character">Bottom links showing a “-“ character</h2>

<p>I think this is a common issue in a lot of sites: when you define a link containing an image, it may appear an annoying hyphen character on the right side of the image when the cursor is hover it. It’s been happening in this blog on the footer links.</p>

<p>To change this behavior, remove the <strong>img</strong> element and define the image as background, ensuring the text inside the <strong>a</strong> element is indented outside the screen, far away from the visible divs.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html">    <span class="nt">&lt;footer&gt;</span>
      <span class="c">&lt;!-- Before --&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"fadedlink"</span> <span class="na">href=</span><span class="s">"https://github.com/juandebravo"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/gfx/github-logo.png"</span> <span class="na">alt=</span><span class="s">"@github"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="c">&lt;!-- Now --&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"fadedlink footer_link github"</span> <span class="na">href=</span><span class="s">"https://github.com/juandebravo"</span><span class="nt">&gt;</span>
        @github
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/footer&gt;</span></code></pre></figure>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.footer_link</span> <span class="p">{</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">25px</span><span class="p">;</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
  <span class="nl">text-indent</span><span class="p">:</span> <span class="m">-1000px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.github</span> <span class="p">{</span>
  <span class="nl">background</span><span class="p">:</span> <span class="sx">url("/gfx/github-logo.png")</span> <span class="nb">no-repeat</span> <span class="nb">scroll</span> <span class="m">0</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>

<h2 id="increase-body-font-size">Increase body font size</h2>
<p>This one is the easiest :sweat_smile:.</p>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.4</span><span class="p">;</span>
  <span class="c">/* Before */</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span>
  <span class="c">/* Now */</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>

<h2 id="list-style-type">List style type</h2>

<p>In both the <a href="/index.html">main</a> and the <a href="/open_source.html">open source</a> pages, while defining <strong>li</strong> elements the default circle character was being used. I’ve changed the CSS to support an Unicode code point using the <strong>:before</strong> clause.</p>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.container</span> <span class="nt">ul</span><span class="nc">.posts</span> <span class="p">{</span>
	<span class="c">/* Do not use list decoration */</span>
    <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.container</span> <span class="nt">ul</span><span class="nc">.posts</span> <span class="nt">li</span><span class="nd">:before</span> <span class="p">{</span>
	<span class="c">/* Add a before content */</span>
	<span class="nl">content</span><span class="p">:</span> <span class="s1">"\0445"</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>

<h2 id="predefined-width-on-the-left-side-while-indexing-stuff">Predefined width on the left side while indexing stuff</h2>

<p>The <a href="/index.html">main</a> page shows a the list of posts titles and their posting date. The content was not aligned:</p>

<p>Before:</p>

<li class="post" style="list-style-type:none; padding-left: 30px">
  <span>05 Aug 2012</span>
  <a title="Ensuring Array as object type" href="/2012/08/05/ensuring-array-as-object-type">Ensuring Array as object type</a>
</li>
<li class="post" style="list-style-type:none; padding-left: 30px">
  <span>24 Jul 2012</span>
  <a title="Things I like using python (part II)" href="/2012/07/24/why-python-rocks_and_two">Things I like using python (part II)</a>
</li>

<p>After:</p>
<li class="post" style="list-style-type:none; padding-left: 30px">
  <span class="left_title">05 Aug 2012</span>
  <a title="Ensuring Array as object type" href="/2012/08/05/ensuring-array-as-object-type">Ensuring Array as object type</a>
</li>
<li class="post" style="list-style-type:none; padding-left: 30px">
  <span class="left_title">24 Jul 2012</span>
  <a title="Things I like using python (part II)" href="/2012/07/24/why-python-rocks_and_two">Things I like using python (part II)</a>
</li>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.left_title</span> <span class="p">{</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
  <span class="nl">min-width</span><span class="p">:</span> <span class="m">110px</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>



  <p class="back">&laquo; <a href="/">Home</a></p>
</div>

<!--h2>Related Posts</h2>
<ul class="posts_list">
  
    <li class="post">
  <a href="/2023/03/27/get-pull-requests-metrics-with-chat-gpt/" title="Get Pull Request metrics with chat-gpt">Get Pull Request metrics with chat-gpt</a>
  <span class="date">(27 Mar 2023)</span>
</li>

  
    <li class="post">
  <a href="/2023/03/26/mount-external-volume-write-permissions/" title="How to mount an external volume with write permissions">How to mount an external volume with write permissions</a>
  <span class="date">(26 Mar 2023)</span>
</li>

  
    <li class="post">
  <a href="/2020/03/15/tid-x-registration-flow-with-arengu/" title="TID-X registration flow with Arengu">TID-X registration flow with Arengu</a>
  <span class="date">(15 Mar 2020)</span>
</li>

  
</ul-->

<hr />

<h2>Comments</h2>
<div id="disqus_thread"></div>
<script type="text/javascript">
  /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  var disqus_shortname = 'juandebravo'; // required: replace example with your forum shortname
  //var disqus_developer = 1; // developer mode is on, for testing locally

  /* * * DON'T EDIT BELOW THIS LINE * * */
  (function () {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
    Disqus.</a></noscript>

  
  <p class="back">&laquo; <a href="/">Home</a></p>
</div>

8. Write an emoji in a markdown file and run the server

For instance to include a smile, write :smile:

9. Run jekyll

jekyll --server --auto

10. Enjoy

:neckbeard: :squirrel: :bug: :monkey: :scream: :hankey: :smile:

« Home