danielsiepmann/ds-site
danielsiepmann/ds-site
1
0
Code Activity

Further work

Browse source
This commit is contained in:
Daniel Siepmann 2019-11-15 00:27:23 +01:00
parent 9086b7e537
commit decfe03cda
23 changed files with 607 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
Classes/UserFunction/CodeHighlighting.php Normal file
View file

@ -0,0 +1,55 @@
<?php
namespace DanielSiepmann\DsSite\UserFunction;
/*
* Copyright (C) 2019 Daniel Siepmann <coding@daniel-siepmann.de>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
* 02110-1301, USA.
*/
use Highlight\Highlighter;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
/**
* Highlights the current value via library.
* Returns HTML Markup with css classes for proper highlighting.
*/
class CodeHighlighting
{
/**
* @var ContentObjectRenderer
*/
public $cObj;
public function preTag(string $content, array $config): string
{
$highlighter = new Highlighter();
$highlighter->setClassPrefix('');
$code = $this->cObj->data[$this->cObj->currentValKey];
$code = htmlspecialchars_decode(trim($code));
try {
// Highlight some code.
$highlighted = $highlighter->highlightAuto($code);
$content = '<pre><code>' . $highlighted->value . '</code></pre>';
} catch (DomainException $e) {
$content = '<pre><code>' . $code . '</code></pre>';
}
return $content;
}
}

72
Configuration/RTE/Default.yaml Normal file
View file

@ -0,0 +1,72 @@
# Load default processing options
imports:
- {resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml"}
- {resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml"}
editor:
config:
contentsCss: "EXT:ds_site/Resources/Public/Css/index.css"
height: 1000
format_tags: "p;pre"
# Ensure that special characters are not converted to HTML entities
entities_latin: false
entities: false
stylesSet:
- {name: "Inline code", element: "code"}
toolbarGroups:
# - {name: insert}
- {name: basicstyles, groups: [basicstyles, align, cleanup]}
- {name: paragraph, groups: [list, indent, blocks, align, bidi]}
- {name: links}
- {name: editing, groups: [find, selection, spellchecker]}
- {name: specialcharacters, groups: [insertcharacters]}
- "/"
- {name: styles}
- "/"
- {name: tools}
- {name: document, groups: [mode, document, doctools]}
# - {name: 'document', items: ['Source']}
# - {name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Undo', 'Redo']}
# - '/'
# - {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'CopyFormatting', 'RemoveFormat']}
# - {name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote']}
# - {name: 'links', items: ['Link', 'Unlink', 'Anchor']}
# - {name: 'insert', items: ['HorizontalRule', 'SpecialChar']}
# - '/'
# - {name: 'styles', items: ['Styles', 'Format']}
# - {name: 'tools', items: ['Maximize', 'ShowBlocks']}
# - {name: 'about', items: ['About']}
externalPlugins:
typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
showbrokenlinks: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/plugin.js"}
# This is a plugin, found here: https://github.com/ufdada/quicktable
# quicktable: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/quicktable/plugin.js" }
autolinking: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/autolinking.js" }
# softhyphen plugin for adding ctrl+dash support to insert a conditional word break
# softhyphen:
# resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/"
# enableShortcut: true
processing:
allowAttributes: [class, title, start]
HTMLparser_db:
tags:
ol:
allowedAttribs:
- class
- start
allowTagsOutside:
- pre
- blockquote
- ul
- ol
- li
- br
# blockElementList:
# - P
# - PRE
# - BLOCKQUOTE

114
Configuration/TypoScript/Setup/ContentElements/ParseFunc.typoscript Normal file
View file

@ -0,0 +1,114 @@
# Creates persistent ParseFunc setup for non-HTML content.
lib.parseFunc {
makelinks = 1
makelinks {
http {
keep = {$styles.content.links.keep}
extTarget = {$styles.content.links.extTarget}
}
mailto {
keep = path
}
}
tags {
link = TEXT
link {
current = 1
typolink {
parameter.data = parameters : allParams
extTarget = {$styles.content.links.extTarget}
}
parseFunc.constants = 1
}
pre = USER
pre {
userFunc = DanielSiepmann\DsSite\UserFunction\CodeHighlighting->preTag
}
a = TEXT
a {
current = 1
typolink {
parameter.data = parameters:href
title.data = parameters:title
ATagParams.data = parameters:allParams
target.data = parameters:target
extTarget = {$styles.content.links.extTarget}
extTarget.override.data = parameters:target
}
}
}
allowTags = a, abbr, acronym, address, b, bdo, big, blockquote, br, caption, center, cite, code, dd, del, dfn, dl, div, dt, em, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, ol, p, pre, q, s, samp, sdfield, small, span, strike, strong, sub, sup, title, tt, u, ul, var
denyTags = *
sword = <span class="ce-sword">|</span>
constants = 1
nonTypoTagStdWrap {
HTMLparser = 1
HTMLparser {
keepNonMatchedTags = 1
htmlSpecialChars = 2
}
}
}
# Creates persistent ParseFunc setup for RTE content (which is mainly HTML) based on the "default" transformation.
lib.parseFunc_RTE < lib.parseFunc
lib.parseFunc_RTE {
# Processing <ol>, <ul> and <table> blocks separately
externalBlocks = blockquote, div, dd, dl, ol, ul, pre
externalBlocks {
ol {
stripNL = 1
stdWrap.parseFunc = < lib.parseFunc
}
ul {
stripNL = 1
stdWrap.parseFunc = < lib.parseFunc
}
pre {
stdWrap.parseFunc < lib.parseFunc
}
div {
stripNL = 1
callRecursive = 1
}
article < .div
aside < .div
blockquote < .div
footer < .div
header < .div
nav < .div
section < .div
dl < .div
dd < .div
}
plainTextStdWrap {
replacement {
10 {
search = #\r\n\r\n#
replace {
cObject = COA
cObject {
1 = TEXT
1.char = 13
2 = TEXT
2.char = 10
}
}
useRegExp = 1
}
}
}
nonTypoTagStdWrap {
encapsLines {
encapsTagList = p,pre,h1,h2,h3,h4,h5,h6,hr,dt
remapTag.DIV = P
nonWrappedTag = P
innerStdWrap_all.ifBlank = &nbsp;
}
HTMLparser = 1
HTMLparser {
keepNonMatchedTags = 1
htmlSpecialChars = 2
}
}
}

42
Configuration/TypoScript/Setup/Page.typoscript
View file

@ -31,15 +31,53 @@ page {
10 = EXT:ds_site/Resources/Private/Templates/Page/
}
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
10 {
table = sys_category
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
orderBy = sorting
as = tags
}
11 < .10
11 {
where = sys_category_record_mm.uid_foreign = {page:uid} AND sys_category.parent = 2
as = compatible
}
50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
50 {
special = list
special.value.data = page:uid
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
10 {
table = tt_content
pidInList.field = uid
as = content
where = sectionIndex = 1 AND header_layout != 100
orderBy = sorting
}
}
as = pageSections
}
}
settings {
websiteTitle < sitetitle
}
variables {
introduction < styles.content.get
introduction =< styles.content.get
introduction {
select {
where = {#colPos}=50
}
}
contentMain =< styles.content.get
footer < styles.content.get
footer =< styles.content.get
footer {
select {
where = {#colPos}=100

4
Configuration/TypoScript/setup.typoscript
View file

@ -1,2 +1,6 @@
@import 'EXT:ds_site/Configuration/TypoScript/Setup/'
@import 'EXT:ds_site/Configuration/TypoScript/Setup/ContentElements/'
config {
admPanel = 1
}

4
Resources/Private/Layouts/ContentElements/Default.html
View file

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

103
Resources/Private/Layouts/Page/Default.html
View file

@ -1,89 +1,26 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 offset-4 text-center">
<a class="blog-header-logo text-dark" href="/">Website Title</a>
</div>
<div class="col-4 pt-1 text-right">
<a class="text-muted" href="#">RSS Feed</a>
</div>
</div>
</header>
<header>
<div class="website-title">
<a href="/">{settings.websiteTitle}</a>
</div>
<nav>
<a href="#">RSS Feed</a>
</nav>
</header>
<!-- <div class="nav-scroller py-1 mb-2"> -->
<!-- <nav class="nav d-flex justify-content-between"> -->
<!-- <a class="p-2 text-muted" href="#">World</a> -->
<!-- <a class="p-2 text-muted" href="#">U.S.</a> -->
<!-- <a class="p-2 text-muted" href="#">Technology</a> -->
<!-- <a class="p-2 text-muted" href="#">Design</a> -->
<!-- <a class="p-2 text-muted" href="#">Culture</a> -->
<!-- <a class="p-2 text-muted" href="#">Business</a> -->
<!-- <a class="p-2 text-muted" href="#">Politics</a> -->
<!-- <a class="p-2 text-muted" href="#">Opinion</a> -->
<!-- <a class="p-2 text-muted" href="#">Science</a> -->
<!-- <a class="p-2 text-muted" href="#">Health</a> -->
<!-- <a class="p-2 text-muted" href="#">Style</a> -->
<!-- <a class="p-2 text-muted" href="#">Travel</a> -->
<!-- </nav> -->
<!-- </div> -->
<main>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
<!-- <div class="jumbotron p-4 p-md-5 text-white rounded bg-dark"> -->
<!-- <div class="col-md-6 px-0"> -->
<!-- <h1 class="display-4 font-italic">Title of a longer featured blog post</h1> -->
<!-- <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p> -->
<!-- <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p> -->
<!-- </div> -->
<!-- </div> -->
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
</main>
<!-- <div class="row mb-2"> -->
<!-- <div class="col-md-6"> -->
<!-- <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> -->
<!-- <div class="col p-4 d-flex flex-column position-static"> -->
<!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
<!-- <h3 class="mb-0">Featured post</h3> -->
<!-- <div class="mb-1 text-muted">Nov 12</div> -->
<!-- <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> -->
<!-- <a href="#" class="stretched-link">Continue reading</a> -->
<!-- </div> -->
<!-- <div class="col-auto d-none d-lg-block"> -->
<!-- <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="col-md-6"> -->
<!-- <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> -->
<!-- <div class="col p-4 d-flex flex-column position-static"> -->
<!-- <strong class="d-inline-block mb-2 text-success">Design</strong> -->
<!-- <h3 class="mb-0">Post title</h3> -->
<!-- <div class="mb-1 text-muted">Nov 11</div> -->
<!-- <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> -->
<!-- <a href="#" class="stretched-link">Continue reading</a> -->
<!-- </div> -->
<!-- <div class="col-auto d-none d-lg-block"> -->
<!-- <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<main class="container">
<div class="row">
<div class="col-md-8 blog-main">
{f:render(section: 'Content', arguments: _all)}
</div>
<aside class="col-md-4 blog-sidebar">
{f:render(section: 'Aside', arguments: _all)}
</aside>
</div>
</main>
<footer class="blog-footer">
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y')}</p>
<!-- TODO: Add imprint -->
</footer>
</div>
<footer>
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
<!-- TODO: Add imprint -->
</footer>
</html>

18
Resources/Private/Partials/Menu/Page.html
View file

@ -1,8 +1,16 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="blog-post">
<h2 class="blog-post-title"><a href="{page.link}">{page.title}</a></h2>
<p class="blog-post-meta">{page.data.lastUpdated -> f:format.date(format: 'Y-m-d')}</p>
<article>
<header>
<h1><a href="{page.link}">{page.title}</a></h1>
<p>
<time>{page.data.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>
</p>
</header>
<p>{page.data.abstract -> f:format.nl2br()}</p>
</div>
{page.data.abstract -> f:format.html()}
<footer>
<p><a href="{page.link}">Read more …</a></p>
</footer>
</article>
</html>

108
Resources/Private/Sass/_blog.scss
View file

@ -1,108 +0,0 @@
@import "bootstrap/scss/bootstrap";
.blog-header {
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
.blog-header-logo:hover {
text-decoration: none;
}
.display-4 {
font-size: 2.5rem;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.h-250 { height: 250px; }
/*
* Blog name and description
*/
.blog-title {
margin-bottom: 0;
font-size: 2rem;
font-weight: 400;
}
.blog-description {
font-size: 1.1rem;
color: #999;
}
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
}
.blog-pagination > .btn {
border-radius: 2rem;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}

15
Resources/Private/Sass/_layout.scss
View file

@ -1,10 +1,9 @@
h1, h2, h3, h4, h5, h6 {
small a {
display: none;
}
@import "layout/header";
@import "layout/content";
@import "layout/footer";
@import "layout/elements";
@import "layout/pages/singleBlogPost";
&:hover small a {
display: inline;
color: $gray-500;
}
body {
@extend .container;
}

64
Resources/Private/Sass/_variables.scss Normal file
View file

@ -0,0 +1,64 @@
$black: #5D5D5D;
$black-dark: #000000;
$red: #E09690;
$red-dark: #C75646;
$green: #CDEE69;
$green-dark: #8EB33B;
$yellow: #FFE377;
$yellow-dark: #D0B03C;
$blue: #9CD9F0;
$blue-dark: #72B3CC;
$pink: #FBB1F9;
$pink-dark: #C8A0D1;
$cyan: #77DFD8;
$cyan-dark: #218693;
$white: #F7F7F7;
$white-dark: #B0B0B0;
$primary: $blue;
$secondary: $blue-dark;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $white-dark;
$dark: $black;
$theme-colors: ();
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
$body-bg: #2E3436;
$body-color: #D3D7CF;
$font-family-sans-serif: "Helvetica", sans-serif;
$font-family-serif: "Georgia", serif;
$font-family-monospace: monospace;
$font-family-base: $font-family-monospace;
$font-size-base: 1.25rem;
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * .875 !default;
$link-color: $blue-dark;
$link-decoration: underline;
$link-hover-color: $blue;
$link-hover-decoration: underline;
$container-max-widths: (
sm: 40rem,
md: 50rem,
lg: 70rem,
xl: 100rem
);

46
Resources/Private/Sass/components/_codeHighlighting.scss Normal file
View file

@ -0,0 +1,46 @@
code {
background: $black-dark;
color: $white-dark;
padding: {
left: 0.5em;
right: 0.5em;
}
white-space: nowrap;
}
pre code {
display: block;
overflow-x: auto;
padding: 0.5em;
white-space: pre;
.tag {
color: $white;
.name {
color: $blue;
}
}
.attr {
color: $blue;
}
.string {
color: $white-dark;
}
.function {
color: $white;
}
.keyword {
color: $green;
}
.params {
.string {
color: $black;
}
}
}

22
Resources/Private/Sass/index.scss
View file

@ -1,16 +1,14 @@
// // Required
// @import "bootstrap/scss/functions";
// @import "bootstrap/scss/variables";
// @import "bootstrap/scss/mixins";
// Required
@import "bootstrap/scss/functions";
@import "variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
// // Option
// @import "bootstrap/scss/reboot";
// @import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
// @import "bootstrap/scss/code";
// @import "bootstrap/scss/grid";
@import "blog";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/root";
@import "layout";
@import "components/codeHighlighting";

25
Resources/Private/Sass/layout/_content.scss Normal file
View file

@ -0,0 +1,25 @@
body > main {
@extend .row;
& > section {
@extend .col-md-8;
}
& > aside {
@extend .col-md-4;
}
}
aside nav {
ul {
list-style: none;
padding-left: 0;
}
}
li {
padding: {
bottom: $spacer / 2;
top: $spacer / 2;
}
}

37
Resources/Private/Sass/layout/_elements.scss Normal file
View file

@ -0,0 +1,37 @@
h1, h2, h3, h4, h5, h6 {
small a {
display: none;
}
&:hover small a {
display: inline;
color: $gray-500;
}
}
section > header {
font-size: 1.5em;
padding-bottom: $spacer * 2;
}
article {
padding: {
top: $spacer * 2;
bottom: $spacer * 2;
}
& > header {
font-size: 1.25em;
margin-bottom: $spacer * 2;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
padding-bottom: 0;
}
p {
font-size: 0.75em;
margin: 0;
}
}
}

4
Resources/Private/Sass/layout/_footer.scss Normal file
View file

@ -0,0 +1,4 @@
body > footer {
padding-top: $spacer * 2;
text-align: center;
}

23
Resources/Private/Sass/layout/_header.scss Normal file
View file

@ -0,0 +1,23 @@
body > header {
@extend .row;
padding-bottom: $spacer * 4;
.website-title {
@extend .col-8;
a {
font-size: $h1-font-size;
text-decoration: none;
}
}
nav {
@extend .col-4;
text-align: right;
a {
color: $text-muted !important;
}
}
}

6
Resources/Private/Sass/layout/pages/_singleBlogPost.scss Normal file
View file

@ -0,0 +1,6 @@
article.single-blog-post {
padding-top: 0;
h1, h2, h3, h4, h5, h6 {
padding-top: $spacer * 2;
}
}

84
Resources/Private/Templates/Page/BlogPost.html
View file

@ -4,52 +4,68 @@
<f:layout name="Default" />
<f:section name="Content">
<section>
<header>
<h1>Blog Post</h1>
</header>
<article class="single-blog-post">
<header>
<h1 class="pb-4 mb-4 font-italic border-bottom">{data.title}</h1>
<p class="blog-post-meta">Published: {data.lastUpdated -> f:format.date(format: 'Y-m-d')}</p>
<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>
<p>{data.abstract -> f:format.nl2br()}</p>
<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()}
</section>
</article>
</f:section>
<f:section name="Aside">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<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>
</div>
{f:render(section: 'TOC', arguments: _all)}
<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<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>
<nav>
<h1>Related Tags</h1>
<ul>
<f:for each="{tags}" as="tag">
<li><a href="#">{tag.data.title}</a></li>
</f:for>
</ul>
</nav>
<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>
<!-- <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>

5
Resources/Private/Templates/Page/Default.html
View file

@ -4,7 +4,10 @@
<f:layout name="Default" />
<f:section name="Content">
<h1 class="pb-4 mb-4 font-italic border-bottom">{data.title}</h1>
<header>
<h1>{data.title}</h1>
</header>
{contentMain -> f:format.raw()}
</f:section>

8
Resources/Public/Css/index.css
View file

File diff suppressed because one or more lines are too long

8
composer.json
View file

@ -9,9 +9,15 @@
"email": "coding@daniel-siepmann.de"
}
],
"autoload": {
"psr-4": {
"DanielSiepmann\\DsSite\\": "Classes/"
}
},
"require": {
"php": "^7.3.0",
"typo3/cms-core": "^9.5"
"typo3/cms-core": "^9.5",
"scrivo/highlight.php": "^9.15.10"
},
"extra": {
"typo3/cms": {

3
ext_localconf.php Normal file
View file

@ -0,0 +1,3 @@
<?php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:ds_site/Configuration/RTE/Default.yaml';