jekyll-theme-open-project 0.1.6

data/_includes/home-hero.html

@@ -0,0 +1,2 @@
+<h1>{{ site.title }}</h1>
+<p class="desc">{{ site.description }}</p>

data/_includes/home-hub.html

@@ -0,0 +1,61 @@
+{% assign featured_projects = site.projects | where: "featured", true %}
+{% assign num_featured_projects = featured_projects | size %}
+{% if num_featured_projects > 0 %}
+  <section class="featured-projects">
+    <h2 class="title">Featured Projects</h2>
+
+    <div class="items" role="presentation">
+
+      {% for item in featured_projects limit:3 %}
+        {% assign symbol_path = item.path | split: "/" | slice: 0, 2 | join: "/" | append: "/_includes/symbol.svg" %}
+        {% assign relative_symbol_path = "/" | append: symbol_path %}
+
+        <a class="item" href="{{ item.home_url }}" role="article">
+          <div class="logo-container" role="presentation">
+            <div class="logo">{% include_relative {{ relative_symbol_path }} %}</div>
+          </div>
+          <h3 class="header">{{ item.title }}</h3>
+          <p class="body">
+            {{ item.description }}
+          </p>
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
+
+{% assign num_featured_posts = site.posts | size %}
+{% if num_featured_posts > 0 %}
+  <section class="featured-posts">
+    <div role="presentation" class="puny-label">Latest news</div>
+    <h2 class="title">From the Blog</h2>
+
+    <div class="items" role="presentation">
+      {% for item in site.posts limit:3 %}
+        <a class="item" href="{{ item.url }}" role="article">
+          {% include post-card.html %}
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
+
+{% assign other_projects = site.projects | where: "featured", false %}
+{% assign num_other_projects = other_projects | size %}
+{% if num_other_projects > 0 %}
+<section class="other-projects">
+  <h2 class="title">Other Projects</h2>
+
+  <div class="items {% if num_other_projects < 5 %}one-row{% endif %}"
+      role="presentation">
+    {% for item in other_projects %}
+      <a class="item" href="{{ item.home_url }}" role="article">
+        <h3 class="header">{{ item.title }}</h3>
+        <p class="body">
+          {{ item.description }}
+        </p>
+      </a>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

data/_includes/home-project.html

@@ -0,0 +1,56 @@
+{% assign num_software = site.software | size %}
+{% assign num_specs = site.specs | size %}
+{% assign num_posts = site.posts | size %}
+
+{% if num_software > 0 %}
+  <section class="software">
+    <h2 class="title">Software</h2>
+
+    <div class="items">
+      {% for item in site.software %}
+        <a class="item" href="{{ item.url }}" role="article">
+          {% if item.logo_svg %}
+            <div class="logo-container" role="presentation">
+              <div class="logo">{{ item.logo_svg }}</div>
+            </div>
+          {% endif %}
+          <h3 class="header">{{ item.title }}</h3>
+          <p class="body">
+            {{ item.description }}
+          </p>
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
+
+{% if num_specs > 0 %}
+  <section class="specs">
+    <h2 class="title">Specifications</h2>
+
+    <div class="items">
+      {% for item in site.specs %}
+        <a class="item" href="{{ item.url }}" role="article">
+          <h3 class="header">{{ item.title }}</h3>
+          <p class="body">
+            {{ item.description }}
+          </p>
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
+
+{% if num_posts > 0 %}
+  <section class="featured-posts">
+    <h2 class="title">From the Blog</h2>
+
+    <div class="items" role="presentation">
+      {% for item in site.posts %}
+        <a class="item" href="{{ item.url }}" role="article">
+          {% include post-card.html %}
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}

data/_includes/index-page-hero.html

@@ -0,0 +1,2 @@
+<h1>{{ page.title }}</h1>
+<p class="desc">{{ page.description }}</p>

data/_includes/legal.html

@@ -0,0 +1,5 @@
+<span class="copyright">Copyright © 2018 Ribose. All rights reserved.</span>
+<nav>
+  <a href="https://www.ribose.com/tos">Terms</a>
+  <a href="https://www.ribose.com/privacy">Privacy</a>
+</nav>

data/_includes/logo.html

@@ -0,0 +1 @@
+{% include symbol.svg %}&nbsp;<span class="title">{% include title.html %}</span>

data/_includes/nav-page-link.html

@@ -0,0 +1,5 @@
+{% if page.url == include.url %}
+  <span>{{ include.title }}</span>
+{% else %}
+  <a href="{{ include.url }}">{{ include.title }}</a>
+{% endif %}

data/_includes/post-card.html

@@ -0,0 +1,7 @@
+<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>

data/_includes/social-links.html

@@ -0,0 +1,13 @@
+{% if site.social.links %}
+  <aside class="social-links">
+    {% for link in site.social.links %}
+      <a href="{{ link }}">
+        {% if link contains "twitter.com" %}
+          <i class="fab fa-twitter"></i>
+        {% elsif link contains "github.com" %}
+          <i class="fab fa-github"></i>
+        {% endif %}
+      </a>
+    {% endfor %}
+  </aside>
+{% endif %}

data/_includes/symbol.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 85 71" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g class="Canvas" fill="none">
+<g class="fake logo">
+<g class="Shape">
+<path d="M 5.18494 26L 12 20.4972L 18.8151 26L 24 20.7672L 13.2167 0.676004C 12.733 -0.225335 11.267 -0.225335 10.7833 0.676004L 0 20.7672L 5.18494 26Z" transform="translate(30 0)" fill="#111111"/>
+</g>
+<g class="Shape_2">
+<path d="M 75.83 45.8686L 51.6053 0L 45.1415 6.62958L 38 0.770372L 30.8585 6.62958L 24.3947 0L 0.16995 45.8686C -0.0664507 46.3169 -0.0554589 46.8582 0.198126 47.2952C 0.452387 47.7322 0.911439 48 1.4076 48L 74.5924 48C 75.0886 48 75.5476 47.7322 75.8019 47.2952C 76.0555 46.8582 76.0665 46.3169 75.83 45.8686Z" transform="translate(4 23)" fill="#111111"/>
+</g>
+<g class="Shape_3">
+<path d="M 30 12.3799L 22.2626 0.635075C 21.9928 0.226511 21.5122 -0.0257198 21.0508 0.0020861C 20.5653 0.0166721 20.1225 0.283489 19.878 0.707351L 0.191654 34.8599C -0.0623847 35.3004 -0.0637627 35.8438 0.186845 36.2857C 0.437453 36.7276 0.90298 37 1.40626 37L 16.822 37L 30 12.3799Z" transform="translate(0 3)" fill="#905DEE"/>
+</g>
+<g class="Shape_4">
+<path d="M 29.8083 34.8598L 10.1218 0.705378C 9.87741 0.281508 9.43454 0.0146767 8.94912 7.57049e-05C 8.48703 -0.0047913 8.0064 0.22521 7.73724 0.633099L 0 12.3789L 13.1779 37L 28.5937 37C 29.097 37 29.5625 36.7276 29.8131 36.2857C 30.0638 35.8437 30.0624 35.3003 29.8083 34.8598Z" transform="translate(55 3)" fill="#905DEE"/>
+</g>
+</g>
+</g>
+</svg>
+

data/_includes/title.html

@@ -0,0 +1 @@
+{{ site.title }}

data/_layouts/blog-index.html

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

data/_layouts/default.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <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>
+
+  {% seo %}
+</head>
+
+{% assign num_projects = site.projects | size %}
+<body class="
+    {% if num_projects > 0 %}hub{% else %}project{% endif %}
+    {% if page.layout %}layout-{{ page.layout }}{% endif %}">
+  <div class="underlay header" role="presentation">
+    <header>
+      <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 %}
+      </nav>
+      {% include social-links.html %}
+    </header>
+
+    {% if page.hero_include %}
+      <div class="hero" role="presentation">{% include {{ page.hero_include }} %}</div>
+    {% endif %}
+
+    {% comment %}
+    {% if page.layout == "home" %}
+      <div class="hero superhero" role="presentation">{% include home-hero.html %}</div>
+    {% endif %}
+    {% endcomment %}
+  </div>
+
+  <main>
+    {{ content }}
+  </main>
+
+  <div class="underlay footer" role="presentation">
+    <footer>
+      <div class="site-logo">{% include logo.html %}</div>
+      <div class="legal">{% include legal.html %}</div>
+      {% include social-links.html %}
+    </footer>
+  </div>
+</body>

data/_layouts/home.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+{% assign num_projects = site.projects | size %}
+{% if num_projects > 0 %}
+  {% include home-hub.html %}
+{% else %}
+  {% include home-project.html %}
+{% endif %}

data/_layouts/index-page.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<section class="items">
+  {{ content }}
+</section>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<article>
+  <header>
+    <h1 class="title">{{ page.title }}</h1>
+
+    <div class="meta">
+      <span>{{ page.author }}</span>
+      on {{ page.date | date_to_string }}
+    </div>
+  </header>
+
+  <div class="body" role="presentation">
+    {{ content }}
+  </div>
+</article>

data/_layouts/product.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<article>
+
+  <header>
+    <h1 class="title">{{ page.title }}</h1>
+
+    <p class="desc">{{ page.description }}</p>
+
+    <div class="meta">
+      {% if page.repo_url or page.docs_url %}
+        <ul>
+          {% if page.repo_url %}
+            <li>
+            <a href="{{ page.repo_url }}">Source code repository</a> {% endif %}
+          {% if page.docs_url %}
+            <li>
+            <a href="{{ page.docs_url }}">Documentation</a> {% endif %}
+        </ul>
+      {% endif %}
+    </div>
+  </header>
+
+  <div class="body" role="presentation">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/software-index.html

@@ -0,0 +1,18 @@
+---
+layout: index-page
+---
+{% 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: "/" %}
+
+  <a class="item" href="{{ product_home_url }}" role="article">
+    <h3 class="header">{{ product.title }}</h3>
+    <p class="body">
+      {{ product.description }}
+    </p>
+  </a>
+{% endfor %}

data/_layouts/spec-index.html

@@ -0,0 +1,18 @@
+---
+layout: index-page
+---
+{% 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: "/" %}
+
+  <a class="item" href="{{ spec_home_url }}" role="article">
+    <h3 class="header">{{ spec.title }}</h3>
+    <p class="body">
+      {{ spec.description }}
+    </p>
+  </a>
+{% endfor %}

data/_layouts/spec.html

@@ -0,0 +1,29 @@
+---
+layout: default
+---
+
+<article>
+  <header>
+    <h1 class="title">{{ page.title }}</h1>
+
+    <div class="meta">
+      {% if page.rfc_id or page.ietf_datatracker_id or page.source_url %}
+        <ul>
+          {% if page.rfc_id %}
+            <li>
+            <a href="http://ietf.org/html/rfc{{ page.rfc_id }}">IETF RFC {{ page.rfc_id }}</a> {% endif %}
+          {% if page.ietf_datatracker_id %}
+            <li>
+            <a href="https://datatracker.ietf.org/doc/{{ page.ietf_datatracker_id }}{% if page.ietf_datatracker_ver %}-{{ page.ietf_datatracker_ver }}{% endif %}">IETF document</a> {% endif %}
+          {% if page.source_url %}
+            <li>
+            <a href="{{ page.source_url }}">Source markup</a> {% endif %}
+        </ul>
+      {% endif %}
+    </div>
+  </header>
+
+  <div class="body" role="presentation">
+    {{ content }}
+  </div>
+</article>

data/_pages/blog.html

@@ -0,0 +1,8 @@
+---
+title: Blog
+description: >-
+  Get the latest announcements and technical how-to’s
+  about our software and projects.
+layout: blog-index
+hero_include: index-page-hero.html
+---

data/_pages/software.html

@@ -0,0 +1,6 @@
+---
+title: Software
+description: Open-source software developed with Ribose’s cooperation.
+layout: software-index
+hero_include: index-page-hero.html
+---

data/_pages/specs.html

@@ -0,0 +1,6 @@
+---
+title: Specifications
+description: Because specifications are cool!
+layout: spec-index
+hero_include: index-page-hero.html
+---

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

@@ -0,0 +1,249 @@
+$primary-color: lightblue !default;
+$primary-dark-color: navy !default;
+$accent-color: red !default;
+
+$header-background: $primary-dark-color !default;
+$hero-background: $primary-dark-color !default;
+$superhero-background: $primary-dark-color !default;
+
+$gutter: 30px;
+$featured-cols: 3;
+$grid-cols: 4;
+
+$widescreen-breakpoint: 1140px + $gutter * 2;
+$bigscreen-breakpoint: 900px + $gutter * 2;
+
+
+@import "open-project-base";
+@import "open-project-header-footer";
+
+
+/* Generic */
+
+body {
+
+  &.layout-home > main {
+    > .featured-posts {
+      @extend .main-section;
+
+      .items {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @extend .post-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 32px 30px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+
+        .header {
+          font-size: 22px;
+        }
+
+        .body, .meta {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+        }
+      }
+    }
+  }
+
+  &.layout-spec-index > main,
+  &.layout-software-index > main {
+    > .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+
+      .items.one-row {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 32px 30px;
+
+        .header {
+          font-size: 18px;
+        }
+        .body {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
+          margin-bottom: $gutter;
+        }
+      }
+    }
+  }
+
+  &.layout-blog-index > main {
+    > .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+
+      .items.one-row {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @extend .post-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 32px 30px;
+
+        .header {
+          font-size: 22px;
+        }
+        .body {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+          margin-bottom: $gutter;
+        }
+      }
+    }
+  }
+
+  &.layout-post > main > article {
+    @extend .main-article;
+
+    > header > .meta {
+      color: grey;
+    }
+  }
+}
+
+
+/* Hub */
+
+body.hub {
+
+  &.layout-home > main {
+    > .featured-projects {
+      @extend .main-section;
+
+      .items {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));
+
+        padding: 40px 32px;
+        text-align: center;
+
+        .logo {
+          display: inline-block;
+          height: 80px;
+          width: 80px;
+        }
+        .header {
+          font-size: 24px;
+        }
+        .body {
+          font-size: 16px;
+          height: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+        }
+      }
+    }
+
+    > .other-projects {
+      @extend .main-section;
+
+      .items.one-row {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+
+        padding: 32px 30px;
+
+        .header {
+          font-size: 18px;
+        }
+        .body {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
+          margin-bottom: $gutter;
+        }
+      }
+    }
+  }
+}
+
+
+/* Project */
+
+body.project {
+
+  &.layout-home > main {
+    > .software,
+    > .specs {
+      @extend .main-section;
+
+      .items {
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));
+
+        padding: 40px 32px;
+        text-align: center;
+
+        .logo {
+          display: inline-block;
+          height: 80px;
+          width: 80px;
+        }
+        .header {
+          font-size: 24px;
+        }
+        .body {
+          font-size: 16px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+        }
+      }
+    }
+  }
+
+  &.layout-spec > main > article {
+    @extend .main-article;
+  }
+  &.layout-product > main > article {
+    @extend .main-article;
+  }
+}