Initial commit

.gitignore

+# Hyde Build Artifacts
+deploy/
+.hyde_deps
+
+# Compiled py
+*.pyc
+
+# Vim swap
+*.swp

content/about.html

+---
+extends: base.j2
+title: 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 build and serve the template, type:
+
+    cd folder_name
+    hyde gen
+    hyde serve
+
+To check for the newest version, download it separately, report a bug
+or contribute, 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/

content/advanced/grouper.html

+---
+index: 3
+title: Grouping
+tags:
+    - sort
+    - group
+learning_order: 2
+---
+
+Grouping
+========
+
+Content is very often grouped by theme, size, location or any other
+conceivable measure. Groups can be traversed in a few ways in Hyde, and 
+[sorted](sorter.html) at the same time. Here are two common ways:
+
+Walking all groups and subgroups
+--------------------------------
+
+{# Resources are sorted by defining a sorter in the configuration file. #}
+
+{% for grp, res_walker in site.content.walk_level_groups() %}
+*{{ grp.description }}*
+
+{% for res in res_walker %}
+  * [{{ res.slug|capitalize|replace("-"," ") }}]({{ res.full_url }})
+    ({{ res.name }})
+{% endfor %}
+
+{% endfor %}
+
+{# The above code layout is not arbitrary. Remember that we're building
+   a Markdown page so every space or line ending has a purpose.
+#}
+
+Listing only the specific (sub)group
+------------------------------------
+
+{% for res in site.content.walk_resources_grouped_by_advanced() %}
+  * [{{ res.slug|capitalize|replace("-"," ") }}]({{ res.full_url }})
+    ({{ res.name }})
+{% endfor %}
+
+{# You can also call the top level group "level" to get all resources that
+   are in the group. Or you can list all resources of the same group in the
+   current node with "resource.node.walk_resource_grouped_by_advanced()".
+#}
+
+{{ macros.render_bottom_article_nav() }}

content/advanced/meta.yaml

+extends: base.j2
+default_block: content
+level: advanced

content/advanced/overview.html

+---
+index: 1
+title: Advanced topics
+tags:
+    - sort
+    - group
+    - tag
+learning_order: 4
+---
+
+More advanced topics
+====================
+
+If you have read and understood all basic topics covered in
+{% for res in site.content.walk_resources_grouped_by_basic()|reverse %}
+[{{ res.slug|capitalize|replace("-"," ") }}]({{ res.full_url }}) 
+{% endfor %}
+then you are ready for some more advanced features. They are explained in
+the same way as the basic part, building on the knowledge of the previous,
+so it is recommended that you follow them in the listed order.
+
+
+{# List all resources from a group, sort them by index and list their tags.
+
+   Sometimes you'll have to add HTML to a Markdown file for styling
+   or adding some special features, and Markdown is OK with that.
+#}
+<ol>
+{% for res in resource.node.walk_resources_sorted_by_learning_order() %}
+{#
+   res.slug|capitalize|replace("-"," ") is just an example of how different
+   commands can be chained together, but many times it will be much easier
+   just to use meta data if a resource has it, like here -> res.meta.title
+#}
+<li><a href="{{ res.full_url }}">{{ res.meta.title }}</a>
+    {% if res.name == "overview.html" %}(this file) {% endif %}
+
+<span class="tags">tags: 
+{% for tag in res.meta.tags %}
+{#
+   After wring the tag name, check if that is the last tag in the list. If
+   it is, don't append the comma at the end.
+#}
+{{ tag }}{% if tag != res.meta.tags[-1] %},{% endif %} 
+{% endfor %}
+</span>
+</li>
+{% endfor %}
+</ol>
+
+{{ macros.render_bottom_article_nav() }}

content/advanced/sorter.html

+---
+index: 2
+title: Sorting
+tags:
+    - sort
+learning_order: 1
+---
+
+Sorting
+=======
+
+There will come a time when you will need to list and sort resources. Hyde
+allows you to walk the site tree and sort the resources by the predefined
+settings in your configuration file.
+
+You can list and sort by name all your content files.
+
+{# With every sorter defined in the configuration file, nodes get a method
+   to call. Notice that in the first and last example the method is called
+   on the whole content of the site, while the second example shows how to
+   invoke it only on one specific node (in this case the current one).
+
+   Also, some new Jinja filters were used to style the output.
+#}
+{% for res in site.content.walk_resources_sorted_by_name() %}
+  * [{{ res.slug|capitalize|replace("-"," ") }}]({{ res.full_url }})
+    ({{ res.name }})
+{% endfor %}
+
+Or list only those in the current node (folder). In this case that would be
+all advanced topics.
+
+{# Have in mind that using the next example in a content page (like here) or
+   using it in a layout (Jinja template that is extended or include by
+   content pages) will yield very different results.
+
+   In this case it will be called only once, for this resource, and shown
+   only on this page. If it was in a layout, it would be called for EVERY
+   resource that uses that layout. In that case the context would be
+   different, the parent node of the resource could be different and the
+   results will probably be different too.
+#}
+{% for res in resource.node.walk_resources_sorted_by_index() %}
+  {{ loop.index }}. [{{ res.slug|capitalize }}]({{ res.full_url }})
+{% endfor %}
+
+Or sort files by type and then by size.
+
+{% for res in site.content.walk_resources_sorted_by_file_type() %}
+  * [{{ res.source_file.kind|upper }}] {{ res.name }}
+{% endfor %}
+
+{{ macros.render_bottom_article_nav() }}

content/advanced/tagger.html

+---
+index: 4
+title: Tagging
+tags:
+    - sort
+    - tag
+learning_order: 3
+---
+
+Tagging
+=======
+
+It seems that human beings want to tag everything. You can do it with
+Hyde also. In this example **tags** are used to represent technologies
+used to build a particular advanced page. So you can see that the
+**sorting** was needed for all advanced topics, but **grouping** was
+used only for overview and grouping pages.
+
+Listing by tags
+---------------
+
+{# You can grab the list of all tags ... #}
+{% for tag, meta in site.tagger.tags %}
+*{{ tag }}*
+
+{# ... and get all resurces tagged with that node. #}
+{% for res in resource.node.walk_resources_tagged_with(tag) %}
+  * [{{ res.slug|capitalize|replace("-"," ") }}]({{ res.full_url }})
+    ({{ res.name }})
+{% endfor %}
+
+{% endfor %}
+
+{# Another way to walk through resources tagged with a specific tag is
+   to use a method that contains that tag's name.
+
+{% for res in resource.node.walk_resources_tagged_with_sort() %}
+{% endfor %}
+#}
+
+Tag combination
+---------------
+
+You can also search for combination of tags. If you search for a
+resource that has **sort**, **tag** and **group** tags, only an
+{% for res in resource.node.walk_resources_tagged_with('sort+tag+group') -%}
+[{{ res.slug }}]({{ res.full_url }})
+{%- endfor %} 
+will be returned.
+
+{{ macros.render_bottom_article_nav() }}

content/first-steps.html

+---
+extends: base.j2
+title: First steps
+---
+{# 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 %}
+Walk this way if you're a beginner
+==================================
+
+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 macros for common and repetitive tasks.
+
+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](index.html),
+[first-steps.html](first-steps.html) and [about.html](about.html).
+
+[Index](index.html) extends the base layout in the classic Jinja way and
+fills the content block with some simple Markdown data.
+
+[First steps](first-steps.html) 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](about.html) 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"
+
+
+4. Advanced sections
+--------------------
+
+While searching and navigating this template you'll find more files and
+sections than mentioned on this page (something like **meta.yaml**
+files, the **content/advanced** folder or other Jinja templates). Those
+files are needed for the [advanced topics](advanced/overview.html) so
+just ignore them at the beginning.  They will start to make sense while
+you're working through the template or will be explicitly explained when
+the right time comes.
+{% endblock %}

content/index.html

+{# 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
+
+Are you ready for your [first steps](first-steps.html)?
+{% endblock %}

content/media/css/style.css

+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    color: #ddd;
+    background-color: black;
+}
+
+body {
+    margin: 0 auto;
+    width: 980px;
+    min-height: 700px;
+    background: url('../img/background.jpg') top left no-repeat;
+    position: relative;
+    font-size: 16px;
+    font-family: Tahoma, sans-serif;
+}
+
+strong {
+    color: white;
+}
+
+a {
+    color: #f1ee00;
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+}
+
+p, ul, ol {
+    margin-bottom: 22px;
+}
+
+ul, ol {
+    margin-left: 28px;
+}
+
+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;
+    color: white;
+}
+
+header h1 span {
+    color: #f1ee00;
+}
+
+header p {
+    font-size: 28px;
+    font-weight: normal;
+    letter-spacing: 11px;
+    text-shadow: -1px 2px 1px black;
+    color: white;
+}
+
+nav {
+    position: absolute;
+    top: 340px;
+    right: 120px;
+    width: 250px;
+    text-align: right;
+    font-family: Anton, Tahoma, sans-serif;
+}
+
+nav a,
+nav a:visited {
+    text-decoration: none;
+    color: white;
+    text-transform: uppercase;
+    font-size: 28px;
+}
+
+nav a.selected {
+    color: #888;
+}
+
+nav a:hover {
+    color: #f1ee00;
+}
+
+nav ul li {
+    list-style-type: none;
+}
+
+nav, aside {
+    /* to line up with the header */
+    padding-right: 5px;
+}
+
+#content {
+    line-height: 1.5em;
+    position: absolute;
+    top: 350px;
+    left: 180px;
+    width: 410px;
+    padding-bottom: 100px;
+}
+
+#content h1 {
+    font-weight: normal;
+    font-size: 28px;
+    font-family: Anton, Tahoma, sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 22px;
+    color: white;
+}
+
+#content h2 {
+    font-weight: bold;
+    font-size: 18px;
+    font-family: Tahoma, sans-serif;
+    margin-bottom: 22px;
+    border-bottom: 1px dashed #888;
+}
+
+#content code {
+    display: block;
+    font-family: monospace;
+    font-size: 12px;
+    background-color: #222;
+    padding: 5px 10px;
+    margin-bottom: 20px;
+    border-top: 1px solid #444;
+    border-right: 1px solid #333;
+    border-bottom: 1px solid #222;
+    border-left: 1px solid #111;
+}
+
+#content .tags {
+    font-size: 14px;
+    color: #888;
+}
+
+#content .bottom_article_nav {
+    border-top: 1px dashed #888;
+    overflow: hidden;
+    margin-top: 40px;
+    padding-top: 10px;
+}
+
+#content .bottom_article_nav .next {
+    float: right;
+}

content/meta.yaml

+level: basic
+

layout/base.j2

+<!doctype html>
+<html lang="en">
+    <head>
+        <link href="http://fonts.googleapis.com/css?family=Anton"
+            rel="stylesheet" type="text/css">
+            <title>Hyde Starter Kit {% if resource.meta.title-%}
+                | {{ resource.meta.title}}{%-endif %}</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="{{ media_url('css/style.css') }}">
+    </head>
+    <body>
+        <header>
+            <h1><span>Hyde</span> Starter Kit</h1>
+            <p>Know your tool</p>
+        </header>
+        <nav>
+        {# Move main menu rendering away from the base layout. This
+           way it can be used to generate the list many times, e.g. in
+           a footer, etc.
+        #}
+            {% import "macros.j2" as macros with context %}
+            {{ macros.render_basic_menu() }}
+            {{ macros.render_advanced_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>
+
+        {# Some parts of the web are not needed for development and can
+           wait for production (e.g. analytics). They can be included in
+           the final production build. Create a new config file, extend
+           the original one and override the "mode" property; then build
+           the site with the new "production configuration".
+        #}
+        {% if site.config.mode == "production" -%}
+            {% include "ga.j2" %}
+        {%- endif %}
+    </body>
+</html>

layout/ga.j2

+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', '{{ site.meta.ga_tracking_code }}']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>

layout/macros.j2

+{# Generates the main and basic menu from context data in the site's
+   configuration file.
+#}
+{% macro render_basic_menu() -%}
+<ul class="basic">
+{% for menu_item in menu %}
+    <li><a {% if (menu_item.url == resource.relative_path) %}class="selected" {% endif -%}
+        href="{{ content_url(menu_item.url) }}">{{ menu_item.title }}</a></li>
+{% endfor %}
+</ul>
+{%- endmacro %}
+
+
+{# Generates the advanced menu from all files located in the content/advanced
+   folder. Only advanced section files have 'index' metadata, so we can be
+   certain that no other files will creep in.
+#}
+{% macro render_advanced_menu() -%}
+<ul class="advanced">
+{% for res in site.content.walk_resources_sorted_by_index() %}
+    <li><a {% if (res.url == resource.url) %}class="selected" {% endif -%}
+        href="{{ res.full_url }}">{{ res.meta.title }}</a></li>
+{% endfor %}
+</ul>
+{%- endmacro %}
+
+
+{# Advanced topics macro. Renders navigation at the end of an advanced
+   article. It also depends on 'index' metadata.
+#}
+{% macro render_bottom_article_nav() %}
+<div class="bottom_article_nav">
+{% if resource.next_by_index is not none -%}
+    <div class="next"><a href="{{ resource.next_by_index.full_url }}">
+    {{ resource.next_by_index.meta.title }}</a>
+    &gt;</div>
+{%- endif %}
+
+{% if resource.prev_by_index is not none -%}
+    <div class="prev">&lt; <a href="{{ resource.prev_by_index.full_url }}">
+    {{ resource.prev_by_index.meta.title }}</a>
+    </div>
+{%- endif %}
+</div>
+{% endmacro %}

requirements.txt

+hyde==0.8.9

site.yaml

+mode: learning
+media_root: media
+media_url: /media
+base_url: /
+# If your site is nested inside of a bigger one, you can use media_url and
+# base_url to properly generate links on your site. For example, if your URL
+# will be some.domain.com/starter/, use:
+#   media_url: /starter/media
+#   base_url: /starter/
+template: hyde.ext.templates.jinja.Jinja2Template
+plugins:
+    - hyde.ext.plugins.meta.MetaPlugin
+    - hyde.ext.plugins.meta.AutoExtendPlugin
+    # Plugins needed for the advances section.
+    - hyde.ext.plugins.meta.SorterPlugin
+    - hyde.ext.plugins.meta.GrouperPlugin
+    - hyde.ext.plugins.meta.TaggerPlugin
+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: "https://github.com/hyde/hyde#installation"
+        menu:
+          - title: Home
+            url: index.html
+          - title: First steps
+            url: first-steps.html
+          - title: About
+            url: about.html
+
+### Advanced part ###
+
+# This defines meta data on the whole site.
+meta:
+    # 'nodemeta' will tell Hyde what file to look for inside a folder from
+    # which to apply meta data to all files (resources) inside it. This is
+    # a great way of simply adding or modifying properties of a very large
+    # number of files.
+    nodemeta: meta.yaml
+    ga_tracking_code: XX-XXXXXXXX-X
+
+sorter:
+    name: # the name of the sorter (no pun intended)
+        attr: name # by which attributes will resources be sorted
+        filters:
+            source_file.kind: html
+            # You can include only files from a certain folder.
+            #resource.node: (name of the folder)
+        #reverse: True # if you need the list backwards
+    file_type:
+        attr: 
+            - source_file.kind
+            - source_file.size
+    index:
+        attr: meta.index
+        filters:
+            source_file.kind: html
+    learning_order:
+        attr: meta.learning_order
+        filters:
+            source_file.kind: html
+
+grouper:
+    level:
+        sorter: name
+        description: Difficulty levels
+        groups:
+            - name: basic
+              description: Basic
+            - name: advanced
+              description: Advanced
+    # You can have more than one group section, depending on your needs.
+    # For example: "categories", "menu sections", etc.
+    #category:
+    #    description: To which category a blog post belongs to.
+    #    groups:
+    #        - name: software
+    #          description: Software engineering
+    #        - name: web
+    #          description: Web technologies
+    #        - name: seo
+    #          description: Search Engine Optimization
+
+tagger:
+    sorter: name