mapnik · yohanboniface · Aug 4, 2015
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+index.html
+site/
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="Content-Language" content="en-GB" />
+
+        <meta name="description" content="Mapnik reference" />
+        <meta name="keywords" content="mapnik, Mapnik" />
+        <meta name="robots" content="index, follow" /> 
+        <meta name="DC.title" content="Mapnik C++/Python GIS Toolkit" />
+        <meta name="DC.subject" content="Mapnik GIS webmapping C++ Python" />
+        <meta name="DC.description" content="Mapnik is a toolkit for developing GIS applications" />
+        <meta name="DC.creator" content="Artem Pavlenko, artem at mapnik" />
+
+        <link href="http://mapnik.org/css/mapnik.css" rel="stylesheet" type="text/css" media="screen" />
+        <link href="./site/main.css" rel="stylesheet" type="text/css" media="screen" />
+        <link rel="shortcut icon" href="http://mapnik.org/images/favicon.ico" />
+        <link href='http://fonts.googleapis.com/css?family=Maven+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
+        <script src='./site/nanoajax.min.js'></script>
+
+        <meta charset=utf-8 />
+        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+        <title>Mapnik Reference</title>
+    </head>
+    <body>
+        <header class='sticky'>
+            <div id="navbar">
+                <div class='col12 clearfix prose'>
+                    <div class='col3 margin2'><a href='http://mapnik.org'><h2 class='space-top2 fancy dark'>mapnik</h1></a></div>
+                    <div class='col6 dark pad4y prose'>API reference<span id="version"></span></div>
+                </div>
+            </div>
+        </header>
+        <div class="contain col12 clearfix">
+                <div class='col2 stickymove pad2x' id="menu">
+                </div>
+                <div class='col8 pad4x stickymove' id="ref">
+                    <h2 class='space-bottom2 big'>API Reference</h2>
+                    <div id="symbolizers"></div>
+                </div>
+        </div>
+       <div class='content col12 center caption small fill-sea dark pad1y'>
+            Copyright © 2015 Artem Pavlenko  |  <a href='http://mapnik.org/pages/downloads.html'>Downloads</a>  | <a href='http://mapnik.org/pages/license.html'>License</a>  |  <a href='http://mapnik.org/pages/media.html'>Media</a>
+        </div>
+        <script src='./site/main.js'></script>
+        <script type="text/javascript">
+            UI.init();
+        </script>
+    </body>
+</html>
diff --git a/site/.eslintrc b/site/.eslintrc
@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true
+    },
+    "rules": {
+        "quotes": [2, "single"],
+        "curly": 0,
+        "new-cap": 0,
+        "strict": [2, "global"],
+        "semi-spacing": 0
+    },
+    "globals": {
+        "UI": true,
+        "nanoajax": true
+    }
+}
diff --git a/site/main.css b/site/main.css
@@ -0,0 +1,77 @@
+:link, :visited {
+    color: #c7726b;
+}
+#menu {
+    position: fixed;
+    width: 170px;
+}
+#ref {
+    margin-left: 170px;
+}
+#version:before {
+    content: '—';
+    padding: 0 5px;
+}
+*:target {
+    padding-top: 100px;
+}
+:target:link:hover {
+    background-color: transparent;
+}
+.symbolizer {
+    padding-bottom: 30px;
+}
+.symbolizer + .symbolizer {
+    padding-top: 20px;
+    border-top: 1px #ddd solid;
+}
+.status {
+    border-radius: 1px;
+    color: #fff;
+    font-size: 0.7em;
+    margin-left: 5px;
+    padding: 2px 5px;
+    vertical-align: middle;
+    background-color: #EB974E;
+}
+.status.deprecated {
+    background-color: #D64541;
+}
+p {
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+h2 {
+    padding-top: 0;
+}
+h3 {
+    margin-top: 20px;
+}
+.pad4y {
+    text-align: right;
+}
+em,
+strong {
+    font-size: 0.9em;
+}
+em {
+    color: #aaa;
+}
+b {
+    font-family: monospace;
+    font-size: 0.9em;
+    background-color: #eee;
+    padding: 0 2px;
+}
+.versions a {
+    color: #999;
+}
+.versions h5 {
+    margin-top: 10px;
+}
+a.current:before {
+    content: ' ✓ ';
+}
+a.current {
+    color: #c7726b;
+}
diff --git a/site/main.js b/site/main.js
@@ -0,0 +1,105 @@
+'use strict';
+(function (window) {
+    var UI = function (version) {
+        this.menu = document.querySelector('#menu');
+        this.container = document.querySelector('#symbolizers');
+        this.versionLabel = document.querySelector('#version');
+        this.fetchFromHash() || this.fetch(version);
+        var self = this;
+        window.addEventListener('hashchange', function () {self.fetchFromHash();});
+    };
+    UI.versions = ['3.0.0', '2.3.0', '2.2.0', '2.1.0', '2.0.0'];
+    UI.prototype = {
+
+        isArray: Array.isArray || function (obj) {
+            return (Object.prototype.toString.call(obj) === '[object Array]');
+        },
+
+        inArray: function (array, el) {
+            for (var i = 0; i < array.length; i++) if (array[i] === el) { return true; }
+            return false;
+        },
+
+        node: function (what, attrs, parent, content) {
+            var el = document.createElement(what);
+            for (var attr in attrs) el[attr] = attrs[attr];
+            if (parent) parent.appendChild(el);
+            if (content) el.innerHTML = content;
+            return el;
+        },
+
+        fetch: function (version) {
+            var self = this;
+            this.version = version || window.UI.versions[0];
+            nanoajax.ajax('./' + this.version + '/reference.json', function (code, content) {
+                self.build(JSON.parse(content));
+            });
+            return true;
+        },
+
+        fetchFromHash: function () {
+            var newVersion = window.location.hash.split('/')[0].replace('#', '');
+            if (newVersion !== this.version && this.inArray(UI.versions, newVersion)) return this.fetch(newVersion);
+        },
+
+        build: function (ref) {
+            this.container.innerHTML = '';
+            this.menu.innerHTML = '';
+            this.versionLabel.innerHTML = this.version;
+            this.node('h5', {}, this.menu, 'Symbolizers');
+            for (var id in ref.symbolizers) this.addSymbolizer(id, ref.symbolizers[id]);
+            this.addVersions();
+            if (window.location.hash) window.location = window.location;  // we have rebuild the DOM, help the browser find the North again.
+        },
+
+        addVersions: function () {
+            var container = this.node('div', {className: 'versions'}, this.menu);
+            this.node('h5', {}, container, 'Versions');
+            for (var i = 0; i < UI.versions.length; i++) this.addVersionLink(UI.versions[i], container);
+        },
+
+        addVersionLink: function (version, parent) {
+            var current = version === this.version ? ' current' : '';
+            this.node('a', {className: 'block' + current, href: '#' + version + '/'}, parent, version);
+        },
+
+        anchor: function (id) {
+            return this.version + '/' + id;
+        },
+
+        addSymbolizer: function (id, rules) {
+            this.node('a', {className: 'block', href: '#' + this.anchor(id)}, this.menu, id);
+            this.addSymbolizerBlock(id, rules);
+        },
+
+        addSymbolizerBlock: function (id, rules) {
+            var container = this.node('div', {className: 'symbolizer'}, this.container);
+            var section = this.node('h2', {}, container);
+            this.node('a', {href: '#' + this.anchor(id), id: this.anchor(id)}, section, id);
+            for (var ruleId in rules) this.addRule(ruleId, rules[ruleId], container);
+        },
+
+        addRule: function (id, props, parent) {
+            var title = this.node('h3', {}, parent);
+            id = props.css || id;
+            this.node('a', {id: this.anchor(id), href: '#' + this.anchor(id)}, title, id);
+            this.node('span', 'type', title, '=' + (this.isArray(props.type) ? 'list' : props.type));
+            if (props.status && props.status !== 'stable') this.node('span', {className: 'status ' + props.status}, title, props.status);
+            this.node('p', {}, parent, props.doc.replace(/`([^`]*)`/g, '<b>$1</b>'));
+            var defaultValue = this.node('p', {}, parent, '<strong>Default: </strong>' + (props['default-value'] || 'none'));
+            if (props['default-meaning']) this.node('em', {}, defaultValue, ' (' + props['default-meaning'] + ')');
+            if (this.isArray(props.type)) this.node('p', '', parent, '<strong>Values: </strong>' + props.type.join(', '));
+            if (props.functions) this.node('p', '', parent, '<strong>Functions: </strong>' + props.functions.join(', '));
+            if (props.range) this.node('p', '', parent, '<strong>Range: </strong>' + props.range);
+        }
+
+    };
+    UI.init = function (version) {
+        // if (!version && window.location.hash && window.location.hash.indexOf('/') !== -1) {
+        //     version = window.location.hash.split('/')[0];
+        // }
+        return new UI(version);
+    };
+    window.UI = UI;
+})(window);
+
diff --git a/site/nanoajax.min.js b/site/nanoajax.min.js