<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Content">
<header>
<h1>Blog Post</h1>
</header>
<article class="single-blog-post">
<header>
<h1>{data.title}</h1>
<p>
Published: <time>{data.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>,
Updated: <time>{data.SYS_LASTCHANGED -> f:format.date(format: 'Y-m-d')}</time>
</p>
<p>Tested with TYPO3:
<f:for each="{compatible}" as="version" iteration="i">
{version.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
</f:for>
</p>
</header>
<a name="introduction"></a>
<h2>Introduction <small><a href="#introduction">ΒΆ</a></small></h2>
{data.abstract -> f:format.html()}
{introduction -> f:format.raw()}
{contentMain -> f:format.raw()}
{footer -> f:format.raw()}
</article>
</f:section>
<f:section name="Aside">
{f:render(section: 'TOC', arguments: _all)}
<nav>
<h1>Related Tags</h1>
<ul>
<f:for each="{tags}" as="tag">
<li><a href="#">{tag.data.title}</a></li>
</f:for>
</ul>
</nav>
<!-- <nav> -->
<!-- <h1>Further reading</h1> -->
<!-- TODO: Move content element from main content to here -->
<!-- </nav> -->
</f:section>
<f:section name="TOC">
<!-- TODO: Hide on mobile -->
<nav>
<h1>Table of Content</h1>
<ul>
<li>
<a href="#introduction">Introduction</a>
</li>
<f:alias map="{contentSections: pageSections.0.content}">
<f:for each="{contentSections}" as="contentEntry">
<li>
<a href="#c{contentEntry.data.uid}">{contentEntry.data.header}</a>
</li>
</f:for>
</f:alias>
</ul>
</nav>
</f:section>
</html>