jekyll-theme-switch 0.1.1 → 0.5.1.pre.1

data/_layouts/tag_page.html

@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: wrapped
 ---
 
 <div class="tag-index">
@@ -7,16 +7,36 @@ layout: default
 
     <ul class="post-list">
         {% for post in page.posts %}
-        <li {% if post.lead_image %}style="background-image: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 80%), url('{{ post.lead_image }}'); background-size: contain;"{% endif %}>
-            {% include post_meta.html post=post %}
+      {% if post.lead_image %}
+      <style type="text/css" scoped>
+        li#post-{{ post.id | slugify }} {
+          background-image: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 80%),
+          url('{{ post.lead_image | prepend: site.baseurl | prepend: site.url }}');
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position-x: right;
+        }
 
-            <h2>
-                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-            </h2>
-            <div>
-                {{ post.excerpt }}
-            </div>
-            <a href="{{ post.url | prepend: site.baseurl }}">lees verder</a>
+        @media (prefers-color-scheme: dark) {
+          li#post-{{ post.id | slugify }} {
+          background-image: linear-gradient(90deg, rgba(31,31,31,1) 50%, rgba(31,31,31,0.7) 80%),
+          url('{{ post.lead_image | prepend: site.baseurl | prepend: site.url }}');
+        }
+        }
+      </style>
+      {% endif %}
+      <li id="post-{{ post.id | slugify }}">
+            <article>
+                {% include post_meta.html post=post %}
+
+                <h2>
+                    <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+                </h2>
+                <div>
+                    {{ post.excerpt }}
+                </div>
+                <a href="{{ post.url | prepend: site.baseurl }}">lees verder</a>
+            </article>
         </li>
         {% endfor %}
     </ul>

data/_layouts/wrapped.html

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+<div class="wrapper">
+  {{ content }}
+</div>

data/_layouts/yearly_archive.html

@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: wrapped
 ---
 <div class="yearly-archive">
   <div>
@@ -12,7 +12,7 @@ layout: default
     <dl>
       {% for post in group.items reversed %}
       <dt>{% include date.html date=post.date %}</dt>
-      <dd><a href="{{ post.url }}"><span>{{ post.title }}</span></a></dd>
+      <dd><a href="{{ post.url | prepend: site.baseurl }}"><span>{{ post.title }}</span></a></dd>
       {% endfor %}
     </dl>
     {% endfor %}

data/_plugins/blog_series_plugin.rb

@@ -0,0 +1,16 @@
+
+
+Jekyll::Hooks.register :site, :pre_render do |site|
+
+  seriesIndexes = site.posts.docs
+    .select { |p| p.data.key? 'series_slug' }
+    .reduce(Hash.new {|h,k| h[k] = []} ) { |series, post| series[post.data['series_slug']] << post; series }
+
+  seriesPosts = site.posts.docs
+    .select { |p| p.data.key? 'series' }
+    .reduce(Hash.new {|h,k| h[k] = []}) { |series, post| series[post.data['series']] << post; series }
+
+  seriesIndexes.each { |slug, posts| posts.each {|post| post.data['series_posts'] = seriesPosts[slug] }}
+  seriesPosts.each { |slug, posts| posts.each {|post| post.data['series_index'] = seriesIndexes[slug] }}
+end
+

data/_plugins/category_tag_filter.rb

@@ -0,0 +1,36 @@
+
+module Jekyll
+    module CategoryTagFilter
+        def taglinks(input)
+            site = @context.registers[:site]
+            input.map do |tag|
+                "<a href=\"#{site.baseurl}/#{site.config['tag_dir']}/#{tag}\">#{tag}</a>"
+            end
+        end
+
+        def categorylinks(input)
+            site = @context.registers[:site]
+            input.map do |cat|
+                "<a href=\"#{site.baseurl}/#{site.config['category_dir']}/#{cat}\">#{cat}</a>"
+            end
+        end
+    end
+
+    class CategoryLinkTag < Liquid::Tag
+        def initialize(tag_name, text, tokens)
+            super
+            @text = text
+        end
+
+        def render(context)
+            @context = context
+            site = context.registers[:site]
+            dir = site.config['category_dir'] || 'categories'
+
+            "/#{dir}/#{@text}"
+        end
+    end
+end
+
+Liquid::Template.register_tag('category_link', Jekyll::CategoryLinkTag)
+Liquid::Template.register_filter(Jekyll::CategoryTagFilter)

data/_plugins/filesize_filter.rb

@@ -0,0 +1,13 @@
+
+module Jekyll
+  module FilesizeFilter
+    def filesize(input)
+      site = @context.registers[:site]
+      file = site.static_files.find {|f| f.path.end_with?(input) }
+
+      File.size(file.path)
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::FilesizeFilter)

data/_plugins/normalize_whitespace_filter.rb

@@ -0,0 +1,10 @@
+
+module Jekyll
+  module NormalizeWhitespaceFilter
+    def normalize_whitespace(input)
+      input.gsub(/\s+/, ' ')
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::NormalizeWhitespaceFilter)

data/_plugins/songlink_tag_plugin.rb

@@ -0,0 +1,18 @@
+
+module Jekyll
+  class SonglinkTag < Liquid::Tag
+    @songlink = ''
+
+    def initialize(tag_name, markup, tokens)
+        @songlink = markup.split(' ').first
+    end
+
+    def render(context)
+        output = super
+        url = "https://embed.song.link/?url=#{@songlink}&theme=light"
+        songlink = "<iframe width='100%' height='414' src='#{url}' frameborder='0' allowfullscreen sandbox='allow-same-origin allow-scripts allow-presentation allow-popups allow-popups-to-escape-sandbox'></iframe>"
+    end
+  end
+end
+
+Liquid::Template.register_tag('songlink', Jekyll::SonglinkTag)

data/_plugins/video_tag_plugin.rb

@@ -0,0 +1,62 @@
+# Title: Simple Video tag for Jekyll
+# Author: Brandon Mathis http://brandonmathis.com
+# Description: Easily output MPEG4 HTML5 video with a flash backup.
+#
+# Syntax {% video url/to/video [width height] [url/to/poster] %}
+#
+# Example:
+# {% video http://site.com/video.mp4 720 480 http://site.com/poster-frame.jpg %}
+#
+# Output:
+# <video width='720' height='480' preload='none' controls poster='http://site.com/poster-frame.jpg'>
+#   <source src='http://site.com/video.mp4' type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'/>
+# </video>
+#
+
+module Jekyll
+
+  class VideoTag < Liquid::Tag
+    @video = nil
+    @poster = ''
+    @height = ''
+    @width = ''
+
+    def initialize(tag_name, markup, tokens)
+      @videos = markup.scan(/((https?:\/\/|\/)\S+\.(webm|ogv|mp4)\S*)/i).map(&:first).compact
+      @poster = markup.scan(/((https?:\/\/|\/)\S+\.(png|gif|jpe?g)\S*)/i).map(&:first).compact.first
+      @sizes  = markup.scan(/\s(\d\S+)/i).map(&:first).compact
+      super
+    end
+
+    def render(context)
+      output = super
+      types = {
+        '.mp4' => "type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'",
+        '.ogv' => "type='video/ogg; codecs=theora, vorbis'",
+        '.webm' => "type='video/webm; codecs=vp8, vorbis'"
+      }
+      if @videos.size > 0
+        video =  "<video #{sizes} preload='metadata' controls #{poster}>"
+        @videos.each do |v|
+          video << "<source src='#{v}' #{types[File.extname(v)]}>"
+        end
+        video += "</video>"
+      else
+        "Error processing input, expected syntax: {% video url/to/video [url/to/video] [url/to/video] [width height] [url/to/poster] %}"
+      end
+    end
+
+    def poster
+      "poster='#{@poster}'" if @poster
+    end
+
+    def sizes
+      attrs = "width='#{@sizes[0]}'" if @sizes[0]
+      attrs += " height='#{@sizes[1]}'" if @sizes[1]
+      attrs
+    end
+  end
+end
+
+Liquid::Template.register_tag('video', Jekyll::VideoTag)
+

data/_plugins/vimeo_tag_plugin.rb

@@ -0,0 +1,23 @@
+
+class VimeoEmbed < Liquid::Tag
+
+  def initialize(tagName, content, tokens)
+    super
+    @content = content
+    content[/([0-9]+)/]
+    @vimeo_id = $1
+  end
+
+  def render(context)
+    tmpl_path = File.join Dir.pwd, "_includes", "vimeo.html"
+    if File.exist?(tmpl_path)
+      tmpl = File.read tmpl_path
+      site = context.registers[:site]
+      tmpl = (Liquid::Template.parse tmpl).render site.site_payload.merge!({"vimeo_id" => @vimeo_id})
+    else
+      %Q{<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>    <iframe title="vimeo video player" width="640" height="390" src="//www.vimeo.com/embed/#{ @vimeo_id }" frameborder="0" allowfullscreen></iframe></div>}
+    end
+  end
+
+  Liquid::Template.register_tag "vimeo", self
+end

data/_plugins/yearly_archive_plugin.rb

@@ -0,0 +1,81 @@
+# Jekyll Module to create yearly archive pages
+#
+# Shigeya Suzuki, November 2013
+# Copyright notice (MIT License) attached at the end of this file
+#
+
+#
+# This code is based on the following works:
+#   https://gist.github.com/ilkka/707909
+#   https://gist.github.com/ilkka/707020
+#   https://gist.github.com/nlindley/6409459
+#
+
+#
+# Archive will be written as #{archive_path}/#{year}/#{month}/index.html
+# archive_path can be configured in 'path' key in 'yearly_archive' of
+# site configuration file. 'path' is default null.
+#
+
+module Jekyll
+
+  module YearlyArchiveUtil
+    def self.archive_base(site)
+      site.config['yearly_archive'] && site.config['yearly_archive']['path'] || ''
+    end
+  end
+
+  # Generator class invoked from Jekyll
+  class YearlyArchiveGenerator < Generator
+    def generate(site)
+      posts_by_year = posts_group_by_year(site)
+      site.pages << ArchivePage.new(site, YearlyArchiveUtil.archive_base(site), posts_by_year)
+    end
+
+    def posts_group_by_year(site)
+      site.posts.docs.each.group_by { |post| post.date.year }
+    end
+
+  end
+
+  class ArchivePage < Page
+    def initialize(site, dir, posts_by_year)
+      @site = site
+      @dir = dir
+      @years = posts_by_year
+      @layout = 'archive'
+      self.ext = '.html'
+      self.basename = 'archive'
+      self.data = {
+        'layout' => @layout,
+        'type' => 'archive',
+        'title' => 'Archieven',
+        'site_header' => 'Archieven',
+        'years' => @years,
+        'url' => File.join('/', YearlyArchiveUtil.archive_base(site), 'archives.html')
+      }
+    end
+  end
+end
+
+# The MIT License (MIT)
+#
+# Copyright (c) 2013 Shigeya Suzuki
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in all
+# copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+# SOFTWARE.

data/_sass/jekyll-theme-switch/_base.scss

@@ -126,7 +126,7 @@ a {
     color: $brand-color;
 
     &:visited {
-        color: darken($brand-color, 15%);
+      color: adjust-hue($brand-color, +120deg);
     }
 
     &:hover {

data/_sass/jekyll-theme-switch/_dark.scss

@@ -1,26 +1,72 @@
-
 @media (prefers-color-scheme: dark) {
     body {
         color: $text-color-dark;
     }
 
+    .post-meta ul li {
+        .meta-text {
+            color: $grey-color-dark;
+        }
+
+        .meta-icon svg {
+            fill: $grey-color-dark;
+        }
+    }
+
     body,
     .page-content,
     .post-content,
+    {
+        background-color: $background-color-dark;
+    }
+
+    body > header,
+    body > footer,
+    article div.series-header,
+    article div.series-footer,
     .pagination,
+    .post-list > li,
     .site-nav,
     .section-nav,
     .post-nav,
-    .post-list li
-    {
-        background-color: $background-color-dark;
+    .post-content tbody tr:nth-child(odd) {
+        background-color: lighten($background-color-dark, 5%);
+    }
+
+    .post-content {
+        td, th {
+            border-bottom-color: $brand-color-dark;
+        }
+
+        q {
+            background-color: lighten($background-color-dark, 10);
+        }
+    }
+
+    .pagination,
+    .post-nav,
+    .section-nav {
+        .button {
+            border-color: $grey-color-dark;
+
+            &.disabled {
+                color: $grey-color-dark;
+            }
+        }
+    }
+
+    .highlight,
+    pre,
+    code {
+        background-color: lighten($background-color-dark, 10%);
+        border-color: $grey-color-dark;
     }
 
     a {
         color: $brand-color-dark;
 
         &:visited {
-            color: lighten($brand-color-dark, 15%);
+            color: adjust-hue($brand-color-dark, -120deg);
         }
 
         &:hover {

data/_sass/jekyll-theme-switch/_layout.scss

@@ -4,6 +4,7 @@
 .site-header {
     border-top: 5px solid $grey-color-dark;
     min-height: 56px;
+    z-index: 100;
 
     // Positioning context for the mobile navigation icon
     position: relative;
@@ -101,6 +102,10 @@
     margin-left: 0;
 }
 
+.footer-wide {
+    text-align: center;
+}
+
 .footer-col-wrapper {
     font-size: 15px;
     color: $grey-color;
@@ -189,6 +194,33 @@
 .post-meta {
     font-size: $small-font-size;
     color: $grey-color;
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+
+        li {
+            display: flex;
+            flex-shrink: 0;
+            flex-wrap: nowrap;
+            align-items: center;
+
+            .meta-icon {
+                line-height: 0.8;
+
+                svg {
+                    fill: $grey-color;
+                    height: 24px;
+                }
+            }
+
+            .meta-text {
+                margin: 4px;
+            }
+        }
+    }
 }
 
 .post-link {
@@ -240,6 +272,20 @@
         }
     }
 
+    q {
+        font-style: italic;
+        background-color: darken($background-color, 10);
+        quotes: "«" "»" "‹" "›";
+
+        &:before {
+            content: open-quote;
+        }
+
+        &:after {
+            content: close-quote;
+        }
+    }
+
     table {
         width: 100%;
         border-collapse: collapse;
@@ -252,18 +298,60 @@
         border-bottom: thin solid $brand-color;
     }
 
-    tbody tr:nth-child(odd) {background-color: #f2f2f2;}
+    tbody tr:nth-child(odd) {
+        background-color: darken($background-color, 5%);
+    }
 }
 
 .pagination,
 .post-nav,
 .section-nav {
-  text-align: center;
-        background-color: white;
-        padding: $spacing-unit;
-        margin: $spacing-unit 0;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    background-color: white;
+    padding: $spacing-unit;
+    margin: $spacing-unit 0;
+    border-radius: 4px;
+    @include BoxShadow(1);
+
+    .button {
+        display: flex;
+        align-items: center;
+
+        min-width: 64px;
+        height: 36px;
+        padding: 0 16px 0 12px;
+
+        font-size: 14px;
+        font-weight: bold;
+
+        text-decoration: none;
+        text-transform: uppercase;
+
         border-radius: 4px;
-        @include BoxShadow(1);
+        border: thin solid $grey-color-light;
+
+        &.disabled {
+            color: $grey-color-light;
+        }
+
+        &.previous {
+            padding: 0 16px 0 12px;
+
+            .material-icons {
+                padding-right: 8px;
+            }
+        }
+
+        &.next {
+            padding: 0 12px 0 16px;
+
+            .material-icons {
+                padding-left: 8px;
+            }
+        }
+    }
 }
 
 .post-nav + h3 {
@@ -287,13 +375,8 @@ span.button,
   padding: 5pt 15pt;
 }
 
-div.post-nav .button,
-div.pagination   span.button,
-div.pagination   a.button {
-  margin: 0 5%;
-}
-
 a.button:hover,
+.pagination a:hover,
 .post-nav a:hover,
 .section-nav a:hover {
   background: lightgray;
@@ -343,14 +426,16 @@ article div.comment
 article div.series-header,
 article div.series-footer
 {
-  border: thin dotted lightgrey;
-  padding: 1em;
-  margin: 1em 0;
-  clear: both;
-
-  :last-child {
-    margin-bottom: 0;
-  }
+    background-color: white;
+    padding: $spacing-unit;
+    margin: $spacing-unit 0;
+    border-radius: 4px;
+    @include BoxShadow(1);
+    clear: both;
+
+    :last-child {
+        margin-bottom: 0;
+    }
 }
 
 .yearly-archive dl h2 {
@@ -387,3 +472,55 @@ article div.series-footer
     grid-template-columns: 12em 1fr;
     margin-bottom: 1em;
 }
+
+.page-content .post {
+    .lead-image {
+        position: relative;
+        top: -1.5em;
+        display: flex;
+        flex-direction: column;
+        background-size: cover;
+        background-position: 50%;
+        background-color: #707070;
+        background-blend-mode: color-dodge;
+        box-shadow: inset 0 -8px 10px 1px rgba(0, 0, 0, .14),
+            inset 0 -3px 14px 2px rgba(0, 0, 0, .12),
+            inset 0 -5px 5px -3px rgba(0, 0, 0, .20);
+
+        header {
+            text-align: center;
+            align-self: center;
+            padding-top: 100px;
+            padding-bottom: 60px;
+            color: black;
+            max-width: 90vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            gap: 4px;
+
+            .post-title {
+                font-size: 7vw;
+                margin-bottom: 0;
+            }
+
+            ul {
+                justify-content: center;
+                gap: 16px;
+
+                li {
+                    background-color: rgba(255, 255, 255, 0.9);
+                    border-radius: 4px;
+                    padding: 4px;
+                    align-items: center;
+                }
+            }
+        }
+    }
+
+    .lead-image-credit {
+        text-align: center;
+        font-style: italic;
+        color: $grey-color;
+    }
+}

data/_sass/jekyll-theme-switch/_syntax-highlighting.scss

@@ -2,7 +2,6 @@
  * Syntax highlighting styles
  */
 .highlight {
-    background: #fff;
     @extend %vertical-rhythm;
 
     .c     { color: #998; font-style: italic } // Comment