Add a badge containing DOI for peer-reviewed lessons

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 0.3.3
+Version: 0.3.3.9000
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

NEWS.md

@@ -1,3 +1,9 @@
+# varnish 0.3.3.9000
+
+* life cycle icons are now displayed as badges for better visibility
+* lessons that are stable with peer-reviewed doi releases will now have a doi
+  badge displayed with a link to the publication.
+
 # varnish 0.3.3
 
 * Code blocks in narrative no longer have a white background on top of the grey

inst/pkgdown/templates/header.html

@@ -6,32 +6,42 @@
         <img alt="{{#yaml}}{{carpentry_name}}{{/yaml}}" src="{{#site}}{{root}}{{/site}}assets/images/{{#yaml}}{{carpentry_icon}}-logo.svg{{/yaml}}">
         {{#yaml}}{{#life_cycle}}
         {{#pre_alpha}}
-        <abbr class="icon" title="This lesson is in the pre-alpha phase, which means that it is in early development, but has not yet been taught." style="text-decoration: unset">
-          &nbsp;
-          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#early-development-pre-alpha-through-alpha" class="alert-link" style="color: #383838">Pre-Alpha
-            <i aria-hidden="true" class="icon" data-feather="alert-octagon" style="color: #FF4955; border-radius: 5px"></i>
+        <abbr class="badge badge-light" title="This lesson is in the pre-alpha phase, which means that it is in early development, but has not yet been taught." style="background-color: #FF4955; border-radius: 5px">
+          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#early-development-pre-alpha-through-alpha" class="alert-link" style="color: #000">
+            <i aria-hidden="true" class="icon" data-feather="alert-octagon" style="border-radius: 5px"></i>
+            Pre-Alpha
           </a>
           <span class="visually-hidden">This lesson is in the pre-alpha phase, which means that it is in early development, but has not yet been taught.</span>
         </abbr>
         {{/pre_alpha}}
         {{#alpha}}
-        <abbr class="icon" title="This lesson is in the alpha phase, which means that it has been taught once and lesson authors are iterating on feedback." style="text-decoration: unset">
-          &nbsp;
-          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#field-testing-alpha-stage" class="alert-link" style="color: #383838">Alpha
-            <i aria-hidden="true" class="icon" data-feather="alert-triangle" style="background: #FFC700; border-radius: 5px"></i>
+        <abbr class="badge badge-light" title="This lesson is in the alpha phase, which means that it has been taught once and lesson authors are iterating on feedback." style="background-color: #FFC700; border-radius: 5px">
+          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#field-testing-alpha-stage" class="alert-link" style="color: #383838">
+            <i aria-hidden="true" class="icon" data-feather="alert-triangle" style="border-radius: 5px"></i>
+            Alpha
           </a>
           <span class="visually-hidden">This lesson is in the alpha phase, which means that it has been taught once and lesson authors are iterating on feedback.</span>
         </abbr>
         {{/alpha}}
         {{#beta}}
-        <abbr class="icon" title="This lesson is in the beta phase, which means that it is ready for teaching by instructors outside of the original author team." style="text-decoration: unset">
-          &nbsp;
-          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#polishing-beta-stage" class="alert-link" style="color: #383838">Beta
-            <i aria-hidden="true" class="icon" data-feather="alert-circle" style="color: #001483; border-radius: 5px"></i>
+        <abbr class="badge badge-light" title="This lesson is in the beta phase, which means that it is ready for teaching by instructors outside of the original author team." style="background-color: #001483; border-radius: 5px">
+          <a href="https://cdh.carpentries.org/the-lesson-life-cycle.html#polishing-beta-stage" class="alert-link" style="color: #FFF7F1">
+            <i aria-hidden="true" class="icon" data-feather="alert-circle" style="border-radius: 5px"></i>
+            Beta
           </a>
           <span class="visually-hidden">This lesson is in the beta phase, which means that it is ready for teaching by instructors outside of the original author team.</span>
         </abbr>
         {{/beta}}
+        {{#stable}}
+        {{#doi}}
+        <abbr class="badge badge-light" title="This lesson has passed peer review" style="background-color: #FFE7A8; border-color: #0044d7; border-style: solid; border-radius: 5px">
+          <a href="https://doi.org/{{doi}}" class="external-link alert-link" style="color: #383838;">
+            <i aria-hidden="true" class="icon" data-feather="user-check" style="border-radius: 5px"></i>
+            DOI: {{doi}}
+          </a>
+        </abbr>
+        {{/doi}}
+        {{/stable}}
         {{/life_cycle}}{{/yaml}}
       </div>
     </div>

source/stylesheets/header.scss

@@ -104,7 +104,8 @@
 }
 
 .large-logo img {
-  max-height: 64px
+  max-height: 64px;
+  margin-right: 1em
 }
 
 .navbar-toggler {
@@ -195,7 +196,7 @@
   padding: inherit;
 }
 
-// the button x centered with the text, 
+// the button x centered with the text,
 // not justified
 .top-nav .beta-alert button.btn-close {
   padding: 0.25rem 0.25rem 0.75rem 0.25rem;
@@ -268,7 +269,7 @@
     z-index:3;
     display: none;
     filter: drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white);
-    
+
   }
 
   #to-top i {
@@ -321,7 +322,7 @@
   .nav-container {
     border: none;
   }
-  
+
   .mobile-title {
     display: none;
   }