Add bookmark pagination

README.md

@@ -9,7 +9,7 @@ A little project because I haven't made anything new in a while, I would like to
 * [x] Import from Pinboard.in JSON export
 * [x] Bookmark permalink
 * [x] Bookmark index
-* [ ] Bookmark pagination
+* [x] Bookmark pagination
 * [ ] Editing
 * [ ] Tag cloud
 * [ ] Tag permalink

app/Providers/AppServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Pagination\Paginator;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -11,7 +12,8 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        Paginator::defaultView('pagination.default');
+        Paginator::defaultSimpleView('pagination.simple-default');
     }
 
     /**

resources/sass/app.scss

@@ -14,6 +14,9 @@ body {
     background-color: #335C67;
 }
 
+@import 'components/bookmark';
+@import 'components/pagination';
+
 h1 {
     color: #FFF3B0;
     text-align: center;
@@ -24,75 +27,3 @@ h1 {
     margin: 1em auto;
 }
 
-.bookmark {
-    display: grid;
-    align-items: center;
-    gap: 0px 0px;
-    grid-template-areas:
-    "title title"
-    "href href"
-    "description description"
-    "date tags";
-
-    margin-bottom: 1em;
-    padding: 0;
-    border: 2px solid #540B0E;
-    background-color: #FFF3B0;
-
-    &-title {
-        margin: 0;
-        padding: 1ex;
-        background-color: #E09F3E;
-        grid-area: title;
-        font-weight: bold;
-    }
-
-    &-href,
-    &-description,
-    &-date,
-    &-tags {
-        padding: 1ex;
-        margin: 0;
-    }
-
-    &-href,
-    &-description,
-    &-date {
-        font-size: 0.9em;
-    }
-
-    &-href {
-        grid-area: href;
-    }
-
-    &-description {
-        grid-area: description;
-
-        > p {
-            border-left: 3px solid #9E2A2B;
-            margin: 0;
-            padding: 0.5ex 0 0.5ex 1ex;
-        }
-    }
-
-    &-date {
-        grid-area: date;
-    }
-
-    &-tags {
-        font-size: 0.8em;
-        grid-area: tags;
-        text-align: right;
-    }
-
-    &-tag {
-        display: inline-block;
-
-        padding: 0.5ex 0.8ex;
-        margin: 0 0 0.2ex 0;
-
-        border-radius: 7px;
-        background-color: #9E2A2B;
-        color: #FFF3B0;
-    }
-}

resources/sass/components/_bookmark.scss

@@ -0,0 +1,72 @@
+.bookmark {
+    display: grid;
+    align-items: center;
+    gap: 0px 0px;
+    grid-template-areas:
+    "title title"
+    "href href"
+    "description description"
+    "date tags";
+
+    margin-bottom: 1em;
+    padding: 0;
+    border: 2px solid #540B0E;
+    background-color: #FFF3B0;
+
+    &-title {
+        margin: 0;
+        padding: 1ex;
+        background-color: #E09F3E;
+        grid-area: title;
+        font-weight: bold;
+    }
+
+    &-href,
+    &-description,
+    &-date,
+    &-tags {
+        padding: 1ex;
+        margin: 0;
+    }
+
+    &-href,
+    &-description,
+    &-date {
+        font-size: 0.9em;
+    }
+
+    &-href {
+        grid-area: href;
+    }
+
+    &-description {
+        grid-area: description;
+
+        > p {
+            border-left: 3px solid #9E2A2B;
+            margin: 0;
+            padding: 0.5ex 0 0.5ex 1ex;
+        }
+    }
+
+    &-date {
+        grid-area: date;
+    }
+
+    &-tags {
+        font-size: 0.8em;
+        grid-area: tags;
+        text-align: right;
+    }
+
+    &-tag {
+        display: inline-block;
+
+        padding: 0.5ex 0.8ex;
+        margin: 0 0 0.2ex 0;
+
+        border-radius: 7px;
+        background-color: #9E2A2B;
+        color: #FFF3B0;
+    }
+}

resources/sass/components/_pagination.scss

@@ -0,0 +1,39 @@
+ul.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    margin: 1em 0;
+    padding: 0;
+
+    > li {
+        display: block;
+        margin: 0;
+
+        &.disabled {
+            color: #aaa;
+        }
+
+        > a, span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+
+            min-height: 2em;
+            min-width: 2em;
+        }
+
+        &.active,
+        > a,
+        > a:active,
+        > a:visited {
+            color: #fff;
+        }
+
+        > a:hover {
+            color: #88f;
+        }
+    }
+}

resources/views/bookmarks/index.blade.php

@@ -2,8 +2,12 @@
 
 @section('content')
 
+{{ $bookmarks->links() }}
+
 @foreach ($bookmarks as $bookmark)
     <x-bookmark :bookmark="$bookmark" />
 @endforeach
 
+{{ $bookmarks->links() }}
+
 @endsection

resources/views/layouts/app.blade.php

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <title>urlsnail</title>
+    <title>url snail</title>
     @vite(['resources/sass/app.scss'])
 </head>
 <body>

resources/views/pagination/default.blade.php

@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="active" aria-current="page"><span>{{ $page }}</span></li>
+                        @else
+                            <li><a href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif

resources/views/pagination/simple-default.blade.php

@@ -0,0 +1,19 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
+            @else
+                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
+            @else
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
+            @endif
+        </ul>
+    </nav>
+@endif