Home Explore Help
Register Sign In
amber
/
amber-documentation
2
1
Fork 0
Files Issues 19 Pull Requests 0 Wiki
Browse Source

first (unfinished) version of getting started.

Nicolas Petton 10 years ago
parent
18ce82e89c
commit
1ef228dd8a
12 changed files with 545 additions and 0 deletions
Split View Show Diff Stats
  1. 13 0
      1-getting-started.md
  2. 2 0
      _config.yml
  3. 30 0
      _includes/nav.html
  4. 83 0
      _layouts/default.html
  5. 96 0
      css/style.css
  6. 124 0
      css/style.less
  7. 73 0
      getting-started/1-installing-amber.md
  8. 100 0
      getting-started/2-project-setup.md
  9. 7 0
      getting-started/test.md
  10. BIN
      images/header.png
  11. BIN
      images/logo.png
  12. 17 0
      index.md

+ 13 - 0
1-getting-started.md
View File 

@@ -0,0 +1,13 @@
 
+---
 
+title: Getting started
 
+layout: default
 
+permalink: "getting-started.html"
 
+next: "getting-started/installing.html"
 
+---
 
+
 
+This guide will take you through the installation and setup of Amber
 
+to be used in a project.
 
+
 
+To get started with Amber and its setup and environment, we will
 
+create a simple TODO list application with Amber.
 
+

+ 2 - 0
_config.yml
View File 

@@ -0,0 +1,2 @@
 
+pygments: true
 
+include: [_st.js]

+ 30 - 0
_includes/nav.html
View File 

@@ -0,0 +1,30 @@
 
+<ul class="nav amber-nav">
 
+	{% assign sorted_pages = site.pages | sort:"name" %}
 
+	{% for node in sorted_pages %}
 
+		{% unless node.parent or node.hide %}
 
+
 
+			{% if page.url == node.url %}
 
+				<li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
 
+			{% else %}
 
+				<li><a href="{{node.url}}">{{node.title}}</a></li>
 
+			{% endif %}
 
+
 
+			<ul class="nav">
 
+			{% for subnode in sorted_pages %}
 
+					{% if subnode.parent == node.title %}
 
+
 
+						{% if page.url == subnode.url %}
 
+							<li class="active"><a href="{{subnode.url}}" class="active">{{subnode.title}}</a></li>
 
+						{% else %}
 
+							<li><a href="{{subnode.url}}">{{subnode.title}}</a></li>
 
+						{% endif %}
 
+			
+
 
+					{% endif %}
 
+				{% endfor %}
 
+			</ul>
 
+
 
+
 
+		{% endunless %}
 
+	{% endfor %}
 
+</ul>

+ 83 - 0
_layouts/default.html
View File 

@@ -0,0 +1,83 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <title>{{ page.title }}</title>
 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
+    <meta name="author" content="Nicolas Petton" />
 
+    <link rel="stylesheet" type="text/css" href='/css/style.css' />
 
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 
+	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 
+	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 
+
 
+  </head>
 
+  <body>
 
+
 
+	<div class="page-header">
 
+
 
+
 
+	  <div class="container">
 
+	<nav class="navbar navbar-default" role="navigation">
 
+		
+		<!-- Brand and toggle get grouped for better mobile display -->
 
+		<div class="navbar-header">
 
+		  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
+			<span class="sr-only">Toggle navigation</span>
 
+			<span class="icon-bar"></span>
 
+			<span class="icon-bar"></span>
 
+			<span class="icon-bar"></span>
 
+		  </button>
 
+		  <a class="navbar-brand" href="/">Amber docs</a>
 
+		</div>
 
+
 
+		<!-- Collect the nav links, forms, and other content for toggling -->
 
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
+		  <ul class="nav navbar-nav">
 
+			<li><a href="http://amber-lang.net">← Back to amber-lang.net</a></li>
 
+		  </ul>
 
+		</div>
 
+
 
+
 
+
 
+	</nav>
 
+	  </div>
 
+
 
+	  <div class="content">
 
+		<h1>
 
+		  Amber docs <span class="tiny">v0.12.3</span><br><small>Guides & API reference</small>
 
+		</h1>
 
+	  </div>
 
+	</div>
 
+
 
+	<div class="container amber-main">
 
+	  
+	  <div class="row">
 
+
 
+		<div class="col-md-3">
 
+		  {% include nav.html %}
 
+		</div>
 
+
 
+		<div class="col-md-9 amber-content">
 
+		  <h2>{{page.title}}</h2>
 
+		  {{ content }}
 
+
 
+		  <div class="next-section">
 
+			 {% if page.next != null %}
 
+			 <a href="{{ page.next }}" class="btn btn-primary next">
 
+			   Next section →
 
+			 </a>
 
+			 {% endif %}
 
+		  </div>
 
+		</div>
 
+
 
+      </div>
 
+
 
+
 
+	</div>
 
+
 
+    <div id="footer">
 
+      <div class="container">
 
+		<p>Copyright © 2014 <a href="http://www.nicolas-petton.fr">Nicolas Petton</a> and <a href="https://github.com/amber-smalltalk/amber/graphs/contributors">Amber contributors</a>. The content of this website in licensed under <a href="http://creativecommons.org/licenses/by-nc/3.0/">CC-BY-NC 3.0</a>.</p>
 
+      </div> 
+    </div>
 
+  </body>
 
+</html>

+ 96 - 0
css/style.css
View File 

@@ -0,0 +1,96 @@
 
+body .page-header {
 
+  background: url("/images/header.png");
 
+  margin-top: 0;
 
+  border-bottom: 2px solid #004466;
 
+}
 
+body .page-header .navbar.navbar-default {
 
+  margin: 0;
 
+  background: white;
 
+  border-radius: 0;
 
+  border-top: 0 none;
 
+  box-shadow: 0 0 6px #333;
 
+}
 
+body .page-header .content {
 
+  width: 900px;
 
+  margin: auto;
 
+  background: url("/images/logo.png") center left no-repeat;
 
+}
 
+body .page-header .content h1 {
 
+  font-weight: bold;
 
+  margin-left: 200px;
 
+  padding: 30px;
 
+  text-align: left;
 
+  color: white;
 
+  font-size: 60px;
 
+  line-height: 60px;
 
+}
 
+body .page-header .content h1 small {
 
+  color: #eee;
 
+  font-size: 42px;
 
+}
 
+body .page-header .content h1 .tiny {
 
+  color: #eee;
 
+  font-size: 22px;
 
+}
 
+body .page-header .content h1 img {
 
+  margin: 20px;
 
+}
 
+body .container {
 
+  max-width: 960px;
 
+}
 
+body .container.amber-main {
 
+  margin-bottom: 50px;
 
+}
 
+body .container h2 {
 
+  font-weight: bold;
 
+  border-bottom: 1px solid #ccc;
 
+  padding-bottom: 20px;
 
+  margin-bottom: 20px;
 
+  color: #444;
 
+}
 
+body .container h3,
 
+body .container h4 {
 
+  font-weight: bold;
 
+  margin: 20px 0;
 
+}
 
+body .container h3 {
 
+  padding-bottom: 10px;
 
+  border-bottom: 1px solid #999;
 
+}
 
+body .container p.note {
 
+  background: #FFFFDD;
 
+  padding: 5px 10px;
 
+  border: 1px solid #BBBB7A;
 
+}
 
+body .container .nav.amber-nav {
 
+  background: #eee;
 
+  border-radius: 10px;
 
+  padding: 10px 0;
 
+  margin-top: 20px;
 
+}
 
+body .container .nav.amber-nav a {
 
+  padding: 5px 20px;
 
+  color: #444;
 
+  border-right: 1px solid transparent;
 
+}
 
+body .container .nav.amber-nav a:hover {
 
+  background: #ddd;
 
+}
 
+body .container .nav.amber-nav a.active {
 
+  border-right: 1px solid #004466;
 
+  font-weight: bold;
 
+  color: #004466;
 
+}
 
+body .container .nav.amber-nav .nav a {
 
+  padding-left: 40px;
 
+}
 
+body .container .next-section {
 
+  margin-top: 20px;
 
+  text-align: right;
 
+}
 
+body #footer {
 
+  text-align: center;
 
+}
 
+body #footer .container {
 
+  border-top: 1px solid #ccc;
 
+}

+ 124 - 0
css/style.less
View File 

@@ -0,0 +1,124 @@
 
+body {
 
+
 
+	.page-header {
 
+		background: url("/images/header.png");
 
+		margin-top: 0;
 
+		border-bottom: 2px solid darken(#08c, 20%);
 
+
 
+		.navbar.navbar-default {
 
+			margin: 0;
 
+			background: white;
 
+			border-radius: 0;
 
+			border-top: 0 none;
 
+			box-shadow:0 0 6px #333;
 
+		}
 
+
 
+		.content {
 
+
 
+			width: 900px;
 
+			margin: auto;
 
+			background: url("/images/logo.png") center left no-repeat;
 
+
 
+			h1 {
 
+				font-weight: bold;
 
+				margin-left: 200px;
 
+				padding: 30px;
 
+				text-align: left;
 
+				color: white;
 
+				font-size: 60px;
 
+				line-height: 60px;
 
+
 
+				small {
 
+					color: #eee;
 
+					font-size: 42px;
 
+				}
 
+
 
+				.tiny {
 
+					color: #eee;
 
+					font-size: 22px;
 
+				}
 
+
 
+				img {
 
+					margin: 20px;
 
+				}
 
+			}
 
+		}
 
+	}
 
+
 
+	.container {
 
+		max-width: 960px;
 
+
 
+		&.amber-main {
 
+			margin-bottom: 50px;
 
+		}
 
+
 
+		h2 {
 
+			font-weight: bold;
 
+			border-bottom: 1px solid #ccc;
 
+			padding-bottom: 20px;
 
+			margin-bottom: 20px;
 
+			color: #444;
 
+		}
 
+
 
+		h3, h4 {
 
+			font-weight: bold;
 
+			margin: 20px 0;
 
+		}
 
+
 
+		h3 {
 
+			padding-bottom: 10px;
 
+			border-bottom: 1px solid #999;
 
+		}
 
+
 
+		p {
 
+			&.note {
 
+				background: #FFFFDD;
 
+				padding: 5px 10px;
 
+				border: 1px solid #BBBB7A;
 
+			}
 
+		}
 
+
 
+		.nav {
 
+			&.amber-nav {
 
+				background: #eee;
 
+				border-radius: 10px;
 
+				padding: 10px 0;
 
+				margin-top: 20px;
 
+
 
+				a {
 
+					padding: 5px 20px;
 
+					color: #444;
 
+					border-right: 1px solid transparent;
 
+
 
+					&:hover {
 
+						background: #ddd;
 
+					}
 
+
 
+					&.active {
 
+						border-right: 1px solid darken(#08c, 20%);
 
+						font-weight: bold;
 
+						color: darken(#08c, 20%);
 
+					}
 
+				}
 
+
 
+				.nav {
 
+					a {
 
+						padding-left: 40px;
 
+					}
 
+				}
 
+			}
 
+		}
 
+
 
+		.next-section {
 
+			margin-top: 20px;
 
+			text-align: right;
 
+		}
 
+	}
 
+
 
+	#footer {
 
+		text-align: center;
 
+		.container {
 
+			border-top: 1px solid #ccc;
 
+		}
 
+	}
 
+}

+ 73 - 0
getting-started/1-installing-amber.md
View File 

@@ -0,0 +1,73 @@
 
+---
 
+title: Installing Amber
 
+layout: default
 
+permalink: "installing.html"
 
+parent: Getting started
 
+next: "/getting-started/setting-up-project.html"
 
+---
 
+
 
+Amber is shipped both as
 
+
 
+- a [npm module](https://npmjs.org/package/amber) for its command-line
 
+  interface tool `amber` with a small server, compiler and REPL;
 
+- a [bower](http://bower.io) component used as dependency for other
 
+  projects.
 
+
 
+### The command-line tool
 
+
 
+Using the command-line tool `amber` is not required, as any webdav
 
+server can serve amber files and allow packages to be committed, but
 
+it is a very convenient way to get started. Also, the `npm` package
 
+comes with a command-line compiler and a REPL.
 
+
 
+`npm` is a package manager for [nodejs](http://nodejs.org), a
 
+JavaScript runtime used to run JavaScript code outside of the web
 
+browser.
 
+
 
+`nodejs` and `npm` can either be
 
+[downloaded](http://nodejs.org/download) from the website, or
 
+installed using Operating System specific package managers.
 
+
 
+#### Installing nodejs on MacOS X and Windows
 
+
 
+The easiest way to install `nodejs` on MacOS X and Windows is to
 
+download the installer from the
 
+[downloaded](http://nodejs.org/download) page.
 
+
 
+For MacOS X users, nodejs can also be installed with [homebrew](http://brew.sh/):
 
+
 
+```sh
 
+brew install nodejs
 
+```
 
+
 
+#### Installing nodejs on Ubuntu
 
+
 
+Ubuntu provides nodejs as well as npm in its repository.
 
+
 
+```sh
 
+sudo apt-get install nodejs npm
 
+```
 
+
 
+#### Installing `amber`
 
+
 
+Once nodejs and npm are installed, evaluate:
 
+
 
+```sh
 
+npm install -g amber
 
+```
 
+
 
+Ubuntu users will have to evaluate it with `sudo`:
 
+
 
+```sh
 
+sudo npm install -g amber
 
+```
 
+
 
+
 
+### The bower component
 
+
 
+[Bower](http://bower.io) is a package manager for the web. It makes it
 
+easy to manage dependencies in your application including
 
+Amber. Unlike npm, Bower components are meant to be used inside the
 
+web browser.
 
+
 
+We will see in the next section how to setup a project using bower.

+ 100 - 0
getting-started/2-project-setup.md
View File 

@@ -0,0 +1,100 @@
 
+---
 
+title: Setting up the project
 
+layout: default
 
+permalink: "setting-up-project.html"
 
+parent: Getting started
 
+---
 
+
 
+Now that the command-line tool `amber` is installed, the project can
 
+be setup using bower.
 
+
 
+### Bower
 
+
 
+Bower is a package manager for the web. Amber can be install either by
 
+running in the root directory of the new project:
 
+
 
+```sh
 
+bower install amber --save
 
+```
 
+
 
+or by adding in the root of the project a `bower.json` file like the
 
+ following:
 
+
 
+```json
 
+{
 
+    "name": "amber-todolist",
 
+    "dependencies": {
 
+        "amber": "~0.12.3"
 
+    }
 
+}
 
+```
 
+
 
+and evaluating
 
+```sh
 
+bower install
 
+```
 
+
 
+In both cases, Amber will be installed in a directory named `bower_components`.
 
+
 
+### Loading Amber
 
+
 
+
 
+In this section we will learn how setup an `index.html` page to load
 
+amber using [requirejs](http://requirejs.org).
 
+
 
+#### Amber packages
 
+
 
+Amber packages are AMD modules. AMD (Asynchronous Module
 
+Definition) is a JavaScript API for defining modules and
 
+dependencies to be loaded asynchronously.
 
+
 
+Amber ships with [requirejs](http://requirejs.org), the most popular
 
+AMD loader implementation.
 
+
 
+In the `index.html` page, both `requirejs` and `amber.js` are loaded
 
+as any JavaScript file:
 
+
 
+```html
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+	    <script
 
+		  type='text/javascript'
 
+		  src='./bower_components/amber/support/requirejs/require.min.js'>
 
+	    </script>
 
+	    <script
 
+		  type='text/javascript'
 
+		  src='./bower_components/amber/support/amber.js'>
 
+	    </script>
 
+	</head>
 
+	<body>
 
+	</body>
 
+</html> 
+```
 
+
 
+In the next script we define how Amber packages are loaded. Amber
 
+comes with several AMD modules, the default one being `amber/devel`.
 
+
 
+```html
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+	    <script
 
+		  type='text/javascript'
 
+		  src='./bower_components/amber/support/requirejs/require.min.js'>
 
+	    </script>
 
+	    <script
 
+		  type='text/javascript'
 
+		  src='./bower_components/amber/support/amber.js'>
 
+	    </script>
 
+	    <script type='text/javascript'>
 
+		  require(['amber/devel'], function (amber) {
 
+	  		amber.initialize();
 
+		  });
 
+	    </script>
 
+	</head>
 
+	<body>
 
+	</body>
 
+</html> 
+```
 
+

+ 7 - 0
getting-started/test.md
View File 

@@ -0,0 +1,7 @@
 
+---
 
+title: This is a test
 
+layout: default
 
+parent: Getting started
 
+---
 
+
 
+test :)

BIN
images/header.png
View File


BIN
images/logo.png
View File


+ 17 - 0
index.md
View File 

@@ -0,0 +1,17 @@
 
+---
 
+layout: default
 
+title: Amber documentation
 
+hide: true
 
+next: getting-started.html
 
+---
 
+
 
+Welcome to the Amber documentation website!
 
+
 
+The purpose of this documentation is to guide you step by step from
 
+learning how to install Amber to being an advanced Amber developer.
 
+
 
+<p class="note">
 
+This documentation and guides are a community effort, you can
 
+<a href="https://github.com/amber-smalltalk/amber-documentation">contribute</a> your
 
+own guide!
 
+</p>