added make-example

Author: jtraband

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")

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')

public/resources/css/main.scss

@@ -40,6 +40,7 @@
 @import 'module/shadow';
 @import 'module/showcase';
 @import 'module/statement';
+@import 'module/example-title';
 
 
 /*

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;
+}