diff --git a/README.md b/README.md
index 3139bca..505c201 100644
--- a/README.md
+++ b/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
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..780294e 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/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');
}
/**
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index ddbb69c..abf61df 100644
--- a/resources/sass/app.scss
+++ b/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;
- }
-}
diff --git a/resources/sass/components/_bookmark.scss b/resources/sass/components/_bookmark.scss
new file mode 100644
index 0000000..2698d36
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/resources/sass/components/_pagination.scss b/resources/sass/components/_pagination.scss
new file mode 100644
index 0000000..6de8435
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/resources/views/bookmarks/index.blade.php b/resources/views/bookmarks/index.blade.php
index 77055d9..cceed46 100644
--- a/resources/views/bookmarks/index.blade.php
+++ b/resources/views/bookmarks/index.blade.php
@@ -2,8 +2,12 @@
@section('content')
+{{ $bookmarks->links() }}
+
@foreach ($bookmarks as $bookmark)