From: Kai Moritz <kai@juplo.de>
Date: Mon, 22 Dec 2025 21:31:00 +0000 (+0100)
Subject: Thymeleaf-Templates in das Beispiel-Projekt verschoben
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=a86419f1e483c55ef19f6efa405cb8644f5bbcd9;p=website

Thymeleaf-Templates in das Beispiel-Projekt verschoben

* D.h., das Theme kann direkt als statische Ressource für Thymeleaf dienen.
* Dafür muss nur das Theme standalone gebaut werden.
* Die Templates für Thymeleaf stehen dann über die Inhalte des
  Beispiel-Projekts unter den bekanten Pfaden bereit.
* _Beachte:_ Die Inhalte wurden noch nicht dafür überarbeitet / migriert.
* Unter `content` stehen jetzt nur noch "echte" Inhalte, die in der
  vollständigen Seite auch sichtbar sein sollen.
---

diff --git a/content/error/404.html b/content/error/404.html
deleted file mode 100644
index aabd76d8..00000000
--- a/content/error/404.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: "404: Page Not Found!"
-url: /error/404.html
----
-<ol id="crumbs">
-      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
-      <li class="b"><strong class="b">404: Page Not Found!</strong></li>
-    </ol>
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m" href="../projects" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>404: Page Not Found!</h1></header>
-      <p>We do not know, where you are.</p>
-      <p>And we do not know, why you are here.</p>
-      <p>But we can tell you: WE ARE SORRY!</p>
-      <p>Really.</p>
-    </article>
diff --git a/content/error/5xx.html b/content/error/5xx.html
deleted file mode 100644
index cd2a33ac..00000000
--- a/content/error/5xx.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "An Unexpected Error Occured!"
-url: /error/5xx.html
----
-<ol id="crumbs">
-      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
-      <li class="b"><strong class="b">An Unexpected Error Occured!</strong></li>
-    </ol>
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m" href="../projects" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>An Unexpected Error Occured!</h1></header>
-      <p>We do not know, what happend.</p>
-      <p>But we can tell you: WE ARE SORRY!</p>
-      <p>Really.</p>
-    </article>
diff --git a/content/error/_index.html b/content/error/_index.html
deleted file mode 100644
index d79009e2..00000000
--- a/content/error/_index.html
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Templates for Error-Pages
----
diff --git a/content/templates/_index.html b/content/templates/_index.html
deleted file mode 100644
index 9ff3b023..00000000
--- a/content/templates/_index.html
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Templates
-url: /templates.html
-outputs:
-  - html
----
-Hallo Welt
diff --git a/content/templates/example/layout.html b/content/templates/example/layout.html
deleted file mode 100644
index b37f888e..00000000
--- a/content/templates/example/layout.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: "Layout Title"
-url: /templates/example/layout.html
----
-<h1>Layout H1</h1>
-<div th:replace="${content}?:_">
-        <p>Layout content</p>
-    </div>
-<footer>
-        Layout footer
-    </footer>
diff --git a/content/templates/example/page.html b/content/templates/example/page.html
deleted file mode 100644
index ca722d44..00000000
--- a/content/templates/example/page.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Page Title"
-url: /templates/example/page.html
----
-<section>
-    <p>Page content</p>
-    <div>Included on page</div>
-</section>
diff --git a/content/templates/fragments.html b/content/templates/fragments.html
deleted file mode 100644
index 0aa24426..00000000
--- a/content/templates/fragments.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: "Fragments"
-url: /templates/fragments.html
----
-<h1>Explanation fo the german word "Impressum"</h1>
-<hr>
-<div th:fragment="about">
-      <h1>What the f*#!@ is an <em>Impressum</em> ?!?</h1>
-      The german law enforces the so called <em>Impressum</em> to enable
-      customers to easily find out all juristically relevant informations
-      about the company, that rules a site.
-      <h1>Find out more...</h1>
-      If you just want to learn more about juplo you should better
-      <a href="../about.html" th:href="@{/about.html}" title="Learn more about juplo now">visit our about-pages</a>.
-    </div>
-<hr>
-<h1>Work-in-progress-hint</h1>
-<hr>
-<article class="main" th:fragment="wip(title)">
-      <header><h1 th:text="${title}">PAGE-TITLE</h1></header>
-      <div class="wip">
-        <img alt="Comming soon..." class="w" src="/img/comming-soon.png">
-        <p th:include="/templates/layout.html :: maincontent" th:remove="tag">
-          PAGE-CONTENT
-        </p>
-      </div>
-    </article>
-<hr>
-<h1>Marginalspalte</h1>
-<hr>
-<div th:fragment="marginalcontent" th:remove="tag">
-      <aside class="m">
-        <h1>Other nasty but marginal stuff</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </aside>
-      <aside class="m">
-        <h1>More nasty stuff</h1>
-        <p>
-          This one is really short!
-        </p>
-      </aside>
-    </div>
-<hr>
diff --git a/content/templates/layout.html b/content/templates/layout.html
deleted file mode 100644
index 939f9e32..00000000
--- a/content/templates/layout.html
+++ /dev/null
@@ -1,237 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:th="http://www.thymeleaf.org"
-    th:fragment="layout(uri,maincontent)"
-    thymeproxy:variables="SET:sitemap.json"
-    >
-  <head thymeproxy:variables="${json}">
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title th:replace="${title}">juplo - BASISTEMPLATE</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Default / Responsive -->
-    <link rel="stylesheet" th:rel="stylesheet" media="all" title="Responsive" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <link rel="stylesheet" th:rel="stylesheet" media="only screen" title="Responsive" type="text/css" href="../css/screen.css" th:href="@{/css/screen.min.css}"/>
-    <link rel="stylesheet" th:rel="stylesheet" media="print" title="Responsive" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
-    <!-- Legacy -->
-    <link rel="alternate stylesheet" title="Legacy" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <!-- Tablet -->
-    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/tablet.css" th:href="@{/css/tablet.min.css}"/>
-    <!-- Phone -->
-    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/phone.css" th:href="@{/css/phone.min.css}"/>
-    <!-- Tiny -->
-    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/tiny.css" th:href="@{/css/tiny.min.css}"/>
-    <!-- Print -->
-    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
-    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
-    <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
-    <!--[if lt IE 9]>
-      <script src="../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
-    <![endif]-->
-    <!--[if IE 8]>
-      <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../css/ie8.css" th:href="@{/css/ie8.min.css}"/>
-    <![endif]-->
-    <link rel="canonical" href="layout.html" th:href="${_canonical.get(uri)}?:${uri}">
-    <script th:replace="${scripts_head}?:~{}"></script>
-  </head>
-  <body
-      th:fragment="body(uri, maincontent, marginalcontent)"
-      th:with="crumbs=${_crumbs.get(uri)}"
-      id="top"
-      class="menu"
-      th:class="${contentclass}?:'menu'"
-      onload="prettyPrint()"
-      >
-    <div id="page" class="cf">
-      <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
-        <h1 id="logo" th:include="~{::#logo}"><a href="../index.html" th:href="@{/}" title="Home" class="l" ><img class="l" src="/img/logo.svg" alt="juplo"/></a></h1>
-        <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
-        <hr class="h" />
-      </header>
-      <div id="breadcrumb">
-        <strong class="b title">You are here:</strong>
-        <ol class="b" th:include="~{::#crumbs}?:_">
-          <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
-          <li class="b" th:each="crumb: ${crumbs}">
-            <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
-          </li>
-          <!--/*-->
-          <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
-          <!--*/-->
-        </ol>
-        <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
-        <hr class="b" />
-      </div>
-      <main class="content cf">
-        <article id="content" class="main" th:include="${maincontent}">
-          <header><h1 th:text="${_titles.get(uri)}">juplo - BASISTEMPLATE</h1></header>
-          <div th:fragment="maincontent">
-            <p>
-              <strong>Lorem ipsum</strong> dolor
-              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
-              labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
-              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-              irure dolor in reprehenderit in voluptate velit esse cillum dolore
-              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-              proident, sunt in culpa qui officia deserunt mollit anim id est
-              laborum.
-            </p>
-            <h2>Duis aute irure dolor</h2>
-            <ul>
-              <li>Operators and other mathematical stuff: -+/*</li>
-              <li>
-                Characters offten used in programming languages:
-                {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
-              </li>
-              <li>Special german characters: ÄäÖöÜü</li>
-              <li>Other special characters: @?¢§%°</li>
-            </ul>
-            <h2>Excepteur sint occaecat cupidatat</h2>
-            <p>
-              Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
-              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
-              ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
-              Duis aute irure dolor in reprehenderit in voluptate velit esse
-              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-              cupidatat non proident, sunt in culpa qui officia deserunt mollit
-              anim id est laborum.
-            </p>
-          </div>
-        </article>
-        <div class="marginal">
-          <nav id="nav"
-              th:include="~{::#navigation}?:_"
-              th:with="section=${crumbs != null && crumbs.size() > 1 ? crumbs[1] : null}"
-              >
-            <hr class="n"/>
-            <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-            <h1 class="nav">Navigation</h1>
-            <h2 class="nav menu">Section-Menu</h2>
-            <ul id="menu" class="cf">
-              <li th:each="entry : ${_childs.get('/index.html')}"
-                  th:with="title=${_titles.get(entry)}"
-                  class="m blog"
-                  th:class="'m ' + ${title}">
-                <a href="../blog/"
-                   th:href="@{${entry}}"
-                   class="m"
-                   th:class="${section == entry} ? 'm selected' : 'm'"
-                   th:text="${_titles.get(entry)}">Blog</a>
-              </li>
-              <!--/*-->
-              <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
-              <li class="m about"><a href="../about.html" class="m">About</a></li>
-              <!--*/-->
-            </ul>
-            <h2 class="nav submenu">
-              <span class="s">Submenu for section</span>
-              <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
-            </h2>
-            <ul th:include="${submenu}?:_"
-                th:with="
-                  len=${crumbs == null} ? 0 : ${crumbs.size()},
-                  parent=${section},
-                  submenu=${_childs.get(parent)},
-                  pos=2"
-                id="submenu"
-                class="s"
-                th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
-                >
-              <li th:fragment="submenu(submenu, parent, pos)"
-                  th:each="entry : ${submenu}"
-                  th:with="
-                      child=${pos == len},
-                      hidden=${!child && _canonical.get(crumbs.get(pos)) == entry},
-                      entry=${hidden?crumbs.get(pos):entry},
-                      selected=${(child and crumbs.get(pos-1) + '?about' == entry) or (!child and (crumbs.get(pos) == entry or hidden))},
-                      leaf=${pos >= (len - 1) and not selected},
-                      sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
-                      childs=${entry == parent ? null : _childs.get(entry)}
-                      "
-                  class="s sub"
-                  th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
-                  >
-                <a  href="../potemkin/fix-swf/overview.html"
-                    th:if="${entry != parent}"
-                    th:href="@{${entry}}"
-                    class="s selected"
-                    th:class="(${selected} ? 's selected' : 's') + ' len_' + ${len} + ' pos_' + ${pos} + (${leaf}?' leaf':'')"
-                    th:text="${_titles.get(entry)}"
-                    >fix-swf</a>
-                <ul th:if="${selected and childs != null}"
-                    class="s active"
-                    th:class="'s' + (${entry == uri or (len &gt; 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
-                    >
-                  <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
-                      class="s"
-                      >
-                    <strong class="s">Overview</strong>
-                  </li>
-                  <!--/*-->
-                  <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
-                  <li class="s"><a href="#" class="s">FAQ</a></li>
-                  <li class="s"><a href="#" class="s">Documentation</a></li>
-                  <!--*/-->
-                </ul>
-              </li>
-              <!--/*-->
-              <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
-              <li class="s off"><a href="#" class="s">jquery.openx</a></li>
-              <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
-              <li class="s sub off"><a href="#" class="s">accelerator</a></li>
-              <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
-              <!--*/-->
-              <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})" class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
-            </ul>
-            <hr class="n"/>
-          </nav>
-          <aside class="m" th:insert="${marginalcontent}?:~{}">
-          <!--/* the following  is only visible during natural templating -->
-            <h1>Other nasty but marginal stuff</h1>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          </aside>
-          <aside class="m">
-            <h1>More nasty stuff</h1>
-            <p>
-              This one is really short!
-            </p>
-          <!--*/-->
-          </aside>
-        </div>
-      </main>
-      <footer id="footer">
-        <hr class="f" />
-        <ul id="footerlinks" th:include="~{::#links}?:_">
-          <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
-          <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
-          <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
-        </ul>
-      </footer>
-    </div>
-  </body>
-</html>
diff --git a/content/templates/testlab.html b/content/templates/testlab.html
deleted file mode 100644
index 7c594ae7..00000000
--- a/content/templates/testlab.html
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: "juplo - TESTLABTEMPLATE"
-url: /templates/testlab.html
----
-<h1 th:text="${title}">TESTLAB-TEMPLATE</h1>
-<div class="testlab tl970">970px
-      <div class="testlab tl670">670px
-        <div class="testlab tl480">480px
-          <div class="testlab tl320">320px
-            <strong th:replace="~{::.content}">CONTENT</strong>
-          </div>
-        </div>
-      </div>
-    </div>
diff --git a/exampleSite/content/error/404.html b/exampleSite/content/error/404.html
new file mode 100644
index 00000000..aabd76d8
--- /dev/null
+++ b/exampleSite/content/error/404.html
@@ -0,0 +1,26 @@
+---
+title: "404: Page Not Found!"
+url: /error/404.html
+---
+<ol id="crumbs">
+      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+      <li class="b"><strong class="b">404: Page Not Found!</strong></li>
+    </ol>
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m" href="../projects" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>404: Page Not Found!</h1></header>
+      <p>We do not know, where you are.</p>
+      <p>And we do not know, why you are here.</p>
+      <p>But we can tell you: WE ARE SORRY!</p>
+      <p>Really.</p>
+    </article>
diff --git a/exampleSite/content/error/5xx.html b/exampleSite/content/error/5xx.html
new file mode 100644
index 00000000..cd2a33ac
--- /dev/null
+++ b/exampleSite/content/error/5xx.html
@@ -0,0 +1,25 @@
+---
+title: "An Unexpected Error Occured!"
+url: /error/5xx.html
+---
+<ol id="crumbs">
+      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+      <li class="b"><strong class="b">An Unexpected Error Occured!</strong></li>
+    </ol>
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m" href="../projects" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>An Unexpected Error Occured!</h1></header>
+      <p>We do not know, what happend.</p>
+      <p>But we can tell you: WE ARE SORRY!</p>
+      <p>Really.</p>
+    </article>
diff --git a/exampleSite/content/error/_index.html b/exampleSite/content/error/_index.html
new file mode 100644
index 00000000..d79009e2
--- /dev/null
+++ b/exampleSite/content/error/_index.html
@@ -0,0 +1,3 @@
+---
+title: Templates for Error-Pages
+---
diff --git a/exampleSite/content/templates/_index.html b/exampleSite/content/templates/_index.html
new file mode 100644
index 00000000..9ff3b023
--- /dev/null
+++ b/exampleSite/content/templates/_index.html
@@ -0,0 +1,7 @@
+---
+title: Templates
+url: /templates.html
+outputs:
+  - html
+---
+Hallo Welt
diff --git a/exampleSite/content/templates/example/layout.html b/exampleSite/content/templates/example/layout.html
new file mode 100644
index 00000000..b37f888e
--- /dev/null
+++ b/exampleSite/content/templates/example/layout.html
@@ -0,0 +1,11 @@
+---
+title: "Layout Title"
+url: /templates/example/layout.html
+---
+<h1>Layout H1</h1>
+<div th:replace="${content}?:_">
+        <p>Layout content</p>
+    </div>
+<footer>
+        Layout footer
+    </footer>
diff --git a/exampleSite/content/templates/example/page.html b/exampleSite/content/templates/example/page.html
new file mode 100644
index 00000000..ca722d44
--- /dev/null
+++ b/exampleSite/content/templates/example/page.html
@@ -0,0 +1,8 @@
+---
+title: "Page Title"
+url: /templates/example/page.html
+---
+<section>
+    <p>Page content</p>
+    <div>Included on page</div>
+</section>
diff --git a/exampleSite/content/templates/fragments.html b/exampleSite/content/templates/fragments.html
new file mode 100644
index 00000000..0aa24426
--- /dev/null
+++ b/exampleSite/content/templates/fragments.html
@@ -0,0 +1,51 @@
+---
+title: "Fragments"
+url: /templates/fragments.html
+---
+<h1>Explanation fo the german word "Impressum"</h1>
+<hr>
+<div th:fragment="about">
+      <h1>What the f*#!@ is an <em>Impressum</em> ?!?</h1>
+      The german law enforces the so called <em>Impressum</em> to enable
+      customers to easily find out all juristically relevant informations
+      about the company, that rules a site.
+      <h1>Find out more...</h1>
+      If you just want to learn more about juplo you should better
+      <a href="../about.html" th:href="@{/about.html}" title="Learn more about juplo now">visit our about-pages</a>.
+    </div>
+<hr>
+<h1>Work-in-progress-hint</h1>
+<hr>
+<article class="main" th:fragment="wip(title)">
+      <header><h1 th:text="${title}">PAGE-TITLE</h1></header>
+      <div class="wip">
+        <img alt="Comming soon..." class="w" src="/img/comming-soon.png">
+        <p th:include="/templates/layout.html :: maincontent" th:remove="tag">
+          PAGE-CONTENT
+        </p>
+      </div>
+    </article>
+<hr>
+<h1>Marginalspalte</h1>
+<hr>
+<div th:fragment="marginalcontent" th:remove="tag">
+      <aside class="m">
+        <h1>Other nasty but marginal stuff</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </aside>
+      <aside class="m">
+        <h1>More nasty stuff</h1>
+        <p>
+          This one is really short!
+        </p>
+      </aside>
+    </div>
+<hr>
diff --git a/exampleSite/content/templates/layout.html b/exampleSite/content/templates/layout.html
new file mode 100644
index 00000000..939f9e32
--- /dev/null
+++ b/exampleSite/content/templates/layout.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:th="http://www.thymeleaf.org"
+    th:fragment="layout(uri,maincontent)"
+    thymeproxy:variables="SET:sitemap.json"
+    >
+  <head thymeproxy:variables="${json}">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title th:replace="${title}">juplo - BASISTEMPLATE</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Default / Responsive -->
+    <link rel="stylesheet" th:rel="stylesheet" media="all" title="Responsive" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="only screen" title="Responsive" type="text/css" href="../css/screen.css" th:href="@{/css/screen.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="print" title="Responsive" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
+    <!-- Legacy -->
+    <link rel="alternate stylesheet" title="Legacy" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <!-- Tablet -->
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/tablet.css" th:href="@{/css/tablet.min.css}"/>
+    <!-- Phone -->
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/phone.css" th:href="@{/css/phone.min.css}"/>
+    <!-- Tiny -->
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/tiny.css" th:href="@{/css/tiny.min.css}"/>
+    <!-- Print -->
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
+    <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
+    <!--[if lt IE 9]>
+      <script src="../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
+    <![endif]-->
+    <!--[if IE 8]>
+      <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../css/ie8.css" th:href="@{/css/ie8.min.css}"/>
+    <![endif]-->
+    <link rel="canonical" href="layout.html" th:href="${_canonical.get(uri)}?:${uri}">
+    <script th:replace="${scripts_head}?:~{}"></script>
+  </head>
+  <body
+      th:fragment="body(uri, maincontent, marginalcontent)"
+      th:with="crumbs=${_crumbs.get(uri)}"
+      id="top"
+      class="menu"
+      th:class="${contentclass}?:'menu'"
+      onload="prettyPrint()"
+      >
+    <div id="page" class="cf">
+      <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
+        <h1 id="logo" th:include="~{::#logo}"><a href="../index.html" th:href="@{/}" title="Home" class="l" ><img class="l" src="/img/logo.svg" alt="juplo"/></a></h1>
+        <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
+        <hr class="h" />
+      </header>
+      <div id="breadcrumb">
+        <strong class="b title">You are here:</strong>
+        <ol class="b" th:include="~{::#crumbs}?:_">
+          <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+          <li class="b" th:each="crumb: ${crumbs}">
+            <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
+          </li>
+          <!--/*-->
+          <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
+          <!--*/-->
+        </ol>
+        <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
+        <hr class="b" />
+      </div>
+      <main class="content cf">
+        <article id="content" class="main" th:include="${maincontent}">
+          <header><h1 th:text="${_titles.get(uri)}">juplo - BASISTEMPLATE</h1></header>
+          <div th:fragment="maincontent">
+            <p>
+              <strong>Lorem ipsum</strong> dolor
+              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
+              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+              labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
+              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+              irure dolor in reprehenderit in voluptate velit esse cillum dolore
+              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa qui officia deserunt mollit anim id est
+              laborum.
+            </p>
+            <h2>Duis aute irure dolor</h2>
+            <ul>
+              <li>Operators and other mathematical stuff: -+/*</li>
+              <li>
+                Characters offten used in programming languages:
+                {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
+              </li>
+              <li>Special german characters: ÄäÖöÜü</li>
+              <li>Other special characters: @?¢§%°</li>
+            </ul>
+            <h2>Excepteur sint occaecat cupidatat</h2>
+            <p>
+              Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
+              ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+        </article>
+        <div class="marginal">
+          <nav id="nav"
+              th:include="~{::#navigation}?:_"
+              th:with="section=${crumbs != null && crumbs.size() > 1 ? crumbs[1] : null}"
+              >
+            <hr class="n"/>
+            <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+            <h1 class="nav">Navigation</h1>
+            <h2 class="nav menu">Section-Menu</h2>
+            <ul id="menu" class="cf">
+              <li th:each="entry : ${_childs.get('/index.html')}"
+                  th:with="title=${_titles.get(entry)}"
+                  class="m blog"
+                  th:class="'m ' + ${title}">
+                <a href="../blog/"
+                   th:href="@{${entry}}"
+                   class="m"
+                   th:class="${section == entry} ? 'm selected' : 'm'"
+                   th:text="${_titles.get(entry)}">Blog</a>
+              </li>
+              <!--/*-->
+              <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
+              <li class="m about"><a href="../about.html" class="m">About</a></li>
+              <!--*/-->
+            </ul>
+            <h2 class="nav submenu">
+              <span class="s">Submenu for section</span>
+              <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
+            </h2>
+            <ul th:include="${submenu}?:_"
+                th:with="
+                  len=${crumbs == null} ? 0 : ${crumbs.size()},
+                  parent=${section},
+                  submenu=${_childs.get(parent)},
+                  pos=2"
+                id="submenu"
+                class="s"
+                th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
+                >
+              <li th:fragment="submenu(submenu, parent, pos)"
+                  th:each="entry : ${submenu}"
+                  th:with="
+                      child=${pos == len},
+                      hidden=${!child && _canonical.get(crumbs.get(pos)) == entry},
+                      entry=${hidden?crumbs.get(pos):entry},
+                      selected=${(child and crumbs.get(pos-1) + '?about' == entry) or (!child and (crumbs.get(pos) == entry or hidden))},
+                      leaf=${pos >= (len - 1) and not selected},
+                      sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
+                      childs=${entry == parent ? null : _childs.get(entry)}
+                      "
+                  class="s sub"
+                  th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
+                  >
+                <a  href="../potemkin/fix-swf/overview.html"
+                    th:if="${entry != parent}"
+                    th:href="@{${entry}}"
+                    class="s selected"
+                    th:class="(${selected} ? 's selected' : 's') + ' len_' + ${len} + ' pos_' + ${pos} + (${leaf}?' leaf':'')"
+                    th:text="${_titles.get(entry)}"
+                    >fix-swf</a>
+                <ul th:if="${selected and childs != null}"
+                    class="s active"
+                    th:class="'s' + (${entry == uri or (len &gt; 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
+                    >
+                  <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
+                      class="s"
+                      >
+                    <strong class="s">Overview</strong>
+                  </li>
+                  <!--/*-->
+                  <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+                  <li class="s"><a href="#" class="s">FAQ</a></li>
+                  <li class="s"><a href="#" class="s">Documentation</a></li>
+                  <!--*/-->
+                </ul>
+              </li>
+              <!--/*-->
+              <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+              <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+              <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
+              <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+              <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
+              <!--*/-->
+              <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})" class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
+            </ul>
+            <hr class="n"/>
+          </nav>
+          <aside class="m" th:insert="${marginalcontent}?:~{}">
+          <!--/* the following  is only visible during natural templating -->
+            <h1>Other nasty but marginal stuff</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </aside>
+          <aside class="m">
+            <h1>More nasty stuff</h1>
+            <p>
+              This one is really short!
+            </p>
+          <!--*/-->
+          </aside>
+        </div>
+      </main>
+      <footer id="footer">
+        <hr class="f" />
+        <ul id="footerlinks" th:include="~{::#links}?:_">
+          <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+          <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
+          <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
+        </ul>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/exampleSite/content/templates/testlab.html b/exampleSite/content/templates/testlab.html
new file mode 100644
index 00000000..7c594ae7
--- /dev/null
+++ b/exampleSite/content/templates/testlab.html
@@ -0,0 +1,14 @@
+---
+title: "juplo - TESTLABTEMPLATE"
+url: /templates/testlab.html
+---
+<h1 th:text="${title}">TESTLAB-TEMPLATE</h1>
+<div class="testlab tl970">970px
+      <div class="testlab tl670">670px
+        <div class="testlab tl480">480px
+          <div class="testlab tl320">320px
+            <strong th:replace="~{::.content}">CONTENT</strong>
+          </div>
+        </div>
+      </div>
+    </div>