Skip to content
This repository has been archived by the owner on Nov 17, 2017. It is now read-only.

Add tutorials to generated Electric site. #54

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add tutorials to generated Electric site. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions generators/app/templates/src/layouts/tutorial.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{namespace tutorial}

/**
* @param content
* @param? elementClasses
* @param page
* @param site
*/
{template .render}
<div class="{$elementClasses ?: 'main'}">
<main class="content">
<div class="docs tutorial">
{if $page}
{call ElectricTutorialSidebar.render}
{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 ElectricTutorialTopbar.render}
{param elementClasses: 'topbar-light' /}
{param page: $page /}
{param logo kind="html"}
<div class="topbar-logo">
<span class="topbar-logo-icon icon-16-flash"></span>
</div>
{/param}
{/call}
<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)}
{let $nextPageUrl: $tutorialObject.children[$tutorialObject.childIds[$page.weight]].url /}
{if $site.githubRepo}
<a href="https://github.com/{$site.githubRepo}/issues/new?title=Tutorial+Problem&body=%3E+URL%3A+{$page.url}" target="_blank" class="btn btn-default btn-sm">
Report a problem
</a>
{/if}
{if $page.buttonTitle}
<a href="{$nextPageUrl}" class="btn btn-accent btn-sm">
{$page.buttonTitle}
</a>
{/if}
{/if}
</div>
{/template}
1 change: 0 additions & 1 deletion generators/app/templates/src/pages/docs/index.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ description: "Everything you need to know to get started."
*/
{template .topics}
<div class="sidebar-offset">

<div class="container-hybrid docs-home-top">
<div class="row">
<div class="col-xs-16">
Expand Down
2 changes: 1 addition & 1 deletion generators/app/templates/src/pages/docs/search.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Search"
title: "Docs Search"
description: "Find what you're looking for in the documentation."
hidden: true
---
Expand Down
30 changes: 30 additions & 0 deletions generators/app/templates/src/pages/tutorials/customizing/get-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
title: "Get Started"
description: "In this section, you'll learn how to customize and Electric JS site."
buttonTitle: "I'm ready for step two!"
tutorialTitle: "Getting started with Electric JS"
parentId: "customizing"
layout: "tutorial"
time: 20
weight: 1
---

#### Get Started

Customizing an electric site is not that hard. This tutorial will show you how.

###### What you'll need

<ul class="checklist">
<li>Hammer</li>
<li>Nails</li>
<li>Screwdriver</li>
</ul>

###### What you'll do

<ul class="checklist">
<li>Build a sweet site.</li>
<li>Document your work.</li>
<li>Be awesome.</li>
</ul>
27 changes: 27 additions & 0 deletions generators/app/templates/src/pages/tutorials/customizing/index.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "Electric Tutorial"
description: "In this section, you'll learn how to customize and Electric JS site."
tutorialTitle: "Getting started with Electric JS"
url: "/tutorials/customizing/get-started.html"
icon: "flash"
---

{namespace electricTutorials}

/**
*
*/
{template .render}
{/template}

/**
*/
{template .soyweb}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; URL='/tutorials/customizing/get-started.html'">
</head>
</html>
{/template}
11 changes: 11 additions & 0 deletions generators/app/templates/src/pages/tutorials/customizing/step-three.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: "Step Three"
buttonTitle: "I'm done!"
tutorialTitle: "Getting started with Electric JS"
parentId: "customizing"
layout: "tutorial"
time: 20
weight: 3
---

#### Step Three
11 changes: 11 additions & 0 deletions generators/app/templates/src/pages/tutorials/customizing/step-two.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: "Step Two"
buttonTitle: "I'm ready for step three!"
tutorialTitle: "Getting started with Electric JS"
parentId: "customizing"
layout: "tutorial"
time: 30
weight: 2
---

#### Step Two
93 changes: 93 additions & 0 deletions generators/app/templates/src/pages/tutorials/index.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
title: "Tutorials"
description: "Step by step how-tos."
---

{namespace pageTutorialsIndex}

/**
* @param site
*/
{template .render}
<div class="main">
<main class="content">
<div class="docs tutorials">
{call Topbar.render data="all"}
{param elementClasses: 'topbar-docs' /}
{/call}
{call Sidebar.render}
{param navigationDepth: 1 /}
{param searchPlaceholder: 'Search Tutorials' /}
{param section: $site.index.children['tutorials'] /}
{/call}
{call .topics data="all" /}
</div>
</main>
</div>
{/template}

/**
* @param page
* @param site
*/
{template .topics}
<div class="sidebar-offset">
<div class="container-hybrid docs-home-top">
<div class="row">
<div class="col-xs-16">
<h1 class="docs-home-top-title">Tutorials</h1>
<p class="docs-home-top-description">Start learning how to leverage the power of {$site.title}.</p>
</div>
</div>
<div class="row">
<div class="container-hybrid docs-home-top-form">
<form action="/tutorials/search.html" method="GET" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-14 col-xs-offset-1 col-md-10 col-md-offset-3 col-lg-6 col-lg-offset-5">
<div class="search">
{call ElectricSearchAutocomplete.render}
{param maxResults: 3 /}
{param path: '/tutorials/' /}
{param placeholder: 'Search Tutorials' /}
{/call}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="docs-home-topics">
<div class="container-hybrid">
<div class="row">
<div class="col-xs-14 col-xs-offset-1 ">
<section class="docs-home-middle">
<h2 class="docs-home-middle-subtitle">Choose a Guide</h2>
<p class="docs-home-middle-description">Each one provide step by step coverage for every core feature.</p>
</section>
</div>
</div>
<div class="row">
<div class="col-md-12 col-md-offset-2 col-xs-16">
<div class="row">
{foreach $childId in $page.childIds}
{let $topic: $page.children[$childId] /}

{if not $topic.hidden}
<div class="col-md-8 col-md-offset-0 col-xs-14 col-xs-offset-1">
<a class="topic radial-out" href="{$topic.url}">
<div class="topic-icon">
<span class="icon-16-{$topic.icon}"></span>
</div>
<h3 class="topic-title">{$topic.title}</h3>
</a>
</div>
{/if}
{/foreach}
</div>
</div>
</div>
</div>
</div>
</div>
{/template}
41 changes: 41 additions & 0 deletions generators/app/templates/src/pages/tutorials/search.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: "Tutorials Search"
description: "Find what you're looking for in the tutorials."
hidden: true
---

{namespace pageTutorialsSearch}

/**
* @param site
*/
{template .render}
{call main.render data="all"}
{param elementClasses: 'docs' /}
{param content kind="html"}
{call Sidebar.render}
{param section: $site.index.children['tutorials'] /}
{/call}

<div class="sidebar-offset">
<div class="container-hybrid docs-home-top">
<div class="row">
<div class="col-xs-16">
<h1 class="docs-home-top-title"><span>Electric</span> Tutorials</h1>
<p class="docs-home-top-description">Start learning how to leverage the power of {$site.title}.</p>
</div>
</div>
<div class="row">
<div class="container-hybrid">
{call ElectricSearch.render}
{param action: '/tutorials/search.html' /}
{param path: '/tutorials/' /}
{param placeholder: 'Search Tutorials' /}
{/call}
</div>
</div>
</div>
</div>
{/param}
{/call}
{/template}
7 changes: 5 additions & 2 deletions generators/app/templates/src/partials/Sidebar.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

/**
* @param section
* @param? navigationDepth
* @param? searchPlaceholder
*/
{template .render}
<nav class="sidebar">
Expand All @@ -19,14 +21,15 @@
{call ElectricSearchAutocomplete.render}
{param maxResults: 3 /}
{param path: '/docs/' /}
{param placeholder: 'Search Docs' /}
{param placeholder: $searchPlaceholder ?: 'Search Docs' /}
{/call}
</div>

{call ElectricNavigation.render}
{param anchorVariant: 'sidebar' /}
{param depth: $navigationDepth /}
{param elementClasses: 'sidebar-list sidebar-list-1' /}
{param listItemClasses: 'sidebar-item' /}
{param anchorVariant: 'sidebar' /}
{param section: $section /}
{/call}
</div>
Expand Down