Skip to content

Commit 4f5e590

Browse files
committed
build as separate page
1 parent 45eb957 commit 4f5e590

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+371
-262
lines changed

_config.yml

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# Main Configs #
33
# ----------------------- #
44

5-
url: http://coadroad.io
5+
url: http://coadroad.github.io
66
title: CodeRoad
77
88
author: Shawn McKay
@@ -25,11 +25,14 @@ gems:
2525
# ----------------------- #
2626

2727
social:
28-
- title: coderoad CLI
29-
icon: github
30-
url: https://github.com/coderoad/coderoad-cli
31-
purpose: Make
3228
- title: atom plugin
3329
icon: github
3430
url: https://github.com/coderoad/atom-coderoad
35-
purpose: Play
31+
instructions: apm install atom-coderoad
32+
33+
tutorials:
34+
- title: Functional School
35+
description: A fun look at functional programming concepts in JavaScript
36+
icon: github
37+
url: https://github.com/coderoad/coderoad-functional-school
38+
instructions: npm i -s coderoad-functional-school

_includes/about.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,4 @@
77
<br/>
88
<iframe width="100%" height="360" src="https://www.youtube.com/embed/3who2Vwu_Z8" frameborder="0" allowfullscreen></iframe>
99
</div>
10-
11-
<div class="row">
12-
<div class="col-lg-8 col-lg-offset-2">
13-
<br/>
14-
<div class="lead">CodeRoad is a coding education platform aimed at open-sourcing interactive coding lessons. CodeRoad makes it easy for developers and teachers to create, share and edit their own lessons. <br>All free.</div>
15-
</div>
16-
</div>
1710
</section>

_includes/build/build.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<section id="build">
2+
3+
<section id="commands">
4+
<div class="container content-section">
5+
6+
<div class="row">
7+
<div class="col-lg-12">
8+
<!-- <hr class="section-heading-spacer"> -->
9+
<div class="clearfix"></div>
10+
<div class="lead">
11+
<div class="row">
12+
<div class="col-xs-5 col-xs-offset-1 col-md-4 col-md-offset-2">
13+
<code>> coderoad create</code>
14+
<br>
15+
<br>
16+
</div>
17+
<div class="col-xs-6">Quickly setup a base project</div>
18+
</div>
19+
<div class="row">
20+
<div class="col-xs-5 col-xs-offset-1 col-md-4 col-md-offset-2">
21+
<code>> coderoad build</code>
22+
<br>
23+
<br>
24+
</div>
25+
<div class="col-xs-6">Parse markdown tutorial into <i>coderoad.json</i></div>
26+
</div>
27+
<div class="row">
28+
<div class="col-xs-5 col-xs-offset-1 col-md-4 col-md-offset-2">
29+
<code>> coderoad publish</code>
30+
<br>
31+
<br>
32+
</div>
33+
<div class="col-xs-6">Publish tutorial version on <a href="https://npmjs.org" target="_blank">NPM</a> with <i>coderoad-</i> prefix</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</section>
40+
41+
<!-- /.container -->
42+
43+
<div class="content-section-b">
44+
45+
<div class="container">
46+
47+
<div class="row">
48+
<div class="col-lg-4 col-lg-offset-2 col-sm-push-6 col-sm-6">
49+
<!-- <hr class="section-heading-spacer"> -->
50+
<div class="clearfix"></div>
51+
<h2 class="section-heading">Build in Markdown</h2>
52+
<div class="lead">Write lessons using markdown.
53+
<br> See a <a href="https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/1/01/filter.md" target="_blank">tutorial file</a>.
54+
<br>
55+
<br> Control the editor with a simple API:
56+
<br>
57+
<br>
58+
<br>
59+
<ul>
60+
<li><code>@import</code> load another markdown file</li>
61+
<br>
62+
<li><code>@test</code> load unit tests</li>
63+
<br>
64+
<li><code>@action</code> open a file, set/insert text</li>
65+
<br>
66+
<li><code>@hint</code> add helpful clues</li>
67+
</ul>
68+
</div>
69+
</div>
70+
<div class="col-lg-6 col-sm-pull-6 col-sm-6">
71+
<pre><code class="language-markdown">
72+
# Functional School
73+
A trip through functional programming in Javascript.
74+
75+
## Array Methods
76+
Using common built-in Javascript array methods.
77+
78+
### Filter
79+
Array -> Array of items that match a condition
80+
81+
+ Write a filter condition function called `isAda`
82+
@test('1/01/01-filter')
83+
@action(open('01-filter.js'))
84+
@action(insert(
85+
```
86+
// return true if student name
87+
// matches "Ada Lovelace"
88+
function isAda() {
89+
// write condition here
90+
}
91+
```
92+
))
93+
</pre></code>
94+
</div>
95+
</div>
96+
97+
</div>
98+
<!-- /.container -->
99+
100+
</div>
101+
<!-- /.content-section-b -->
102+
103+
<div class="content-section-a">
104+
105+
<div class="container">
106+
107+
<div class="row">
108+
<div class="col-lg-4 col-sm-6">
109+
<!-- <hr class="section-heading-spacer"> -->
110+
<div class="clearfix"></div>
111+
<h2 class="section-heading">Unit Test Feedback</h2>
112+
<div class="lead"> Write task feedback using unit tests.
113+
<br> See a <a href="https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/1/01/01-filter.spec.js" target="_blank">complete test file</a>.
114+
<br>
115+
<br>
116+
<br> Currently supported:
117+
<br>
118+
<br>
119+
<ul>
120+
<li>Javascript: <a href="https://github.com/coderoad/mocha-coderoad" target="_blank">Mocha</a></li>
121+
</ul>
122+
<br>
123+
<br>
124+
<br>
125+
<i>We hope to support more test frameworks and programming languages in the near future.</i></div>
126+
</div>
127+
<div class="col-lg-6 col-lg-offset-2 col-sm-6">
128+
<pre><code class="language-js">
129+
describe('01 function isAda', function () {
130+
131+
it('doesn\'t exist', function () {
132+
expect(isAda).to.not.be.undefined;
133+
});
134+
135+
it('should be a function', function () {
136+
expect(isAda).to.be.a('function');
137+
});
138+
139+
it('needs to take a param', function () {
140+
expect(isAda).to.have.length(1);
141+
});
142+
143+
it('should use the full name "Ada Lovelace"', function () {
144+
var regex = /Ada Lovelace/;
145+
expect(!!isAda.toString().match(regex)).to.be.true;
146+
});
147+
148+
});
149+
</code></pre>
150+
</div>
151+
</div>
152+
153+
</div>
154+
<!-- /.container -->
155+
156+
</div>
157+
<!-- /.content-section-a -->
158+
159+
</section>
160+
<!-- /.content-section-b -->

_includes/build/header.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<section id="build-home">
2+
<!-- Header -->
3+
<div class="intro-header-build">
4+
5+
<div class="container">
6+
7+
<div class="row">
8+
<div class="col-lg-12">
9+
<div class="intro-message">
10+
<h1>Building Tutorials</h1>
11+
<h3>Install the Command Line Tools</h3>
12+
<hr class="intro-divider">
13+
<ul class="list-inline intro-social-buttons">
14+
<li>
15+
<a href="https://github.com/coderoad/coderoad-cli" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">CodeRoad-CLI</span></a>
16+
<br><br>
17+
<code class="social-instructions">> npm i -g coderoad-cli</code>
18+
</li>
19+
</ul>
20+
</div>
21+
22+
</div>
23+
</div>
24+
25+
</div>
26+
<!-- /.container -->
27+
28+
</div>
29+
<!-- /.intro-header -->
30+
</section>

_includes/build/nav.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!-- Navigation -->
2+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
3+
<div class="container">
4+
<!-- Brand and toggle get grouped for better mobile display -->
5+
<div class="navbar-header page-scroll">
6+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
7+
<span class="sr-only">Toggle navigation</span>
8+
<span class="icon-bar"></span>
9+
<span class="icon-bar"></span>
10+
<span class="icon-bar"></span>
11+
</button>
12+
<a class="navbar-brand page-scroll" href="#home">{{ site.title }}</a>
13+
</div>
14+
<!-- Collect the nav links, forms, and other content for toggling -->
15+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
16+
<ul class="nav navbar-nav navbar-right">
17+
<li>
18+
<a class="page-scroll" href="/#about">About</a>
19+
</li>
20+
<li>
21+
<a class="page-scroll" href="/#tutorials">Tutorials</a>
22+
</li>
23+
<li>
24+
<a class="page-scroll" href="/#learn">Learn</a>
25+
</li>
26+
<li>
27+
<a class="page-scroll" href="#build">Build</a>
28+
</li>
29+
<li>
30+
<a class="page-scroll" href="/#contact">Contact</a>
31+
</li>
32+
</ul>
33+
</div>
34+
<!-- /.navbar-collapse -->
35+
</div>
36+
<!-- /.container -->
37+
</nav>

_includes/footer.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@
1212
<a href="#about">About</a>
1313
</li>
1414
<li class="footer-menu-divider">&sdot;</li>
15+
<li>
16+
<a href="#tutorials">Tutorials</a>
17+
</li>
18+
<li class="footer-menu-divider">&sdot;</li>
1519
<li>
1620
<a href="#learn">Learn</a>
1721
</li>
1822
<li class="footer-menu-divider">&sdot;</li>
1923
<li>
20-
<a href="#build">Build</a>
24+
<a href="/build">Build</a>
2125
</li>
2226
<li class="footer-menu-divider">&sdot;</li>
2327
<li>

_includes/head.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@
1111
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
1212

1313
<!-- Bootstrap Core CSS -->
14-
<link href="css/bootstrap.min.css" rel="stylesheet">
14+
<link href="/css/bootstrap.min.css" rel="stylesheet">
1515

1616
<!-- Custom CSS -->
17-
<link href="css/landing-page.css" rel="stylesheet">
18-
<link href="css/prism.min.css" rel="stylesheet">
17+
<link href="/css/landing-page.css" rel="stylesheet">
18+
<link href="/css/prism.min.css" rel="stylesheet">
1919

2020
<!-- Custom Fonts -->
21-
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
21+
<link href="/css/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
2222
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
23-
<link href="fonts/firacode-webfont/FiraCode-Regular.css" rel="stylesheet" type="text/css" />
23+
<link href="/fonts/firacode-webfont/FiraCode-Regular.css" rel="stylesheet" type="text/css" />
2424

2525
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
2626
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

_includes/header.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ <h3>{{ page.subTitle }}</h3>
1515
<li>
1616
<!-- <h3>{{ social.purpose }}</h3> -->
1717
<a href="{{ social.url }}" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-{{ social.icon }} fa-fw"></i> <span class="network-name">{{ social.title }}</span></a>
18+
<br><br>
19+
<code class="social-instructions">> {{social.instructions}}</code>
1820
</li>
1921
{% endfor %}
2022
</ul>

_includes/js.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!-- jQuery Version 1.11.0 -->
2-
<script src="js/jquery-1.11.0.js"></script>
2+
<script src="/js/jquery-1.11.0.js"></script>
33

44
<!-- Plugin JavaScript -->
55
<script src="{{ " js/jquery.easing.min.js " | prepend: site.baseurl }}"></script>
66

77
<!-- Bootstrap Core JavaScript -->
8-
<script src="js/bootstrap.min.js"></script>
8+
<script src="/js/bootstrap.min.js"></script>
99

1010
<!-- Custom Theme JavaScript -->
11-
<script src="js/landing-page.js"></script>
11+
<script src="/js/landing-page.js"></script>
1212

13-
<script type="text/javascript" src="js/fontsmoothie.min.js" async></script>
13+
<script src="/js/fontsmoothie.min.js" async></script>
1414

15-
<script src="js/prism.js"></script>
15+
<script src="/js/prism.js"></script>
1616

1717
<script>window.twttr = (function(d, s, id) {
1818
var js, fjs = d.getElementsByTagName(s)[0],

_includes/learn.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<section id="learn">
2+
<!-- Page Content -->
3+
4+
<div class="content-section-a">
5+
6+
<div class="container">
7+
8+
<div class="row">
9+
<div class="col-lg-4 col-sm-6">
10+
<!-- <hr class="section-heading-spacer"> -->
11+
<div class="clearfix"></div>
12+
<h2 class="section-heading">Learn Faster</h2>
13+
<div class="lead">The science is in: people learn best by doing, with quick feedback in a real world environment.</div>
14+
</div>
15+
16+
<div class="col-lg-4 col-sm-6">
17+
<!-- <hr class="section-heading-spacer"> -->
18+
<div class="clearfix"></div>
19+
<h2 class="section-heading">Free & Open-Sourced</h2>
20+
<div class="lead">Build, collaborate and contribute to courses or curriculum online. Incrementally make version controlled tutorials better with updates and pull requests.
21+
</div>
22+
</div>
23+
24+
<div class="col-lg-4 col-sm-6">
25+
<!-- <hr class="section-heading-spacer"> -->
26+
<div class="clearfix"></div>
27+
<h2 class="section-heading">Inside of the Editor</h2>
28+
<div class="lead">Atom-CodeRoad is built inside the free <a href="https://atom.io" target="_blank">Atom Editor</a>. Code with your favorite packages.
29+
</div>
30+
</div>
31+
32+
33+
<!-- <div class="col-lg-5 col-lg-offset-2 col-sm-6">
34+
<img class="img-responsive" src="img/services/feedback.png" alt="">
35+
</div> -->
36+
</div>
37+
38+
</div>
39+
<!-- /.container -->
40+
41+
</div>
42+
<!-- /.content-section-a -->
43+
</section>
44+
45+
<section id="build">
46+
47+
</section>

0 commit comments

Comments
 (0)