Added usage documentation
authorKai Moritz <kai@juplo.de>
Sun, 28 Feb 2021 21:47:45 +0000 (22:47 +0100)
committerKai Moritz <kai@juplo.de>
Sun, 28 Feb 2021 21:47:45 +0000 (22:47 +0100)
src/site/xhtml/usage.xhtml

index 9487b3e..a9c4e0c 100644 (file)
@@ -4,12 +4,13 @@
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
-  <h1>Usage</h1>
+  <h2>Activation</h2>
   <p>
-    To use this skin in your project, use the skin element of
-    <a href="http://maven.apache.org/doxia/doxia-sitetools/doxia-decoration-model/decoration.html">the <code>site.xml</code> site descriptor</a>:
+    To use this skin in your project, you have to configure the skin element of
+    <a href="http://maven.apache.org/doxia/doxia-sitetools/doxia-decoration-model/decoration.html">the site descriptor</a>
+    (<code>site.xml</code>):
   </p>
-  <pre class="prettyprint linenums" id="redirect"><code class="xml">&lt;project name="xxx"&gt;
+  <pre><code class="xml">&lt;project name="xxx"&gt;
   [...]
   &lt;skin&gt;
     &lt;groupId&gt;${project.groupId}&lt;/groupId&gt;
     &lt;version&gt;${project.version}&lt;/version&gt;
   &lt;/skin&gt;
   [...]
+&lt;/project&gt;
+  </code></pre>
+  <h2>Configuration</h2>
+  <p>
+   In order to take full advantage of the generated templates, you should consider to tune the follwoing custom properties:
+  </p>
+  <ul>
+  <li><strong>path</strong></li>
+  <li><strong>crumbs</strong></li>
+  <li><strong>command</strong></li>
+  </ul>
+  <h3>path</h3>
+  <p>The value of this configuration option is used to build the absolute path for the generated pages.</p>
+  <p>The skin builds three variants of the page-uri, that are made selectable for Thymeleaf as content of the template:</p>
+  <ul>
+  <li>
+    <strong>site_uri:</strong>
+    Concatenation of the configured <code>path</code>, the version of the project and the relative path of the page
+  </li>
+  <li>
+    <strong>canonical_uri:</strong>
+    Concatenation of the configured <code>path</code> and the relative path of the page
+  </li>
+  <li>
+    <strong>relative_uri:</strong>
+    Solely the relative path of the page
+  </li>
+  </ul>
+  <h3>crumbs</h3>
+  <p>Some crumbs, that should be prepended to the breadcrumbs that are computed for the pages.</p>
+  <p>The crumbs have to be specified in double quotes and must be separated by commas. Example:</p>
+  <pre>"/index.html", "/projects.html"</pre>
+  <h3>command</h3>
+  <p>A Thymelaf-"Command", that will be included in the opening <code>&lt;html&gt;</code>-tag.</p>
+  <p>This command can be used to decorate the template with the designe of your website. Example:</p>
+  <pre>th:replace="
+  ~{/templates/layout.html :: layout(
+    uri='' + ~{:: code[class='site_uri']/text()},
+    title=~{:: title},
+    maincontent=~{:: .maincontent},
+    json='MERGE:' + ~{:: pre[class='json']/text()})}"</pre>
+  <p>
+    This example uses a fragment-definition from a layout, that is defined
+    in a template <code>/templates/layout.html</code> and supplies the uri
+    of the page, that it selects from the <code>site_uri</code> and the
+    title and the main content of the page.
+  </p>
+  <p>
+    It also uses the JSON, that reflects the structure of all pages of the
+    generated site, to provide the layout with additional information.
+    The <code>MERGE:</code> is a feature of
+    <a href="https://juplo.de/thymeproxy/">Thymeproxy</a>, that enables you
+    to specify a sitemap of your website as JSON and dynamically merge
+    additional elements into it, that are needed by the markup-logic of the
+    layout to generate appropriate menu structures and breadcrumbs.
+  </p>
+  <h2>A complete example</h2>
+  <p>As example, take a look at the site descriptor of this project:</p>
+  <pre><code class="xml">
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;project
+    xmlns="http://maven.apache.org/DECORATION/1.1.0"
+    xlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="
+      http://maven.apache.org/DECORATION/1.1.0
+      http://maven.apache.org/xsd/decoration-1.1.0.xsd
+      "
+    name="Apache Maven Thymeleaf-Skin"
+    &gt;
+  &lt;skin&gt;
+    &lt;groupId&gt;${project.groupId}&lt;/groupId&gt;
+    &lt;artifactId&gt;${project.artifactId}&lt;/artifactId&gt;
+    &lt;version&gt;${project.version}&lt;/version&gt;
+  &lt;/skin&gt;
+  &lt;body&gt;
+    &lt;menu&gt;
+      &lt;item name="About" href="index.html"/&gt;
+      &lt;item name="Usage Examples" href="usage.html"/&gt;
+      &lt;item name="Project Information" href="project-info.html"/&gt;
+    &lt;/menu&gt;
+    &lt;menu ref="reports"/&gt;
+  &lt;/body&gt;
+  &lt;custom&gt;
+    &lt;thymeproxy&gt;
+      &lt;path&gt;/maven-thymeleaf-skin/&lt;/path&gt;
+      &lt;crumbs&gt;"/index.html","/projects.html"&lt;/crumbs&gt;
+      &lt;command&gt;th:replace="~{/templates/layout.html :: layout(uri='' + ~{:: code[class='site_uri']/text()}, title=~{:: title}, maincontent=~{:: .maincontent}, json='MERGE:' + ~{:: pre[class='json']/text()})}"&lt;/command&gt;
+    &lt;/thymeproxy&gt;
+  &lt;/custom&gt;
 &lt;/project&gt;
   </code></pre>
  </body>