jekyll-wren 0.4

data/_includes/social-list.html

@@ -0,0 +1,46 @@
+{%comment%} values come from mix of config and data file {%endcomment%}
+{%- assign config = site.wren.social_links -%}
+{%- assign data   = site.wren_social_data -%}
+
+{%comment%} double loop allows multiple from same service {%endcomment%}
+{%- for service in config -%}
+  {%- for entry in service[1] -%}
+    {%comment%} can give username as object or value {%endcomment%}
+    {%- assign handle = entry.username | default: entry -%}
+
+    {%comment%}
+      Key by which config identifies the service. Note that this key doesn't have to
+      be known to the data file also; this template's logic will muddle through what
+      information it has and piece together a button as best it can.
+    {%endcomment%}
+    {%-assign key = service[0] -%}
+
+    {%comment%} checks if Wren covers service, if not switch to fallbacks {%endcomment%}
+    {%- assign name = data[key]["name"] | default: entry.name -%}
+    {%- assign icon = data[key]["name"] | default: "Default" -%}
+
+    {%comment%} url can come from config or datafile {%endcomment%}
+    {%- assign url = entry.instance | default: data[key]["url"] -%}
+
+    {%comment%} handle service specific url delimiters {%endcomment%}
+    {%- if key == "mastodon" or key == "medium" -%}
+      {%- assign delimiter = "/@" -%}
+    {%- else -%}
+      {%- assign delimiter = "/" -%}
+    {%- endif -%}
+
+    {%comment%} id allows URLs to differ from usernames {%endcomment%}
+    {%- assign url_handle = entry.id | default: handle -%}
+
+    {%comment%} generate the full profile url {%endcomment%}
+    {%- assign profile_link = url | prepend: 'https://' | append: delimiter | append: url_handle -%}
+
+    {%comment%} actual HTML which forms the social button {%endcomment%}
+    <a rel="author" alt="{{ name }}" title="{{ handle }}" href="{{ profile_link }}">
+      <svg>
+        {%comment%} #soc acts as an anchor for the import {%endcomment%}
+        <use xlink:href="{{ icon | prepend: '/assets/social-icons/' | append: '.svg#soc' | relative_url }}"/>
+      </svg>
+    </a>
+  {%endfor%}
+{% endfor %}

data/_includes/video-player.html

@@ -0,0 +1,66 @@
+{% comment %}
+  Embedded video player for a bunch of different host websites.
+  Takes the parameters `site` for video host, `alt` for the title,
+  and `id` for the video ID (usually in the URL) and then returns
+  the iframe needed to embed that video in a page. It's based on
+  the templates from https://github.com/nathancy/jekyll-embed-video
+  but combined into a one player, rather than players for each host.
+{% endcomment %}
+
+{% comment %} default player variables {% endcomment %}
+{%- assign width  = "500px" -%}
+{%- assign height = "281px" -%}
+{%- assign allow_autoplay   = false -%}
+{%- assign allow_fullscreen = true -%}
+
+{% comment %}
+  Some sites also ask for the site doing the embedding for
+  security purposes, so this quick check makes sure things
+  keep working seamlessly between local and prod builds.
+{% endcomment %}
+{%- if jekyll.environment == "production" -%}
+  {%- assign host = site.url -%}
+{%- else -%}
+  {%- assign host = "127.0.0.1" -%}
+{% endif -%}
+
+{% comment %} shortcut variables {% endcomment %}
+{%- assign id     = include.id -%}
+{%- assign source = include.site -%}
+
+{%- if source == "Dailymotion" -%}
+  {%- assign url = "dailymotion.com/embed/video/" -%}
+  {%- elsif source == "Google Drive" -%}
+  {%- assign url = "drive.google.com/file/d/" -%}
+{%- elsif source == "Streamable" -%}
+  {%- assign url = "streamable.com/s/" -%}
+{%- elsif source == "Twitch" -%}
+  {%- assign url = "clips.twitch.tv/embed?clip=" -%}
+  {%- assign id = id | append: "&parent=" | append: host -%}
+{%- elsif source == "Vimeo" -%}
+  {%- assign url = "player.vimeo.com/video/" -%}
+{%- elsif source == "YouTube" -%}
+  {%- assign url = "youtube.com/embed/" -%}
+{%- endif -%}
+
+<iframe
+  class  = "video-embed"
+  alt    = "{{ include.alt }}"
+  title  = "{{ include.alt }}"
+  src    = "{{ url | append: id | prepend: 'https://' }}"
+  width  = {{ width }}
+  height = {{ height }}
+  frameborder = "0"
+  scrolling = "no"
+  {% if allow_autoplay == true -%}
+    allow = "autoplay"
+    autoplay = true
+  {% else -%}
+    autoplay = false
+  {%- endif -%}
+  {% if allow_fullscreen == true -%}
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+  {%- endif -%}>
+</iframe>

data/_layouts/author-list.html

@@ -0,0 +1,73 @@
+---
+layout: page
+---
+
+<div class="post-list-page">
+
+{%comment%} allows for preface before author list {%endcomment%}
+{{ content }}
+
+{%comment%}
+  Okay so hear me out. While Jekyll does have the site.authors variable,
+  unlike with site.tags this isn't a list of all the authors across all
+  posts which can be indexed into like site.tags["misc"]. Instead it's
+  just just a variable (object or value) defined in the config file.
+
+  At the same time, Liquid doesn't provide a way to directly initialise
+  arbitrary arrays without a data file, and Jekyll can't generate or use
+  data files without a plugin which GitHub pages doesn't support.
+
+  All that together means to list posts by author we need to:
+
+    1. loop over all the posts on the site and append authors to a
+       string which at the end is split to create an array.
+
+    2. loop over all the authors in that array and display a header for
+       each. Within each author loop though we loop again over all the
+       site posts. If the post contains the author in its post.authors,
+       we display that post under the author's header. 
+
+  It's more than a bit messy and would be a easier with a plugin, data
+  file, or Paginate v2 collection, but in the absence of those it works.
+{% endcomment %}
+
+{%comment%} create array of all post authors {% endcomment %}
+{%- assign authors = "" %}
+{%- for post in site.posts %}
+  {%- for author in post.author -%}
+    {%- if authors contains author -%}
+      {%comment%} skip {% endcomment %}
+    {%- else %} 
+      {% assign authors = authors | append: author | append: ',' -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+{%- assign authors = authors | split: ',' -%}
+
+{%comment%} list all the posts by author {% endcomment %}
+{%- for site_author in authors -%}
+  {%- assign author_id = site_author | replace: ' ', '_' -%}
+  <h2 class="post-list-header">
+    <a id={{ author_id }} href={{ author_id | prepend: '#' }}>
+      {{ site_author }}
+    </a>
+  </h2>
+
+  <ul class="post-list">
+    {%- for post in site.posts -%}
+      {%- if post.author contains site_author -%}
+        <li>
+          <a class="post-link" href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+          {%- include meta.html -%}
+          {%- if site.show_list_excerpts -%}
+            {{ post.excerpt }}
+          {%- endif -%}
+        </li>
+      {%- endif -%}
+    {%- endfor -%}
+  </ul>
+{%- endfor -%}
+
+</div>

data/_layouts/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+    {%- include navigation.html -%}
+
+    <main class="page-content" aria-label="Content">
+      {{ content }}
+    </main>
+
+    {%- include footer.html -%}
+  </body>
+
+</html>

data/_layouts/error.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<div class="error">
+  <h1>{{ page.title | escape }}</h1>
+  {{ content }}
+  <br>
+</div>

data/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/post-list.html

@@ -0,0 +1,67 @@
+---
+layout: default
+---
+
+<div class="post-list-page">
+
+{%- if page.title -%}
+  <h1 class="post-title">{{ page.title }}</h1>
+{%- endif -%}
+
+{%comment%} allows for preface before post list {%endcomment%}
+{{ content }}
+
+{% if site.paginate %}
+  {% assign posts = paginator.posts %}
+{% else %}
+  {% assign posts = site.posts %}
+{% endif %}
+
+{%- if posts.size > 0 -%}
+  {%comment%} including <h2> even if empty ensures proper spacing {%endcomment%}
+  <h2 class="post-list-header">
+    {%- if page.list_title -%}
+      {{ page.list_title }}
+    {%- endif -%}
+  </h2>
+  <ul class="post-list">
+    {%- for post in posts -%}
+    <li>
+      <a class="post-link" href="{{ post.url | relative_url }}">
+        {{ post.title | escape }}
+      </a>
+      {%- include meta.html -%}
+      {%- if site.show_excerpts -%}
+        {{ post.excerpt }}
+      {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ul>
+
+  {% comment %} only display pagination navbar if switched on {% endcomment %}
+  {%- if site.paginate -%}
+    {% comment %} and even if it is, only if there's more than one page {% endcomment %}
+    {%- if paginator.previous_page or paginator.next_page -%}
+      <div class="pagination">
+      {%- if paginator.previous_page %}
+        <a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">Prev</a>
+      {%- else %}
+        <div class="pager-edge">First</div>
+      {%- endif %}
+
+      <div>•</div>
+      <div class="current-page">Page {{ paginator.page }}</div>
+      <div>•</div>
+
+      {%- if paginator.next_page %}
+        <a href="{{ paginator.next_page_path | relative_url }}" class="next-page">Next</a>
+      {%- else %}
+        <div class="pager-edge">Last</div>
+      {%- endif %}
+      </div>
+    {%- endif -%}
+  {%- endif -%}
+
+{%- endif -%}
+
+</div>

data/_layouts/post.html

@@ -0,0 +1,16 @@
+---
+layout: default
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    {%- include meta.html -%}
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

data/_layouts/tag-list.html

@@ -0,0 +1,54 @@
+---
+layout: page
+---
+
+{%- assign tags = site.tags | sort -%}
+{%- assign a = site.wren.tag_cloud.a | default: 15 -%}
+{%- assign b = site.wren.tag_cloud.b | default: 80 -%}
+
+<div class="post-list-page">
+
+<div class="tag-cloud">
+  {%- for tag in tags -%}
+    {%- assign tag_name = tag[0] -%}
+    {%- assign tag_count = tag | last | size -%}
+    {%comment%}
+      The font size of each tag is calculated using (a*x + b)%, where x
+      is the number of posts in that tag. This means that as x grows
+      the values of a and b in config.yml might need tweaking.
+    {%endcomment%}  
+    {%- assign style = tag_count | times: a | plus: b | prepend: 'style="font-size: ' | append: '%;"' -%}
+    <a href={{ tag_name | prepend: '#' }} {{ style }} title="{{ tag_count }} posts">{{ tag_name | replace:'-', ' ' }}</a>
+    {%- if forloop.last == false %}, {% endif -%}
+  {%- endfor -%}
+</div>
+
+{%comment%} allows for preface before tag list {%endcomment%}
+{{ content }}
+
+{%- for tag in tags -%}
+  {%- capture tag_name -%}
+    {{ tag | first }}
+  {%- endcapture -%}
+  <h2 class="post-list-header">
+    <a id={{ tag_name }} href={{ tag_name | prepend: '#' }}>
+      {{ tag_name }}
+    </a>
+  </h2>
+
+  <ul class="post-list">
+  {%- for post in site.tags[tag_name] -%}
+    <li>
+      <a class="post-link" href="{{ post.url | relative_url }}">
+        {{ post.title | escape }}
+      </a>
+      {%- include meta.html -%}
+      {%- if site.show_list_excerpts -%}
+        {{ post.excerpt }}
+      {%- endif -%}
+    </li>
+  {%- endfor -%}
+  </ul>
+{%- endfor -%}
+
+</div>

data/_sass/wren/content.scss

@@ -0,0 +1,345 @@
+// The content file controls the base styling of HTML content
+// that Jekyll makes. Note that `layout.scss` tweaks some bits
+// (e.g. headers) further for use in pages and posts.
+
+
+// Setting Up
+html {
+  font-size: $base-font-size;
+  // Reserves space for the scollbar even if not needed, which
+  // prevents the website interface shifting around when going
+  // between pages which do and don't need it.
+  overflow-y: scroll;
+}
+
+// Reset some basic elements
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+}
+
+
+// Basic Styling
+// =============
+
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow-wrap: break-word;
+  width: $content-width+$nav-bar-height;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+// Set `margin-bottom` to maintain vertical rhythm
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: $spacing-unit / 2;
+}
+
+hr {
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+}
+
+// `main` element
+main {
+  display: block;  // default is 'inline' in IE11
+}
+
+
+// Images
+// ======
+
+img {
+  max-width: 100%;
+  margin-bottom: $spacing-unit/2;
+  border-radius: $base-border-radius;
+  box-shadow: $base-shadow;
+  // Centres w/o text wrap on small displays
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  @include if-large {
+    // Text wraps on large displays
+    vertical-align: middle;
+    display:inline;
+  }
+}
+
+img.left {
+  @include if-large {
+    float: left;
+    margin-right: $spacing-unit;
+  }
+}
+
+img.right {
+  @include if-large {
+    float: right;
+    margin-left: $spacing-unit;
+  }
+}
+
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+// Videos
+// ======
+
+.video-embed {
+  margin: 0 auto $spacing-unit/2 auto;
+  box-shadow: $base-shadow;
+  display: block;
+  max-width: 100%;
+  max-height: auto;
+}
+
+
+// Lists
+// =====
+
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+// Headings
+// ========
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-header-weight;
+}
+
+h1 {
+  text-align: $base-h1-alignment;
+  // margin-bottom: $spacing-unit;
+}
+
+
+// Links
+// =====
+
+a {
+  color: $link-base-color;
+  text-decoration: none;
+
+  &:visited {
+    color: $link-visited-color;
+  }
+
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: underline;
+  }
+}
+
+
+// Blockquotes
+// ===========
+
+blockquote {
+  color: $brand-color;
+  border-left: 4px solid $brand-color-light;
+  padding-left: $spacing-unit / 2;
+  @include relative-font-size(1.125);
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  i, em {
+    // Rather unitalicising, add a dotted underline
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+}
+
+
+// Code formatting
+// ===============
+
+pre,
+code {
+  font-family: $code-font-family;
+  font-size: 0.9375em;
+  border: 1px solid $border-color;
+  box-shadow: $base-shadow;
+  border-radius: $base-border-radius/4;
+  background-color: $code-background-color;
+}
+
+code {
+  box-shadow: none;
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.highlight {
+  border-radius: $base-border-radius;
+  background: $code-background-color;
+  @extend %vertical-rhythm;
+
+  .highlighter-rouge & {
+    background: $code-background-color;
+  }
+
+  // Syntax highlighting styles
+  .c     { color: $syntax-comment-color; font-style: italic } // Comment
+  .err   { color: $syntax-error-color; background-color: $syntax-err-background } // Error
+  .k     { font-weight: bold } // Keyword
+  .o     { font-weight: bold } // Operator
+  .cm    { color: $syntax-comment-color; font-style: italic } // Comment.Multiline
+  .cp    { color: $syntax-comment-color; font-weight: bold } // Comment.Preproc
+  .c1    { color: $syntax-comment-color; font-style: italic } // Comment.Single
+  .cs    { color: $syntax-comment-color; font-weight: bold; font-style: italic } // Comment.Special
+  .gd    { color: $syntax-ins-del-color; background-color: lighten($syntax-del-background, 10%) } // Generic.Deleted
+  .gd .x { color: $syntax-ins-del-color; background-color: $syntax-del-background } // Generic.Deleted.Specific
+  .ge    { font-style: italic } // Generic.Emph
+  .gr    { color: $syntax-error-color } // Generic.Error
+  .gh    { color: $syntax-comment-color } // Generic.Heading
+  .gi    { color: $syntax-ins-del-color; background-color: lighten($syntax-ins-background, 10%) } // Generic.Inserted
+  .gi .x { color: $syntax-ins-del-color; background-color: $syntax-ins-background } // Generic.Inserted.Specific
+  .go    { color: $syntax-output-color } // Generic.Output
+  .gp    { color: $syntax-prompt-color } // Generic.Prompt
+  .gs    { font-weight: bold } // Generic.Strong
+  .gu    { color: $syntax-subhead-color } // Generic.Subheading
+  .gt    { color: $syntax-error-color } // Generic.Traceback
+  .kc    { font-weight: bold } // Keyword.Constant
+  .kd    { font-weight: bold } // Keyword.Declaration
+  .kp    { font-weight: bold } // Keyword.Pseudo
+  .kr    { font-weight: bold } // Keyword.Reserved
+  .kt    { color: $syntax-class-color; font-weight: bold } // Keyword.Type
+  .m     { color: $syntax-number-color } // Literal.Number
+  .s     { color: $syntax-string-color } // Literal.String
+  .na    { color: $syntax-variable-color } // Name.Attribute
+  .nb    { color: $syntax-builtin-color } // Name.Builtin
+  .nc    { color: $syntax-class-color; font-weight: bold } // Name.Class
+  .no    { color: $syntax-variable-color } // Name.Constant
+  .ni    { color: $syntax-entity-color } // Name.Entity
+  .ne    { color: $syntax-error-color; font-weight: bold } // Name.Exception
+  .nf    { color: $syntax-function-color; font-weight: bold } // Name.Function
+  .nn    { color: $syntax-prompt-color } // Name.Namespace
+  .nt    { color: $syntax-tag-color } // Name.Tag
+  .nv    { color: $syntax-variable-color } // Name.Variable
+  .ow    { font-weight: bold } // Operator.Word
+  .w     { color: $syntax-whitespace-color } // Text.Whitespace
+  .mf    { color: $syntax-number-color } // Literal.Number.Float
+  .mh    { color: $syntax-number-color } // Literal.Number.Hex
+  .mi    { color: $syntax-number-color } // Literal.Number.Integer
+  .mo    { color: $syntax-number-color } // Literal.Number.Oct
+  .sb    { color: $syntax-string-color } // Literal.String.Backtick
+  .sc    { color: $syntax-string-color } // Literal.String.Char
+  .sd    { color: $syntax-string-color } // Literal.String.Doc
+  .s2    { color: $syntax-string-color } // Literal.String.Double
+  .se    { color: $syntax-string-color } // Literal.String.Escape
+  .sh    { color: $syntax-string-color } // Literal.String.Heredoc
+  .si    { color: $syntax-string-color } // Literal.String.Interpol
+  .sx    { color: $syntax-string-color } // Literal.String.Other
+  .sr    { color: $syntax-regex-color } // Literal.String.Regex
+  .s1    { color: $syntax-string-color } // Literal.String.Single
+  .ss    { color: $syntax-symbol-color } // Literal.String.Symbol
+  .bp    { color: $syntax-comment-color } // Name.Builtin.Pseudo
+  .vc    { color: $syntax-variable-color } // Name.Variable.Class
+  .vg    { color: $syntax-variable-color } // Name.Variable.Global
+  .vi    { color: $syntax-variable-color } // Name.Variable.Instance
+  .il    { color: $syntax-number-color } // Literal.Number.Integer.Long
+}
+
+
+// Clearfix
+// ========
+
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+// Table Formatting
+// ================
+
+table {
+  margin-bottom: $spacing-unit;
+  width: 100%;
+  text-align: $table-text-align;
+  color: $table-text-color;
+  border-collapse: collapse;
+
+  // Properties for the table's external border
+  border: 1px solid $table-border-color;
+  border-radius: $base-border-radius;
+  box-shadow: $base-shadow;
+
+  // Properties for the table's internal borders
+  th, td {
+    // All cells have the same padding rules
+    padding: ($spacing-unit / 3) ($spacing-unit / 2);
+  }
+  tr {
+    // Alternate row background colours
+    &:nth-child(even) {
+      background-color: $table-zebra-color;
+    }
+    // Internal vertical borders
+    border-bottom: 1px solid $table-border-color;
+    &:last-of-type { border-bottom: 0; }
+  }
+  td {
+    // Internal horizontal borders
+    border-right: 1px solid $table-border-color;
+    &:last-of-type { border-right: 0; }
+  }
+  th {
+    // Table header has its own colour properties
+    background-color: $table-header-bg-color;
+    border-bottom: 1px solid $table-header-border;
+    border-right: 1px solid $table-header-border;
+    &:last-of-type { border-right: 0; }
+  }
+
+  // Handle overflow if there isn't enough space to display
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+          -ms-overflow-style: -ms-autohiding-scrollbar;
+}