Update code examples with correct languages

nice-digital · Sep 28, 2016 · 73e2580 · 73e2580
1 parent 6649149
commit 73e2580
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 54 deletions.
diff --git a/web/server/views/components/alpha-beta-live.njk b/web/server/views/components/alpha-beta-live.njk
@@ -15,7 +15,7 @@
 	<section id="phase-tag">
 		<h2>Phase tag</h2>
 
-		{% example -%}
+		{% example "html" -%}
 			<p>
 				Phase tags can be used on their own like this:
 				<strong class="phase-tag phase-tag--alpha">ALPHA</strong>
@@ -48,7 +48,7 @@
 
 		<h3>Alpha</h3>
 
-		{% example -%}
+		{% example "html" -%}
 			<p class="phase-banner">
 				<span class="phase-banner__tag">
 					<strong class="phase-tag phase-tag--alpha">ALPHA</strong>
@@ -61,7 +61,7 @@
 
 		<h3>Beta</h3>
 
-		{% example -%}
+		{% example "html" -%}
 			<p class="phase-banner">
 				<span class="phase-banner__tag">
 					<strong class="phase-tag phase-tag--beta">BETA</strong>
@@ -74,7 +74,7 @@
 
 		<h3>Live</h3>
 
-		{% example -%}
+		{% example "html" -%}
 			<p class="phase-banner">
 				<span class="phase-banner__tag">
 					<strong class="phase-tag phase-tag--live">LIVE</strong>

diff --git a/web/server/views/components/breadcrumbs.njk b/web/server/views/components/breadcrumbs.njk
@@ -11,7 +11,7 @@
 			<li>Use <code>class="breadcrumbs__crumb--active"</code> for current page</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<ol class="breadcrumbs">
 				<li class="breadcrumbs__crumb"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb"><a href="#">Nice Guidance</a></li>
@@ -23,7 +23,7 @@
 
 		<p>Used to improve the web by creating a structured data markup schema supported by major search engines. On-page markup helps search engines understand the information on web pages and provide richer search results.</p>
 
-		{% example -%}
+		{% example "html" -%}
 			<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Nice Guidance</a></li>

diff --git a/web/server/views/components/navigation.njk b/web/server/views/components/navigation.njk
@@ -16,7 +16,7 @@
 
 		<h2>Basic</h2>
 
-		{% example -%}
+		{% example "html" -%}
 		<nav class="nav" role="navigation">
 			<ul class="nav__tabs">
 				<li class="active"><a>One</a></li>
@@ -28,7 +28,7 @@
 
 		<h3>Justified</h3>
 
-		{% example -%}
+		{% example "html" -%}
 		<nav class="nav" role="navigation">
 			<ul class="nav__tabs nav__tabs--justified">
 				<li class="active"><a>One</a></li>
@@ -43,7 +43,7 @@
 
 		<h2>Pills</h2>
 
-		{% example -%}
+		{% example "html" -%}
 		<nav class="nav" role="navigation">
 			<ul class="nav__pills">
 				<li class="active"><a>One</a></li>
@@ -55,7 +55,7 @@
 
 		<h3>Justified</h3>
 
-		{% example -%}
+		{% example "html" -%}
 		<nav class="nav" role="navigation">
 			<ul class="nav__pills nav__pills--justified">
 				<li class="active"><a>One</a></li>
@@ -70,7 +70,7 @@
 
 		<h2>Navbar</h2>
 
-		{% example -%}
+		{% example "html" -%}
 			<nav class="navbar" role="navigation">
 				<div class="navbar__inner">
 					<a class="navbar__brand"></a>
@@ -92,7 +92,7 @@
 			<li>Use <code>class="breadcrumbs__crumb--active"</code> for current page</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<ol class="breadcrumbs">
 				<li class="breadcrumbs__crumb"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb"><a href="#">Nice Guidance</a></li>
@@ -104,7 +104,7 @@
 
 		<p>Used to improve the web by creating a structured data markup schema supported by major search engines. On-page markup helps search engines understand the information on web pages and provide richer search results.</p>
 
-		{% example -%}
+		{% example "html" -%}
 			<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Nice Guidance</a></li>

diff --git a/web/server/views/components/tabs.njk b/web/server/views/components/tabs.njk
@@ -40,7 +40,7 @@
 				content: "<h2>Tab three content</h2><p>This is the content for tab 3</p>"
 			}] %}
 
-		{% example -%}
+		{% example "html" -%}
 			{{ tabs(tabsContent) }}
 		{%- endexample %}
 	</section>

diff --git a/web/server/views/sass/code-standards.njk b/web/server/views/sass/code-standards.njk
@@ -94,7 +94,7 @@
 			Variable names should follow the <a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-name-your-sass-variables-modularly/" target="_blank" rel="external">general-to-specific approach</a> as suggested on <a href="http://sass-lang.com/styleguide/code" target="_blank" rel="external">SASS's Code Style Guide</a>.
 		</p>
 
-		{% source "css", "Variable naming example" -%}
+		{% source "scss", "Variable naming example" -%}
 			$color-link;
 			$color-link-dark;
 			$color-link-light;
@@ -109,7 +109,7 @@
 			The other difference from @mdo's Code Guide is comment style. We use <a href="http://sassdoc.com/" target="_blank" rel="external">SassDoc</a> to auto-generate documentation from our comments, so we use <a href="http://sassdoc.com/annotations/" target="_blank" rel="external">SassDoc annotations</a> and <a href="http://sassdoc.com/file-level-annotations/" target="_blank" rel="external">file-level annotations</a>
 		</p>
 
-		{% source "css", "SassDoc annotation example" -%}
+		{% source "scss", "SassDoc annotation example" -%}
 			/// This is the description of a mixin
 			/// @param {Number} $some-vale A value that gets passed in
 			@mixin($some-value) {

diff --git a/web/server/views/style-guide/buttons.njk b/web/server/views/style-guide/buttons.njk
@@ -21,7 +21,7 @@
 			<li>Use BEM modifiers for different types</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<div class="panel panel--dark">
 				<p><button type="button" class="btn">Default button</button></p>
 				<p><a href="#" class="btn btn--primary">Primary button</a></p>
@@ -38,7 +38,7 @@
 			<li>Size and type modifiers can be combined</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<div class="grid">
 				<div class="grid__item one-half">
 					<p><button type="button" class="btn btn--xs">XS button</button></p>
@@ -67,7 +67,7 @@
 			<li>Don't group more than 3 buttons</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<p>
 				<button type="button" class="btn">Primary action</button>
 				<button type="button" class="btn btn--secondary">Secondary action</button>

diff --git a/web/server/views/style-guide/colour.njk b/web/server/views/style-guide/colour.njk
@@ -58,7 +58,7 @@
 			</li>
 		</ul>
 
-		{% source "css", "SASS colour usage example" -%}
+		{% source "scss", "SASS colour usage example" -%}
 			$colour-text: get-colour(grey, dark);
 			.something {
 				background: $colour-page;

diff --git a/web/server/views/style-guide/grid.njk b/web/server/views/style-guide/grid.njk
diff --git a/web/server/views/style-guide/iconography.njk b/web/server/views/style-guide/iconography.njk
@@ -83,7 +83,7 @@
 			<li>SASS mixin generated: <code>nice-icon($icon)</code></li>
 		</ul>
 
-		{% source "css", "SASS Example" -%}
+		{% source "scss", "SASS Example" -%}
 			.something {
 				@include nice-icon(search);
 			}

diff --git a/web/server/views/style-guide/typography.njk b/web/server/views/style-guide/typography.njk
@@ -35,7 +35,7 @@
 			<li>don't skip headings; use classes like <code>.h1, .h2</code> etc or mixins like <code>@include h1</code> etc if you need a visual difference in heading</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<h1>How quickly daft jumping zebras vex</h1>
 			<h2>The five boxing wizards jump quickly</h2>
 			<h3>Pack my box with five dozen liquor jugs</h3>
@@ -54,7 +54,7 @@
 			<li>use 1 lead per page</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<p class="lead lead--drop-cap">
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh augue, pulvinar nec condimentum in, vulputate a ipsum. Nulla facilisi. Sed et ex id nulla consequat bibendum nec quis nisi. Sed fermentum nisi nec velit finibus.
 			</p>
@@ -126,7 +126,7 @@
 			<li>visually distinguish external links</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<p><a href="#">A link on its own</a></p>
 			<p>This is some text with <a href="#" rel="external">an external link</a> inside it.</p>
 		{%- endexample %}
@@ -148,7 +148,7 @@
 
 		<h3>Default lists</h3>
 
-		{% example -%}
+		{% example "html" -%}
 			<p>This is an unordered list:</p>
 			<ul>
 				<li>Item 1</li>
@@ -171,7 +171,7 @@
 			<li>try to stick to a maximum of 4 items in a featured list.</li>
 		</ul>
 
-		{% example -%}
+		{% example "html" -%}
 			<p>This is a featured list:</p>
 			<ul class="list list--featured">
 				<li>Item 1</li>