Skip to content
Snippets Groups Projects
Commit d2d9ab49 authored by Anton Sarukhanov's avatar Anton Sarukhanov
Browse files

remove sample content, add some filler.

parent f4120cb0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 80 additions and 493 deletions
content/about.html deleted 100644 → 0
+ 0
− 40
View file @ f4120cb0
---
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 deleted 100644 → 0
+ 0
− 49
View file @ f4120cb0
---
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 deleted 100644 → 0
+ 0
− 3
View file @ f4120cb0
extends: base.j2
default_block: content
level: advanced
content/advanced/overview.html deleted 100644 → 0
+ 0
− 51
View file @ f4120cb0
---
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 deleted 100644 → 0
+ 0
− 53
View file @ f4120cb0
---
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 deleted 100644 → 0
+ 0
− 51
View file @ f4120cb0
---
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/contact.html 0 → 100644
+ 15
− 0
View file @ d2d9ab49
---
extends: base.j2
title: contact
default_block: content
---
## Yo Dawg
Lets talk.
```
echo $THOUGHTS >/dev/null
```
But actually, [mail@ant.sr](mailto:mail@ant.sr).
content/first-steps.html deleted 100644 → 0
+ 0
− 85
View file @ f4120cb0
---
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
+ 31
− 16
View file @ d2d9ab49
{# 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:
## Hi! My name is Anton.
* basic Hyde site structure
* configuration file
* Jinja templates
* Markdown
* basic metadata and plugins
I have a passion for solving problems with technology.
I’m an experienced front- and back-end developer, currently
maintaining custom PHP and Python solutions for [Rutgers OIT][5].
When I’m not working I enjoy tinkering with electronics,
[building stuff][6], nature, and bike rides.
Do you have a tough technical challenge? Need a website,
custom software, or a hardware integration? [I’d love to hear from you.][2]
## Recent Posts
> coming soon
## Recent Code Commits
> coming soon
## Projects
> coming soon
[1]: https://ant.sr/ "Anton Sarukhanov"
[2]: contact
[3]: https://git.xhost.io/u/anton
[4]: https://ant.sr/resume.pdf
[5]: https://oit.rutgers.edu "Rutgers OIT"
[6]: posts
Are you ready for your [first steps](first-steps.html)?
{% endblock %}
content/media/css/style.css
+ 10
− 12
View file @ d2d9ab49
......@@ -4,26 +4,24 @@
}
html, body {
color: #ddd;
background-color: black;
color: #333;
}
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;
color: #444;
}
a {
color: #f1ee00;
color: #369;
}
a:hover, a:focus {
......@@ -51,7 +49,7 @@ header h1 {
font-size: 50px;
font-weight: normal;
text-shadow: -1px 2px 1px black;
color: white;
color: #333;
}
header h1 span {
......@@ -63,7 +61,7 @@ header p {
font-weight: normal;
letter-spacing: 11px;
text-shadow: -1px 2px 1px black;
color: white;
color: #333;
}
nav {
......@@ -78,17 +76,17 @@ nav {
nav a,
nav a:visited {
text-decoration: none;
color: white;
color: #333;
text-transform: uppercase;
font-size: 28px;
}
nav a.selected {
color: #888;
color: #258;
}
nav a:hover {
color: #f1ee00;
color: #369;
}
nav ul li {
......@@ -115,7 +113,7 @@ nav, aside {
font-family: Anton, Tahoma, sans-serif;
text-transform: uppercase;
margin-bottom: 22px;
color: white;
color: #333;
}
#content h2 {
......@@ -130,7 +128,7 @@ nav, aside {
display: block;
font-family: monospace;
font-size: 12px;
background-color: #222;
background-color: #ccc;
padding: 5px 10px;
margin-bottom: 20px;
border-top: 1px solid #444;
......
content/media/img/background.jpg deleted 100644 → 0
+ 0
− 0
View file @ f4120cb0
content/media/img/background.jpg

146 KiB

layout/base.j2
+ 2
− 23
View file @ d2d9ab49
<!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-%}
<title>Anton Sarukhanov {% 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>
<h1>Anton Sarukhanov</h1>
</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 deleted 100644 → 0
+ 0
− 13
View file @ f4120cb0
<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
+ 0
− 34
View file @ d2d9ab49
......@@ -9,37 +9,3 @@
{% 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 %}
site.yaml
+ 22
− 63
View file @ d2d9ab49
mode: learning
mode: dev
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
- hyde.ext.plugins.meta.MetaPlugin # meta data. used extensively below.
- hyde.ext.plugins.meta.AutoExtendPlugin # extend in meta instead of {%extends%}
# Advanced/optional plugins follow
- hyde.ext.plugins.meta.SorterPlugin # see "sorter" below
- hyde.ext.plugins.meta.GrouperPlugin # see "grouper" below
- hyde.ext.plugins.meta.TaggerPlugin # see "tagger" below
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"
# Global template vars go here.
menu:
- title: Home
url: index.html
- title: First steps
url: first-steps.html
- title: About
url: about.html
- title: Contact
url: contact.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
meta: # site-wide
nodemeta: meta.yaml # per-directory
a_meta_field: fooblam
sorter:
name: # the name of the sorter (no pun intended)
attr: name # by which attributes will resources be sorted
name: # sort html files by name
attr: name
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:
file_type: # sort by filetype, filesize
attr:
- source_file.kind
- source_file.size
index:
index: # sort htmls by "index" meta field (manual ordering)
attr: meta.index
filters:
source_file.kind: html
learning_order:
attr: meta.learning_order
filters:
source_file.kind: html
grouper:
level:
sorter: name
level: # group pages by "level" meta field (difficulty).
sorter: name # use the "name" sorter (above)
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
tagger: # tags - another type of grouping!
sorter: name # use the "name" sorter (above)
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment