Posts about python (old posts, page 47)

Nicoletta: Nikola's little sister

Last night I saw this post by James Harding explaining how to make a simple static blog using Flask.

It got me thinking... how hard would it be, and how much code would it take, to write the same functionality with as few dependencies as possible?

So, instead of breakfast and lunch I got a coffee and a sandwich, and you guys get Nicoletta a minimalistic static blog generator.

The dependencies are:

And how much code was it? I had guessed 25 lines, and was off by a lot, it's 40. I could cheat a little and bring it down to 25, but hey, what's the point?

The code is up at github and should be self explanatory. If it's not, just ask here in the comments.

Nikola 6.0.0 released

Finally! This took a while because there was a lot of work done, but release 6.0.0 of Nikola my static site and blog generator is out.

Details, files, etc at github

I have tried, for this release, to do things better, be more careful and document as much as possible, as well as tried to hit most things that were hard to fix in a single backwards incompatible break.

Some of the new features are described in a series of blog posts: 1 2 3 4 5

Also: brand new modern themes site: http://themes.getnikola.com and new domain http://getnikola.com among many other tweaks.

Have fun!

Magic Mystery Forum Revisited

A long time ago I wrote a hackish minimalistic forum software, which used Disqus as a backend. Just to see if it still worked after 2.5 years, I took a look... and it sort of did.

So, since I know much more about websites now than I did back then, I cleaned it up a little and deployed it at http://forum.ralsina.me

Mostly, what I have learned in those 2.5 years is that bootstrap and JQuery are cool, and here is the before/after image so you can see why.

And yes, it's still 32 lines of code. I removed a comment because Disqus works better now and the rest is all template changes, done using http://jetstrap.com

/galleries/random/before-after.thumbnail.png

New in Nikola v6 part V: LESS is more

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: LESS

Unless you are happy with your site looking like straight bootstrap (and you really should not) CSS goes a long way towards making your pages look just the way you want them to.

The bad part is that, if you have done any CSS you will know CSS is a really, really crappy "language". That's why a whole philum of tools has been created that take a more powerful syntax and output CSS.

Nikola now has support for one of these, called LESS (although adding support for others like SASS should be very easy).

So, how does it work?

  1. In your theme, put LESS files in the less/ folder.
  2. Create less/targets and put there the files that should be compiled using lessc, one per line.
  3. There is no step 3

Nikola will automatically build output/assets/css/foo.css out of theme/foo/less/foo.less and will even support the usual theme inheritance, so if there ever is a LESS-based theme out there, you can just tweaks the files you want.

I personally am not writing that hypothetical LESS-based theme, but I am more than ready to help whoever wants to do one.

New in Nikola v6 part IV: Awesome Auto Mode

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: Auto Mode

Nikola has had, since day one, a way to run in "auto mode". That means that it would rebuild the site automatically when it saw a file change. That was provided by doit the cool software that handles nikola's task tree.

The problem was that it was slightly limited, and it didn't notice configuration changes, or when you added new files. It only reacted to changes in things it already knew as dependencies.

Well, in v6, Nikola has a new auto mode courtesy of Python Livereload that fixes all that.

I think the best way to show it is with a video, so here it is (there are typos and such, just see the big picture ;-):

New in Nikola v6 III: comment alternatives

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: Comments

Nikola has supported 3rd party comment services since day one. Because it started as "something that generates my site", it supported the comment system I was using (and still am using), Disqus.

There is nothing wrong with Disqus, and it will be the default in v6, but if you want something else... we got you covered.

So Nikola v6 supports:

All with just minor changes in your config. Because of how it's done, all themes will support all comment systems with at most very minor tweaks.

If you know of any other comment systems worth supporting, just open an issue and I'll get them in.

UPDATE
Thanks to Kwpolska and punchagan now Google+ and Facebook are also supported for comments.

New in Nikola v6 part II: We Love Javascript

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: Javascript

So, Nikola builds static pages. Like I often say, that doesn't mean they have to be boring. IN this release, Nikola's templates are organized in such a way that it's easy to create complex javascript-based layouts. Let's see an example.

Yesterday I showed you a nicely typeset page containing A Study in Scarlet. If you have not seen it yet, check it out, it has typographical quotes and dashes, justified text and hyphenation.

In fact, if you resize your window to be "phone-sized" it works quite comfortably as a way to read. I would say the text layout is better than in the Kindle for Android app, for instance.

So, what about going further in that direction? Why not make that specific webpage work more like an ebook reader? Indeed let's do that!

First, we need to use a custom template for that specific page. That's easy using the template page metadata:

.. date: 2013/08/27 18:20:55
.. title: A STUDY IN SCARLET.
.. slug: a-study-in-scarlet
.. template: ebook.tmpl

===================
A STUDY IN SCARLET.
===================

By A. Conan Doyle [1]_
======================

And now, the fun part: let's do a very hackish JQuery script to make it look like an ebook reader! You have to put this code in templates/ebook.tmpl in your site. Code offered without comments mostly out of shame because I suck at JS:

## -*- coding: utf-8 -*-
<%inherit file="post.tmpl"/>
<%block name="extra_head">
</%block>
<%block name="content">
<div id="container" style="overflow:hidden; width: 100%;">
<div id="paginate">
%if title:
    <h1>${title}</h1>
%endif
    ${post.text()}
</div>
</div>
<div class="pagination" style="width:100%; text-align: center;">
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
</div>
</%block>

<%block name="extra_js">
<script src="http://beneverard.github.io/jqPagination/js/jquery.jqpagination.js"></script>
<script>
var split_count=1;
var ready = false;
function current_page() {
// returns the current page, zero-based
    return Math.floor(($('#container').scrollLeft() +1) / $('#container').width())
}

$(document).ready(function(){
    $('#container').height($(window).height()-150-$('.pagination').height());
    split_count = Math.ceil($('#paginate').height() / ($('#container').height()))+2;
    $('#paginate').css('-webkit-column-count', ''+split_count);
    $('#paginate').width(split_count * $('#container').width());
    $('#paginate').height($('#container').height());
    $('.pagination').jqPagination({
        max_page: split_count,
        paged: function(page) {
            if (current_page() != page-1 && page >= 1)
            {
                $('#container').animate({scrollLeft: (page-1)*$('#container').width()}, 400);
                location.hash = 'page---'+page;
            }
        }});
    ready = true;
    hash_handler();
});

$('#container').scroll(function(){
    //$('.pagination').jqPagination('option', 'current_page', current_page()+1)
    });

function hash_handler() {
if (ready && location.hash) {
        if (location.hash.slice(0,8) == '#page---') {
            page = parseInt(location.hash.slice(8));
        }
        else {
            target = $(location.hash);
            w = $('#container').width();
            page = Math.ceil((target.position().left-target.height()+ $('#container').scrollLeft())/w);
        }
        if (page >= 1) {
            $('.pagination').jqPagination('option', 'current_page', page);
        }
    }
}
$(window).on('hashchange', hash_handler);
</script>
</%block>

Before showing you the end result, list of known bugs!

  • If you resize your window, the layout doesn't adjust.
  • If you resize your window, the number of pages changes.
  • Some chapters' links miss by a page in either direction.
  • No keyboard shortcuts.
  • It only sort-of-works in chrome and maybe other webkit-based browsers

And here is the end result. Enjoy!

New in Nikola v6 part I: Typography

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: Typography.

Nikola used to suck at this. It produced sites like most websites: absolute garbage when it came to typography. So, we fixed it.

Here is what a certain section of A Study in Scarlet looked like when built using Nikola 5.5.1 (the current release):

Looks like a webpage, right?

/galleries/random/sherlock1.png

The first things that suck in that image are the quotes and dashes. They are ASCII quotes, straight and dull, and dashes rendered as --. A solution for this has existed for a long time in the form of smartypants by Jon Gruber. There is a project called typogrify which integrates that and more to help improve HTML output. So, it is now (optionally) integrated into Nikola.

This change in your conf.py enables it:

from nikola import filters
FILTERS = {
".html": [filters.typogrify],
}

Nice typographical quotes and dashes.

/galleries/random/sherlock2.png

The final thing that needs improving is that ragged right edge. That's a CSS fix, and easy to do. Just put this in files/assets/css/custom.css:

div.section>p {
    text-align: justify;
}

Not so ragged. But not right.

/galleries/random/sherlock3.png

If you care about typography, you will know what's wrong in that image. See how every line breaks right between words, and the right edge is not exactly aligned? That's because the words are not hyphenated. And that sucks! Hyphenation algorithms have existed for 40 years, why are we not using them? Well, let's use them then! Thanks to Pyphen and some HTML manipulation now Nikola can do it, if you set HYPHENATE = True in your conf.py:

Finally, decent looking text.

/galleries/random/sherlock4.png

By the way, if you click on the figure and use the arrows, you can see how it changes on each iteration. You can see the whole page with all this applied (and/or read A Study in Scarlet) at http://hyphenated.ralsina.me/stories/a-study-in-scarlet.html

The best reStructuredText directive ever. Really.

It all started quietly with an Issue in the Nikola bug tracker:

gustavodiazjaimes opened this issue 3 hours ago
oembed by micawber - feature sugestion

instead of using specific code for embed object (Youtube, Vimeo, Soundcloud) use a generic solution like https://github.com/coleifer/micawber

So, I looked at micawber. And it's awesome and I had never heard of it before. What it does is, it looks at a URL, and if it knows the site where it's pointed at, it will then gather information from it. And using that information it will create for you a HTML fragment so you can embed it in your own HTML page.

And how hard is it to turn that into a reStructuredText directive? NOT HARD AT ALL.

import micawber

class Media(Directive):
    """ Restructured text extension for inserting any sort of media using micawber."""
    has_content = False
    required_arguments = 1

    def run(self):
        providers = micawber.bootstrap_basic()
        return [nodes.raw('', micawber.parse_text(self.arguments[0], providers), format='html')]

So now, in Nikola's github master you can do this:

.. media:: http://www.flickr.com/photos/ralsina/7827374994/

-----

.. media:: http://www.youtube.com/watch?v=cEh5cLqxgpA

And get this:

DSCN0327

Micawber supports many sites, and more can be added. So, thanks coleifer and gustavodiazjaimes for bringing this up :-)

New Nikola Galleries

One of the requirements I had for Nikola my static site/blog generator, was that it should build image galleries. And that it should show the images sorted by date, and that it should be functional and nice.

Well, the nice part has been lacking for a long time. But I think I have a grasp on it now.

Here's before:

And Here's after:

It's not perfect yet (it's not responsive) but I think it does a really good job at laying out the images, thanks to flowr.js

Here is a more extensive demo, showing it handling a much larger gallery: