Actions

Testing 1,2

From /oooooooooo.io/

Testing 1,2 - New Site

2015.08.22

So I got myself a new site - well not really. I essentially changed the backed and left the same front-end.

I got frustrated with the lack of flexibility and difficult maintenance of the previous back-end, built in Django. Although I quite like Django, it was an overkill for my little website. So I decide to KISS (Keep It Simple Stupid).

In order to keep it simple and easy I chose to employ the same method I've used in the development of Beyond Social and Media Design Gradshow website. Essentially it involves the creation a CMS from scratch, based on 3 components:

  • A Wiki that serves as back-end.
  • Pandoc & Python scripts which work as the glue that "connects" back-end and front-end.
  • Static HTML files that form the front-end of the website.

I'll describe how each component and the role it plays in creation of this CMS.

Components

Wiki

http://wiki.pinknoi.so/

Wikis, and specially [Mediawiki](http://mediawiki.org/), constitute an a web application dedicated to collaborative content creation. It enforces little editorial structure, allowing workflows and hierarchical structures to be implemented based on project's needs (by using categories, templates, namespaces, user roles, etc). It includes a system of revisions, which keeps track of each edit performed on a page. And through its own markup it enforces semantic structuring of the content, making it possible to convert the content from Mediawiki pages onto other markups such as HTML.

Despite all these positive aspects, in my opinion Mediawiki suffers from a lack of readability difficult navigation. It is not easy to move inside a wiki, get to the relevant content, and read it. It feels more like a editing environment than a comfortable and appealing reading environment. It is possible to change is appearance, but the effort would be so great that I am not sure if it would be worth it. Besides wikis have many components, such as special pages, templates, revisions, talk pages, and user pages, which make it a very powerful and open-ended tool, but it also creates a lot of clutter for the user who just wants to read an article.

Given that Mediawiki installations also include a Web API, which allows applications and scripts to request content and information form the wiki in question, and makes it possible to use the wiki as a back-end, I decided to head that direction and build a separate front-end, based on the previous website style and structure.

In order to create a macro-structure within the wiki, to give it some a organization which will be reflected in the front-end, in each new page is given a Page template, that includes its Page type and Date. As a result each page will placed both within a page type - Blog, Works, Me, Neighbors - and chronological. The template for this post's page:

{{Page
|Page type=Blog
|Date=2015.08.22
}}

Glue: Pandoc & python scripts

In order to create a separate front-end for the content stored on the wiki, I wrote a Python script that:

  • Calls Wiki API, in order to fetch content from wiki pages.
  • Invokes Pandoc to convert the content from the wiki pages into HTML.
  • Injects the converted HTML content onto the HTML page template.
  • Saves each filled template into a new static HTML file.

Static HTML files

The template from which the static HTML files are created is essential a HTML page without content. It contains all the immutable elements - such as the structure, css style-sheet and metadata - necessary for the website and excludes all the variable elements, namely the content for each page. As a result this content-less HTML file can be used as template where content can be inserted into.

The source code for this workflow can be found in https://gitlab.com/Castro0o/pinknoiso-wiki2web

I should point the essential role that Pandoc plays in this workflow. Its simplicity and robustest is quite incredible, allowing flawless conversions to HTML. If you are not familiar with it, I suggest you check it, since it can be useful in so many contexts.

Other forms

For mere convince this materialization of a wiki turned out to be a conventional website, as did the Media Design Gradshow website or the Beyond Social web-publications, but there is no imposition on the form that such "translation" of a wiki might take. It can take the form of a EPUB publication or a visualization, just to name a few possibilities. As a proof-of-concept a few months ago I developed a visual map of the users and the articles each user edited for the Beyond Social project; and a history sequence of the material added or removed from the Wikipedia's article on the 2015 Baltimore protests.

Drop me an email, if you have thoughts on or are implementing similar publishing pipelines.


2015_08_22 Blog

Facts about "Testing 1,2"
SectionBlog +
Date
"Date" is a type and predefined property provided by Semantic MediaWiki to represent date values.
2015 +