~dholbach/help-app/1426304

« back to all changes in this revision

Viewing changes to edit-here/content/get-in-touch.html

  • Committer: Daniel Holbach
  • Date: 2015-01-30 10:45:07 UTC
  • Revision ID: daniel.holbach@canonical.com-20150130104507-vsvnb83khzocjxl6
transform project into using static content (through hyde), add some initial content

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!doctype html>
 
2
<html lang="en">
 
3
    <head>
 
4
        <title>Ubuntu for devices - Help</title>
 
5
        <meta name="description" content="Ubuntu for devices - Help">
 
6
        <meta name="viewport" content="width=device-width, initial-scale=1, 
 
7
                        maximum-scale=1, user-scalable=0">
 
8
        <meta charset="utf-8" />
 
9
        <link rel="stylesheet" href="/media/css/app.css">
 
10
 
 
11
    <!-- 
 
12
        Ubuntu UI javascript imports - Ambiance theme
 
13
        Ubuntu provides building blocks that you can use in your application. For more information, you can check out the documentation at http://design.ubuntu.com/apps.
 
14
     -->
 
15
    <!-- Ubuntu UI Style imports - Ambiance theme -->
 
16
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
 
17
 
 
18
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
 
19
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
 
20
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
 
21
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
 
22
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
 
23
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
 
24
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
 
25
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
 
26
 
 
27
    </head>
 
28
    <body>
 
29
      <div data-role="mainview">
 
30
        <header data-role="header">
 
31
        </header>
 
32
 
 
33
          <div data-role="content">
 
34
 
 
35
          <article id="content">
 
36
                        <h1>Walk this way if you're a beginner</h1>
 
37
<p>This template was created to look at its code. So you should spend about
 
38
5% of your time looking at the web from the outside and the other 95%
 
39
tinkering with things under the hood.</p>
 
40
<p>The template is not perfect nor does it contain the best practices. It
 
41
is not even consistent. It is designed to help you with the learning
 
42
process. If you follow the steps below, you'll get a pretty good picture of
 
43
how things work. Every step adds some new features and builds upon the
 
44
previous one.</p>
 
45
<h2>1. Site structure and configuration file</h2>
 
46
<p>The site is made of two folders and a <a href="http://hyde.github.com/config.html" title="Hyde configuration">Hyde configuration</a>
 
47
file. The folders are <strong>content</strong> and <strong>layout</strong>.</p>
 
48
<p><strong>content</strong> contains all your page content, blog articles, pictures and
 
49
resources like CSS and JavaScript. Everything that is unique is here.</p>
 
50
<p><strong>layout</strong> contains templates and macros. Everything that you'll want to
 
51
reuse is here.</p>
 
52
<h2>2. Jinja2 template</h2>
 
53
<p><strong>base.j2</strong> is a very short and simple Jinja2 template. This way you can
 
54
concentrate on some of the basic features. Notice meta and context
 
55
variables invocation inside curly braces, dynamic media path generation
 
56
and running all content through the Markdown filter.</p>
 
57
<p><strong>macros.j2</strong> contains macros for common and repetitive tasks.</p>
 
58
<p>For more information or to try something new, visit the extensive <a href="http://jinja.pocoo.org/docs/templates/" title="Jinja2 documentation">Jinja2
 
59
documentation</a>.</p>
 
60
<h2>3. Content</h2>
 
61
<p>Look at the three files in this order: <a href="index.html">index.html</a>,
 
62
<a href="first-steps.html">first-steps.html</a> and <a href="about.html">about.html</a>.</p>
 
63
<p><a href="index.html">Index</a> extends the base layout in the classic Jinja way and
 
64
fills the content block with some simple Markdown data.</p>
 
65
<p><a href="first-steps.html">First steps</a> goes a step furher. It introduces the
 
66
in-file metadata that plugins will use to extend and fill the layout. It
 
67
also uses some new Markdown features.</p>
 
68
<p><a href="about.html">About</a> has a <strong>default_block</strong> metadata and mixes Markdown
 
69
content with Jinja templates.</p>
 
70
<h2>4. Advanced sections</h2>
 
71
<p>While searching and navigating this template you'll find more files and
 
72
sections than mentioned on this page (something like <strong>meta.yaml</strong>
 
73
files, the <strong>content/advanced</strong> folder or other Jinja templates). They
 
74
are files needed for the <a href="advanced/overview.html">advanced topics</a> so
 
75
just ignore them at the beginning.  They will start to make sense while
 
76
you're working through the template or will be explicitly explained when
 
77
the right time comes.</p>          </article>
 
78
          </div>
 
79
      </div>
 
80
    </body>
 
81
</html>
 
 
b'\\ No newline at end of file'