deprecate · robframpton · Nov 15, 2017
diff --git a/generators/app/templates/src/layouts/tutorial.soy b/generators/app/templates/src/layouts/tutorial.soy
@@ -0,0 +1,93 @@
+{namespace tutorial}
+
+/**
+ * @param content
+ * @param? elementClasses
+ * @param page
+ * @param site
+ */
+{template .render}
+	<div class="{$elementClasses ?: 'main'}">
+		<main class="content">
+			<div class="tutorial">
+				{if $page}
+					{call .sidebar}
+						{param page: $site.index.children['tutorials'].children[$page.parentId] /}
+					{/call}
+					{call .tutorials data="all"}
+						{param content: $content /}
+						{param page: $page /}
+						{param site: $site /}
+					{/call}
+				{/if}
+			</div>
+		</main>
+	</div>
+{/template}
+
+/**
+ * @param content
+ * @param page
+ * @param site
+ */
+{template .tutorials}
+	<div class="sidebar-offset">
+		{call Topbar.render data="all" /}
+
+		<div class="container">
+			<div class="container-blog card">
+				{$content}
+				{call .footerButtons }
+					{param page: $page /}
+					{param site: $site /}
+				{/call}
+			</div>
+		</div>
+	</div>
+{/template}
+
+/**
+ * @param page
+ * @param site
+ */
+{template .footerButtons}
+	<div class="tutorial-page-nav">
+		{let $tutorialObject: $site.index.children['tutorials'].children[$page.parentId] /}
+		{if $page.weight < length($tutorialObject.childIds)}
+			{if $page.buttonTitle}
+				{let $nextPageUrl: $tutorialObject.children[$tutorialObject.childIds[$page.weight]].url /}
+				<a href="{$nextPageUrl}" class="btn btn-accent btn-sm">
+					{$page.buttonTitle}
+				</a>
+			{/if}
+		{/if}
+	</div>
+{/template}
+
+/**
+ * @param page
+ */
+{template .sidebar}
+	<div class="sidebar-navigation">
+		<nav class="sidebar">
+			{call ElectricNavigation.render}
+				{param elementClasses: 'sidebar-list' /}
+				{param listItemClasses: 'sidebar-item' /}
+				{param anchorVariant: 'tutorial' /}
+				{param section: $page /}
+			{/call}
+		</nav>
+	</div>
+{/template}
+
+/**
+ * @param page
+ */
+{deltemplate ElectricNavigation.anchor variant="'tutorial'"}
+	<a class="sidebar-link{$page.active ? ' sidebar-link-selected' : ''}" href="{$page.url}" data-time="{$page.time}">
+		<span class="before"></span>
+		<span class="tutorial-step">{$page.weight}</span>
+		<span class="section-title">{$page.title}</span>
+		<span class="after"></span>
+	</a>
+{/deltemplate}
diff --git a/generators/app/templates/src/pages/tutorials/index.soy b/generators/app/templates/src/pages/tutorials/index.soy
@@ -0,0 +1,26 @@
+---
+title: "Tutorials"
+description: "Foo bar."
+url: "/tutorials/tutorial/first-step.html/"
+---
+
+{namespace tutorialsIndex}
+
+/**
+ *
+ */
+{template .render}
+{/template}
+
+/**
+ * @param page
+ */
+{template .soyweb}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="refresh" content="0; URL='{$page.url}'">
+</head>
+</html>
+{/template}
diff --git a/generators/app/templates/src/pages/tutorials/tutorial/first-step.md b/generators/app/templates/src/pages/tutorials/tutorial/first-step.md
@@ -0,0 +1,21 @@
+---
+title: "Step 1"
+description: "Foo bar."
+buttonTitle: "I did step 1"
+parentId: "tutorial"
+layout: "tutorial"
+time: 90
+weight: 1
+---
+
+## {$page.title}
+
+```javascript
+var hello = function() {
+	console.log('Hello, World!');
+};
+```
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. Fusce eros metus, hendrerit ut egestas nec, sagittis id velit.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. Fusce eros metus, hendrerit ut egestas nec, sagittis id velit.
diff --git a/generators/app/templates/src/pages/tutorials/tutorial/index.soy b/generators/app/templates/src/pages/tutorials/tutorial/index.soy
@@ -0,0 +1,27 @@
+---
+title: "First Tutorial"
+description: "Foo bar."
+tutorialTitle: "Getting started with your first tutorial."
+url: "/tutorials/tutorial/first-step.html/"
+---
+
+{namespace tutorialFirst}
+
+/**
+ *
+ */
+{template .render}
+{/template}
+
+/**
+ * @param page
+ */
+{template .soyweb}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="refresh" content="0; URL='{$page.url}'">
+</head>
+</html>
+{/template}
diff --git a/generators/app/templates/src/pages/tutorials/tutorial/second-step.md b/generators/app/templates/src/pages/tutorials/tutorial/second-step.md
@@ -0,0 +1,20 @@
+---
+title: "Step 2"
+description: "Foo bar."
+parentId: "tutorial"
+layout: "tutorial"
+time: 90
+weight: 2
+---
+
+## {$page.title}
+
+```javascript
+var hello = function() {
+	console.log('Hello, World!');
+};
+```
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. Fusce eros metus, hendrerit ut egestas nec, sagittis id velit.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. Fusce eros metus, hendrerit ut egestas nec, sagittis id velit.