Add draft feature to content-guidelines

_assets/css/_contentguidelines.scss

@@ -1,9 +1,47 @@
 /************************************************
 
-Stylesheet: Conteng Guidelines Stylesheet
+Stylesheet: Content Guidelines Stylesheet
 
 *************************************************/
 
+// Style for "DRAFT" items in the sidebar nav
+.draft {
+  background-color: #ffe900;
+  padding: 4px;
+  font-weight: bold;
+  font-size: 0.8em;
+  border-radius: 2px;
+  text-transform: uppercase;
+  margin: 0 5px;
+}
+
+// Style for warnings
+.warning {
+  display: inline;
+  background-color: #ffe900;
+  border-radius: 2px;
+  padding: 10px 6px;
+  line-height: 1.5;
+
+  img {
+    margin-top: -1px;
+    vertical-align: middle;
+  }
+
+  a {
+    background: #d7b600;
+    border-radius: 2px;
+    color: #0c0c0d;
+    padding: 6px 4px;
+
+    &:hover,
+    &:active,
+    &:visited {
+      color: #0c0c0d;
+    }
+  }
+}
+
 $sidebar-w-sm: rem-calc(200);
 $sidebar-w: rem-calc(230);
 

_assets/img/icons/warning.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="rgba(12, 12, 13, .8)" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"/>
+</svg>

_data/content-guidelines-pages.yaml

@@ -1,8 +1,11 @@
 - title: "Master Template"
   url: "/content-guidelines/master-template/"
+  draft: true
 
 - title: "Extension Name"
   url: "/content-guidelines/extension-name/"
+  draft: true
 
 - title: "Example Two"
   url: "/content-guidelines/example-two/"
+  draft: true

_includes/header.html

@@ -12,9 +12,15 @@
 	            	<ul class="pages">
 					    {% for item in site.data.content-guidelines-pages %}
 						    {% if page.url == item.url %}
-					            <li class="current"><a href="{{ item.url | relative_url }}">{{ item.title }}</a></li>
+							<li class="current">
+								<a href="{{ item.url | relative_url }}">{{ item.title }}</a>
+								{% if item.draft %}<span class="draft">draft</span>{% endif %}
+							</li>
 					        {% else %}
-					      		<li><a href="{{ item.url | relative_url }}">{{ item.title }}</a></li>
+							<li>
+								<a href="{{ item.url | relative_url }}">{{ item.title }}</a>
+								{% if item.draft %}<span class="draft">draft</span>{% endif %}
+							</li>
 					        {% endif %}
 					    {% endfor %}
 					    <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Listing" target="_blank" rel="noreferrer noopener">More Tips</a></li>

_layouts/page.html

@@ -6,9 +6,14 @@ layout: default
         <div class="cell small-12">
 
 		    <div class="post-content">
+			    {% for item in site.data.content-guidelines-pages %}
+					{% if item.url == page.url and item.draft %}
+					<p class="warning">{% asset icons/warning.svg @optim alt="Warning:" %} This is a working draft <a href="https://github.com/mozilla/extension-workshop/issues/new">Report issue</a></p>
+			        {% endif %}
+			    {% endfor %}
+
 		    	{{ content }}
 		    </div>
-		    
 		</div>
 	</div>
 </article>