Merge pull request #43 from merlinrebrovic/hyde

---


Adds a starter layout to help beginners with Hyde.

hyde/layouts/starter/content/about.html

@@ -0,0 +1,34 @@
+---
+extends: base.j2
+title_ending: "| About"
+default_block: content
+---
+
+About
+=====
+
+This beginner's tutorial was created by [Merlin Rebrović][0] for the
+[Hyde project][1]. It is included in Hyde as a layout named _starter_.
+If you have a [default Hyde installation][2], all you have to do is
+write:
+
+    hyde -s folder_name create -l starter
+
+To check for the newest version, to download it separately or to report
+a bug, please visit Hyde Starter Kit's [GitHub page][3].
+
+
+Attributions
+------------
+
+The [photo][4] used for part of the background.
+
+
+{# You can use Jinja tags in Markdown content also; they get processed
+   before the content gets to the Markdown filter.
+#}
+[0]: {{ author.url }}
+[1]: {{ project.url }}
+[2]: {{ project.install }}
+[3]: {{ layout.url }}
+[4]: http://www.flickr.com/photos/batintherain/5613841957/

hyde/layouts/starter/content/index.html

@@ -0,0 +1,21 @@
+{# Use base.j2 template as a base and only provide values for placeholders
+   in this file.
+#}
+{% extends "base.j2" %}
+
+{# Markdown main content block. #}
+{% block content %}
+What is this all about
+======================
+
+Starter Kit introduces you to Hyde's many options and possibilities.
+Finding your way for the first time can be a bit confusing, so this
+template tries to ease your way in by exposing only core features and
+technologies step by step. Those are:
+
+  * basic Hyde site structure
+  * configuration file
+  * Jinja templates
+  * Markdown
+  * basic metadata and plugins
+{% endblock %}

hyde/layouts/starter/content/media/css/style.css

@@ -0,0 +1,144 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    color: #fafafa;
+    background-color: black;
+}
+
+body {
+    margin: 0 auto;
+    width: 980px;
+    min-height: 700px;
+    background: url('../img/background.jpg') top left no-repeat;
+    font-size: 14px;
+    position: relative;
+
+    font-size: 62.5%;
+    font-family: Tahoma, sans-serif;
+}
+
+a {
+    color: #f1ee00;
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+}
+
+p, ul {
+    margin-bottom: 1.6em;
+}
+
+ul {
+    margin-left: 2em;
+}
+
+header {
+    position: absolute;
+    top: 120px;
+    right: 120px;
+    font-family: Anton, Tahoma, sans-serif;
+    text-transform: uppercase;
+    font-weight: none;
+}
+
+header h1 {
+    font-size: 50px;
+    font-weight: normal;
+    text-shadow: -1px 2px 1px black;
+}
+
+header h1 span {
+    color: #f1ee00;
+}
+
+header h2 {
+    font-size: 28px;
+    font-weight: normal;
+    letter-spacing: 11px;
+    text-shadow: -1px 2px 1px black;
+}
+
+nav {
+    position: absolute;
+    top: 340px;
+    right: 120px;
+    width: 200px;
+    text-align: right;
+    font-family: Anton, Tahoma, sans-serif;
+}
+
+nav a,
+nav a:visited {
+    text-decoration: none;
+    color: #fafafa;
+    text-transform: uppercase;
+    font-size: 2.8em;
+}
+
+nav a.selected {
+    color: #888;
+}
+
+nav a:hover {
+    color: #f1ee00;
+}
+
+nav ul li {
+    list-style-type: none;
+}
+
+aside {
+    position: absolute;
+    top: 550px;
+    right: 120px;
+    width: 140px;
+    text-align: right;
+    font-size: 1em;
+}
+
+nav, aside {
+    /* to line up with the header */
+    padding-right: 5px;
+}
+
+#content {
+    font-size: 1.4em;
+    line-height: 1.6em;
+    position: absolute;
+    top: 350px;
+    left: 180px;
+    width: 410px;
+    padding-bottom: 100px;
+}
+
+#content h1 {
+    font-weight: normal;
+    font-size: 2em;
+    font-family: Anton, Tahoma, sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 0.8em;
+}
+
+#content h2 {
+    font-weight: bold;
+    font-size: 1.2em;
+    font-family: Tahoma, sans-serif;
+    margin-bottom: 1.33em;
+}
+
+#content code {
+    display: block;
+    font-family: 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New';
+    font-size: 1.2em;
+    background-color: #222;
+    padding: 5px 10px;
+    margin-bottom: 1.33em;
+    border-top: 1px solid #444;
+    border-right: 1px solid #333;
+    border-bottom: 1px solid #222;
+    border-left: 1px solid #111;
+}

hyde/layouts/starter/content/what-next.html

@@ -0,0 +1,73 @@
+---
+extends: base.j2
+title_ending: "| What next"
+---
+{# In-file metadata. Supplements data from the site's configuration file 
+   and node (folder) level data in "meta.yaml" files.
+
+   Use the AutoExtendPlugin to extend templates from metadata. In this
+   case the metadata and "extends" statement has to be on the top of the
+   file.
+#}
+
+{% block content %}
+There and back again
+====================
+
+This template was created to look at its code. So you should spend about
+5% of your time looking at the web from the outside and the other 95%
+tinkering with things under the hood.
+
+The template is not perfect nor does it contain the best practices. It
+is not even consistent. It is designed to help you with the learning
+process. If you follow the steps below, you'll get a pretty good picture of
+how things work. Every step adds some new features and builds upon the
+previous one.
+
+
+1. Site structure and configuration file
+----------------------------------------
+
+The site is made of two folders and a [Hyde configuration][hyde_config]
+file. The folders are _content_ and _layout_.
+
+_content_ contains all your page content, blog articles, pictures and
+resources like CSS and JavaScript. Everything that is unique is here.
+
+_layout_ contains templates and macros. Everything that you'll want to
+reuse is here.
+
+
+2. Jinja2 template
+------------------
+
+_base.j2_ is a very short and simple Jinja2 template. This way you can
+concentrate on some of the basic features. Notice meta and context
+variables invocation inside curly braces, dynamic media path generation
+and running all content through the Markdown filter.
+
+_macros.j2_ contains a macro for generating the main menu.
+
+For more information or to try something new, visit the extensive [Jinja2
+documentation][jinja2_docs].
+
+
+3. Content
+----------
+
+Look at the three files in this order: _index.html_, _what-next.html_
+and _about.html_.
+
+_Index_ extends the base layout in the classic Jinja way and fills the
+content block with some simple Markdown data.
+
+_What next_ goes a step furher. It introduces the in-file metadata that
+plugins will use to extend and fill the layout. It also uses some new
+Markdown features.
+
+_About_ has a _default_block_ metadata and mixes Markdown content with
+Jinja templates.
+
+[hyde_config]: http://hyde.github.com/config.html "Hyde configuration"
+[jinja2_docs]: http://jinja.pocoo.org/docs/templates/ "Jinja2 documentation"
+{% endblock %}

hyde/layouts/starter/layout/base.j2

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <link href="http://fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css">
+        <title>Hyde Starter Kit {{ resource.meta.title_ending }}</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="{{ media_url('css/style.css') }}">
+        <!--[if lt IE 9]>
+        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
+        </script>
+        <![endif]-->
+    </head>
+    <body>
+        <header>
+            <hgroup>
+            <h1><span>Hyde</span> Starter Kit</h1>
+            <h2>Know your tool</h2>
+            </hgroup>
+        </header>
+        <nav>
+        {# Move main menu rendering away from the base layout. This
+           way it can be used to generate the list many times, in
+           a footer, etc.
+        #}
+            {% from "macros.j2" import render_main_menu with context %}
+            {{ render_main_menu() }}
+        </nav>
+        <article id="content">
+        {# Main content block. Notice it has to pass through the
+           Markdown filter to generate HTML. If a block in content
+           pages contains only markup, you can omit the filter.
+        #}
+            {% filter markdown -%}
+            {% block content %}{% endblock %}
+            {%- endfilter %}
+        </article>
+        <aside>
+            <p>Created by <a href="{{ author.url}}">{{ author.name}}</a>
+            for <a href="{{ project.url }}">{{ project.name }}</a></p>
+        </aside>
+    </body>
+</html>

hyde/layouts/starter/layout/macros.j2

@@ -0,0 +1,7 @@
+{% macro render_main_menu() -%}
+<ul>
+{% for menu_item in menu -%}
+    <li><a {% if menu_item.url == resource.url %}class="selected"{% endif %} href="{{ menu_item.url }}">{{ menu_item.title }}</a></li>
+{%- endfor %}
+</ul>
+{%- endmacro %}

hyde/layouts/starter/site.yaml

@@ -0,0 +1,27 @@
+mode: learning
+media_root: media
+media_url: media # will use relative path, prepend "/" for absolute path
+template: hyde.ext.templates.jinja.Jinja2Template
+plugins:
+    - hyde.ext.plugins.meta.MetaPlugin
+    - hyde.ext.plugins.auto_extend.AutoExtendPlugin
+    - hyde.ext.plugins.syntext.SyntextPlugin
+context:
+    data:
+        author:
+            name: Merlin Rebrović
+            url: "http://merlin.rebrovic.net"
+        layout:
+            name: Hyde Starter Kit
+            url: "https://github.com/merlinrebrovic/hyde-starter-kit"
+        project:
+            name: Hyde
+            url: "http://hyde.github.com"
+            install: "http://hyde.github.com/install.html"
+        menu:
+          - title: Home
+            url: index.html
+          - title: What next
+            url: what-next.html
+          - title: About
+            url: about.html