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 { pre {
userFunc = DanielSiepmann\DsSite\UserFunction\CodeHighlighting->preTag 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 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 = * denyTags = *

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

@ -8,17 +8,16 @@ page {
viewport = width=device-width, initial-scale=1 viewport = width=device-width, initial-scale=1
} }
# Just an idea to add layout based class, if necessary bodyTagCObject = COA
# bodyTagCObject = COA bodyTagCObject {
# bodyTagCObject { 10 = COA
# 10 = COA 10 {
# 10 { 10 =< page.10.templateName.cObject
# 10 =< page.10.templateName.cObject 10.wrap = Layout|
# 10.wrap = Layout| wrap = class="|"
# wrap = class="|" }
# } stdWrap.noTrimWrap = |<body |>|
# stdWrap.noTrimWrap = |<body |>| }
# }
10 = FLUIDTEMPLATE 10 = FLUIDTEMPLATE
10 { 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" <html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true"> data-namespace-typo3-fluid="true">
<header>
<a href="/">{settings.websiteTitle}</a> {f:render(partial: 'Header', arguments: _all)}
</header>
<main> <main>
<aside> <header>
{f:render(section: 'Aside', arguments: _all)} <h1>{data.title}</h1>
</aside> </header>
<section> <section>
{f:render(section: 'Content', arguments: _all)} {f:render(section: 'Content', arguments: _all)}
</section> </section>
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
</main> </main>
<footer> {f:render(partial: 'Footer', arguments: _all)}
{f:render(partial: 'FooterMenu', arguments: {pages: footerMenu.0.children})}
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
</footer>
</html> </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> Updated: <time>{blogPost.SYS_LASTCHANGED -> f:format.date(format: 'Y-m-d')}</time>
</p> </p>
<p>Tested with TYPO3: <p>Tested with TYPO3:
<f:for each="{compatibleWith}" as="version" iteration="i"> {f:render(section: 'TopicList', arguments: {
{version.data.title}{f:if(condition: '!{i.isLast}', then: ',')} topics: compatibleWith,
</f:for> addLinks: addLinks
})}
</p> </p>
<p>Topics: <p>Topics:
<f:for each="{topics}" as="topic" iteration="i"> {f:render(section: 'TopicList', arguments: {
{topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')} topics: topics,
</f:for> addLinks: addLinks
})}
</p> </p>
</header> </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> </html>

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

@ -8,11 +8,13 @@
topics: page.topics topics: page.topics
})} })}
{page.data.abstract -> f:format.html()} <main>
{page.data.abstract -> f:format.html()}
<f:if condition="{page.media.0}"> <f:if condition="{page.media.0}">
{f:render(partial: 'Image', arguments: {image: page.media.0})} {f:render(partial: 'Image', arguments: {image: page.media.0})}
</f:if> </f:if>
</main>
<footer> <footer>
<p><a href="{page.link}">Read more …</a></p> <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/elements";
@import "layout/header";
@import "layout/footer";
@import "layout/content";
@import "layout/page/blogPost";
body { body {
@extend .container; @extend .container;

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

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

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

@ -1,6 +1,10 @@
body > main { body > main {
@extend .row; @extend .row;
& > header {
@extend .col-12;
}
& > section { & > section {
@extend .col-xl-8; @extend .col-xl-8;
@extend .col-12; @extend .col-12;
@ -9,22 +13,34 @@ body > main {
& > aside { & > aside {
@extend .col-xl-4; @extend .col-xl-4;
@extend .col-12; @extend .col-12;
@extend .order-xl-2;
}
}
aside nav { // For padding
ul { @extend article;
list-style: none;
padding-left: 0; nav ul {
list-style: none;
padding-left: 0;
}
} }
} }
@media (max-width: 1439px) { @media (max-width: 1439px) {
aside nav:nth-of-type(2) li { body > main > aside {
display: inline; padding-bottom: 0;
margin-right: $spacer;
line-height: $spacer * 4; 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; 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 { strong {
color: $white; 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" <html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true"> data-namespace-typo3-fluid="true">
<f:layout name="Default" /> <f:layout name="BlogPost" />
<f:section name="Content"> <f:section name="Content">
<header> <main>
<h1>Blog Post</h1>
</header>
<article>
{f:render(partial: 'BlogPostHeader', arguments: {
title: data.title,
blogPost : data,
compatibleWith: compatibleWith,
topics: assignedTopics
})}
<a name="introduction"></a> <a name="introduction"></a>
<h2>Introduction <small><a href="#introduction"></a></small></h2> <h2>Introduction <small><a href="#introduction"></a></small></h2>
{data.abstract -> f:format.html()} {data.abstract -> f:format.html()}
@ -37,22 +27,13 @@
<h2>Further reading <small><a href="#furtherReading"></a></small></h2> <h2>Further reading <small><a href="#furtherReading"></a></small></h2>
{furtherReading -> f:format.raw()} {furtherReading -> f:format.raw()}
</f:if> </f:if>
</article> </main>
</f:section> </f:section>
<f:section name="Aside"> <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> <nav>
<h1>Table of Content</h1> <h1>Table of Content</h1>
<ul> <ol>
<li> <li>
<a href="#introduction">Introduction</a> <a href="#introduction">Introduction</a>
</li> </li>
@ -75,7 +56,7 @@
<a href="#furtherReading">Further reading</a> <a href="#furtherReading">Further reading</a>
</li> </li>
</f:if> </f:if>
</ul> </ol>
</nav> </nav>
</f:section> </f:section>
</html> </html>

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

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