Tuesday, March 8, 2016

Polymer on Blogger

I've had some fun over the past few weeks to force Polymer to work on Blogger, or rather to force Blogger to work with Polymer, and here are my results, some of which might be more useful than others.

A quick disclaimer before we get started:
This post definitely falls more into the "because I can" category than in the "because you should" category, and would need some extensive testing and tweaking before being used out in the wild.

Before getting started with the actual Blogger-related information, just a quick detour to...


...because it made my initial testing so much easier without having to worry about hosting all the dependencies myself at first.

In a nutshell Polygit a.k.a the Polymer Magic Server acts as a proxy to the source code of (Polymer) elements on Github, enabling you to import elements from Github which are spread across several repositories without having to worry about their actual location.

Polygit URLs can get quite unwieldy once you want to depend on specific versions or include elements outside of the default Polymer Element Catalog, but for the purpose of quick testing with paper-elements on the latest release just using http://polygit.org/components/ as base URL is good enough.

For example, to include the webcomponents polyfills and a paper-toolbar in your page you could use:

In theory you can also host your own magic server (source code) but in praxis you should rather host a (vulcanized) package of elements you need on a more reliable hosting solution. For now we are only doing some testing though, and polygit is really useful far that.

Blogger Layout Template

Before you go rushing off and change the layout of your blog, it might be a good idea to create a new blog for testing first. Start with one of the "Simple" template, i.e. not "Dynamic Views", and turn off the mobile template, since we are going to use paper-elements for a responsive layout. And for starters it might be a good idea to familiarize yourself a bit with the HTML or rather XML of the simple template to get an idea how a blogger template looks like.

But now without further ado, we're going to replace all of the XML with our own markup, which I'm going to explain bit by bit.

We start our template with some default blogger template stuff:

Still in the <head> we're going to need a meta viewport tag for responsiveness, the webcomponents polyfills for browsers without native webcomponents support, and some imports for the elements we're going to use. As mentioned above you will want to replace those polygit imports with elements hosted directly on a server (vulcanized if hosted on a non HTTP/2 server) if you are planning to use this in production.

The <b:skin> is a required part of a blogger template. It is usually used for styling, allowing the definition of variables that can then be changed in the template designer. In the rendered page this tag is turned into a <style> tag, but unfortunately we can't use it here, since we can't add the is='custom-style' extension for styling the Polymer elements.

Instead we are going to add the styles we want to the template directly. You will have to experiment a bit here, since blogger still forces some of its own CSS on the page, that will need overriding in some places.

We're going to start the <body> with some default blogger markup.

From there we are going to add some simple boilerplate paper layout. Since we are in XML and not in HTML we can't use "boolean" attributes like <paper-header-panel main> but instead have to assign a value to each attribute like <paper-header-panel main="true">. Any value is fine here, but blogger won't let you save the template otherwise.

The <b:section> are parts that get turned into divs in the rendered page, but are required by blogger to add dynamic widgets, like the <b:widget type='Blog'> that is responsible for actually displaying your blog posts. More about widgets below.

The blogger tag <data:blog.title> is used to display the title of the blog, so you don't have to update the template if you want to change the name of your blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>...</b:if> is conditional blogger markup, in this case to display the home button, only when your visitors aren't on the main page already.

And with this we already have a mostly responsive blog using Polymer paper-elements for layout, which admittedly still needs a lot of love to make it look good, but it's a start. You can get a preview (with some more stuff added as explained below) on my test blog.

Widgets, widgets everywhere

With the basic layout defined in the template, all extra information you might want to add to your blog, like a post archive for quick navigation, or some profile information about you, comes in the form of widgets.

To add widgets (or gadgets) you would go to the Layout section of Blogger, where you can then add widgets to the <b:section> areas you defined in the template. Unfortunately blogger doesn't seem to like custom elements, and doesn't "find" the b:sections inside of the paper-elements.

We're going to work around this problem by adding a hidden div with a widgets section right at the beginning of the body in the template

With this we can add and customize widgets in the hidden div.

Back in the XML editor for our template the widgets have been added in the source code...

...and can be cut and pasted into the drawer/sidebar section we already prepared.

And if you want you can then drill down into the source of the widgets and start replacing parts of them with Polymer elements as well. For example I've changed the widgets to be displayed inside of paper-cards by just making some small changes.

And there you have it, a responsive, Polymer-powered blog, that still needs a lot of styling and tweaking.

The sum of the parts might be greater than the whole

If you already have a blog layout that you are happy with, replacing the layout completely with a Polymer layout will in most cases not really be feasible or useful. But sometimes you might want to use a specific polymer element to display content inside of a blogpost in a nicer or easier way.

You can do that without changing your template by adding the markup you need to the blogpost itself. You should do this after a jump break to prevent all the dependencies from being loaded unless the post you want to use them in is being displayed.

I've actually used this technique to display all the code snippets on this page using marked-element in combination with prism-highlighter, which is the best solution I've found for easily displaying code on blogger for now:

Note: I needed to add some extra spaces in the above markup since inception breaks things and blogger doesn't like script tags inside of script tags, but marked-element luckily doesn't care about incorrect markup and for the rest of the code snippets in this post I didn't have any problems.

Final thoughts

So with some effort using Polymer on Blogger is definitely possible. And while I most likely won't be replacing my full blogger layout with Polymer just yet, I'll definitely continue to use the marked-element for displaying code in my blog posts from now on.