start guide

kbrsh · Jul 6, 2018 · 40fbdb4 · 40fbdb4
1 parent 61d0eed
commit 40fbdb4
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 9 deletions.
diff --git a/web/css/index.css b/web/css/index.css
@@ -3,6 +3,10 @@ body {
 	color: #F7F7F7;
 }
 
+#nav a {
+	color: #F7F7F7;
+}
+
 #head {
 	margin-top: 100px;
 }

diff --git a/web/css/post.css b/web/css/post.css
@@ -7,3 +7,13 @@
 	color: #676767;
 	text-decoration: none;
 }
+
+#side a#active {
+	color: hsl(265, 100%, 52%);
+}
+
+#content {
+	width: 70%;
+	max-width: 700px;
+	margin: 0 auto;
+}
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -17,7 +17,7 @@ body {
 }
 
 #nav a {
-	color: #F7F7F7;
+	color: #121212;
 	text-decoration: none;
 }
 

diff --git a/web/doc/guide.html b/web/doc/guide.html
@@ -15,7 +15,7 @@
 		<link rel="stylesheet" type="text/css" href="../css/styles.css" />
 		<link rel="stylesheet" type="text/css" href="../css/post.css" />
 
-		<script src="../dist/moon.min.js"></script>
+		<script src="../../dist/moon.min.js"></script>
 
 		<script>
 			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -28,10 +28,31 @@
 	</head>
 
 	<body>
+		<div id="nav" class="container">
+			<h2 id="nav-home"><a href="../">Moon</a></h2>
+
+			<div id="nav-items">
+				<a href="./doc/guide.html">Guide</a>
+				<a href="./doc/about.html">About</a>
+				<a href="./doc/examples.html">Examples</a>
+				<a href="https://github.com/kbrsh/moon">GitHub</a>
+			</div>
+		</div>
+
 		<div id="post" class="container flex">
 			<div id="side">
 				<h6>Documentation</h6>
-				<a href="./guide.html">Guide</a>
+						<a id="active" href="./guide.html">Guide</a>
+			</div>
+			<div id="content">
+				<h1>Guide</h1>
+				<h3 id="installation">Installation</h3>
+<p>Moon can be installed with a <code><span class="red">&lt;script</span><span class="red">&gt;</span></code> tag or through <code>npm</code>.</p>
+<pre><code class="lang-html"><span class="red">&lt;script</span> <span class="orange">src</span>=<span class="green">&quot;https:<span class="gray">//unpkg.com/moon&quot;</span><span class="red">&gt;</span><span class="red">&lt;/script</span><span class="red">&gt;</span></span>
+</code></pre>
+<pre><code class="lang-sh">npm install moon
+</code></pre>
+
 			</div>
 		</div>
 	</body>

diff --git a/web/soldfile.js b/web/soldfile.js
@@ -18,6 +18,14 @@ const escapeMap = {
 	"&lt;": '<'
 };
 
+Handlebars.registerHelper("ifeq", function(a, b, options) {
+	if (a === b) {
+		return options.fn(this);
+	} else {
+		return options.inverse(this);
+	}
+});
+
 const highlight = function(compiled) {
 	compiled = compiled.replace(HTML_COMMENT_RE, "<span class=\"gray\">$1</span>");
 	compiled = compiled.replace(HTML_TAG_RE, function(match, start, content, end) {
@@ -60,5 +68,11 @@ Sold({
 	template: "template",
 	source: "src",
 	destination: '',
-	engine: "handlebars"
+	engine: function(template, data, options, done) {
+		if (data.content !== undefined) {
+			data.content = highlight(data.content);
+		}
+
+		done(Handlebars.compile(template)(data));
+	}
 });
diff --git a/web/src/doc/guide.md b/web/src/doc/guide.md
@@ -2,4 +2,14 @@
 title: Guide
 ---
 
-## Installation
+### Installation
+
+Moon can be installed with a `<script>` tag or through `npm`.
+
+```html
+<script src="https://unpkg.com/moon"></script>
+```
+
+```sh
+npm install moon
+```
diff --git a/web/template/post.html b/web/template/post.html
@@ -15,7 +15,7 @@
 		<link rel="stylesheet" type="text/css" href="../css/styles.css" />
 		<link rel="stylesheet" type="text/css" href="../css/post.css" />
 
-		<script src="../dist/moon.min.js"></script>
+		<script src="../../dist/moon.min.js"></script>
 
 		<script>
 			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -28,12 +28,31 @@
 	</head>
 
 	<body>
+		<div id="nav" class="container">
+			<h2 id="nav-home"><a href="../">Moon</a></h2>
+
+			<div id="nav-items">
+				<a href="./doc/guide.html">Guide</a>
+				<a href="./doc/about.html">About</a>
+				<a href="./doc/examples.html">Examples</a>
+				<a href="https://github.com/kbrsh/moon">GitHub</a>
+			</div>
+		</div>
+
 		<div id="post" class="container flex">
 			<div id="side">
 				<h6>Documentation</h6>
-				{{#posts.doc}}
-				<a href="./{{file}}">{{title}}</a>
-				{{/posts.doc}}
+				{{#each posts.doc}}
+					{{#ifeq this.file file}}
+						<a id="active" href="./{{file}}">{{title}}</a>
+					{{else}}
+						<a href="./{{file}}">{{title}}</a>
+					{{/ifeq}}
+				{{/each}}
+			</div>
+			<div id="content">
+				<h1>{{title}}</h1>
+				{{{content}}}
 			</div>
 		</div>
 	</body>