Skip to content
Permalink
Browse files
Merge pull request #2991 from getnikola/bootstrap4
Initial Bootstrap 4 implementation
  • Loading branch information
Kwpolska committed Mar 18, 2018
2 parents cc82f60 + 8221dc4 commit 695e224f972a79169dda10a9690a71ae87c0948d
Showing 706 changed files with 66,696 additions and 34,276 deletions.
@@ -4,6 +4,10 @@ New in master
Features
--------

* Replace ``flowr.js`` with ``justified-layout.js`` by Flickr
(does not require jQuery!)
* ``bootblog4`` is the new default theme (Issue #2964)
* New ``bootstrap4`` and ``bootblog4`` themes (Issue #2964)
* New Thai translation by Narumol Hankrotha and Jean Jordaan
* Support for Commento comment system (Issue #2773)
* New PRESERVE_ICC_PROFILES option to control whether ICC profiles are
@@ -34,7 +38,7 @@ Features
Bugfixes
--------

* Handle '/' and other absolute paths better in POSTS / PAGES / TRANSLATIONS
* Handle '/' and other absolute paths better in POSTS / PAGES / TRANSLATIONS
(Issue #2982)
* Fix loading non-default languages
* Support KaTeX for reST display math (Issue #2888)
@@ -83,6 +87,12 @@ Removed features
(Issue #2785)
* Removed old 7-line metadata format (Issue #2839)

Other changes
-------------

* Rename ``crumbs.tmpl`` to ``ui_helper.tmpl`` and the breadcrumbs
function to ``breadcrumbs``

New in v7.8.8
=============

@@ -119,7 +119,7 @@ people might find it a bit too limiting — if that is the case, try using HTML
for your pages (Nikola does this on the index page, for example).

So, let's give the page a nicer title, and some fake content. Since the default
Nikola theme (called ``bootstrap3``) is based on `Bootstrap <http://getbootstrap.com/>`_
Nikola theme (called ``bootblog4``) is based on `Bootstrap <http://getbootstrap.com/>`_
you can use anything you like from it:

.. code:: rest
@@ -12,7 +12,7 @@ Extending Nikola
:Version: 7.8.8
:Author: Roberto Alsina <ralsina@netmanagers.com.ar>

.. class:: alert alert-info pull-right
.. class:: alert alert-info float-md-right

.. contents::

@@ -11,7 +11,7 @@ The Nikola Handbook

:Version: 7.8.8

.. class:: alert alert-info pull-right
.. class:: alert alert-info float-md-right

.. contents::

@@ -1475,9 +1475,9 @@ Navigation Links
1. Support for submenus is theme-dependent. Only one level of
submenus is supported.

2. Some themes, including the default Bootstrap 3 theme, may
present issues if the menu is too large. (in ``bootstrap3``, the
navbar can grow too large and cover contents.)
2. Some themes, including the default Bootstrap theme, may
present issues if the menu is too large. (in Bootstrap, the navbar
can grow too large and cover contents.)

3. If you link to directories, make sure to follow ``STRIP_INDEXES``. If
it’s set to ``True``, end your links with a ``/``, otherwise end them
@@ -11,7 +11,7 @@ Using Alternative Social Buttons with Nikola

:Version: 7.8.8

.. class:: alert alert-info pull-right
.. class:: alert alert-info float-md-right

.. contents::

File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

This file was deleted.

@@ -6,7 +6,7 @@
:Version: 7.8.8

.. class:: alert alert-info pull-right
.. class:: alert alert-info float-md-right

.. contents::

@@ -12,7 +12,7 @@ Theming Nikola
:Version: 7.8.8
:Author: Roberto Alsina <ralsina@netmanagers.com.ar>

.. class:: alert alert-info pull-right
.. class:: alert alert-info float-md-right

.. contents::

@@ -37,8 +37,8 @@ assets
and ``fonts`` (Bootstrap).

The included themes use `Bootstrap <https://getbootstrap.com/>`_,
`baguetteBox <https://feimosi.github.io/baguetteBox.js/>`_, `Flowr.js
<https://github.com/kalyan02/flowr-js>`_ and `Moment.js
`baguetteBox <https://feimosi.github.io/baguetteBox.js/>`_, `Justified Layout by Flickr
<http://flickr.github.io/justified-layout/>`_ and `Moment.js
<https://momentjs.com/>`_, so they are in assets, along with CSS files for
syntax highlighting, reStructuredText and Jupyter, as well as a minified
copy of jQuery.
@@ -238,7 +238,7 @@ These are the templates that come with the included themes:
It uses a bunch of helper templates, one for each supported comment system
(all of which start with ``comments_helper``)

``crumbs.tmpl``, ``pagination_helper.tmpl``
``ui_helper.tmpl``, ``pagination_helper.tmpl``
These templates help render specific UI items, and can be tweaked as needed.

``gallery.tmpl``
@@ -256,7 +256,8 @@ These are the templates that come with the included themes:
+ ``title``: The title of the image.
+ ``size``: A dict containing ``w`` and ``h``, the real size of the thumbnail.

* ``photo_array_json``: a JSON dump of photo_array, used in the bootstrap theme by flowr.js
* ``photo_array_json``: a JSON dump of photo_array, used by the
``justified-layout`` script

``list.tmpl``
Template used to display generic lists of links, which it gets in ``items``,
@@ -77,7 +77,7 @@ TRANSLATIONS_PATTERN = '{path}.{lang}.{ext}'
# Only one level of submenus is supported.
# WARNING: Some themes, including the default Bootstrap 3 theme,
# may present issues if the menu is too large.
# (in bootstrap3, the navbar can grow too large and cover contents.)
# (in Bootstrap, the navbar can grow too large and cover contents.)
# WARNING: If you link to directories, make sure to follow
# ``STRIP_INDEXES``. If it’s set to ``True``, end your links
# with a ``/``, otherwise end them with ``/index.html`` — or
@@ -162,7 +162,7 @@ TIMEZONE = ${TIMEZONE}
# 1 = using JS_DATE_FORMAT and local user time (via moment.js)
# 2 = using a string like “2 days ago”
#
# Your theme must support it, bootstrap and bootstrap3 already do.
# Your theme must support it, Bootstrap already does.
# DATE_FANCINESS = 0

# While Nikola can select a sensible locale for each language,
@@ -357,7 +357,7 @@
</blockquote>
</div>
<div class="col-lg-6">
<blockquote class="pull-right">
<blockquote class="float-md-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
@@ -5,6 +5,7 @@ docs/sphinx/internals.rst
docs/sphinx/manual.rst
docs/sphinx/path_handlers.rst
docs/sphinx/social_buttons.rst
docs/sphinx/support.rst
docs/sphinx/template-variables.rst
docs/sphinx/theming.rst
nikola/data/samplesite/pages/creating-a-theme.rst
@@ -19,31 +20,15 @@ nikola/data/themes/base/assets/css/baguetteBox.min.css
nikola/data/themes/base/assets/js/baguetteBox.min.js
nikola/data/themes/base/assets/js/html5.js
nikola/data/themes/base/assets/js/html5shiv-printshiv.min.js
nikola/data/themes/base/assets/js/justified-layout.min.js
nikola/data/themes/base/assets/js/moment-with-locales.min.js
nikola/data/themes/base/messages/messages_cz.py
nikola/data/themes/bootstrap3-jinja/assets/css/bootstrap-theme.min.css
nikola/data/themes/bootstrap3-jinja/assets/css/bootstrap-theme.min.css.map
nikola/data/themes/bootstrap3-jinja/assets/css/bootstrap.min.css
nikola/data/themes/bootstrap3-jinja/assets/css/bootstrap.min.css.map
nikola/data/themes/bootstrap3-jinja/assets/fonts/glyphicons-halflings-regular.eot
nikola/data/themes/bootstrap3-jinja/assets/fonts/glyphicons-halflings-regular.svg
nikola/data/themes/bootstrap3-jinja/assets/fonts/glyphicons-halflings-regular.ttf
nikola/data/themes/bootstrap3-jinja/assets/fonts/glyphicons-halflings-regular.woff
nikola/data/themes/bootstrap3-jinja/assets/fonts/glyphicons-halflings-regular.woff2
nikola/data/themes/bootstrap3-jinja/assets/js/bootstrap.min.js
nikola/data/themes/bootstrap3-jinja/assets/js/jquery.min.js
nikola/data/themes/bootstrap3-jinja/assets/js/jquery.min.map
nikola/data/themes/bootstrap3-jinja/bundles
nikola/data/themes/bootstrap3/assets/css/bootstrap-theme.min.css
nikola/data/themes/bootstrap3/assets/css/bootstrap-theme.min.css.map
nikola/data/themes/bootstrap3/assets/css/bootstrap.min.css
nikola/data/themes/bootstrap3/assets/css/bootstrap.min.css.map
nikola/data/themes/bootstrap3/assets/fonts/glyphicons-halflings-regular.eot
nikola/data/themes/bootstrap3/assets/fonts/glyphicons-halflings-regular.svg
nikola/data/themes/bootstrap3/assets/fonts/glyphicons-halflings-regular.ttf
nikola/data/themes/bootstrap3/assets/fonts/glyphicons-halflings-regular.woff
nikola/data/themes/bootstrap3/assets/fonts/glyphicons-halflings-regular.woff2
nikola/data/themes/bootstrap3/assets/js/bootstrap.min.js
nikola/data/themes/bootstrap3/assets/js/jquery.min.js
nikola/data/themes/bootstrap3/assets/js/jquery.min.map
nikola/data/themes/bootstrap4-jinja/assets/css/bootstrap.min.css
nikola/data/themes/bootstrap4-jinja/assets/js/bootstrap.min.js
nikola/data/themes/bootstrap4-jinja/assets/js/jquery.min.js
nikola/data/themes/bootstrap4-jinja/assets/js/popper.min.js
nikola/data/themes/bootstrap4/assets/css/bootstrap.min.css
nikola/data/themes/bootstrap4/assets/js/bootstrap.min.js
nikola/data/themes/bootstrap4/assets/js/jquery.min.js
nikola/data/themes/bootstrap4/assets/js/popper.min.js
nikola/plugins/command/auto/livereload.js
@@ -1,11 +1,11 @@
{# -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'comments_helper.tmpl' as comments with context %}
{% import 'crumbs.tmpl' as ui with context %}
{% import 'ui_helper.tmpl' as ui with context %}
{% block sourcelink %}{% endblock %}

{% block content %}
{{ ui.bar(crumbs) }}
{{ ui.breadcrumbs(crumbs) }}
{% if title %}
<h1>{{ title|e }}</h1>
{% endif %}
@@ -43,13 +43,13 @@
{{ super() }}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
.image-block {
display: inline-block;
#gallery_container {
position: relative;
}
.flowr_row {
width: 100%;
.image-block {
position: absolute;
}
</style>
</style>
{% if translations|length > 1 %}
{% for langname in translations.keys() %}
{% if langname != lang %}
@@ -61,45 +61,46 @@
{% endblock %}

{% block extra_js %}
<script src="/assets/js/flowr.js"></script>
<script src="/assets/js/justified-layout.min.js"></script>
<script>
jsonContent = {{ photo_array_json }};
flowr(document.querySelectorAll("#gallery_container")[0], {
data : jsonContent,
height : {{ thumbnail_size }}*.6,
padding: 5,
rows: -1,
render : function(params) {
// Just return a div, string or a dom object, anything works fine
var img = document.createElement("img");
img.setAttribute('src', params.itemData.url_thumb);
img.setAttribute('width', params.width);
img.setAttribute('height', params.height);
img.setAttribute('alt', params.itemData.title);
img.style.maxWidth = '100%';
link = document.createElement("a");
link.setAttribute('href', params.itemData.url);
link.setAttribute('class', 'image-reference');
div = document.createElement("div");
div.setAttribute('class', 'image-block');
div.setAttribute('title', params.itemData.title);
div.setAttribute('data-toggle', "tooltip")
link.append(img);
div.append(link);
//div.hover(div.tooltip());
return div;
},
itemWidth : function(data) { return data.size.w; },
itemHeight : function(data) { return data.size.h; },
complete : function(params) {
if( jsonContent.length > params.renderedItems ) {
nextRenderList = jsonContent.slice( params.renderedItems );
}
}
});
var jsonContent = {{ photo_array_json }};

function renderGallery() {
var container = document.getElementById("gallery_container");
container.innerHTML = '';
var layoutGeometry = require('justified-layout')(jsonContent, {
"containerWidth": container.offsetWidth,
"targetRowHeight": {{ thumbnail_size }}*.6,
"boxSpacing": 5});
container.style.height = layoutGeometry.containerHeight + 'px';
var boxes = layoutGeometry.boxes;
for (var i = 0; i < boxes.length; i++) {
var img = document.createElement("img");
img.setAttribute('src', jsonContent[i].url_thumb);
img.setAttribute('alt', jsonContent[i].title);
img.style.width = boxes[i].width + 'px';
img.style.height = boxes[i].height + 'px';
link = document.createElement("a");
link.setAttribute('href', jsonContent[i].url);
link.setAttribute('class', 'image-reference');
div = document.createElement("div");
div.setAttribute('class', 'image-block');
div.setAttribute('title', jsonContent[i].title);
div.setAttribute('data-toggle', "tooltip")
div.style.width = boxes[i].width + 'px';
div.style.height = boxes[i].height + 'px';
div.style.top = boxes[i].top + 'px';
div.style.left = boxes[i].left + 'px';
link.append(img);
div.append(link);
container.append(div);
}
baguetteBox.run('#gallery_container', {
captions: function(element) {
return element.getElementsByTagName('img')[0].alt;
}});
}
renderGallery();
window.addEventListener('resize', renderGallery);
</script>
{% endblock %}
@@ -1,8 +1,8 @@
{# -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'crumbs.tmpl' as ui with context %}
{% import 'ui_helper.tmpl' as ui with context %}
{% block content %}
{{ ui.bar(crumbs) }}
{{ ui.breadcrumbs(crumbs) }}
{% if folders or files %}
<ul>
{% for name in folders %}
@@ -0,0 +1,18 @@
{# -*- coding: utf-8 -*- #}
{% macro breadcrumbs(crumbs) %}
{% if crumbs %}
<nav class="breadcrumbs">
<ul class="breadcrumb">
{% for link, text in crumbs %}
{% if text != index_file %}
{% if link == '#' %}
<li>{{ text.rsplit('.html', 1)[0] }}</li>
{% else %}
<li><a href="{{ link }}">{{ text }}</a></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</nav>
{% endif %}
{% endmacro %}

0 comments on commit 695e224

Please sign in to comment.