Add tagging to system

Configuration/PageTSconfig/Mod/WebLayout/BackendLayouts/BlogPost.tsconfig

@@ -5,7 +5,7 @@ mod.web_layout.BackendLayouts {
         config {
             backend_layout {
                 colCount = 1
-                rowCount = 2
+                rowCount = 4
                 rows {
                     1 {
                         columns {
@@ -26,11 +26,19 @@ mod.web_layout.BackendLayouts {
                     3 {
                         columns {
                             1 {
-                                name = Footer
+                                name = Acknowledgements
                                 colPos = 100
                             }
                         }
                     }
+                    4 {
+                        columns {
+                            1 {
+                                name = Further reading
+                                colPos = 200
+                            }
+                        }
+                    }
                 }
             }
         }

Configuration/PageTSconfig/Tceform/TtContent.tsconfig

@@ -14,6 +14,16 @@ TCEFORM.tt_content {
 
     layout {
         disabled = 1
+        keepItems := addToList(0)
+
+        types {
+            menu_abstract {
+                disabled = 0
+                addItems {
+                    100 = Filtered
+                }
+            }
+        }
     }
     frame_class {
         disabled = 1

Configuration/TCA/Overrides/sys_category.php

@@ -0,0 +1,32 @@
+<?php
+
+(function (string $tableName) {
+    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tableName], [
+        'columns' => [
+            'slug' => [
+                'label' => '<path-to-locallang-file>.slug',
+                'exclude' => 1,
+                'config' => [
+                    'type' => 'slug',
+                    'generatorOptions' => [
+                        'fields' => ['title'],
+                        'prefixParentPageSlug' => true,
+                        'replacements' => [
+                            '/' => '',
+                        ],
+                    ],
+                    'fallbackCharacter' => '-',
+                    'eval' => 'uniqueInSite',
+                    'default' => ''
+                ],
+            ],
+        ],
+    ]);
+
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
+        $tableName,
+        'slug',
+        '',
+        'after:title'
+    );
+})('sys_category');

Configuration/TypoScript/Setup/ContentElements/MenuAbstract.typoscript

@@ -4,8 +4,54 @@ tt_content.menu_abstract {
     dataProcessing {
         10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
         10 {
+            if {
+                value = 0
+                equals.field = layout
+            }
             special = directory
             special.value.field = pages
+            dataProcessing {
+                10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
+                10 {
+                    selectFields = sys_category.*
+                    table = sys_category
+                    pidInList = 2
+                    where = sys_category_record_mm.uid_foreign = {field:uid} AND sys_category.parent = 2
+                    where.insertData = 1
+                    leftjoin = sys_category_record_mm ON sys_category_record_mm.uid_local = sys_category.uid
+                    orderBy = sorting
+                    as = compatibleWith
+                }
+            }
+        }
+
+        100 < .10
+        100 {
+            if.value = 100
+            special >
+            special = categories
+            special.value {
+                data = GP:tag_id
+                intval = 1
+            }
+        }
+
+        500 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
+        500 {
+            if {
+                value = 100
+                equals.field = layout
+            }
+            table = sys_category
+            pidInList = 2
+            where = uid = ###UID###
+            markers {
+                UID {
+                    data = GP:tag_id
+                    intval = 1
+                }
+            }
+            as = tagForFilter
         }
     }
 }

Configuration/TypoScript/Setup/Page.typoscript

@@ -38,15 +38,17 @@ page {
                 pidInList = 2
                 where = sys_category_record_mm.uid_foreign = {page:uid} AND sys_category.parent = 1
                 where.insertData = 1
-                join = sys_category_record_mm ON sys_category_record_mm.uid_local = sys_category.uid
+                leftjoin = sys_category_record_mm ON sys_category_record_mm.uid_local = sys_category.uid
-                orderBy = sorting
+                orderBy = count DESC, sys_category.title ASC
-                as = tags
+                as = assignedTags
             }
             11 < .10
             11 {
                 where = sys_category_record_mm.uid_foreign = {page:uid} AND sys_category.parent = 2
-                as = compatible
+                orderBy = sorting
+                as = compatibleWith
             }
+
             50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
             50 {
                 special = list
@@ -63,6 +65,20 @@ page {
                 }
                 as = pageSections
             }
+
+            100 < .10
+            100 {
+                selectFields = sys_category.*, count(sys_category_record_mm.uid_foreign) as count
+                where = sys_category.parent = 1 AND sys_category_record_mm.uid_foreign IS NOT NULL
+                groupBy = sys_category.uid
+                as = allTags
+            }
+            101 < .100
+            101 {
+                where = sys_category.parent = 2 AND sys_category_record_mm.uid_foreign IS NOT NULL
+                orderBy = sorting
+                as = allTypo3Compatible
+            }
         }
 
         settings {
@@ -77,12 +93,18 @@ page {
                 }
             }
             contentMain =< styles.content.get
-            footer =< styles.content.get
+            acknowledgements =< styles.content.get
-            footer {
+            acknowledgements {
                 select {
                     where = {#colPos}=100
                 }
             }
+            furtherReading =< styles.content.get
+            furtherReading {
+                select {
+                    where = {#colPos}=200
+                }
+            }
         }
     }
 }

Resources/Private/Layouts/ContentElements/Default.html

@@ -2,11 +2,11 @@
     data-namespace-typo3-fluid="true">
 
     <f:render section="Header" arguments="{_all}" optional="1">
-        <a name="c{data.uid}"></a>
+        {f:render(partial: 'Header', arguments: {
-        <f:if condition="{data.header_layout} != 100">
+            uid: data.uid,
-            <!-- TODO: Map header_layout and use mapped value -->
+            layout: data.header_layout,
-            <h2>{data.header} <small><a href="#c{data.uid}">¶</a></small></h2>
+            header: data.header
-        </f:if>
+        })}
     </f:render>
 
     {f:render(section: 'Content', arguments: _all)}

Resources/Private/Partials/BlogPostHeader.html

@@ -0,0 +1,20 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+
+    <header>
+        <h1>{f:if(
+            condition: link,
+            then: '<a href="{link}">{title}</a>',
+            else: title
+        )}</h1>
+        <p>
+            Published: <time>{blogPost.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>,
+            Updated: <time>{blogPost.SYS_LASTCHANGED -> f:format.date(format: 'Y-m-d')}</time>
+        </p>
+        <p>Tested with TYPO3:
+            <f:for each="{compatibleWith}" as="version" iteration="i">
+                {version.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
+            </f:for>
+        </p>
+    </header>
+</html>

Resources/Private/Partials/ContentElements/Header.html

@@ -0,0 +1,8 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+    <a name="c{uid}"></a>
+    <f:if condition="{layout} != 100">
+        <!-- TODO: Map header_layout and use mapped value -->
+        <h2>{header} <small><a href="#c{uid}">¶</a></small></h2>
+    </f:if>
+</html>

Resources/Private/Partials/Menu/Page.html

@@ -1,11 +1,11 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
     <article>
-        <header>
+        {f:render(partial: 'BlogPostHeader', arguments: {
-            <h1><a href="{page.link}">{page.title}</a></h1>
+            link: page.link,
-            <p>
+            title: page.title,
-                <time>{page.data.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>
+            blogPost : page.data,
-            </p>
+            compatibleWith: page.compatibleWith
-        </header>
+        })}
 
         {page.data.abstract -> f:format.html()}
 

Resources/Private/Partials/TagList.html

@@ -0,0 +1,16 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+    <nav>
+        <h1>{headline}</h1>
+        <ul>
+            <f:for each="{tags}" as="tag">
+                <li>
+                    <a href="{f:uri.page(pageUid: 11, additionalParams: {tag: tag.data.uid})}">
+                        {tag.data.title}
+                        {f:if(condition: tag.data.count, then: '({tag.data.count})')}
+                    </a>
+                </li>
+            </f:for>
+        </ul>
+    </nav>
+</html>

Resources/Private/Sass/layout/pages/_singleBlogPost.scss

@@ -1,5 +1,10 @@
 article.single-blog-post {
     padding-top: 0;
+
+    > header {
+        margin-bottom: 0;
+    }
+
     h1, h2, h3, h4, h5, h6 {
         padding-top: $spacer * 2;
     }

Resources/Private/Templates/ContentElements/MenuAbstract.html

@@ -3,14 +3,17 @@
 
     {f:layout(name: 'Default')}
 
+    <f:section name="Header">
+        {f:render(partial: 'Header', arguments: {
+            uid: data.uid,
+            layout: data.header_layout,
+            header: '{data.header} {tagForFilter.0.data.title}'
+        })}
+    </f:section>
+
     <f:section name="Content">
         <f:for each="{menu}" as="page">
             {f:render(partial: 'Menu/Page', arguments: {page: page})}
         </f:for>
-
-        <!-- <nav class="blog-pagination"> -->
-        <!--     <a class="btn btn-outline-primary" href="#">Older</a> -->
-        <!--     <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a> -->
-        <!-- </nav> -->
     </f:section>
 </html>

Resources/Private/Templates/Page/BlogPost.html

@@ -8,18 +8,11 @@
             <h1>Blog Post</h1>
         </header>
         <article class="single-blog-post">
-            <header>
+            {f:render(partial: 'BlogPostHeader', arguments: {
-                <h1>{data.title}</h1>
+                title: data.title,
-                <p>
+                blogPost : data,
-                    Published: <time>{data.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>,
+                compatibleWith: compatibleWith
-                    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>
@@ -28,26 +21,27 @@
 
             {contentMain -> f:format.raw()}
 
-            {footer -> f:format.raw()}
+            <f:if condition="{acknowledgements}">
+                <a name="acknowledgements"></a>
+                <h2>Acknowledgements <small><a href="#acknowledgements">¶</a></small></h2>
+                {acknowledgements -> f:format.raw()}
+            </f:if>
+
+            <f:if condition="{furtherReading}">
+                <a name="furtherReading"></a>
+                <h2>Further reading <small><a href="#furtherReading">¶</a></small></h2>
+                {furtherReading -> f:format.raw()}
+            </f:if>
         </article>
     </f:section>
 
     <f:section name="Aside">
         {f:render(section: 'TOC', arguments: _all)}
 
-        <nav>
+        {f:render(partial: 'TagList', arguments: {
-            <h1>Related Tags</h1>
+            headline: 'Related Tags',
-            <ul>
+            tags: assignedTags
-                <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">
@@ -65,6 +59,16 @@
                         </li>
                     </f:for>
                 </f:alias>
+                <f:if condition="{acknowledgements}">
+                    <li>
+                        <a href="#acknowledgements">Acknowledgements</a>
+                    </li>
+                </f:if>
+                <f:if condition="{furtherReading}">
+                    <li>
+                        <a href="#furtherReading">Further reading</a>
+                    </li>
+                </f:if>
             </ul>
         </nav>
     </f:section>

Resources/Private/Templates/Page/Default.html

@@ -12,36 +12,14 @@
     </f:section>
 
     <f:section name="Aside">
-        <div class="p-4 mb-3 bg-light rounded">
+        {f:render(partial: 'TagList', arguments: {
-            <h4 class="font-italic">About</h4>
+            headline: 'Compatible with TYPO3',
-            <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+            tags: allTypo3Compatible
-        </div>
+        })}
 
-        <div class="p-4">
+        {f:render(partial: 'TagList', arguments: {
-            <h4 class="font-italic">Archives</h4>
+            headline: 'Tags',
-            <ol class="list-unstyled mb-0">
+            tags: allTags
-                <li><a href="#">March 2014</a></li>
+        })}
-                <li><a href="#">February 2014</a></li>
-                <li><a href="#">January 2014</a></li>
-                <li><a href="#">December 2013</a></li>
-                <li><a href="#">November 2013</a></li>
-                <li><a href="#">October 2013</a></li>
-                <li><a href="#">September 2013</a></li>
-                <li><a href="#">August 2013</a></li>
-                <li><a href="#">July 2013</a></li>
-                <li><a href="#">June 2013</a></li>
-                <li><a href="#">May 2013</a></li>
-                <li><a href="#">April 2013</a></li>
-            </ol>
-        </div>
-
-        <div class="p-4">
-            <h4 class="font-italic">Elsewhere</h4>
-            <ol class="list-unstyled">
-                <li><a href="#">GitHub</a></li>
-                <li><a href="#">Twitter</a></li>
-                <li><a href="#">Facebook</a></li>
-            </ol>
-        </div>
     </f:section>
 </html>

ext_tables.sql

@@ -0,0 +1,3 @@
+CREATE TABLE sys_category (
+    slug varchar(2048),
+);