[SITE] add template, blueprint, css for the blog

.brackets.json

@@ -11,7 +11,6 @@
                 "sourceComments": false,
                 "outputStyle": "nested"
             },
-            "linting.collapsed": false
         },
         "assets/scss/templates/*": {
             "sass.enabled": true,
@@ -23,7 +22,6 @@
                 "sourceComments": false,
                 "outputStyle": "nested"
             },
-            "linting.collapsed": true
         },
         "assets/vendors/bootstrap/scss/*": {
             "sass.enabled": true,

assets/css/blog.css

@@ -0,0 +1,69 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+h2 {
+  margin-bottom: 5px; }
+
+a:hover, a:active, a:focus {
+  text-decoration: none; }
+
+main.blog .container {
+  max-width: 700px; }
+
+main.blog h1 a {
+  color: inherit; }
+
+main.blog article div.meta {
+  color: #a6a6a6; }
+  main.blog article div.meta span.tags {
+    margin-left: 5px;
+    border-left: 1px solid #a6a6a6;
+    padding-left: 6px; }
+    main.blog article div.meta span.tags a {
+      color: inherit; }
+    main.blog article div.meta span.tags a:after {
+      content: ','; }
+    main.blog article div.meta span.tags a:last-child:after {
+      content: ''; }
+
+main.blog article.excerpt {
+  padding-bottom: 30px;
+  margin-top: 25px;
+  border-bottom: 1px solid #a6a6a6;
+  margin-bottom: 20px; }
+  main.blog article.excerpt a.more {
+    font-size: 1.7em;
+    line-height: 1rem;
+    position: relative;
+    top: 0.03em; }
+
+main.blog article.blogarticle {
+  margin-top: 30px;
+  padding-bottom: 60px;
+  border-bottom: 2px solid silver;
+  margin-bottom: 50px; }
+
+main.blog div.teasers article.excerpt:last-child {
+  border-bottom: none; }
+
+nav.pagination {
+  float: none;
+  text-align: center;
+  height: 45px;
+  color: #a6a6a6; }
+  nav.pagination a.button {
+    display: inline-block;
+    padding: 5px 14px;
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+    color: inherit; }
+    nav.pagination a.button.older {
+      float: left; }
+    nav.pagination a.button.newer {
+      float: right; }
+  nav.pagination span.num-pages {
+    position: relative;
+    top: 0.5em; }
+
+/*# sourceMappingURL=blog.css.map */

assets/css/main.css

@@ -22,7 +22,7 @@ p {
 
 a {
   color: #2da301; }
-  a:active, a:hover {
+  a:active, a:hover, a:focus {
     color: #1f7001; }
 
 main div.container {

assets/scss/blog.scss

@@ -0,0 +1,105 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "mainvariables";
+
+$blog_color_meta: #a6a6a6;
+
+// change main.scss behavior
+body {
+
+}
+h2 {
+  margin-bottom: 5px;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: none;
+}
+
+
+// additional css
+main.blog {
+  .container {
+    max-width: 700px;
+  }
+  h1 a {
+    color: inherit;
+  }
+
+  article {
+    div.meta {
+      color: $blog_color_meta;
+      span.tags {
+        margin-left: 5px;
+        border-left: 1px solid $blog_color_meta;
+        padding-left: 6px;
+        a {color: inherit;}
+        a:after {content: ',';}
+        a:last-child:after {content: '';}
+      }
+    }
+  }
+
+  article.excerpt {
+    padding-bottom: 30px;
+    margin-top: 25px;
+    border-bottom: 1px solid $blog_color_meta;
+    margin-bottom: 20px;
+
+    a.more {
+      font-size: 1.7em;
+      line-height: 1rem;
+      position: relative;
+      top: 0.03em;
+    }
+  }
+
+  article.blogarticle {
+    margin-top: 30px;
+
+    padding-bottom: 60px;
+    border-bottom: 2px solid lighten($blog_color_meta, 10%);
+    margin-bottom: 50px;
+  }
+
+  div.teasers {
+    article.excerpt:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+nav.pagination {
+  float: none;
+  text-align: center;
+  height: 45px;
+  color: $blog_color_meta;
+  a.button {
+    display: inline-block;
+    padding: 5px 14px;
+    background-color: #fff;
+    border: 1px solid lighten($blog_color_meta, 20%);
+    border-radius: 10px;
+    color: inherit;
+    &.older {
+      float: left;
+    }
+    &.newer {
+      float: right;
+    }
+  }
+  span.num-pages {
+    position: relative;
+    top: 0.5em;
+  }
+}
+
+
+
+// ---- from boostrap ----
+//@import "images";

assets/scss/main.scss

@@ -28,7 +28,7 @@ p {
 }
 a {
   color: $link_color;
-  &:active, &:hover {
+  &:active, &:hover, &:focus {
     color: $link_active;
   }
 }

site/blueprints/blog.yaml

@@ -0,0 +1,16 @@
+title: Blog
+pages:
+  template:
+    - blogarticle
+  num: date
+  sort: flip
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  text:
+    label: Text
+    type:  textarea

site/blueprints/blogarticle.yaml

@@ -0,0 +1,23 @@
+title: Blog Article
+pages: false
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  date:
+    label: Date
+    type:  date
+    width: 1/4
+  tags:
+    label: Tags
+    type:  tags
+    width: 3/4
+  text:
+    label: Text
+    type:  textarea
+  meta-robots:
+    label: Metatag robots
+    type:  text

site/snippets/base/cont-header.php

@@ -9,12 +9,12 @@
 $subnav = false;
 if ($page->depth() == 1) {
   $baseSec = $page;
-  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() && $page->template() != 'blog' ) {
     $subnav = true;
   }
 }else if ($page->depth() == 2) {
   $baseSec = $page->parent();
-  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() && $page->template() != 'blogarticle' ) {
     $subnav = true;
   }
 }
@@ -26,7 +26,7 @@ if ($page->depth() == 1) {
       <ul class="nav mobileNav">
       <?php foreach ($site->children()->visible() as $p) : ?>
         <a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
-        <?php if ($p->hasVisibleChildren()) : ?>
+        <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
         <ul class="">
         <?php foreach ($p->children()->visible() as $c) : ?>
           <a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><li><?php echo $c->title() ?></li></a>
@@ -47,7 +47,7 @@ if ($page->depth() == 1) {
     </a>
     <?php endif; ?>
 
-    <nav>
+    <nav aria-hidden="true">
       <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
         Menü <i class="fa fa-bars"></i>
       </button>

site/snippets/blog-htmlhead.php

@@ -0,0 +1,40 @@
+<?php
+// -------------------------------------------
+// kirby snippet FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+if( $page->isHomePage() ) {
+  $title = $site->title()->html();
+}else if ($page->depth() == 2) {
+  $title = $page->parent()->title()->html().': '.$page->title()->html();
+}else {
+  $title = $page->title()->html().' | '.$site->title()->html();
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><?php echo $title ?> </title>
+  <meta name="description" content="<?php echo $site->description()->html() ?>">
+  <meta name="keywords" content="<?php echo $page->tags()->html() ?>">
+  <meta name="author" content="<?php echo $site->author()->html() ?>" >
+<?php if ($page->meta_robots()->html() != "") : ?>
+  <meta name="robots" content="<?php echo $page->meta_robots()->html() ?>">
+<?php endif; ?>
+
+  <?php echo css('assets/css/foundation.css') ?>
+
+  <?php echo css('assets/css/main.css') ?>
+
+  <?php echo css('assets/css/blog.css') ?>
+
+  <!-- Google web fonts -->
+  <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,700' rel='stylesheet' type='text/css'>
+</head>
+<body>

site/snippets/blogexcerpt.php

@@ -0,0 +1,22 @@
+<?php
+// -------------------------------------------
+// kirby snippet FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+
+// usage: snippet('blogexcerpt',["article"=>$article,"length"=>200,"base_url"=>$base_url])
+// -------------------------------------------
+
+$a = $article;
+?>
+<article class="excerpt">
+  <h2><a href="<?php echo $a->url()?>"><?php echo $a->title()->html() ?></a></h2>
+  <p><?php echo $a->text()->excerpt($length) ?>
+    <a class="more" href="<?php echo $a->url()?>">»</a>
+  </p>
+  <div class="meta">
+    <time datetime="<?php echo $a->date('Y-m-d') ?>"><?php echo $a->date('d. M. Y') ?></time>
+    <?php echo tags($base_url, $a); ?>
+  </div>
+</article>

site/templates/blog.php

@@ -0,0 +1,83 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$base_url   = $site->find('blog')->url();
+function tags($base_url, $article) {
+  $tags = explode(',',(string)$article->tags());
+
+  if (!empty($tags[0])) {
+    $return_val = '<span class="tags">';
+    foreach ($tags as $tag) {
+      $url = $base_url.'/tag:'.$tag;
+      $return_val .= '<a href="'.$url.'">' . $tag . '</a> ';
+    }
+    $return_val .= '</span>';
+    return $return_val;
+  } else {
+    return '';
+  }
+}
+
+$articles   = $page->children()->visible()->flip();
+
+$title      = $page->title()->html();
+
+if($tag = param('tag')) {
+  $articles = $articles->filterBy('tags', $tag, ',');
+  $title   .= ' - '.$tag;
+}
+
+$articles   = $articles->paginate(6);
+$pagination = $articles->pagination();
+
+snippet('blog-htmlhead');
+snippet('base/cont-header');
+?>
+
+<main class="section blog">
+  <div class="container">
+
+    <h1><a href="<?php echo $base_url ?>"><?php echo $title ?></a></h1>
+    <?php echo $page->text()->kirbytext(); ?>
+
+<?php if($pagination->hasPages() && $pagination->page() != 1): ?>
+    <nav class="pagination">
+      <?php if($pagination->hasNextPage()): ?>
+      <a class="button older" href="<?php echo $pagination->nextPageURL() ?>">&lsaquo; älter</a>
+      <?php endif ?>
+      <span class="num-pages">Seite <?php echo $pagination->page() ?> von <?php echo $pagination->pages() ?></span>
+      <?php if($pagination->hasPrevPage()): ?>
+      <a class="button newer" href="<?php echo $pagination->prevPageURL() ?>">neuer &rsaquo;</a>
+      <?php endif ?>
+    </nav>
+<?php endif ?>
+
+
+<?php foreach($articles as $a) {
+  echo snippet('blogexcerpt',["article"=>$a,"length"=>200,"base_url"=>$base_url]);
+}?>
+
+
+<?php if($pagination->hasPages()): ?>
+    <nav class="pagination">
+      <?php if($pagination->hasNextPage()): ?>
+      <a class="button older" href="<?php echo $pagination->nextPageURL() ?>">&lsaquo; älter</a>
+      <?php endif ?>
+      <span class="num-pages">Seite <?php echo $pagination->page() ?> von <?php echo $pagination->pages() ?></span>
+      <?php if($pagination->hasPrevPage()): ?>
+      <a class="button newer" href="<?php echo $pagination->prevPageURL() ?>">neuer &rsaquo;</a>
+      <?php endif ?>
+    </nav>
+<?php endif ?>
+
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end', ["bs_util"=>1,
+                                "bs_collapse"=>1]) ?>

site/templates/blogarticle.php

@@ -0,0 +1,57 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$base_url   = $site->find('blog')->url();
+function tags($base_url, $article) {
+  $tags = explode(',',(string)$article->tags());
+
+  if (!empty($tags[0])) {
+    $return_val = '<span class="tags">';
+    foreach ($tags as $tag) {
+      $url = $base_url.'/tag:'.$tag;
+      $return_val .= '<a href="'.$url.'">' . $tag . '</a> ';
+    }
+    $return_val .= '</span>';
+    return $return_val;
+  } else {
+    return '';
+  }
+}
+
+snippet('blog-htmlhead');
+snippet('base/cont-header');
+?>
+
+<main class="section blog">
+  <div class="container">
+    <article class="blogarticle">
+
+      <h1><?php echo $page->title()->html() ?></h1>
+      <?php echo $page->text()->kirbytext(); ?>
+
+    </article>
+
+<?php if($page->hasPrevVisible() || $page->hasNextVisible()): ?>
+    <div class="teasers">
+      <?php if($page->hasNextVisible()) {
+        echo snippet('blogexcerpt',["article"=>$page->nextVisible(),"length"=>200,"base_url"=>$base_url]);
+      } ?>
+      <?php if($page->hasPrevVisible()) {
+        echo snippet('blogexcerpt',["article"=>$page->prevVisible(),"length"=>200,"base_url"=>$base_url]);
+      } ?>
+    </div>
+<?php endif ?>
+
+
+
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end', ["bs_util"=>1,
+                                "bs_collapse"=>1]) ?>