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/
|
||||
}
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,2 +1,6 @@
|
|||
@import 'EXT:ds_site/Configuration/TypoScript/Setup/'
|
||||
@import 'EXT:ds_site/Configuration/TypoScript/Setup/ContentElements/'
|
||||
|
||||
config {
|
||||
admPanel = 1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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> -->
|
||||
|
||||
<!-- <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">
|
||||
<main>
|
||||
<section>
|
||||
{f:render(section: 'Content', arguments: _all)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="col-md-4 blog-sidebar">
|
||||
<aside>
|
||||
{f:render(section: 'Aside', arguments: _all)}
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y')}</p>
|
||||
<footer>
|
||||
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
|
||||
<!-- TODO: Add imprint -->
|
||||
</footer>
|
||||
</div>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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
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
|
||||
// @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
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:section name="Content">
|
||||
<section>
|
||||
<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>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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
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