jekyll-theme-open-project 2.0.15 → 2.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f3dfd201cb4a8e24160005f658abcf1de56eed59
-  data.tar.gz: ea6818b8f0e03ad32aebf194c14004be7a7144c4
+  metadata.gz: a4d0759e674a68d04270b5506aa86eb15f332eec
+  data.tar.gz: 58118a601f3601d0475d7939b744caefa2d771d3
 SHA512:
-  metadata.gz: 855b217e521c3cb691a0e6f639bf3d6a232bbb4aa028fb5c3c010a313f79895cd2bc2130900f13ad1418651189c30370173ddbe028b925020e71914188fdf640
-  data.tar.gz: 6637f3b27c2d116af706cfb5a43d59c9cacdda51aef7b1079f536833d7be97bcc0401828a61e9ecb1c279cbded4e41efcc2ea356194ad99f56d83b5cd03ffd68
+  metadata.gz: b5d0dd62ebe8b920be3af7330acc3f88d4ae866a1f5e3f0271c6cdf1ebd1706910230a2029aa441bc81beb8dbadcfdfebf5aecf9b5ee0ba2d129ac2f957b9180
+  data.tar.gz: 1d8b86581475836e01629d100fafca63558064a397c2b59baae0234e8e71eef103c8908bfb31b543893cae3bbab4e53df4cdd685865c72e5e2519b9bc500518e

data/_includes/_post-meta.html

@@ -0,0 +1,23 @@
+{% assign authors = "" | split: "," %}
+{% if include.post.author %}
+  {% assign authors = authors | push: include.post.author %}
+{% endif %}
+{% if include.post.authors %}
+  {% assign authors = authors | concat: include.post.authors %}
+{% endif %}
+
+<span class="authors">
+  {% for author in authors %}
+    <span class="author">
+      {% if author.name %}
+        {% include post-author-pic.html author=author %}
+        <span class="author-name">{{ author.name }}</span>
+      {% endif %}
+    </span>
+  {% endfor %}
+</span>
+
+<span class="date">
+  {% if authors %}on {% endif %}
+  {{ include.post.date | date_to_string }}
+</span>

data/_includes/post-card.html

@@ -3,47 +3,57 @@
 {% else %}
   {% capture href %}{{ include.post.url }}{% endcapture %}
 {% endif %}
-<a class="item {% if include.post.parent_project %}has-parent-project{% endif %}"
+
+{% capture cover_image_src %}{% endcapture %}
+{% if include.post.card_image %}
+  {% if include.post.parent_project %}
+    {% capture cover_image_src %}{{ include.post.parent_project.home_url }}{{ include.post.card_image }}{% endcapture %}
+  {% else %}
+    {% capture cover_image_src %}{{ include.post.card_image | relative_url }}{% endcapture %}
+  {% endif %}
+{% endif %}
+
+<a class="item
+    {% if include.post.parent_project %}has-parent-project{% endif %}
+    {% if cover_image_src != "" and include.can_be_featured %}has-cover-image{% endif %}"
   href="{{ href }}" role="article">
 
-  {% if include.post.parent_project == nil and site.is_hub == true %}
-    <div class="hub-symbol">
-      {% include assets/symbol.svg %}
+  {% if cover_image_src != "" and include.can_be_featured %}
+    <div class="cover-image">
+      <img src="{{ cover_image_src }}" alt="Cover image">
     </div>
   {% endif %}
 
-  <header>
-    {% if include.post.parent_project %}
-      {% assign project_symbol_path = include.post.parent_project.name | append: "/assets/symbol.svg" %}
-      {% assign relative_symbol_path = "/projects/" | append: project_symbol_path %}
-      <div class="parent-project">
-        <div class="project-logo">
-          <img src="{{ relative_symbol_path }}">
-        </div>
-        <h4 class="project-title">{{ include.post.parent_project.title }}</h4>
-        <div class="external-link-icon">
-          <img src="{{ "assets/img/external-link.svg" | relative_url }}">
-        </div>
+  <div class="card-body">
+    {% if include.post.parent_project == nil and site.is_hub == true %}
+      <div class="hub-symbol">
+        {% include assets/symbol.svg %}
       </div>
     {% endif %}
-    <h3 class="title">{{ include.post.title }}</h3>
-  </header>
 
-  <p class="body">
-    {{ include.post.excerpt | remove: '<p>' | remove: '</p>' | remove: '<div class="presentation">' | remove: '</div>' }}
-  </p>
+    <header>
+      {% if include.post.parent_project %}
+        {% assign project_symbol_path = include.post.parent_project.name | append: "/assets/symbol.svg" %}
+        {% assign relative_symbol_path = "/projects/" | append: project_symbol_path %}
+        <div class="parent-project">
+          <div class="project-logo">
+            <img src="{{ relative_symbol_path }}">
+          </div>
+          <h4 class="project-title">{{ include.post.parent_project.title }}</h4>
+          <div class="external-link-icon">
+            <img src="{{ "assets/img/external-link.svg" | relative_url }}">
+          </div>
+        </div>
+      {% endif %}
+      <h3 class="title">{{ include.post.title }}</h3>
+    </header>
 
-  <footer class="meta">
-    {% if include.post.author.name %}
-      {% include post-author-pic.html author=include.post.author %}
-      <span class="author-name">
-        {{ include.post.author.name }}
-      </span>
-    {% endif %}
-    <span class="date">
-      {% if include.post.author.name %}on {% endif %}
-      {{ include.post.date | date_to_string }}
-    </span>
-  </footer>
+    <p class="body">
+      {{ include.post.excerpt | remove: '<p>' | remove: '</p>' | remove: '<div class="presentation">' | remove: '</div>' }}
+    </p>
 
+    <footer class="meta">
+      {% include _post-meta.html post=include.post %}
+    </footer>
+  </div>
 </a>

data/_layouts/blog-index.html

@@ -8,6 +8,12 @@ layout: default
   {% endif %}
 
   {% for item in site.posts_combined %}
-    {% include post-card.html post=item %}
+    {% if forloop.first %}
+      {% assign can_be_featured = true %}
+    {% else %}
+      {% assign can_be_featured = false %}
+    {% endif %}
+
+    {% include post-card.html post=item can_be_featured=can_be_featured %}
   {% endfor %}
 </section>

data/_layouts/default.html

@@ -132,12 +132,14 @@
     {% endcomment %}
     <script>
       window.initAlgolia = function () {
-        docsearch({
-          apiKey: '{{ site.algolia_search.api_key }}',
-          indexName: '{{ site.algolia_search.index_name }}',
-          inputSelector: 'input[type=search]',
-          debug: false,
-        });
+        if (window.docsearch) {
+          docsearch({
+            apiKey: '{{ site.algolia_search.api_key }}',
+            indexName: '{{ site.algolia_search.index_name }}',
+            inputSelector: 'input[type=search]',
+            debug: false,
+          });
+        }
       };
     </script>
   {% endif %}

data/_layouts/post.html

@@ -7,16 +7,7 @@ layout: default
     <h1 class="title">{{ page.title }}</h1>
 
     <div class="meta">
-      {% if page.author.name %}
-        {% include post-author-pic.html author=page.author %}
-        <span class="author-name">
-          {{ page.author.name }}
-        </span>
-      {% endif %}
-      <span class="date">
-        {% if page.author.name %}on {% endif %}
-        {{ page.date | date_to_string }}
-      </span>
+      {% include _post-meta.html post=page %}
     </div>
   </header>
 

data/_sass/jekyll-theme-open-project.scss

@@ -238,7 +238,7 @@ main {
         @extend .post-card;
         @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
 
-        padding: 32px 30px 16px 30px;
+        padding: 30px 30px 16px 30px;
 
         .header {
           font-size: 22px;
@@ -251,11 +251,19 @@ main {
           box-sizing: border-box;
           flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} );
           margin-bottom: $gutter;
+
+          &.has-cover-image {
+            flex-basis: 100%;
+          }
         }
         @media screen and (min-width: $widescreen-breakpoint) {
           box-sizing: border-box;
           flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
           margin-bottom: $gutter;
+
+          &.has-cover-image {
+            flex-basis: calc( 100%/#{$featured-cols} * 2 - #{$gutter} );
+          }
         }
       }
     }

data/_sass/open-project-base.scss

@@ -154,6 +154,12 @@ a {
   position: relative;
   overflow: hidden;
 
+  .card-body {
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
   .body {
     flex: 1;
   }
@@ -274,35 +280,45 @@ a {
 }
 
 .post-meta-row {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-
   color: grey;
   font-size: 14px;
 
-  .author-name {
-    margin-right: 10px;
+  .date {
     white-space: nowrap;
-
-    font-weight: 600;
-    color: $primary-color;
   }
 
-  .author-avatar {
-    margin-right: 10px;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    overflow: hidden;
+  .authors {
+    .author {
+      white-space: nowrap;
+      display: inline-block;
+      margin: .2em 0;
 
-    display: inline-block;
-    vertical-align: middle;
+      .author-name {
+        margin-right: 10px;
+        white-space: nowrap;
 
-    img {
-      vertical-align: middle;
-      width: 100%;
-      height: 100%;
+        font-weight: 600;
+        color: $primary-color;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .author-avatar {
+        margin-right: 10px;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+
+        display: inline-block;
+        vertical-align: middle;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
     }
   }
 }
@@ -313,6 +329,34 @@ a {
   &.has-parent-project {
     padding-top: 20px;
   }
+  &.has-cover-image {
+    .cover-image {
+      display: none;
+    }
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      position: relative;
+
+      .card-body {
+        margin-left: calc(50% + #{$gutter} / 2 + 30px);
+      }
+      .cover-image {
+        display: block;
+        margin: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 50%;
+
+        img {
+          display: block;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
   .hub-symbol {
     position: absolute;
     top: 10px;

data/assets/js/opf.js

@@ -1,6 +1,11 @@
 (function () {
   'use strict';
 
+  // NOTE: This contains various JS helpers for Open Project theme,
+  // moving forward the functionality will be refactored into smaller modules
+  // (potentially native reusable web components) which would written in ES6
+  // and compiled, minified and combined at front-end build step.
+
 
   var bigscreenBreakpoint = 800;
   // Conforms to CSS @media rules
@@ -238,6 +243,9 @@
 
 
   // Initializing stuff
+  // The order is significant in many cases, since it involves
+  // UI components that depend on each other.
+
   var hamburgerMenu = initCollapsibleMenu(
     document.querySelector('header nav.top-menu'),
     document.getElementById('hamburgerButton'),

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-open-project
 version: !ruby/object:Gem::Version
-  version: 2.0.15
+  version: 2.0.16
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-22 00:00:00.000000000 Z
+date: 2019-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.0.15
+        version: 2.0.16
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.0.15
+        version: 2.0.16
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -161,6 +161,7 @@ files:
 - README.md
 - _config.yml
 - _includes/_nav-item.html
+- _includes/_post-meta.html
 - _includes/external-link.html
 - _includes/featured_posts.html
 - _includes/featured_software.html