jekyll-theme-open-project 0.1.6 → 1.0.0.pre.pre

data/_includes/post-card.html

@@ -1,7 +1,54 @@
-<h3 class="header">{{ item.title }}</h3>
-<p class="body">
-  {{ item.excerpt | remove: '<p>' | remove: '</p>' }}
-</p>
-<div class="meta">
-  {{ item.date | date_to_string }}
-</div>
+<a class="item {% if include.post.parent_project %}has-parent-project{% endif %}"
+  href="
+    {% if include.post.parent_project %}
+      {{ include.post.parent_project.home_url }}blog/{{ include.post.date | date: "%m-%d-%Y" }}/{{ include.post.slug }}/
+    {% else %}
+      {{ include.post.url }}
+    {% endif %}
+  " role="article">
+
+  {% if include.post.parent_project == nil %}
+    <div class="hub-symbol" role="presentation">
+      {% include symbol.svg %}
+    </div>
+  {% endif %}
+
+  <header>
+    {% if include.post.parent_project %}
+      {% assign project_symbol_path = "_projects/" | append: include.post.parent_project.name | append: "/_includes/symbol.svg" %}
+      {% assign relative_symbol_path = "/" | append: project_symbol_path %}
+      <div class="parent-project">
+        <div class="project-logo" role="presentation">
+          {% include {{ relative_symbol_path }} %}
+        </div>
+        <h4 class="project-title">{{ include.post.parent_project.title }}</h4>
+        <div class="external-link-icon" role="presentation">
+          <img src="{{ "assets/img/external-link.svg" | relative_url }}">
+        </div>
+      </div>
+    {% endif %}
+    <h3 class="title">{{ include.post.title }}</h3>
+  </header>
+
+  <p class="body">
+    {{ include.post.excerpt | remove: '<p>' | remove: '</p>' }}
+  </p>
+
+  <footer class="meta">
+    {% if include.post.author.name %}
+      {% if include.post.author.email %}
+        <span class="author-avatar">
+          <img src="https://gravatar.com/avatar/{{ include.post.author.email }}?s=32">
+        </span>
+      {% endif %}
+      <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>
+
+</a>

data/_includes/software-card-hub.html

@@ -0,0 +1,35 @@
+{% assign project_symbol_path = "_projects/" | append: include.project_name | append: "/_includes/symbol.svg" %}
+{% assign relative_symbol_path = "/" | append: project_symbol_path %}
+{% assign item_slug = include.item.title | slugify %}
+{% assign product_home_url = include.project_data.home_url | append: item_slug | append: "/" %}
+
+<a class="item" href="{{ product_home_url }}" role="article">
+  <header>
+    <div class="parent-project">
+      <div class="project-logo">{% include {{ relative_symbol_path }} %}</div>
+      <h4 class="project-title">{{ include.project_data.title }}</h4>
+    </div>
+    <h3 class="title">{{ include.item.title }}</h3>
+  </header>
+
+  <p class="body">
+    {{ include.item.description }}
+  </p>
+
+  <footer class="meta">
+    {% assign num_tags = include.item.tags | size %}
+    {% if num_tags > 0 %}
+      <ul class="tags">
+        {% for tag in include.item.tags %}
+          <li>{{ tag }}</li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+
+    {% if include.item.last_update %}
+      <div class="last-update">
+        Last update: {{ include.item.last_update | date: "%d/%m/%Y" }}
+      </div>
+    {% endif %}
+  </footer>
+</a>

data/_layouts/blog-index.html

@@ -1,9 +1,11 @@
 ---
-layout: index-page
+layout: default
 ---
 
-{% for item in site.posts %}
-  <a class="item" href="{{ item.url }}" role="article">
-    {% include post-card.html %}
-  </a>
-{% endfor %}
+<section class="items">
+  {% include symbol.svg %}
+
+  {% for item in page.posts_combined %}
+    {% include post-card.html post=item %}
+  {% endfor %}
+</section>

data/_layouts/default.html

@@ -5,10 +5,7 @@
   <meta charset="utf-8">
 
   <link rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
-
-  <script defer src="{{ "assets/fa/fa-brands.js" | relative_url }}"></script>
-  <script defer src="{{ "assets/fa/fa-solid.js" | relative_url }}"></script>
-  <script src="{{ "assets/fa/fontawesome.js" | relative_url }}"></script>
+  <script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-E5SpgaZcbSJx0Iabb3Jr2AfTRiFnrdOw1mhO19DzzrT9L+wCpDyHUG2q07aQdO6E" crossorigin="anonymous"></script>
 
   {% seo %}
 </head>
@@ -22,14 +19,19 @@
       <h1 class="site-logo"><a href="/">{% include logo.html %}</a></h1>
       <nav>
         {% include nav-page-link.html url="/" title="Home" %}
-        {% for p in site.pages %}
-          {% comment %}
-            For project sites, exclude all links except for the blog.
-          {% endcomment %}
-          {% if num_projects > 0 or p.url contains "blog" %}
-            {% include nav-page-link.html url=p.url title=p.title %}
-          {% endif %}
-        {% endfor %}
+        {% assign contact_link = "mailto:" | append: site.contact_email %}
+        {% if num_projects > 0 %}
+          {% include nav-page-link.html url="/projects/" title="Open Projects" %}
+          {% include nav-page-link.html url="/software/" title="Open Source Software" active_for_nested=true %}
+          {% include nav-page-link.html url="/specs/" title="Open Specifications" active_for_nested=true %}
+          {% include nav-page-link.html url="/blog/" title="Blog" active_for_nested=true %}
+        {% else %}
+          {% include nav-page-link.html url="/software/" title="Open Source Software" active_for_nested=true %}
+          {% include nav-page-link.html url="/specs/" title="Open Specifications" active_for_nested=true %}
+          {% include project-nav.html %}
+          {% include nav-page-link.html url="/blog/" title="Blog" active_for_nested=true %}
+          {% include nav-page-link.html url=contact_link title="Contact" %}
+        {% endif %}
       </nav>
       {% include social-links.html %}
     </header>

data/_layouts/post.html

@@ -7,11 +7,63 @@ layout: default
     <h1 class="title">{{ page.title }}</h1>
 
     <div class="meta">
-      <span>{{ page.author }}</span>
-      on {{ page.date | date_to_string }}
+      {% if page.author.name %}
+        {% if page.author.email %}
+          <span class="author-avatar">
+            <img src="https://gravatar.com/avatar/{{ page.author.email }}?s=32">
+          </span>
+        {% endif %}
+        <span class="author-name">
+          {{ page.author.name }}
+        </span>
+      {% endif %}
+      <span class="date">
+        {% if page.author.name %}on {% endif %}
+        {{ page.date | date_to_string }}
+      </span>
     </div>
   </header>
 
+  {% assign num_social_links = page.author.social_links | size %}
+  {% if num_social_links > 0 %}
+    <aside class="social-links">
+      {% for link in page.author.social_links %}
+        <a href="{{ link }}" class="ico">
+          <span class="fa-layers fa-2x">
+            <i class="fas fa-circle"></i>
+            <i
+              {% if link contains "twitter.com" %}
+                class="fab fa-twitter"
+                alt="Twitter"
+                title="Twitter"
+              {% elsif link contains "github.com" %}
+                class="fab fa-github"
+                alt="Github"
+                title="Github"
+              {% elsif link contains "linkedin.com" %}
+                class="fab fa-linkedin-in"
+                alt="LinkedIn"
+                title="LinkedIn"
+              {% elsif link contains "facebook.com" %}
+                class="fab fa-facebook-f"
+                alt="Facebook"
+                title="Facebook"
+              {% elsif link contains "tumblr.com" %}
+                class="fab fa-tumblr"
+                alt="Tumblr"
+                title="Tumblr"
+              {% elsif link contains "instagram.com" %}
+                class="fab fa-instagram"
+                alt="Instagram"
+                title="Instagram"
+              {% endif %}
+              data-fa-transform="shrink-9"></i>
+          </span>
+        </a>
+      {% endfor %}
+    </aside>
+  {% endif %}
+
   <div class="body" role="presentation">
     {{ content }}
   </div>

data/_layouts/project-index.html

@@ -0,0 +1,46 @@
+---
+layout: default
+---
+{% assign projects = site.projects | where_exp: "item", "item.home_url != nil" %}
+{% assign num_projects = projects | size %}
+
+{% if num_projects > 0 %}
+  <section class="items">
+    {% include symbol.svg %}
+
+    {% for project in projects %}
+      {% assign symbol_path = project.path | split: "/" | slice: 0, 2 | join: "/" | append: "/_includes/symbol.svg" %}
+      {% assign relative_symbol_path = "/" | append: symbol_path %}
+
+      <a class="item {% if project.featured == true %}featured{% endif %}"
+          href="{{ project.home_url }}"
+          role="article">
+
+        <header>
+          <div class="logo-container" role="presentation">
+            <div class="logo">{% include {{ relative_symbol_path }} %}</div>
+          </div>
+          <h3 class="title">{{ project.title }}</h3>
+        </header>
+
+        <p class="body">
+          {{ project.description }}
+        </p>
+
+        <footer class="meta">
+          {% assign num_tags = project.tags | size %}
+          {% if num_tags > 0 %}
+            <ul class="tags">
+              {% for tag in project.tags %}
+                <li>{{ tag }}</li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </footer>
+
+      </a>
+    {% endfor %}
+  </section>
+{% else  %}
+  <p>No projects to display.</p>
+{% endif %}

data/_layouts/software-index.html

@@ -1,18 +1,17 @@
 ---
-layout: index-page
+layout: default
 ---
-{% assign software = site.projects | where_exp: "item", "item.url contains '_software'" %}
 
-{% for product in software %}
-  {% assign project_name = product.url | split: "/" | slice: 2 | first %}
-  {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
-  {% assign project = site.projects | where: "path", project_index_path | first %}
-  {% assign product_home_url = project.home_url | append: product.slug | append: "/" %}
+{% include index-page-item-filter.html url_tag_prefix="/software/" items=page.items tag=page.tag %}
 
-  <a class="item" href="{{ product_home_url }}" role="article">
-    <h3 class="header">{{ product.title }}</h3>
-    <p class="body">
-      {{ product.description }}
-    </p>
-  </a>
-{% endfor %}
+<section class="items">
+  {% include symbol.svg %}
+
+  {% for product in page.items %}
+    {% assign project_name = product.url | split: "/" | slice: 2 | first %}
+    {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
+    {% assign project = site.projects | where: "path", project_index_path | first %}
+
+    {% include software-card-hub.html item=product project_name=project_name project_data=project %}
+  {% endfor %}
+</section>

data/_layouts/spec-index.html

@@ -1,18 +1,17 @@
 ---
-layout: index-page
+layout: default
 ---
-{% assign specs = site.projects | where_exp: "item", "item.url contains '_specs'" %}
 
-{% for spec in specs %}
-  {% assign project_name = spec.url | split: "/" | slice: 2 | first %}
-  {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
-  {% assign project = site.projects | where: "path", project_index_path | first %}
-  {% assign spec_home_url = project.home_url | append: spec.slug | append: "/" %}
+{% include index-page-item-filter.html url_tag_prefix="/specs/" items=page.items tag=page.tag %}
 
-  <a class="item" href="{{ spec_home_url }}" role="article">
-    <h3 class="header">{{ spec.title }}</h3>
-    <p class="body">
-      {{ spec.description }}
-    </p>
-  </a>
-{% endfor %}
+<section class="items">
+  {% include symbol.svg %}
+
+  {% for spec in page.items %}
+    {% assign project_name = spec.url | split: "/" | slice: 2 | first %}
+    {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
+    {% assign project = site.projects | where: "path", project_index_path | first %}
+
+    {% include software-card-hub.html item=spec project_name=project_name project_data=project %}
+  {% endfor %}
+</section>

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

@@ -6,6 +6,14 @@ $header-background: $primary-dark-color !default;
 $hero-background: $primary-dark-color !default;
 $superhero-background: $primary-dark-color !default;
 
+$hub-software--primary-color: lightsalmon !default;
+$hub-software--primary-dark-color: tomato !default;
+$hub-software--hero-background: $hub-software--primary-dark-color !default;
+
+$hub-specs--primary-color: lightpink !default;
+$hub-specs--primary-dark-color: palevioletred !default;
+$hub-specs--hero-background: $hub-specs--primary-dark-color !default;
+
 $gutter: 30px;
 $featured-cols: 3;
 $grid-cols: 4;
@@ -18,12 +26,42 @@ $bigscreen-breakpoint: 900px + $gutter * 2;
 @import "open-project-header-footer";
 
 
-/* Generic */
+main {
 
-body {
+  /* Generic */
 
-  &.layout-home > main {
-    > .featured-posts {
+  body.layout-home > & {
+    > .underlay {
+      > svg {
+        display: none;
+      }
+      @media screen and (min-width: $bigscreen-breakpoint) {
+        position: relative;
+
+        > * {
+          z-index: 1;
+        }
+        > svg {
+          display: block;
+          z-index: 0;
+          position: absolute;
+        }
+
+        // Top section(s) background
+        &:first-child {
+          padding-bottom: 80px;
+          background-color: #F7F7F7;
+
+          > svg {
+            top: 0;
+            width: 100%;
+            height: 35vw;
+          }
+        }
+      }
+    }
+
+    > .underlay > .featured-posts {
       @extend .main-section;
 
       .items {
@@ -54,8 +92,38 @@ body {
     }
   }
 
-  &.layout-spec-index > main,
-  &.layout-software-index > main {
+  body.layout-spec-index > &,
+  body.layout-software-index > & {
+    > .item-filter {
+      padding: 18px 40px;
+      background-color: #F3F3F3;
+      align-self: stretch;
+      text-align: center;
+
+      ul.tags {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        font-size: 14px;
+
+        > li {
+          display: inline;
+          margin: 0;
+          padding: 0;
+
+          > * {
+            font-weight: 800;
+            margin: 0 4px;
+            padding: 3px 10px 3px 10px;
+            white-space: nowrap;
+          }
+          > a {
+            color: grey;
+          }
+        }
+      }
+    }
+
     > .items {
       @extend .item-grid;
       @extend .index-item-grid;
@@ -68,7 +136,7 @@ body {
         @extend .item-card;
         @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
 
-        padding: 32px 30px;
+        padding: 16px 30px 22px 30px;
 
         .header {
           font-size: 18px;
@@ -85,8 +153,19 @@ body {
       }
     }
   }
+  // Item filter: color override for selected tags
+  > .item-filter ul.tags li > span {
+    body.layout-software-index > & {
+      color: $hub-software--primary-color;
+      background-color: rgba($hub-software--primary-color, 0.1);
+    }
+    body.layout-spec-index > & {
+      color: $hub-specs--primary-color;
+      background-color: rgba($hub-specs--primary-color, 0.1);
+    }
+  }
 
-  &.layout-blog-index > main {
+  body.layout-blog-index > & {
     > .items {
       @extend .item-grid;
       @extend .index-item-grid;
@@ -118,11 +197,54 @@ body {
     }
   }
 
-  &.layout-post > main > article {
-    @extend .main-article;
+  body.layout-post > & {
+    > article {
+      @extend .main-article;
+
+      > header > .meta {
+        @extend .post-meta-row;
+        margin-bottom: 36px;
+      }
+      aside.social-links {
+        position: relative;
+        top: -10px;
+        margin-bottom: 14px;
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          // “Remove” from the flow, and offset to the left
+          $height: 100px;
+
+          height: $height;
+          width: 80px;
+
+          margin-bottom: -$height;
 
-    > header > .meta {
-      color: grey;
+          top: 10px;
+          left: -140px;
+
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: flex-start;
+        }
+
+        > .ico {
+          margin-right: 5px;
+
+          @media screen and (min-width: $bigscreen-breakpoint) {
+            margin-right: 0;
+            margin-bottom: 5px;
+          }
+
+          .fa-layers {
+            > .fa-circle {
+              color: $primary-color;
+            }
+            > :not(.fa-circle) {
+              color: white;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -133,9 +255,13 @@ body {
 body.hub {
 
   &.layout-home > main {
-    > .featured-projects {
+    > .underlay > .featured-projects {
       @extend .main-section;
 
+      > .title:after {
+        border-bottom-color: rgba($primary-dark-color, 0.12);
+      }
+
       .items {
         justify-content: center;
       }
@@ -152,9 +278,12 @@ body.hub {
           height: 80px;
           width: 80px;
         }
-        .header {
+
+        header > .title {
           font-size: 24px;
+          margin: 0;
         }
+
         .body {
           font-size: 16px;
           height: 100px;
@@ -162,38 +291,83 @@ body.hub {
           text-overflow: ellipsis;
         }
 
+        .cta-view-project {
+          text-align: center;
+
+          .button {
+            display: inline-block;
+            padding: 8px 18px;
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: 800;
+            color: white;
+            background-color: $accent-color;
+          }
+        }
+
         @media screen and (min-width: $bigscreen-breakpoint) {
           box-sizing: border-box;
           flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
         }
       }
     }
-
     > .other-projects {
       @extend .main-section;
+      @extend .with-symbol-background;
 
-      .items.one-row {
-        justify-content: center;
+      > .title:after {
+        border-bottom-color: rgba($primary-color, 0.12);
       }
+    }
+  }
 
-      .item {
-        @extend .item-card;
-        @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+  &.layout-project-index > main {
+    .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+    }
+  }
 
-        padding: 32px 30px;
+  &.layout-project-index > main,
+  &.layout-blog-index > main,
+  &.layout-software-index > main,
+  &.layout-spec-index > main {
+    > .items {
+      @extend .with-symbol-background;
+    }
+  }
 
-        .header {
-          font-size: 18px;
-        }
-        .body {
-          font-size: 15px;
-        }
+  &.layout-home > main > .other-projects,
+  &.layout-project-index > main {
+    .items.one-row {
+      justify-content: center;
+    }
 
-        @media screen and (min-width: $bigscreen-breakpoint) {
-          box-sizing: border-box;
-          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
-          margin-bottom: $gutter;
-        }
+    .item {
+      @extend .item-card;
+      @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+
+      padding: 32px 30px;
+      text-align: center;
+
+      .logo {
+        display: inline-block;
+        height: 60px;
+        width: 60px;
+      }
+
+      header > .title {
+        font-size: 18px;
+        margin: 0;
+      }
+
+      .body {
+        font-size: 15px;
+      }
+
+      @media screen and (min-width: $bigscreen-breakpoint) {
+        box-sizing: border-box;
+        flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
       }
     }
   }