-- 3 min read

Eevee the Pokémon

Introduction

Eevee is a theme for Pelican, based on Google’s Material Design specification that I released in June 2016.

Schema.org is a collaborative effort, including private companies like Google and the open source community to promoter adding additional structure to data that indentifies what parts of HTML are being used for, for example it can help a search engine understand what content is more important to index or, it can help a user with a screen reader get to the important content more easily. These structures are more commonly known as microformats or microdata.

Structure is a beautiful thing

HTML — by it’s very design is structured — the difference is that the content defines or modifies that structure.

By using microformat data structures from schema.org you can define what elements are more prominent or important through a large set of additional vocabulary, improving the experience for everyone …

 -- 1 min read

Eevee the Pokémon

This week I pushed the 0.0.3 update for my Pelican theme Eevee containing new and improved styling for share buttons and adding the ability to use Muut instead of Disqus for comments.

Share button changes

The original styling of the share buttons wasn’t particularly pretty.

Eevee's original share button styling

They badly needed a make over, and so they were restyled to be more prominent, look less out of place and randomly pasted in to the page and to have a colour scheme that matches the social media site they share to.

Eevee's new 0.0.3 share button styling

These buttons appear on articles and pages, but when viewing an article with DISQUS_SITENAME or MUUT_SITENAME enabled a fourth button is shown that links to the comments section of the current article.

Eevee's new 0.0.3 article share button styling

Comments powered by Muut

To enable commenting with Muut, simply modify pelicanconf.py and set the Muut site name.

MUUT_SITENAME = 'somethinghere'

This will automatically cause Eevee to enable …

 -- < 1 min read

Lightbox

Introduction

With the release of my Eevee theme for Pelican, I realised displaying a thumbnail image of the theme that linked to a larger image wasn’t the most appealing design choice. I prefer to leave Javascript out of the equation where possible, being one of those weird people that have it disabled by default.

As such I sought out a way to create a pure CSS equivalent of a Lightbox and turn it in to an RST directive to plug directly in to Pelican.

 -- 1 min read

Eevee the Pokémon

Introduction

Eevee is a theme for Pelican, based on Google’s Material Design specification that I released in June 2016.

Eevee allows configuring menu links in the header and footer of a template — including social links.

Eevee also includes Font Awesome by default, at time of release and writing of this article it provides Font Awesome version 4.6.3.

Because the links are totally customisable, it means you can inject HTML directly in to a link name and — because Font Awesome is included by default — you can inject Font Awesome icons in to link names using HTML.

Social icons in Eevee menu
 -- < 1 min read

Haunter, the evolved Pokémon form of Gastly

(Image by Kawiku)

Introduction

Hauntr is a minimal, lightweight and clean theme for the Pelican blogging platform.

It is named after the Pokémon ‘Haunter’ because it is a modified version (you might say evolved) of my previous theme, Ghastly.

Features

  • Disqus
  • Pygments
  • CSS minifying using webassets
  • Share buttons
  • Custom 404 page
 -- < 1 min read

Pelican FontAwesome allows you to embed FontAwesome icons in your RST posts and pages.

Installation

To install pelican-fontawesome, simply install it from PyPI:

$ pip install pelican-fontawesome

Then enable it in your pelicanconf.py

PLUGINS = [
    # ...
    'pelican_fontawesome',
    # ...
]

Include the FontAwesome CSS in your base template.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Usage

In your article or page, you simply need to add a reference to FontAwesome and then the icon name.

:fa:`fa-github`

Which will result in:

<span class="fa fa-github"></span>

And the user will see:

You can also increase the size, just like the FontAwesome documentation shows.

:fa:`fa-github fa-4x`

Will result in:

License

MIT license.

 -- 3 min read

Pelican is a Python-powered static blog generator that processes ReStructuredText and Markdown articles and pages and converts them to HTML. I use Pelican to power this blog.

There is a YouTube RST directive built in to Pelican core but it really shouldn’t exist there.

I submitted a pull request for Pelican core to enable Vimeo videos in articles but that request was declined because it didn’t belong in the core. So I decided I would write it as a plugin instead and while I was doing it, also wrote a plugin for YouTube so that it could be removed from the core.

There is a decent amount of detail in the Pelican documentation on how to write plugins, I’m not going to cover the whole process but I thought I would cover a little of what I did.

Adding an RST directive

Really all we’re doing …