Further work
This commit is contained in:
parent
9086b7e537
commit
decfe03cda
23 changed files with 607 additions and 263 deletions
55
Classes/UserFunction/CodeHighlighting.php
Normal file
55
Classes/UserFunction/CodeHighlighting.php
Normal 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
72
Configuration/RTE/Default.yaml
Normal 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
|
||||||
|
|
@ -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 =
|
||||||
|
}
|
||||||
|
HTMLparser = 1
|
||||||
|
HTMLparser {
|
||||||
|
keepNonMatchedTags = 1
|
||||||
|
htmlSpecialChars = 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -31,15 +31,53 @@ page {
|
||||||
10 = EXT:ds_site/Resources/Private/Templates/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 {
|
variables {
|
||||||
introduction < styles.content.get
|
introduction =< styles.content.get
|
||||||
introduction {
|
introduction {
|
||||||
select {
|
select {
|
||||||
where = {#colPos}=50
|
where = {#colPos}=50
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contentMain =< styles.content.get
|
contentMain =< styles.content.get
|
||||||
footer < styles.content.get
|
footer =< styles.content.get
|
||||||
footer {
|
footer {
|
||||||
select {
|
select {
|
||||||
where = {#colPos}=100
|
where = {#colPos}=100
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,6 @@
|
||||||
@import 'EXT:ds_site/Configuration/TypoScript/Setup/'
|
@import 'EXT:ds_site/Configuration/TypoScript/Setup/'
|
||||||
@import 'EXT:ds_site/Configuration/TypoScript/Setup/ContentElements/'
|
@import 'EXT:ds_site/Configuration/TypoScript/Setup/ContentElements/'
|
||||||
|
|
||||||
|
config {
|
||||||
|
admPanel = 1
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@
|
||||||
data-namespace-typo3-fluid="true">
|
data-namespace-typo3-fluid="true">
|
||||||
|
|
||||||
<f:render section="Header" arguments="{_all}" optional="1">
|
<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">
|
<f:if condition="{data.header_layout} != 100">
|
||||||
<!-- TODO: Map header_layout and use mapped value -->
|
<!-- 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:if>
|
||||||
</f:render>
|
</f:render>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,26 @@
|
||||||
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
|
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
|
||||||
data-namespace-typo3-fluid="true">
|
data-namespace-typo3-fluid="true">
|
||||||
<div class="container">
|
<header>
|
||||||
<header class="blog-header py-3">
|
<div class="website-title">
|
||||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
<a href="/">{settings.websiteTitle}</a>
|
||||||
<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>
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="#">RSS Feed</a>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- <div class="nav-scroller py-1 mb-2"> -->
|
<main>
|
||||||
<!-- <nav class="nav d-flex justify-content-between"> -->
|
<section>
|
||||||
<!-- <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> -->
|
|
||||||
|
|
||||||
<!-- <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> -->
|
|
||||||
|
|
||||||
<!-- <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)}
|
{f:render(section: 'Content', arguments: _all)}
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<aside class="col-md-4 blog-sidebar">
|
<aside>
|
||||||
{f:render(section: 'Aside', arguments: _all)}
|
{f:render(section: 'Aside', arguments: _all)}
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="blog-footer">
|
<footer>
|
||||||
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y')}</p>
|
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
|
||||||
<!-- TODO: Add imprint -->
|
<!-- TODO: Add imprint -->
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||||
<div class="blog-post">
|
<article>
|
||||||
<h2 class="blog-post-title"><a href="{page.link}">{page.title}</a></h2>
|
<header>
|
||||||
<p class="blog-post-meta">{page.data.lastUpdated -> f:format.date(format: 'Y-m-d')}</p>
|
<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>
|
{page.data.abstract -> f:format.html()}
|
||||||
</div>
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="{page.link}">Read more …</a></p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
h1, h2, h3, h4, h5, h6 {
|
@import "layout/header";
|
||||||
small a {
|
@import "layout/content";
|
||||||
display: none;
|
@import "layout/footer";
|
||||||
}
|
@import "layout/elements";
|
||||||
|
@import "layout/pages/singleBlogPost";
|
||||||
|
|
||||||
&:hover small a {
|
body {
|
||||||
display: inline;
|
@extend .container;
|
||||||
color: $gray-500;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
64
Resources/Private/Sass/_variables.scss
Normal file
64
Resources/Private/Sass/_variables.scss
Normal 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
46
Resources/Private/Sass/components/_codeHighlighting.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,14 @@
|
||||||
|
// Required
|
||||||
// // Required
|
@import "bootstrap/scss/functions";
|
||||||
// @import "bootstrap/scss/functions";
|
@import "variables";
|
||||||
// @import "bootstrap/scss/variables";
|
@import "bootstrap/scss/variables";
|
||||||
// @import "bootstrap/scss/mixins";
|
@import "bootstrap/scss/mixins";
|
||||||
|
|
||||||
// // Option
|
// // Option
|
||||||
// @import "bootstrap/scss/reboot";
|
@import "bootstrap/scss/reboot";
|
||||||
// @import "bootstrap/scss/type";
|
@import "bootstrap/scss/grid";
|
||||||
// @import "bootstrap/scss/images";
|
@import "bootstrap/scss/root";
|
||||||
// @import "bootstrap/scss/code";
|
|
||||||
// @import "bootstrap/scss/grid";
|
|
||||||
|
|
||||||
@import "blog";
|
|
||||||
|
|
||||||
@import "layout";
|
@import "layout";
|
||||||
|
|
||||||
|
@import "components/codeHighlighting";
|
||||||
|
|
|
||||||
25
Resources/Private/Sass/layout/_content.scss
Normal file
25
Resources/Private/Sass/layout/_content.scss
Normal 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
37
Resources/Private/Sass/layout/_elements.scss
Normal 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
4
Resources/Private/Sass/layout/_footer.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
body > footer {
|
||||||
|
padding-top: $spacer * 2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
23
Resources/Private/Sass/layout/_header.scss
Normal file
23
Resources/Private/Sass/layout/_header.scss
Normal 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
6
Resources/Private/Sass/layout/pages/_singleBlogPost.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
article.single-blog-post {
|
||||||
|
padding-top: 0;
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
padding-top: $spacer * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,52 +4,68 @@
|
||||||
<f:layout name="Default" />
|
<f:layout name="Default" />
|
||||||
|
|
||||||
<f:section name="Content">
|
<f:section name="Content">
|
||||||
<section>
|
|
||||||
<header>
|
<header>
|
||||||
<h1 class="pb-4 mb-4 font-italic border-bottom">{data.title}</h1>
|
<h1>Blog Post</h1>
|
||||||
<p class="blog-post-meta">Published: {data.lastUpdated -> f:format.date(format: 'Y-m-d')}</p>
|
</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>
|
</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()}
|
{introduction -> f:format.raw()}
|
||||||
|
|
||||||
{contentMain -> f:format.raw()}
|
{contentMain -> f:format.raw()}
|
||||||
|
|
||||||
{footer -> f:format.raw()}
|
{footer -> f:format.raw()}
|
||||||
</section>
|
</article>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
<f:section name="Aside">
|
<f:section name="Aside">
|
||||||
<div class="p-4 mb-3 bg-light rounded">
|
{f:render(section: 'TOC', arguments: _all)}
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="p-4">
|
<nav>
|
||||||
<h4 class="font-italic">Archives</h4>
|
<h1>Related Tags</h1>
|
||||||
<ol class="list-unstyled mb-0">
|
<ul>
|
||||||
<li><a href="#">March 2014</a></li>
|
<f:for each="{tags}" as="tag">
|
||||||
<li><a href="#">February 2014</a></li>
|
<li><a href="#">{tag.data.title}</a></li>
|
||||||
<li><a href="#">January 2014</a></li>
|
</f:for>
|
||||||
<li><a href="#">December 2013</a></li>
|
</ul>
|
||||||
<li><a href="#">November 2013</a></li>
|
</nav>
|
||||||
<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">
|
<!-- <nav> -->
|
||||||
<h4 class="font-italic">Elsewhere</h4>
|
<!-- <h1>Further reading</h1> -->
|
||||||
<ol class="list-unstyled">
|
<!-- TODO: Move content element from main content to here -->
|
||||||
<li><a href="#">GitHub</a></li>
|
<!-- </nav> -->
|
||||||
<li><a href="#">Twitter</a></li>
|
</f:section>
|
||||||
<li><a href="#">Facebook</a></li>
|
|
||||||
</ol>
|
<f:section name="TOC">
|
||||||
</div>
|
<!-- 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>
|
</f:section>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,10 @@
|
||||||
<f:layout name="Default" />
|
<f:layout name="Default" />
|
||||||
|
|
||||||
<f:section name="Content">
|
<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()}
|
{contentMain -> f:format.raw()}
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -9,9 +9,15 @@
|
||||||
"email": "coding@daniel-siepmann.de"
|
"email": "coding@daniel-siepmann.de"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"autoload": {
|
||||||
|
"psr-4": {
|
||||||
|
"DanielSiepmann\\DsSite\\": "Classes/"
|
||||||
|
}
|
||||||
|
},
|
||||||
"require": {
|
"require": {
|
||||||
"php": "^7.3.0",
|
"php": "^7.3.0",
|
||||||
"typo3/cms-core": "^9.5"
|
"typo3/cms-core": "^9.5",
|
||||||
|
"scrivo/highlight.php": "^9.15.10"
|
||||||
},
|
},
|
||||||
"extra": {
|
"extra": {
|
||||||
"typo3/cms": {
|
"typo3/cms": {
|
||||||
|
|
|
||||||
3
ext_localconf.php
Normal file
3
ext_localconf.php
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:ds_site/Configuration/RTE/Default.yaml';
|
||||||
Loading…
Reference in a new issue