Add pagincation to home page

4 files changed, 15 insertions, 73 deletions

diff --git a/source/_nav/menu-responsive.blade.php b/source/_nav/menu-responsive.blade.php
deleted file mode 100644
index fcb1879..0000000
--- a/source/_nav/menu-responsive.blade.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<nav id="js-nav-menu" class="nav-menu hidden lg:hidden">
-    <ul class="my-0">
-        <li class="pl-4">
-            <a
-                title="{{ $page->siteName }} Blog"
-                href="/blog"
-                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/blog') ? 'active text-blue' : '' }}"
-            >Blog</a>
-        </li>
-        <li class="pl-4">
-            <a
-                title="{{ $page->siteName }} About"
-                href="/about"
-                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/about') ? 'active text-blue' : '' }}"
-            >About</a>
-        </li>
-        <li class="pl-4">
-            <a
-                title="{{ $page->siteName }} Contact"
-                href="/contact"
-                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/contact') ? 'active text-blue' : '' }}"
-            >Contact</a>
-        </li>
-    </ul>
-</nav>
diff --git a/source/_nav/menu-toggle.blade.php b/source/_nav/menu-toggle.blade.php
deleted file mode 100644
index 8ea3b7a..0000000
--- a/source/_nav/menu-toggle.blade.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<button class="flex justify-center items-center bg-blue-500 border border-blue-500 h-10 px-5 rounded-full lg:hidden focus:outline-none"
-    onclick="navMenu.toggle()"
->
-    <svg id="js-nav-menu-show" xmlns="http://www.w3.org/2000/svg"
-        class="fill-current text-white h-9 w-4" viewBox="0 0 32 32"
-    >
-        <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
-    </svg>
-
-    <svg id="js-nav-menu-hide" xmlns="http://www.w3.org/2000/svg"
-        class="hidden fill-current text-white h-9 w-4" viewBox="0 0 36 30"
-    >
-        <polygon points="32.8,4.4 28.6,0.2 18,10.8 7.4,0.2 3.2,4.4 13.8,15 3.2,25.6 7.4,29.8 18,19.2 28.6,29.8 32.8,25.6 22.2,15 "/>
-    </svg>
-</button>
-
-@push('scripts')
-<script>
-    const navMenu = {
-        toggle() {
-            const menu = document.getElementById('js-nav-menu');
-            menu.classList.toggle('hidden');
-            menu.classList.toggle('lg:block');
-            document.getElementById('js-nav-menu-hide').classList.toggle('hidden');
-            document.getElementById('js-nav-menu-show').classList.toggle('hidden');
-        },
-    }
-</script>
-@endpush
diff --git a/source/_nav/menu.blade.php b/source/_nav/menu.blade.php
deleted file mode 100644
index b8708d8..0000000
--- a/source/_nav/menu.blade.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<nav class="hidden lg:flex items-center justify-end text-lg">
-    <a title="{{ $page->siteName }} Blog" href="/blog"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/blog') ? 'active text-blue-600' : '' }}">
-        Blog
-    </a>
-
-    <a title="{{ $page->siteName }} About" href="/about"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/about') ? 'active text-blue-600' : '' }}">
-        About
-    </a>
-
-    <a title="{{ $page->siteName }} Contact" href="/contact"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/contact') ? 'active text-blue-600' : '' }}">
-        Contact
-    </a>
-</nav>
diff --git a/source/index.blade.php b/source/index.blade.php
index d474972..998f56a 100644
--- a/source/index.blade.php
+++ b/source/index.blade.php
@@ -1,9 +1,21 @@
+---
+pagination:
+  collection: posts
+---
 @extends('_layouts.master')
 
 @section('article')
     <ol>
-    @foreach ($posts as $post)
-        <li><a href="{{ $post->getUrl() }}">{{$post->title }}</a></li> 
-    @endforeach
+        @foreach ($pagination->items as $post)
+            <li><a href="{{ $post->getUrl() }}">{{$post->title }}</a></li> 
+        @endforeach
     </ol>
+    <nav>
+        @if ($pagination->previous)
+            <a href="{{ $pagination->previous }}">See more recent posts</a>
+        @endif
+        @if ($pagination->next)
+            <a href="{{ $pagination->next }}">See older posts</a>
+        @endif
+    </nav>
 @endsection