Refactor and redesign category pages

Categories are now stored in _data/categories.yml. This allows us to list all categories in the sidebar. To render the category pages which list all posts with their category, a new plugin was added.

_config.yml

@@ -47,3 +47,10 @@ defaults:
       type: tutorials
     values:
       layout: tutorial
+
+# blog category pages
+page_gen:
+    - data: categories
+      template: blog_category
+      name: category
+      dir: blog

_data/categories.yml

@@ -0,0 +1,27 @@
+###############################################################################
+# Register post categories below
+###############################################################################
+# category: Category name used to categorize posts.
+#           Rendered tag name (e.g. in the badges)
+#           Using "name" instead of "category" is not possible due to conflicts
+#           with page.name  caused by data_page_generator plugin.
+# title:    HTML <title>title</title>
+# short:    Sidebar "current" entry
+# heading:  Heading on the page
+###############################################################################
+- category: announcement
+  title: Announcements
+  short: Announcements
+  heading: Announcements
+- category: release
+  title: Release posts
+  short: All releases
+  heading: All release posts
+- category: pinned
+  title: Pinned posts
+  short: Pinned posts
+  heading: Important posts
+- category: talk
+  title: Talks by Team NewPipe
+  short:  All talks
+  heading: Talks held by members of Team NewPipe

_includes/blog_sidebar.html

@@ -23,6 +23,12 @@
         <a href="/blog/feeds/news.atom" class="list-group-item" id="sidebar-feed-link"><i class="fa fa-rss-square" aria-hidden="true"></i> Subscribe to feed</a>
     </div>
 
+    <div class="sidebar-categories categories">
+    {%- for category in site.data.categories %}
+        <p class="text-center"><a href="{{ site.baseurl }}/blog/{{ category.category | slugize }}"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;{{ category.category }}</a></p>
+    {% endfor %}
+    </div>
+
     <div class="clearfix"></div>
     <div class="search-container">
         <form action="{{ site.baseurl }}/blog/search/" method="get">

_layouts/blog_category.html

@@ -1,31 +1,27 @@
 ---
-title: "Blog - NewPipe. a free YouTube client"
-metades: "Welcome to the blog of NewPipe the lightweight YouTube experience for Android."
+#   using the default or blog layout is difficult here,
+#   because page titles depend on multiple variables.
+metades: "Welcome to the blog of NewPipe, the lightweight YouTube experience for Android."
 ---
-{%- include head.html extraCSS = "blog.css" -%}
+{%- assign Ptitle = page.title | append: ": " | append: site.title -%}
+{%- include head.html extraCSS = "blog.css" title = Ptitle bodyID="blog-category-post-list" -%}
 
 {%- assign blink=site.baseurl | append: "blog/" -%}
 {% include nav.html brand="Blog" brandLink=blink search=true active="blog" %}
 
-<div class="post-collection height-full-parent">
-    <div class="container height-full-parent height-full">
-        <div class="row is-flex height-full-child">
-            <div class="col-xs-12 col-sm-8 col-md-9 single-post border-left border-right">
+<div class="post-collection">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-md-9">
 
-                <div class="extra-space"></div>
-
-                {% if page.title == "pinned" %}
-                <h3>All pinned posts</h3>
-                {% else %}
-                <h3>All {{ page.title | capitalize }}s</h3>
-                {% endif %}
-
-                {% unless page.content == '' %}
-                <p>{{ page.content }}</p>
-                {% endunless %}
+                {%- if page.heading -%}
+                <h3 class="page-title">{{ page.heading }}</h3>
+                {%- else -%}
+                <h3 class="page-title">{{ page.title }}</h3>
+                {%- endif -%}
 
                 {% for post in site.categories[page.category] %}
-                <div class="category post-preview">
+                <div class="category border-box">
                     <a href="{{ post.url | prepend: site.baseurl }}">
                         <h4 class="post-title">{{ post.title }}</h4>
                         {% if post.subtitle %}
@@ -41,10 +37,6 @@ metades: "Welcome to the blog of NewPipe the lightweight YouTube experience for
                     </p>
                 </div>
                 {% endfor %}
-
-                <div class="clearfix"></div>
-
-                <div class="image-buffer"></div>
             </div>
 
             {% include blog_sidebar.html %}
@@ -53,7 +45,7 @@ metades: "Welcome to the blog of NewPipe the lightweight YouTube experience for
     </div>
 </div>
 
-{% include footer.html %}
+{% include footer.html buffer="True" %}
 
 {% include page_end.html %}
 

_plugins/data_page_generator.rb

@@ -0,0 +1,135 @@
+# coding: utf-8
+# Generate pages from individual records in yml files
+# (c) 2014-2016 Adolfo Villafiorita
+# Distributed under the conditions of the MIT License
+
+module Jekyll
+
+  module Sanitizer
+    # strip characters and whitespace to create valid filenames, also lowercase
+    def sanitize_filename(name)
+      if(name.is_a? Integer)
+        return name.to_s
+      end
+      return name.tr(
+  "ÀÁÂÃÄÅàáâãäåĀāĂ㥹ÇçĆćĈĉĊċČčÐðĎďĐđÈÉÊËèéêëĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħÌÍÎÏìíîïĨĩĪīĬĭĮįİıĴĵĶķĸĹĺĻļĽľĿŀŁłÑñŃńŅņŇňʼnŊŋÑñÒÓÔÕÖØòóôõöøŌōŎŏŐőŔŕŖŗŘřŚśŜŝŞşŠšſŢţŤťŦŧÙÚÛÜùúûüŨũŪūŬŭŮůŰűŲųŴŵÝýÿŶŷŸŹźŻżŽž",
+  "AAAAAAaaaaaaAaAaAaCcCcCcCcCcDdDdDdEEEEeeeeEeEeEeEeEeGgGgGgGgHhHhIIIIiiiiIiIiIiIiIiJjKkkLlLlLlLlLlNnNnNnNnnNnNnOOOOOOooooooOoOoOoRrRrRrSsSsSsSssTtTtTtUUUUuuuuUuUuUuUuUuUuWwYyyYyYZzZzZz"
+).downcase.strip.gsub(' ', '-').gsub(/[^\w.-]/, '')
+    end
+  end
+
+  # this class is used to tell Jekyll to generate a page
+  class DataPage < Page
+    include Sanitizer
+
+    # - site and base are copied from other plugins: to be honest, I am not sure what they do
+    #
+    # - `index_files` specifies if we want to generate named folders (true) or not (false)
+    # - `dir` is the default output directory
+    # - `data` is the data defined in `_data.yml` of the record for which we are generating a page
+    # - `name` is the key in `data` which determines the output filename
+    # - `template` is the name of the template for generating the page
+    # - `extension` is the extension for the generated file
+    def initialize(site, base, index_files, dir, data, name, template, extension)
+      @site = site
+      @base = base
+
+      # @dir is the directory where we want to output the page
+      # @name is the name of the page to generate
+      #
+      # the value of these variables changes according to whether we
+      # want to generate named folders or not
+      if data[name] == nil
+        puts "error (datapage_gen). empty value for field '#{name}' in record #{data}"
+      else
+        filename = sanitize_filename(data[name]).to_s
+
+        @dir = dir + (index_files ? "/" + filename + "/" : "")
+        @name = (index_files ? "index" : filename) + "." + extension.to_s
+
+        self.process(@name)
+        self.read_yaml(File.join(base, '_layouts'), template + ".html")
+        self.data['title'] = data[name]
+        # add all the information defined in _data for the current record to the
+        # current page (so that we can access it with liquid tags)
+        self.data.merge!(data)
+      end
+    end
+  end
+
+  class DataPagesGenerator < Generator
+    safe true
+
+    # generate loops over _config.yml/page_gen invoking the DataPage
+    # constructor for each record for which we want to generate a page
+
+    def generate(site)
+      # page_gen_dirs determines whether we want to generate index pages
+      # (name/index.html) or standard files (name.html). This information
+      # is passed to the DataPage constructor, which sets the @dir variable
+      # as required by this directive
+      index_files = site.config['page_gen-dirs'] == true
+
+      # data contains the specification of the data for which we want to generate
+      # the pages (look at the README file for its specification)
+      data = site.config['page_gen']
+      if data
+        data.each do |data_spec|
+          index_files_for_this_data = data_spec['index_files'] != nil ? data_spec['index_files'] : index_files
+          template = data_spec['template'] || data_spec['data']
+          name = data_spec['name']
+          dir = data_spec['dir'] || data_spec['data']
+          extension = data_spec['extension'] || "html"
+
+          if site.layouts.key? template
+            # records is the list of records defined in _data.yml
+            # for which we want to generate different pages
+            records = nil
+            data_spec['data'].split('.').each do |level|
+              if records.nil?
+                records = site.data[level]
+              else
+                records = records[level]
+              end
+            end
+
+            # apply filtering conditions:
+            # - filter requires the name of a boolean field
+            # - filter_condition evals a ruby expression
+            records = records.select { |r| r[data_spec['filter']] } if data_spec['filter']
+            records = records.select { |record| eval(data_spec['filter_condition']) } if data_spec['filter_condition']
+
+            records.each do |record|
+              site.pages << DataPage.new(site, site.source, index_files_for_this_data, dir, record, name, template, extension)
+            end
+          else
+            puts "error (datapage_gen). could not find template #{template}" if not site.layouts.key? template
+          end
+        end
+      end
+    end
+  end
+
+  module DataPageLinkGenerator
+    include Sanitizer
+
+    # use it like this: {{input | datapage_url: dir}}
+    # to generate a link to a data_page.
+    #
+    # the filter is smart enough to generate different link styles
+    # according to the data_page-dirs directive ...
+    #
+    # ... however, the filter is not smart enough to support different
+    # extensions for filenames.
+    #
+    # Thus, if you use the `extension` feature of this plugin, you
+    # need to generate the links by hand
+    def datapage_url(input, dir)
+      extension = Jekyll.configuration({})['page_gen-dirs'] ? '/' : '.html'
+      "#{dir}/#{sanitize_filename(input)}#{extension}"
+    end
+  end
+
+end
+
+Liquid::Template.register_filter(Jekyll::DataPageLinkGenerator)

blog/announcement.html

@@ -1,6 +0,0 @@
----
-layout: blog_category
-title: announcement
-category: announcement
-short: All announcements
----

blog/download.html

@@ -1,6 +0,0 @@
----
-layout: blog_category
-title: download
-category: download
-short: All downloads
----

blog/pinned.html

@@ -1,6 +0,0 @@
----
-layout: blog_category
-title: pinned
-category: pinned
-short: All pinned posts
----

blog/release.html

@@ -1,6 +0,0 @@
----
-layout: blog_category
-title: release
-category: release
-short: All releases
----

blog/talk.html

@@ -1,6 +0,0 @@
----
-layout: blog_category
-title: talk
-category: talk
-short: All talks
----

css/blog.css

@@ -527,6 +527,21 @@ strong.extra {
     }
 }
 
+.page-title {
+    color: #CD322E;
+    text-align: center;
+}
+
+#blog-category-post-list .page-title {
+    margin-top: 26px;
+    margin-bottom: 35px;
+}
+
+.post-collection .page-title {
+    margin-top: 5px;
+    margin-bottom: 26px;
+}
+
 @media (max-width: 991px) {
     .postImg {
         max-height: 33vh;
@@ -716,8 +731,8 @@ div.search-container input:focus {
     transition: all 0s !important;
 }
 
-.category.post-preview {
-    margin-bottom: 15px;
+.search-container.border-box .input-group {
+    margin-bottom: 10px;
 }
 
 /* Sticky footer */