pelican-bootstrap3: refactored sidebar (#466)

This is more of a proposal for refactor of the sidebar.  Figured it
would be easier to do and discuss in a PR than it would be an
issue/ticket.

These changes can be split out if only some of the ideas are accepted.
It is mostly a lot cleanup and shuffling around to make it a bit more
consistent.

Here is a summary of the changes:

  - Moved all sidebar related from `includes/` and into
    `includes/sidebar/`.
  - Moved the following sections in `includes/sidebar.html` into
    their own files under `includes/sidebar/`:
    - _Social_ -> `includes/sidebar/social.html`
    - _Recent Posts_ -> `includes/sidebar/recent_posts.html`
    - _Categories_ -> `includes/sidebar/categories.html`
    - _Tags_ -> `includes/sidebar/tag_cloud.html`
    - _Series_ -> `includes/sidebar/series.html`
  - A whole bunch of whitespace cleanup.
  - Added the `DISABLE_SIDEBAR_TITLE_ICONS` configuration option. If
    `DISABLE_SIDEBAR_TITLE_ICONS` is set to True, none of the sidebar
    title icons will be displayed.
  - Folded in from getpelican/pelican-themes#438: Added the
    `SIDEBAR_ON_LEFT` configuration option, which moves the sidebar
    to the left side of the page.  Sidebar will continue to appear on
    the bottom of the page on smaller screens.
  - Assuming getpelican/pelican#1092 worked out:
    - Optional include of `includes/sidebar/optional_top.html` and
      `includes/sidebar/optional_bottom.html` from within
      `includes/sidebar.html`.  This would allow a user to insert
      sections into the sidebar.
    - `includes/sidebar/recent_posts.html` include articles line items
      via `includes/sidebar/article-li.html`.  This allows customization.

18 files changed, 233 insertions, 181 deletions

diff --git a/pelican-bootstrap3/templates/includes/github-js.html b/pelican-bootstrap3/templates/includes/github-js.html
deleted file mode 100644
index 42c54de..0000000
--- a/pelican-bootstrap3/templates/includes/github-js.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% if GITHUB_USER %}
-    {% if GITHUB_REPO_COUNT is not defined %}
-        {% set GITHUB_REPO_COUNT = 5 %}
-    {% endif %}
-    {% if GITHUB_SKIP_FORK is not defined %}
-        {% set GITHUB_SKIP_FORK = "false" %}
-    {% else %}
-        {% if GITHUB_SKIP_FORK %}
-            {% set GITHUB_SKIP_FORK = "true" %}
-        {% else %}
-            {% set GITHUB_SKIP_FORK = "false" %}
-        {% endif %}
-    {% endif %}
-    <!-- GitHub JS -->
-    <script type="text/javascript">
-        $(document).ready(function () {
-            if (!window.jXHR) {
-                var jxhr = document.createElement('script');
-                jxhr.type = 'text/javascript';
-                jxhr.src = '{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/jXHR.js';
-                var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(jxhr, s);
-            }
-
-            github.showRepos({
-                user: '{{ GITHUB_USER }}',
-                count: {{ GITHUB_REPO_COUNT }},
-                skip_forks: {{ GITHUB_SKIP_FORK }},
-                target: '#gh_repos'
-            });
-        });
-    </script>
-    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/github.js" type="text/javascript"></script>
-    <!-- End GitHub JS Code -->
-{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/github.html b/pelican-bootstrap3/templates/includes/github.html
deleted file mode 100644
index 00ea0f3..0000000
--- a/pelican-bootstrap3/templates/includes/github.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% if GITHUB_USER %}
-
-    <li class="list-group-item"><h4><i class="fa fa-github fa-lg"></i><span class="icon-label">GitHub Repos</span></h4>
-        <div id="gh_repos">
-            <p class="list-group-item">Status updating...</p>
-        </div>
-        {% if GITHUB_SHOW_USER_LINK is defined %}
-            <a href="https://github.com/{{ GITHUB_USER }}">@{{ GITHUB_USER }}</a> on GitHub
-        {% endif %}
-    </li>
-{% endif %}
\ No newline at end of file
diff --git a/pelican-bootstrap3/templates/includes/links.html b/pelican-bootstrap3/templates/includes/links.html
deleted file mode 100644
index 34898c4..0000000
--- a/pelican-bootstrap3/templates/includes/links.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% if LINKS %}
-    <li class="list-group-item"><h4><i class="fa fa-external-link-square fa-lg"></i><span class="icon-label">{{ _('Links') }}</span></h4>
-      <ul class="list-group" id="links">
-        {% for name, link in LINKS %}
-        <li class="list-group-item">
-            <a href="{{ link }}" target="_blank">
-                {{ name }}
-            </a>
-        </li>
-        {% endfor %}
-      </ul>
-    </li>
-{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar-images.html b/pelican-bootstrap3/templates/includes/sidebar-images.html
deleted file mode 100644
index 4bc7499..0000000
--- a/pelican-bootstrap3/templates/includes/sidebar-images.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% if SIDEBAR_IMAGES %}
-    {% if SIDEBAR_IMAGES_HEADER %}
-        <li class="list-group-item"><h4><i class="fa fa-external-link-square fa-lg"></i><span class="icon-label">{{ SIDEBAR_IMAGES_HEADER }}</span></h4>
-    {% endif %}
-    <li class="list-group-item">
-        <ul class="list-group" id="links">
-        {% for image in SIDEBAR_IMAGES %}
-            <img width="100%" class="img-thumbnail" src="{{ image }}"/>
-        {% endfor %}
-        </ul>
-    </li>
-{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar.html b/pelican-bootstrap3/templates/includes/sidebar.html
index c4ad1d4..7772ff8 100644
--- a/pelican-bootstrap3/templates/includes/sidebar.html
+++ b/pelican-bootstrap3/templates/includes/sidebar.html
@@ -1,105 +1,17 @@
-{% if DISPLAY_TAGS_ON_SIDEBAR is not defined %}
-    {% set DISPLAY_TAGS_ON_SIDEBAR = True %}
-{% endif %}
-
+<!-- Sidebar -->
 <section class="well well-sm">
-    <ul class="list-group list-group-flush">
-        {% if SOCIAL %}
-        <li class="list-group-item"><h4><i class="fa fa-home fa-lg"></i><span class="icon-label">{{ _('Social') }}</span></h4>
-              <ul class="list-group" id="social">
-                {% for s in SOCIAL %}
-                    {% if s[2] %}
-                        {% set name_sanitized = s[2]|lower|replace('+','-plus')|replace(' ','-') %}
-                    {% else %}
-                        {% set name_sanitized = s[0]|lower|replace('+','-plus')|replace(' ','-') %}
-                    {% endif %}
-                    {% if name_sanitized in ['flickr', 'slideshare', 'spotify', 'stack-overflow', 'weibo', 'line-chart', 'home', 'user', 'users', 'envelope', 'envelope-o', 'stack-exchange', 'hacker-news', 'meetup', 'vk'] %}
-                        {% set iconattributes = '"fa fa-' ~ name_sanitized ~ ' fa-lg"' %}
-                    {% else %}
-                        {% set iconattributes = '"fa fa-' ~ name_sanitized ~ '-square fa-lg"' %}
-                    {% endif %}
-                <li class="list-group-item"><a href="{{ s[1] }}"><i class={{ iconattributes }}></i> {{ s[0] }}</a></li>
-                {% endfor %}
-              </ul>
-            </li>
-        {% endif %}
-
-        {% if DISPLAY_RECENT_POSTS_ON_SIDEBAR %}
-            {% if RECENT_POST_COUNT is not defined %}
-                {% set RECENT_POST_COUNT = 5 %}
-            {% endif %}
-            <li class="list-group-item"><h4><i class="fa fa-home fa-lg"></i><span class="icon-label">{{ _('Recent Posts') }}</span></h4>
-                <ul class="list-group" id="recentposts">
-                {% for article in articles[:RECENT_POST_COUNT] %}
-                    <li class="list-group-item">
-                        <a href="{{ SITEURL }}/{{ article.url }}">
-                            {{ article.title }}
-                        </a>
-                    </li>
-                {% endfor %}
-                </ul>
-            </li>
-        {% endif %}
-
-        {% if DISPLAY_CATEGORIES_ON_SIDEBAR %}
-            <li class="list-group-item"><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}"><h4><i class="fa fa-home fa-lg"></i><span class="icon-label">{{ _('Categories') }}</span></h4></a>
-                <ul class="list-group" id="categories">
-                {% for cat, null in categories %}
-                    <li class="list-group-item">
-                        <a href="{{ SITEURL }}/{{ cat.url }}">
-                            <i class="fa fa-folder-open fa-lg"></i> {{ cat }}
-                        </a>
-                    </li>
-                {% endfor %}
-                </ul>
-            </li>
-        {% endif %}
-
-        {% if 'tag_cloud' in PLUGINS and DISPLAY_TAGS_ON_SIDEBAR %}
-            {% if DISPLAY_TAGS_INLINE %}
-                {% set tags = tag_cloud | sort(attribute='0') %}
-            {% else %}
-                {% set tags = tag_cloud | sort(attribute='1') %}
-            {% endif %}
-            <li class="list-group-item"><a href="{{ SITEURL }}/{{ TAGS_URL }}"><h4><i class="fa fa-tags fa-lg"></i><span class="icon-label">{{ _('Tags') }}</span></h4></a>
-                <ul class="list-group {% if DISPLAY_TAGS_INLINE %}list-inline tagcloud{% endif %}" id="tags">
-                {% for tag in tags %}
-                    <li class="list-group-item tag-{{ tag.1 }}">
-                        <a href="{{ SITEURL }}/{{ tag.0.url }}">
-                            {{ tag.0 }}
-                        </a>
-                    </li>
-                {% endfor %}
-                </ul>
-            </li>
-        {% endif %}
-
-        {% if DISPLAY_SERIES_ON_SIDEBAR %}
-            {% if article %}
-                {% if article.series %}
-                    <li class="list-group-item"><h4><i class="fa fa-tags fa-list-ul"></i><span class="icon-label">{{ _('Series') }}</span></h4>
-                        <ul class="list-group">
-                            {% if article.series.previous %}
-                            <li class="list-group-item">
-                                <h5></i>{{ _('Previous article') }}</h5>
-                                <a href="{{ SITEURL }}/{{ article.series.previous.url }}">{{ article.series.previous.title }}</a>
-                            </li>
-                            {% endif %}
-                            {% if article.series.next %}
-                            <li class="list-group-item">
-                                <h5>{{ _('Next article') }}</h5>
-                                <a href="{{ SITEURL }}/{{ article.series.next.url }}">{{ article.series.next.title }}</a>
-                            </li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                {% endif%}
-            {% endif %}
-        {% endif %}
-
-        {% include 'includes/github.html' %}
-        {% include 'includes/twitter_timeline.html' %}
-        {% include 'includes/links.html' %}
-        {% include 'includes/sidebar-images.html' %}
-    </ul>
+  <ul class="list-group list-group-flush">
+    {% include 'includes/sidebar/optional_top.html' ignore missing %}
+    {% include 'includes/sidebar/social.html' %}
+    {% include 'includes/sidebar/recent_posts.html' %}
+    {% include 'includes/sidebar/categories.html' %}
+    {% include 'includes/sidebar/tag_cloud.html' %}
+    {% include 'includes/sidebar/series.html' %}
+    {% include 'includes/sidebar/github.html' %}
+    {% include 'includes/sidebar/twitter_timeline.html' %}
+    {% include 'includes/sidebar/links.html' %}
+    {% include 'includes/sidebar/images.html' %}
+    {% include 'includes/sidebar/optional_bottom.html' ignore missing %}
+  </ul>
 </section>
+<!-- End Sidebar -->
diff --git a/pelican-bootstrap3/templates/includes/sidebar/article-li.html b/pelican-bootstrap3/templates/includes/sidebar/article-li.html
new file mode 100644
index 0000000..d163212
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/article-li.html
@@ -0,0 +1 @@
+<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
diff --git a/pelican-bootstrap3/templates/includes/sidebar/categories.html b/pelican-bootstrap3/templates/includes/sidebar/categories.html
new file mode 100644
index 0000000..01fb5b4
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/categories.html
@@ -0,0 +1,21 @@
+{% if DISPLAY_CATEGORIES_ON_SIDEBAR %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Categories -->
+<li class="list-group-item">
+  <h4>{{ title(_('Categories'), DISABLE_SIDEBAR_TITLE_ICONS) }}</h4>
+  <ul class="list-group" id="categories">
+    {% for cat, null in categories %}
+    <li class="list-group-item">
+      <a href="{{ SITEURL }}/{{ cat.url }}">
+        {%- if not DISABLE_SIDEBAR_TITLE_ICONS -%}
+        <i class="fa fa-folder-open fa-lg"></i>
+        {%- endif -%}
+        {{- cat -}}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Categories -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/github-js.html b/pelican-bootstrap3/templates/includes/sidebar/github-js.html
new file mode 100644
index 0000000..7fc00a5
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/github-js.html
@@ -0,0 +1,36 @@
+{% if GITHUB_USER %}
+  {% if GITHUB_REPO_COUNT is not defined %}
+    {% set GITHUB_REPO_COUNT = 5 %}
+  {% endif %}
+  {% if GITHUB_SKIP_FORK is not defined %}
+    {% set GITHUB_SKIP_FORK = "false" %}
+  {% else %}
+    {% if GITHUB_SKIP_FORK %}
+      {% set GITHUB_SKIP_FORK = "true" %}
+    {% else %}
+      {% set GITHUB_SKIP_FORK = "false" %}
+    {% endif %}
+  {% endif %}
+
+<!-- GitHub JS Code -->
+<script type="text/javascript">
+$(document).ready(function () {
+  if (!window.jXHR) {
+    var jxhr = document.createElement('script');
+    jxhr.type = 'text/javascript';
+    jxhr.src = '{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/jXHR.js';
+    var s = document.getElementsByTagName('script')[0];
+    s.parentNode.insertBefore(jxhr, s);
+  }
+
+  github.showRepos({
+    user: '{{ GITHUB_USER }}',
+    count: {{ GITHUB_REPO_COUNT }},
+    skip_forks: {{ GITHUB_SKIP_FORK }},
+    target: '#gh_repos'
+  });
+});
+</script>
+<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/github.js" type="text/javascript"></script>
+<!-- End GitHub JS Code -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/github.html b/pelican-bootstrap3/templates/includes/sidebar/github.html
new file mode 100644
index 0000000..a84dbfb
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/github.html
@@ -0,0 +1,15 @@
+{% if GITHUB_USER %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Github -->
+<li class="list-group-item">
+  <h4>{{ title('GitHub Repos', DISABLE_SIDEBAR_TITLE_ICONS, icon='github') }}</h4>
+  <div id="gh_repos">
+    <p class="list-group-item">Status updating...</p>
+  </div>
+  {% if GITHUB_SHOW_USER_LINK is defined %}
+  <a href="https://github.com/{{ GITHUB_USER }}">@{{ GITHUB_USER }}</a> on GitHub
+  {% endif %}
+</li>
+<!-- End Sidebar/Github -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/images.html b/pelican-bootstrap3/templates/includes/sidebar/images.html
new file mode 100644
index 0000000..2ca2e8d
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/images.html
@@ -0,0 +1,16 @@
+{% if SIDEBAR_IMAGES %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Images -->
+<li class="list-group-item">
+  {% if SIDEBAR_IMAGES_HEADER %}
+  <h4>{{ title(SIDEBAR_IMAGES_HEADER, DISABLE_SIDEBAR_TITLE_ICONS, icon='external-link-square') }}</h4>
+  {% endif %}
+  <ul class="list-group" id="links">
+    {% for image in SIDEBAR_IMAGES %}
+    <img width="100%" class="img-thumbnail" src="{{ image }}"/>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Images -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/links.html b/pelican-bootstrap3/templates/includes/sidebar/links.html
new file mode 100644
index 0000000..179b1a3
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/links.html
@@ -0,0 +1,16 @@
+{% if LINKS %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Links -->
+<li class="list-group-item">
+  <h4>{{ title(_('Links'), DISABLE_SIDEBAR_TITLE_ICONS, icon='external-link-square') }}</h4>
+  <ul class="list-group" id="links">
+    {% for name, link in LINKS %}
+    <li class="list-group-item">
+      <a href="{{ link }}" target="_blank">{{ name }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Links -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/macros.jinja b/pelican-bootstrap3/templates/includes/sidebar/macros.jinja
new file mode 100644
index 0000000..b830923
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/macros.jinja
@@ -0,0 +1,7 @@
+{% macro title(name, no_icon, icon='home') -%}
+  {%- if no_icon -%}
+    {{ name }}
+  {%- else -%}
+    <i class="fa fa-{{ icon }} fa-lg"></i><span class="icon-label">{{ name }}</span>
+  {%- endif -%}
+{%- endmacro %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/recent_posts.html b/pelican-bootstrap3/templates/includes/sidebar/recent_posts.html
new file mode 100644
index 0000000..0b301df
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/recent_posts.html
@@ -0,0 +1,19 @@
+{% if DISPLAY_RECENT_POSTS_ON_SIDEBAR %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+  {% if RECENT_POST_COUNT is not defined %}
+    {% set RECENT_POST_COUNT = 5 %}
+  {% endif %}
+
+<!-- Sidebar/Recent Posts -->
+<li class="list-group-item">
+  <h4>{{ title(_('Recent Posts'), DISABLE_SIDEBAR_TITLE_ICONS) }}</h4>
+  <ul class="list-group" id="recentposts">
+    {% for article in articles[:RECENT_POST_COUNT] %}
+    <li class="list-group-item">
+      {%- include 'includes/sidebar/article-li.html' -%}
+    </li>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Recent Posts -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/series.html b/pelican-bootstrap3/templates/includes/sidebar/series.html
new file mode 100644
index 0000000..323f8c0
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/series.html
@@ -0,0 +1,24 @@
+{% if DISPLAY_SERIES_ON_SIDEBAR and article and article.series %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Series -->
+<li class="list-group-item">
+  <h4>{{ title(_('Series'), DISABLE_SIDEBAR_TITLE_ICONS, icon='tags') }}</h4>
+  <ul class="list-group">
+    {% if article.series.previous %}
+    <li class="list-group-item">
+      <h5></i>{{ _('Previous article') }}</h5>
+      <a href="{{ SITEURL }}/{{ article.series.previous.url }}">{{ article.series.previous.title }}</a>
+    </li>
+    {% endif %}
+    {% if article.series.next %}
+    <li class="list-group-item">
+      <h5>{{ _('Next article') }}</h5>
+      <a href="{{ SITEURL }}/{{ article.series.next.url }}">{{ article.series.next.title }}</a>
+    </li>
+    {% endif %}
+  </ul>
+</li>
+<!-- End Sidebar/Series -->
+
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/social.html b/pelican-bootstrap3/templates/includes/sidebar/social.html
new file mode 100644
index 0000000..13fb267
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/social.html
@@ -0,0 +1,24 @@
+{% if SOCIAL %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Social -->
+<li class="list-group-item">
+  <h4>{{ title(_('Social'), DISABLE_SIDEBAR_TITLE_ICONS) }}</h4>
+  <ul class="list-group" id="social">
+    {% for s in SOCIAL %}
+      {% if s[2] %}
+        {% set name_sanitized = s[2]|lower|replace('+','-plus')|replace(' ','-') %}
+      {% else %}
+        {% set name_sanitized = s[0]|lower|replace('+','-plus')|replace(' ','-') %}
+      {% endif %}
+      {% if name_sanitized in ['flickr', 'slideshare', 'spotify', 'stack-overflow', 'weibo', 'line-chart', 'home', 'user', 'users', 'envelope', 'envelope-o', 'stack-exchange', 'hacker-news'] %}
+        {% set iconattributes = '"fa fa-' ~ name_sanitized ~ ' fa-lg"' %}
+      {% else %}
+        {% set iconattributes = '"fa fa-' ~ name_sanitized ~ '-square fa-lg"' %}
+      {% endif %}
+    <li class="list-group-item"><a href="{{ s[1] }}"><i class={{ iconattributes }}></i> {{ s[0] }}</a></li>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Social -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/tag_cloud.html b/pelican-bootstrap3/templates/includes/sidebar/tag_cloud.html
new file mode 100644
index 0000000..147432a
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/tag_cloud.html
@@ -0,0 +1,27 @@
+{% if DISPLAY_TAGS_ON_SIDEBAR is not defined %}
+    {% set DISPLAY_TAGS_ON_SIDEBAR = True %}
+{% endif -%}
+
+{% if 'tag_cloud' in PLUGINS and DISPLAY_TAGS_ON_SIDEBAR %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+  {% if DISPLAY_TAGS_INLINE %}
+    {% set tags = tag_cloud | sort(attribute='0') %}
+  {% else %}
+    {% set tags = tag_cloud | sort(attribute='1') %}
+  {% endif %}
+
+<!-- Sidebar/Tag Cloud -->
+<li class="list-group-item">
+  <a href="{{ SITEURL }}/{{ TAGS_URL }}"><h4>{{ title(_('Tags'), DISABLE_SIDEBAR_TITLE_ICONS, icon='tags') }}</h4></a>
+  <ul class="list-group {% if DISPLAY_TAGS_INLINE %}list-inline tagcloud{% endif %}" id="tags">
+    {% for tag in tags %}
+    <li class="list-group-item tag-{{ tag.1 }}">
+      <a href="{{ SITEURL }}/{{ tag.0.url }}">
+        {{- tag.0 -}}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</li>
+<!-- End Sidebar/Tag Cloud -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/sidebar/twitter_timeline.html b/pelican-bootstrap3/templates/includes/sidebar/twitter_timeline.html
new file mode 100644
index 0000000..16551a2
--- /dev/null
+++ b/pelican-bootstrap3/templates/includes/sidebar/twitter_timeline.html
@@ -0,0 +1,12 @@
+{% if TWITTER_WIDGET_ID %}
+  {% from 'includes/sidebar/macros.jinja' import title %}
+
+<!-- Sidebar/Twitter Timeline -->
+<li class="list-group-item">
+  <h4>{{ title('Latest Tweets', DISABLE_SIDEBAR_TITLE_ICONS, icon='twitter') }}</h4>
+  <div id="twitter_timeline">
+    <a class="twitter-timeline" data-width="250" data-height="300" data-dnt="true" data-theme="light" href="https://twitter.com/{{TWITTER_USERNAME}}">Tweets by {{TWITTER_USERNAME}}</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+  </div>
+</li>
+<!-- End Sidebar/Twitter Timeline -->
+{% endif %}
diff --git a/pelican-bootstrap3/templates/includes/twitter_timeline.html b/pelican-bootstrap3/templates/includes/twitter_timeline.html
deleted file mode 100644
index 395468c..0000000
--- a/pelican-bootstrap3/templates/includes/twitter_timeline.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% if TWITTER_WIDGET_ID %}
-
-    <li class="list-group-item"><h4><i class="fa fa-twitter fa-lg"></i><span class="icon-label">Latest Tweets</span></h4></li>
-    <div id="twitter_timeline">
-        <a class="twitter-timeline" data-width="250" data-height="300" data-dnt="true" data-theme="light" href="https://twitter.com/{{TWITTER_USERNAME}}">Tweets by {{TWITTER_USERNAME}}</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-    </div>
-{% endif %}