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

Restructure ordering of blog post view

Browse source
This commit is contained in:
Daniel Siepmann 2020-01-08 21:03:54 +01:00
parent 47eba384e3
commit 1193914f8b
15 changed files with 209 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Configuration/TypoScript/Setup/ContentElements/ParseFunc.typoscript
View file

@ -15,18 +15,6 @@ lib.parseFunc {
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 = *

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

@ -8,17 +8,16 @@ page {
viewport = width=device-width, initial-scale=1
}
# Just an idea to add layout based class, if necessary
# bodyTagCObject = COA
# bodyTagCObject {
# 10 = COA
# 10 {
# 10 =< page.10.templateName.cObject
# 10.wrap = Layout|
# wrap = class="|"
# }
# stdWrap.noTrimWrap = |<body |>|
# }
bodyTagCObject = COA
bodyTagCObject {
10 = COA
10 {
10 =< page.10.templateName.cObject
10.wrap = Layout|
wrap = class="|"
}
stdWrap.noTrimWrap = |<body |>|
}
10 = FLUIDTEMPLATE
10 {

29
Resources/Private/Layouts/Page/BlogPost.html Normal file
View file

@ -0,0 +1,29 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
{f:render(partial: 'Header', arguments: _all)}
<main>
<header>
<h1>Blog Post</h1>
</header>
<article>
{f:render(partial: 'BlogPostHeader', arguments: {
title: data.title,
blogPost : data,
compatibleWith: compatibleWith,
topics: assignedTopics,
addLinks: 1
})}
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
{f:render(section: 'Content', arguments: _all)}
</article>
</main>
{f:render(partial: 'Footer', arguments: _all)}
</html>

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

@ -1,20 +1,21 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<header>
<a href="/">{settings.websiteTitle}</a>
</header>
{f:render(partial: 'Header', arguments: _all)}
<main>
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
<header>
<h1>{data.title}</h1>
</header>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
</main>
<footer>
{f:render(partial: 'FooterMenu', arguments: {pages: footerMenu.0.children})}
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
</footer>
{f:render(partial: 'Footer', arguments: _all)}
</html>

39
Resources/Private/Partials/BlogPostHeader.html
View file

@ -12,14 +12,41 @@
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>
{f:render(section: 'TopicList', arguments: {
topics: compatibleWith,
addLinks: addLinks
})}
</p>
<p>Topics:
<f:for each="{topics}" as="topic" iteration="i">
{topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
</f:for>
{f:render(section: 'TopicList', arguments: {
topics: topics,
addLinks: addLinks
})}
</p>
</header>
<f:section name="TopicList">
<f:for each="{topics}" as="topic" iteration="i">
<f:render section="TopicLink"
contentAs="content"
arguments="{
addLinks: addLinks,
topicUid: topic.data.uid
}"
>
{topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
</f:render>
</f:for>
</f:section>
<f:section name="TopicLink">
<f:if condition="{addLinks}">
<f:then>
<a href="{f:uri.page(pageUid: 11, additionalParams: {topic: topicUid})}">{content -> f:spaceless()}</a>
</f:then>
<f:else>
{content}
</f:else>
</f:if>
</f:section>
</html>

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

@ -8,11 +8,13 @@
topics: page.topics
})}
{page.data.abstract -> f:format.html()}
<main>
{page.data.abstract -> f:format.html()}
<f:if condition="{page.media.0}">
{f:render(partial: 'Image', arguments: {image: page.media.0})}
</f:if>
<f:if condition="{page.media.0}">
{f:render(partial: 'Image', arguments: {image: page.media.0})}
</f:if>
</main>
<footer>
<p><a href="{page.link}">Read more …</a></p>

7
Resources/Private/Partials/Page/Footer.html Normal file
View file

@ -0,0 +1,7 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<footer>
{f:render(partial: 'FooterMenu', arguments: {pages: footerMenu.0.children})}
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
</footer>
</html>

6
Resources/Private/Partials/Page/Header.html Normal file
View file

@ -0,0 +1,6 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<header>
<a href="/">{settings.websiteTitle}</a>
</header>
</html>

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

@ -1,7 +1,8 @@
@import "layout/header";
@import "layout/content";
@import "layout/footer";
@import "layout/elements";
@import "layout/header";
@import "layout/footer";
@import "layout/content";
@import "layout/page/blogPost";
body {
@extend .container;

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

@ -12,6 +12,7 @@
@import "layout";
@import "components/codeHighlighting";
@import "components/feedit";
// Does not work with 10 master yet
// @import "components/feedit";
@import "components/ckeditor";
@import "components/admonition";

81
Resources/Private/Sass/layout/_content.scss
View file

@ -1,6 +1,10 @@
body > main {
@extend .row;
& > header {
@extend .col-12;
}
& > section {
@extend .col-xl-8;
@extend .col-12;
@ -9,22 +13,34 @@ body > main {
& > aside {
@extend .col-xl-4;
@extend .col-12;
@extend .order-xl-2;
}
}
aside nav {
ul {
list-style: none;
padding-left: 0;
// For padding
@extend article;
nav ul {
list-style: none;
padding-left: 0;
}
}
}
@media (max-width: 1439px) {
aside nav:nth-of-type(2) li {
display: inline;
margin-right: $spacer;
line-height: $spacer * 4;
body > main > aside {
padding-bottom: 0;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
li {
margin-right: $spacer;
line-height: $spacer * 2;
white-space: nowrap;
}
nav li {
display: inline;
}
}
}
@ -34,3 +50,46 @@ li {
top: $spacer / 2;
}
}
section {
& > header {
font-size: 1.5em;
padding-bottom: $spacer * 2;
}
& > a:first-child + {
h1, h2, h3, h4, h5, h6 {
margin-top: $spacer * 4;
}
}
}
article {
padding: {
top: $spacer * 2;
bottom: $spacer * 2;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
padding: {
top: $spacer * 2;
bottom: $spacer;
}
}
& > 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;
}
}
}

27
Resources/Private/Sass/layout/_elements.scss
View file

@ -19,33 +19,6 @@ figure {
}
}
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;
}
}
}
strong {
color: $white;
}

22
Resources/Private/Sass/layout/page/_blogPost.scss Normal file
View file

@ -0,0 +1,22 @@
body.LayoutBlogPost {
article {
@extend .row;
@extend .col-12;
& > header {
@extend .col-12;
@extend .order-xl-1;
margin-bottom: 0;
}
& > aside {
@extend .col-12;
@extend .col-xl-4;
@extend .order-xl-3;
}
& > main {
@extend .col-12;
@extend .col-xl-8;
@extend .order-xl-2;
}
}
}

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

@ -1,20 +1,10 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:layout name="BlogPost" />
<f:section name="Content">
<header>
<h1>Blog Post</h1>
</header>
<article>
{f:render(partial: 'BlogPostHeader', arguments: {
title: data.title,
blogPost : data,
compatibleWith: compatibleWith,
topics: assignedTopics
})}
<main>
<a name="introduction"></a>
<h2>Introduction <small><a href="#introduction"></a></small></h2>
{data.abstract -> f:format.html()}
@ -37,22 +27,13 @@
<h2>Further reading <small><a href="#furtherReading"></a></small></h2>
{furtherReading -> f:format.raw()}
</f:if>
</article>
</main>
</f:section>
<f:section name="Aside">
{f:render(section: 'TOC', arguments: _all)}
{f:render(partial: 'TopicList', arguments: {
headline: 'Related Topics',
topics: assignedTopics
})}
</f:section>
<f:section name="TOC">
<nav>
<h1>Table of Content</h1>
<ul>
<ol>
<li>
<a href="#introduction">Introduction</a>
</li>
@ -75,7 +56,7 @@
<a href="#furtherReading">Further reading</a>
</li>
</f:if>
</ul>
</ol>
</nav>
</f:section>
</html>

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

@ -4,21 +4,19 @@
<f:layout name="Default" />
<f:section name="Content">
<header>
<h1>{data.title}</h1>
</header>
{contentMain -> f:format.raw()}
</f:section>
<f:section name="Aside">
<h1>Blog Posts by</h1>
{f:render(partial: 'TopicList', arguments: {
headline: 'Compatible with TYPO3',
headline: 'Compatibility with TYPO3',
topics: allTypo3Compatible
})}
{f:render(partial: 'TopicList', arguments: {
headline: 'Topics',
headline: 'Topic',
topics: allTopics
})}
</f:section>