From df077c1dc2dc81c2af07c4f98851bd3e55904562 Mon Sep 17 00:00:00 2001
From: Jay Traband <jtraband@comcast.net>
Date: Sat, 8 Aug 2015 18:08:07 -0700
Subject: [PATCH] added make-example

---
 public/_includes/_util-fns.jade                 |  9 ++++++++-
 public/docs/js/latest/guide/setupAlt.jade       |  3 ++-
 public/resources/css/main.scss                  |  1 +
 public/resources/css/module/_example-title.scss | 12 ++++++++++++
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 public/resources/css/module/_example-title.scss

diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index a97696820b..f24f3f891f 100644
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@@ -23,6 +23,14 @@
 // we will almost certainly never go 10 or 11 deep but ...
 - var pathToFrags = "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
 
+mixin makeExample(path, fileName, title)
+  - var extn = getExtn(fileName);
+  - var extPath = pathToFrags + path + "/";
+  if (title)
+    .example-title #{title}
+  code-example(language="#{extn}" format="linenums")
+    != getFrag(extPath + fileName + ".md")
+
 mixin makeTabs(path, fileNames, tabNames)
   - fileNames = fileNames.split(",");
   - tabNames = tabNames.split(",")
@@ -32,7 +40,6 @@ mixin makeTabs(path, fileNames, tabNames)
         - var tabName = tabNames[index].trim();
         - var fileName = fileNames[index].trim();
         - var extn = getExtn(fileName);
-        // - var extPath = pathToFrags + (path.length ? path + "/" : "");
         - var extPath = pathToFrags + path + "/";
         code-pane(language="#{extn}" name="#{tabName}" format="linenums")
             != getFrag(extPath + fileName + ".md")
diff --git a/public/docs/js/latest/guide/setupAlt.jade b/public/docs/js/latest/guide/setupAlt.jade
index e0a3b67bd0..f23bdde63d 100644
--- a/public/docs/js/latest/guide/setupAlt.jade
+++ b/public/docs/js/latest/guide/setupAlt.jade
@@ -116,4 +116,5 @@ include ../../../../_includes/_util-fns
       In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
 
   +makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript')
-  +makeTabs('gettingstarted', 'ts/main-bootstrap.ts,js/main-bootstrap.js', 'TypeScript, JavaScript')
+
+  +makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index 13036ed6e5..1593439cdd 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -40,6 +40,7 @@
 @import 'module/shadow';
 @import 'module/showcase';
 @import 'module/statement';
+@import 'module/example-title';
 
 
 /*
diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss
new file mode 100644
index 0000000000..b605c8c4c4
--- /dev/null
+++ b/public/resources/css/module/_example-title.scss
@@ -0,0 +1,12 @@
+.example-title {
+  @extend .alert;
+
+  color: $snow;
+  padding:  0 ($unit * 2);
+  font-size: 14px;
+  font-weight: 500;
+  border-color: $blueberry;
+  background: $blueberry;
+  // temporary hack to remove space between example title and code-example
+  margin-bottom: -18px;
+}
\ No newline at end of file