Added posts and pagination

2022-05-22 08:15:41 +02:00 · 2022-05-22 08:15:41 +02:00 · 5bf7bfceee
commit 5bf7bfceee
parent 16009fe39e
17 changed files with 182 additions and 18 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,4 +11,5 @@ package-lock.json
 /build_staging/
 /build_production/
 /source/assets/build/
-/build_local/
+/build_local/
+/source/_posts/
--- a/README.md
+++ b/README.md
@ -1,3 +1,6 @@
 # Nikus Blog Template

-Here is the template of my blog, released under the MIT license.
+Here is the template of my blog, released under the MIT license.
+
+Format Date for Posts like here
+https://unicode-org.github.io/icu/userguide/format_parse/datetime/#date-field-symbol-table
--- a/composer.json
+++ b/composer.json
@ -1,5 +1,6 @@
 {
    "require": {
-        "tightenco/jigsaw": "^1.3"
+        "tightenco/jigsaw": "^1.3",
+        "ext-intl": "*"
    }
 }
--- a/config.php
+++ b/config.php
@ -1,9 +1,33 @@
 <?php
-
 return [
    'production' => false,
    'baseUrl' => '',
-    'title' => 'Jigsaw',
-    'description' => 'Website description.',
-    'collections' => [],
+    'language' => 'de',
+    'title' => 'Nikus Blog',
+    'owner' => 'Niku',
+    'email' => 'publicmail [at] [thisDomain] [dot] de',
+    'description' => 'Blogs über IT-Stuff, meine Projekte und allem was sonst so anfällt.',
+    'locale' => 'de_DE',
+    'dateFormat' => 'd. MMMM yyyy',
+    'collections' => [
+        'posts' => [
+            'excerpt' => function ($page, $length = 75) {
+                if (count(explode(' ', strip_tags($page->getContent()))) <= $length){
+                    return strip_tags($page->getContent());
+                } else {
+                    return implode(' ', array_slice(explode(' ', strip_tags($page->getContent())), 0, $length)) . '...';
+                }
+            }
+        ]
+    ],
+    'dateTranslated' => function ($page, $date) {
+        $format = new IntlDateFormatter(
+            $page->locale,
+            IntlDateFormatter::NONE,
+            IntlDateFormatter::NONE,
+            Null,
+            Null,
+            $page->dateFormat);
+        return datefmt_format($format, $date);
+    }
 ];
--- a/source/_assets/css/main.css
+++ b/source/_assets/css/main.css
@ -1,6 +1,6 @@
@font-face {
    font-family: 'Custom';
-    src: url("JetBrainsMono[wght].ttf");
+    src: url("/assets/fonts/JetBrainsMono[wght].ttf");
 }

 * {
@ -83,4 +83,56 @@ main hr {

 main hr:last-of-type {
    display: none;
-}
+}
+
+section.paginationNavigation {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+}
+
+footer {
+    margin-top: 4rem;
+    border-top: thin solid;
+}
+
+footer div {
+    max-width: 950px;
+    margin: 0 auto;
+    padding: 1rem;
+    display: flex;
+    gap: 3rem;
+}
+
+footer div section:first-child {
+    flex: 1;
+}
+
+footer div section:last-child {
+    flex: .8;
+}
+
+footer div section p {
+    font-size: .8rem;
+    margin: .2rem 0;
+}
+
+@media (max-width: 500px) {
+    footer div {
+        display: block;
+    }
+
+    footer div section:last-child {
+        margin-top: 1rem;
+    }
+}
+
+@media (max-width: 750px) {
+    article section {
+        display: block;
+    }
+
+    article section h2 {
+        padding-bottom: .5rem;
+    }
+}
--- a/source/_layouts/main.blade.php
+++ b/source/_layouts/main.blade.php
@ -6,17 +6,17 @@
        <link rel="canonical" href="{{ $page->getUrl() }}">
        <meta name="description" content="{{ $page->description }}">
        <meta name="color-scheme" content="dark light">
-        <title>{{ $page->title }}</title>
+        <title>{{ $page->owner }}s Blog</title>
        <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
    </head>
    <body>
    <header>
-        <h1>Nikus Blog</h1>
+        <h1>{{ $page->owner }}s Blog</h1>
        <nav>
            <ul>
-                <li aria-current="page"><a href="#">Home</a></li>
-                <li><a href="#">Projects</a></li>
-                <li><a href="#">About</a></li>
+                <li @if($page->getPath() === '/')  aria-current="page" @endif><a href="/">Home</a></li>
+                <li @if($page->getPath() === '/projects')  aria-current="page" @endif><a href="/projects">Projects</a></li>
+                <li @if($page->getPath() === '/about')  aria-current="page" @endif><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
@ -24,7 +24,27 @@
        @yield('body')
    </main>
    <footer>
-        <p>Hello World</p>
+        <div>
+            <section>
+                <p>{{ $page->description }}</p>
+                <p>Alle Shitposts hier sind unter der <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
+                lizensiert, außer sie sind anders gekennzeichent.</p>
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a>
+                <br /><br />
+                <img alt="Always wear your programming socks and thigh highs bedside" src="{{ '/assets/images/programmingsocks.gif' }}">
+                <img alt="An enby flag with the text: Maintained by a queer folk" src="{{ '/assets/images/nocookie.gif' }}">
+                <img alt="This site is certified 100% Cookie free" src="{{ '/assets/images/enby.png' }}">
+                <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fblog.nikurasu.de"><img alt="W3C HTML5 badge" src="{{ '/assets/images/html5.png' }}"></a>
+                <img alt="Pride and a LGBTQ flag" src="{{ '/assets/images/pride.gif' }}">
+                <img alt="Not tracked" src="{{ '/assets/images/nottracked.png' }}">
+            </section>
+            <section>
+                <p>Linkpage: <a href="https://nikurasu.de">https://nikurasu.de</a></p>
+                <p>E-Mail: <a href="mailTo({{ $page->email }})">{{ $page->email }}</p>
+                <p><a href="/feed.rss">RSS-Feed</a></p>
+                <p><a href="#">Proof of Identity</a></p>
+            </section>
+        </div>
    </footer>
    </body>
 </html>
--- a/source/_layouts/post.blade.php
+++ b/source/_layouts/post.blade.php
@ -0,0 +1,7 @@
+@extends('_layouts.main')
+
+@section('body')
+    <h1>{{ $page->title }}</h1>
+    <small>{{ $page->dateTranslated($page->date)  }}</small>
+    @yield('content')
+@endsection
--- a/source/_posts/my-second-post.md
+++ b/source/_posts/my-second-post.md
@ -0,0 +1,6 @@
+---
+extends: _layouts.post
+title: My second Blog Post
+date: 2017-03-27
+---
+Non interesting post QwQ
--- a/source/about.blade.php
+++ b/source/about.blade.php
@ -0,0 +1,6 @@
+@extends('_layouts.main')
+
+@section('body')
+    <h1>Hello World</h1>
+    <p>{{ $page->getPath() }}</p>
+@endsection
--- a/source/assets/images/enby.png
+++ b/source/assets/images/enby.png
--- a/source/assets/images/html5.png
+++ b/source/assets/images/html5.png
--- a/source/assets/images/nocookie.gif
+++ b/source/assets/images/nocookie.gif
--- a/source/assets/images/nottracked.png
+++ b/source/assets/images/nottracked.png
--- a/source/assets/images/pride.gif
+++ b/source/assets/images/pride.gif
--- a/source/assets/images/programmingsocks.gif
+++ b/source/assets/images/programmingsocks.gif
--- a/source/index.blade.php
+++ b/source/index.blade.php
@ -1,7 +1,45 @@
+---
+pagination:
+    collection: posts
+    perPage: 5
+---
+
@extends('_layouts.main')

@section('body')
-<div>
-    <h1>Hello world!</h1>
-</div>
+@foreach($pagination->items as $post)
+    <article>
+        <section>
+            <h2><a href="{{ $post->getUrl() }}">{{ $post->title }}</a></h2><small>{{ $page->dateTranslated($post->date) }}</small>
+        </section>
+        <section>
+            <p>
+                {{ $post->excerpt() }}
+            </p>
+        </section>
+    </article>
+    <hr>
+@endforeach
+<section class="paginationNavigation">
+    @if ($previous = $pagination->previous)
+        <a href="{{ $page->baseUrl }}{{ $pagination->first }}">&lt;&lt;</a>&nbsp;
+        <a href="{{ $page->baseUrl }}{{ $previous }}">&lt;</a>&nbsp;
+    @else
+        &lt;&lt;&nbsp;&lt;&nbsp;
+    @endif
+
+    @foreach ($pagination->pages as $pageNumber => $path)
+        @if($pageNumber !== 1)&nbsp;@endif
+            <a href="{{ $page->baseUrl }}{{ $path }}"
+           class="{{ $pagination->currentPage == $pageNumber ? 'selected' : '' }}">{{ $pageNumber }}</a>
+    @endforeach
+
+    @if ($next = $pagination->next)
+            &nbsp;<a href="{{ $page->baseUrl }}{{ $next }}">&gt;</a>&nbsp;
+        <a href="{{ $page->baseUrl }}{{ $pagination->last }}">&gt;&gt;</a>
+    @else
+            &nbsp;&gt;&nbsp;&gt;&gt;
+    @endif
+</section>
+
@endsection
--- a/source/projects.blade.php
+++ b/source/projects.blade.php
@ -0,0 +1,6 @@
+@extends('_layouts.main')
+
+@section('body')
+    <h1>Hello World</h1>
+    <p>{{ $page->getPath() }}</p>
+@endsection