From 2f713a2d9371c0479267fb4993a27e4ff430930b Mon Sep 17 00:00:00 2001
From: Krzysztof Rewak <krzysztof.rewak@blumilk.pl>
Date: Mon, 19 Aug 2024 14:20:48 +0200
Subject: [PATCH] #24 - news (#39)

* #24 - news draft

* #24 - news pagination

* #24 - composer update

* #24 - gha php bump

* #24 - code review changes

* #24 - lintf

* #24 - lintf

* #24 - sanitizeHtml

* #24 - csf

* #24 - conflicts
---
 .github/workflows/test-and-lint-php.yml       |   2 +-
 .../Controllers/Public/NewsController.php     |  22 +-
 app/Models/GradeColumn.php                    |   7 +-
 app/Models/News.php                           |   3 +
 app/Observers/NewsObserver.php                |  45 +++
 composer.json                                 |   2 +-
 composer.lock                                 |  42 +--
 config/app.php                                |   2 +-
 database/factories/NewsFactory.php            |  16 +-
 ...> 2023_09_22_113912_create_news_table.php} |   0
 database/seeders/DemoSeeder.php               |  16 +
 lang/pl/validation.php                        |   1 +
 package-lock.json                             | 336 +++++++++++-------
 package.json                                  |   1 +
 resources/js/Components/BackgroundGrid.vue    |  13 +-
 resources/js/Components/Pagination.vue        |  21 ++
 resources/js/Layouts/PublicLayout.vue         |   5 +-
 resources/js/Pages/Public/News.vue            |  11 -
 resources/js/Pages/Public/News/Index.vue      |  61 ++++
 resources/js/Pages/Public/News/News.vue       |  32 ++
 routes/web.php                                |   3 +-
 tests/Feature/NewsSlugTest.php                |  72 ++++
 22 files changed, 528 insertions(+), 185 deletions(-)
 create mode 100644 app/Observers/NewsObserver.php
 rename database/migrations/{2023_10_01_181311_create_news_table.php => 2023_09_22_113912_create_news_table.php} (100%)
 create mode 100644 database/seeders/DemoSeeder.php
 create mode 100644 resources/js/Components/Pagination.vue
 delete mode 100644 resources/js/Pages/Public/News.vue
 create mode 100644 resources/js/Pages/Public/News/Index.vue
 create mode 100644 resources/js/Pages/Public/News/News.vue
 create mode 100644 tests/Feature/NewsSlugTest.php

diff --git a/.github/workflows/test-and-lint-php.yml b/.github/workflows/test-and-lint-php.yml
index 0339cfb..f707fc8 100644
--- a/.github/workflows/test-and-lint-php.yml
+++ b/.github/workflows/test-and-lint-php.yml
@@ -49,7 +49,7 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # 2.31.1
         with:
-          php-version: 8.2
+          php-version: 8.3
           extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, pdo_pgsql, intl
           coverage: none
 
diff --git a/app/Http/Controllers/Public/NewsController.php b/app/Http/Controllers/Public/NewsController.php
index 74cb5b5..f900099 100644
--- a/app/Http/Controllers/Public/NewsController.php
+++ b/app/Http/Controllers/Public/NewsController.php
@@ -5,14 +5,30 @@
 namespace App\Http\Controllers\Public;
 
 use App\Http\Controllers\Controller;
+use App\Models\News;
 use Inertia\Response;
 
 class NewsController extends Controller
 {
-    public function __invoke(): Response
+    public function index(): Response
     {
-        return inertia("Public/News", [
-            "title" => "mgr inż.",
+        $news = News::query()
+            ->orderBy("published_at", "desc")
+            ->paginate(9);
+
+        return inertia("Public/News/Index", [
+            "paginator" => $news,
+        ]);
+    }
+
+    public function get(string $slug): Response
+    {
+        $news = News::query()
+            ->where("slug", $slug)
+            ->sole();
+
+        return inertia("Public/News/News", [
+            "news" => $news,
         ]);
     }
 }
diff --git a/app/Models/GradeColumn.php b/app/Models/GradeColumn.php
index 3782dca..e087aa7 100644
--- a/app/Models/GradeColumn.php
+++ b/app/Models/GradeColumn.php
@@ -6,6 +6,7 @@
 
 use App\Observers\GradeColumnObserver;
 use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Attributes\ObservedBy;
 use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -23,6 +24,7 @@
  * @property-read Group $group
  * @property-read Collection<Grade> $grades
  */
+#[ObservedBy(GradeColumnObserver::class)]
 class GradeColumn extends Model
 {
     use HasFactory;
@@ -46,9 +48,4 @@ public function grades(): HasMany
     {
         return $this->hasMany(Grade::class);
     }
-
-    protected static function booted(): void
-    {
-        self::observe(GradeColumnObserver::class);
-    }
 }
diff --git a/app/Models/News.php b/app/Models/News.php
index f1fef2c..db3ddee 100644
--- a/app/Models/News.php
+++ b/app/Models/News.php
@@ -4,7 +4,9 @@
 
 namespace App\Models;
 
+use App\Observers\NewsObserver;
 use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Attributes\ObservedBy;
 use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -16,6 +18,7 @@
  * @property string $content
  * @property Carbon $published_at
  */
+#[ObservedBy(NewsObserver::class)]
 class News extends Model
 {
     use HasFactory;
diff --git a/app/Observers/NewsObserver.php b/app/Observers/NewsObserver.php
new file mode 100644
index 0000000..60a25dd
--- /dev/null
+++ b/app/Observers/NewsObserver.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Observers;
+
+use App\Models\News;
+use Illuminate\Support\Str;
+
+class NewsObserver
+{
+    public function creating(News $news): void
+    {
+        if ($news->slug) {
+            return;
+        }
+
+        $slug = Str::slug($news->published_at->format("Y-m-d") . " " . $news->title);
+
+        if (!$this->checkIfSlugExists($slug)) {
+            $news->slug = $slug;
+
+            return;
+        }
+
+        $i = 2;
+
+        while (true) {
+            $newSlug = Str::slug($slug . " " . $i);
+
+            if (!$this->checkIfSlugExists($newSlug)) {
+                $news->slug = $newSlug;
+
+                return;
+            }
+
+            $i++;
+        }
+    }
+
+    protected function checkIfSlugExists(string $slug): bool
+    {
+        return News::query()->where("slug", $slug)->count() > 0;
+    }
+}
diff --git a/composer.json b/composer.json
index a0f6b7c..e3326e0 100644
--- a/composer.json
+++ b/composer.json
@@ -6,7 +6,7 @@
     "keywords": ["framework", "laravel"],
     "license": "MIT",
     "require": {
-        "php": "^8.2",
+        "php": "^8.3",
         "ext-pdo": "*",
         "fakerphp/faker": "^1.23.1",
         "guzzlehttp/guzzle": "^7.9.2",
diff --git a/composer.lock b/composer.lock
index dad7ab6..30807be 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "aa5727363ee78c15b2176e73e47b3f90",
+    "content-hash": "debcb27fca04708e42d3f6f9f0e0562b",
     "packages": [
         {
             "name": "brick/math",
@@ -9097,16 +9097,16 @@
         },
         {
             "name": "spatie/backtrace",
-            "version": "1.6.1",
+            "version": "1.6.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/backtrace.git",
-                "reference": "8373b9d51638292e3bfd736a9c19a654111b4a23"
+                "reference": "1a9a145b044677ae3424693f7b06479fc8c137a9"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/backtrace/zipball/8373b9d51638292e3bfd736a9c19a654111b4a23",
-                "reference": "8373b9d51638292e3bfd736a9c19a654111b4a23",
+                "url": "https://api.github.com/repos/spatie/backtrace/zipball/1a9a145b044677ae3424693f7b06479fc8c137a9",
+                "reference": "1a9a145b044677ae3424693f7b06479fc8c137a9",
                 "shasum": ""
             },
             "require": {
@@ -9144,7 +9144,7 @@
                 "spatie"
             ],
             "support": {
-                "source": "https://github.com/spatie/backtrace/tree/1.6.1"
+                "source": "https://github.com/spatie/backtrace/tree/1.6.2"
             },
             "funding": [
                 {
@@ -9156,20 +9156,20 @@
                     "type": "other"
                 }
             ],
-            "time": "2024-04-24T13:22:11+00:00"
+            "time": "2024-07-22T08:21:24+00:00"
         },
         {
             "name": "spatie/error-solutions",
-            "version": "1.0.5",
+            "version": "1.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/error-solutions.git",
-                "reference": "4bb6c734dc992b2db3e26df1ef021c75d2218b13"
+                "reference": "ae7393122eda72eed7cc4f176d1e96ea444f2d67"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/error-solutions/zipball/4bb6c734dc992b2db3e26df1ef021c75d2218b13",
-                "reference": "4bb6c734dc992b2db3e26df1ef021c75d2218b13",
+                "url": "https://api.github.com/repos/spatie/error-solutions/zipball/ae7393122eda72eed7cc4f176d1e96ea444f2d67",
+                "reference": "ae7393122eda72eed7cc4f176d1e96ea444f2d67",
                 "shasum": ""
             },
             "require": {
@@ -9222,7 +9222,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/error-solutions/issues",
-                "source": "https://github.com/spatie/error-solutions/tree/1.0.5"
+                "source": "https://github.com/spatie/error-solutions/tree/1.1.1"
             },
             "funding": [
                 {
@@ -9230,20 +9230,20 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-07-09T12:13:32+00:00"
+            "time": "2024-07-25T11:06:04+00:00"
         },
         {
             "name": "spatie/flare-client-php",
-            "version": "1.7.0",
+            "version": "1.8.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/flare-client-php.git",
-                "reference": "097040ff51e660e0f6fc863684ac4b02c93fa234"
+                "reference": "180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/flare-client-php/zipball/097040ff51e660e0f6fc863684ac4b02c93fa234",
-                "reference": "097040ff51e660e0f6fc863684ac4b02c93fa234",
+                "url": "https://api.github.com/repos/spatie/flare-client-php/zipball/180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122",
+                "reference": "180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122",
                 "shasum": ""
             },
             "require": {
@@ -9261,7 +9261,7 @@
                 "phpstan/extension-installer": "^1.1",
                 "phpstan/phpstan-deprecation-rules": "^1.0",
                 "phpstan/phpstan-phpunit": "^1.0",
-                "spatie/phpunit-snapshot-assertions": "^4.0|^5.0"
+                "spatie/pest-plugin-snapshots": "^1.0|^2.0"
             },
             "type": "library",
             "extra": {
@@ -9291,7 +9291,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/flare-client-php/issues",
-                "source": "https://github.com/spatie/flare-client-php/tree/1.7.0"
+                "source": "https://github.com/spatie/flare-client-php/tree/1.8.0"
             },
             "funding": [
                 {
@@ -9299,7 +9299,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-12T14:39:14+00:00"
+            "time": "2024-08-01T08:27:26+00:00"
         },
         {
             "name": "spatie/ignition",
@@ -9803,7 +9803,7 @@
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
-        "php": "^8.2",
+        "php": "^8.3",
         "ext-pdo": "*"
     },
     "platform-dev": [],
diff --git a/config/app.php b/config/app.php
index 9794b54..9e87668 100644
--- a/config/app.php
+++ b/config/app.php
@@ -8,7 +8,7 @@
     "debug" => (bool)env("APP_DEBUG", false),
     "url" => env("APP_URL", "http://localhost"),
     "asset_url" => env("ASSET_URL"),
-    "timezone" => env("APP_TIMEZONE", "UTC"),
+    "timezone" => env("APP_TIMEZONE", "Europe/Warsaw"),
     "locale" => "pl",
     "fallback_locale" => "en",
     "faker_locale" => "pl",
diff --git a/database/factories/NewsFactory.php b/database/factories/NewsFactory.php
index be0d6ca..17cafa6 100644
--- a/database/factories/NewsFactory.php
+++ b/database/factories/NewsFactory.php
@@ -4,21 +4,27 @@
 
 namespace Database\Factories;
 
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Factories\Factory;
-use Illuminate\Support\Str;
 
 class NewsFactory extends Factory
 {
+    protected const array NEWS_TITLES = [
+        "Odwołane zajęcia",
+        "Przeniesione zajęcia",
+        "Nieobecność",
+        "Początek roku akademickiego",
+        "Koniec roku akademickiego",
+        "Terminy egzaminów",
+    ];
+
     public function definition(): array
     {
-        $title = fake()->unique()->name();
+        $title = fake()->randomElement(static::NEWS_TITLES);
 
         return [
             "title" => $title,
-            "slug" => Str::slug($title),
             "content" => fake()->realText(),
-            "published_at" => Carbon::now(),
+            "published_at" => fake()->dateTimeThisYear(),
         ];
     }
 }
diff --git a/database/migrations/2023_10_01_181311_create_news_table.php b/database/migrations/2023_09_22_113912_create_news_table.php
similarity index 100%
rename from database/migrations/2023_10_01_181311_create_news_table.php
rename to database/migrations/2023_09_22_113912_create_news_table.php
diff --git a/database/seeders/DemoSeeder.php b/database/seeders/DemoSeeder.php
new file mode 100644
index 0000000..201a9cf
--- /dev/null
+++ b/database/seeders/DemoSeeder.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\News;
+use Illuminate\Database\Seeder;
+
+class DemoSeeder extends Seeder
+{
+    public function run(): void
+    {
+        News::factory(20)->create();
+    }
+}
diff --git a/lang/pl/validation.php b/lang/pl/validation.php
index cb5b43d..0169d94 100644
--- a/lang/pl/validation.php
+++ b/lang/pl/validation.php
@@ -129,6 +129,7 @@
         "university_name" => "nazwa uczelni",
         "department_name" => "nazwa wydziału",
         "title" => "tytuł",
+        "content" => "treść",
         "value" => "opis",
     ],
 ];
diff --git a/package-lock.json b/package-lock.json
index 672e037..119a41b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
                 "lodash": "^4.17.21",
                 "primevue": "^3.53.0",
                 "quill": "^2.0.2",
+                "sanitize-html": "^2.13.0",
                 "tailwindcss": "^3.4.10",
                 "vue": "^3.4.38",
                 "vue-toastification": "^2.0.0-rc.5"
@@ -46,10 +47,29 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/@babel/parser": {
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.24.8",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+            "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
             "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
-            "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+            "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.25.3",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+            "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+            "dependencies": {
+                "@babel/types": "^7.25.2"
+            },
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -57,6 +77,19 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@babel/types": {
+            "version": "7.25.2",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+            "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.24.8",
+                "@babel/helper-validator-identifier": "^7.24.7",
+                "to-fast-properties": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@esbuild/android-arm": {
             "version": "0.18.20",
             "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -468,14 +501,12 @@
         "node_modules/@formkit/auto-animate": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
-            "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==",
-            "license": "MIT"
+            "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
         },
         "node_modules/@headlessui/vue": {
             "version": "1.7.22",
             "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.22.tgz",
             "integrity": "sha512-Hoffjoolq1rY+LOfJ+B/OvkhuBXXBFgd8oBlN+l1TApma2dB0En0ucFZrwQtb33SmcCqd32EQd0y07oziXWNYg==",
-            "license": "MIT",
             "dependencies": {
                 "@tanstack/vue-virtual": "^3.0.0-beta.60"
             },
@@ -490,7 +521,6 @@
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.5.tgz",
             "integrity": "sha512-IpqR72sFqFs55kyKfFS7tN+Ww6odFNeH/7UxycIOrlVYfj4WUGAdzQtLBnJspucSeqWFQsKM0g0YrgU655BEfA==",
-            "license": "MIT",
             "peerDependencies": {
                 "vue": ">= 3"
             }
@@ -556,7 +586,6 @@
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.1.tgz",
             "integrity": "sha512-btmV53c54oW4Z9XF0YyTdIUnM7ue0ONy3/KJOz6J1C5CYIwimiKfDMpz8ZbGJuxS+SPdOlNsqj2ZhlHslpJRZg==",
-            "license": "MIT",
             "dependencies": {
                 "axios": "^0.21.1",
                 "deepmerge": "^4.0.0",
@@ -580,7 +609,6 @@
             "version": "0.21.4",
             "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
             "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-            "license": "MIT",
             "dependencies": {
                 "follow-redirects": "^1.14.0"
             }
@@ -656,9 +684,9 @@
             }
         },
         "node_modules/@jridgewell/sourcemap-codec": {
-            "version": "1.4.15",
-            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+            "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
         },
         "node_modules/@jridgewell/trace-mapping": {
             "version": "0.3.25",
@@ -714,7 +742,6 @@
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
             "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
-            "license": "MIT",
             "dependencies": {
                 "mini-svg-data-uri": "^1.2.3"
             },
@@ -726,7 +753,6 @@
             "version": "0.5.14",
             "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.14.tgz",
             "integrity": "sha512-ZvOCjUbsJBjL9CxQBn+VEnFpouzuKhxh2dH8xMIWHILL+HfOYtlAkWcyoon8LlzE53d2Yo6YO6pahKKNW3q1YQ==",
-            "license": "MIT",
             "dependencies": {
                 "lodash.castarray": "^4.4.0",
                 "lodash.isplainobject": "^4.0.6",
@@ -738,20 +764,20 @@
             }
         },
         "node_modules/@tanstack/virtual-core": {
-            "version": "3.8.2",
-            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.2.tgz",
-            "integrity": "sha512-ffpN6kTaPGwQPoWMcBAHbdv2ZCpj1SugldoYAcY0C4xH+Pej1KCOEUisNeEgbUnXOp8Y/4q6wGPu2tFHthOIQw==",
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.9.0.tgz",
+            "integrity": "sha512-Saga7/QRGej/IDCVP5BgJ1oDqlDT2d9rQyoflS3fgMS8ntJ8JGw/LBqK2GorHa06+VrNFc0tGz65XQHJQJetFQ==",
             "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
         "node_modules/@tanstack/vue-virtual": {
-            "version": "3.8.2",
-            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.2.tgz",
-            "integrity": "sha512-mVix+nFKajrA+48ky5s7/IYP5/uHHLTz1ZRJfwg2bOLcHUcKyvsLE2UGG4+8hd62ueprWg5MgTudGyR2TYfwpw==",
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.9.0.tgz",
+            "integrity": "sha512-MVJhQh57OR3wg2pWL/25IN1/nITFNnpFaz4gOvRCqnxhsH0WRePBBKvixOaFTgiyYfmrjFbb4d0nRMTvsjZZdQ==",
             "dependencies": {
-                "@tanstack/virtual-core": "3.8.2"
+                "@tanstack/virtual-core": "3.9.0"
             },
             "funding": {
                 "type": "github",
@@ -778,7 +804,6 @@
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
             "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.5.1",
                 "@typescript-eslint/scope-manager": "6.21.0",
@@ -976,7 +1001,6 @@
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
             "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": "^14.18.0 || >=16.0.0"
             },
@@ -989,7 +1013,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
             "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
-            "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.24.7",
                 "@vue/shared": "3.4.38",
@@ -1002,7 +1025,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
             "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/compiler-core": "3.4.38",
                 "@vue/shared": "3.4.38"
@@ -1012,7 +1034,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
             "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
-            "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.24.7",
                 "@vue/compiler-core": "3.4.38",
@@ -1029,7 +1050,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
             "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.4.38",
                 "@vue/shared": "3.4.38"
@@ -1039,7 +1059,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
             "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/shared": "3.4.38"
             }
@@ -1048,7 +1067,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
             "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.4.38",
                 "@vue/shared": "3.4.38"
@@ -1058,7 +1076,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
             "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.4.38",
                 "@vue/runtime-core": "3.4.38",
@@ -1070,7 +1087,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
             "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/compiler-ssr": "3.4.38",
                 "@vue/shared": "3.4.38"
@@ -1082,8 +1098,7 @@
         "node_modules/@vue/shared": {
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
-            "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
-            "license": "MIT"
+            "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
         },
         "node_modules/acorn": {
             "version": "8.12.1",
@@ -1205,7 +1220,6 @@
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
-            "license": "MIT",
             "dependencies": {
                 "browserslist": "^4.23.3",
                 "caniuse-lite": "^1.0.30001646",
@@ -1225,9 +1239,9 @@
             }
         },
         "node_modules/axios": {
-            "version": "1.7.2",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-            "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+            "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
             "dependencies": {
                 "follow-redirects": "^1.15.6",
                 "form-data": "^4.0.0",
@@ -1294,7 +1308,6 @@
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
-            "license": "MIT",
             "dependencies": {
                 "caniuse-lite": "^1.0.30001646",
                 "electron-to-chromium": "^1.5.4",
@@ -1361,8 +1374,7 @@
                     "type": "github",
                     "url": "https://github.com/sponsors/ai"
                 }
-            ],
-            "license": "CC-BY-4.0"
+            ]
         },
         "node_modules/chalk": {
             "version": "4.1.2",
@@ -1485,9 +1497,9 @@
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "node_modules/debug": {
-            "version": "4.3.5",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-            "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+            "version": "4.3.6",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+            "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
             "dev": true,
             "dependencies": {
                 "ms": "2.1.2"
@@ -1573,11 +1585,61 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
         "node_modules/dompurify": {
             "version": "3.1.6",
             "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
-            "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
-            "license": "(MPL-2.0 OR Apache-2.0)"
+            "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+        },
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
         },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
@@ -1588,8 +1650,7 @@
             "version": "1.5.11",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.11.tgz",
             "integrity": "sha512-R1CccCDYqndR25CaXFd6hp/u9RaaMcftMkphmvuepXr5b1vfLkRml6aWVeBhXJ7rbevHkKEMJtz8XqPf7ffmew==",
-            "dev": true,
-            "license": "ISC"
+            "dev": true
         },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
@@ -1600,7 +1661,6 @@
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
             "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-            "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.12"
             },
@@ -1676,7 +1736,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "engines": {
                 "node": ">=10"
             },
@@ -1689,7 +1748,6 @@
             "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
             "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.6.1",
@@ -1745,7 +1803,6 @@
             "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
             "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
             "dev": true,
-            "license": "MIT",
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -1758,7 +1815,6 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.4.tgz",
             "integrity": "sha512-gJAEHmCq2XFfUP/+vwEfEJ9igrPeZFg+skeMtsxquSQdxba9XRk5bn0Bp9jxG1VV9/wwPKi1g3ZjItu6MIjhNg==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "fast-glob": "^3.2.5",
                 "postcss": "^8.4.4"
@@ -1775,7 +1831,6 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
             "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
                 "globals": "^13.24.0",
@@ -1798,7 +1853,6 @@
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -1840,7 +1894,6 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1851,7 +1904,6 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
-            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1926,8 +1978,7 @@
         "node_modules/eventemitter3": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
-            "license": "MIT"
+            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
         },
         "node_modules/fast-deep-equal": {
             "version": "3.1.3",
@@ -1938,8 +1989,7 @@
         "node_modules/fast-diff": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-            "license": "Apache-2.0"
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
         },
         "node_modules/fast-glob": {
             "version": "3.3.2",
@@ -2066,9 +2116,9 @@
             }
         },
         "node_modules/foreground-child": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-            "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+            "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
             "dependencies": {
                 "cross-spawn": "^7.0.0",
                 "signal-exit": "^4.0.1"
@@ -2310,10 +2360,28 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/htmlparser2": {
+            "version": "8.0.2",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+            "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+            "funding": [
+                "https://github.com/fb55/htmlparser2?sponsor=1",
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3",
+                "domutils": "^3.0.1",
+                "entities": "^4.4.0"
+            }
+        },
         "node_modules/ignore": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-            "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
             "dev": true,
             "engines": {
                 "node": ">= 4"
@@ -2373,9 +2441,9 @@
             }
         },
         "node_modules/is-core-module": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
-            "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
+            "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
             "dependencies": {
                 "hasown": "^2.0.2"
             },
@@ -2430,21 +2498,26 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-plain-object": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+            "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
         },
         "node_modules/jackspeak": {
-            "version": "3.4.2",
-            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.2.tgz",
-            "integrity": "sha512-qH3nOSj8q/8+Eg8LUPOq3C+6HWkpUioIjDsq1+D4zY91oZvpPttw8GwtF1nReRYKXl+1AORyFqtm2f5Q1SB6/Q==",
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+            "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
             "dependencies": {
                 "@isaacs/cliui": "^8.0.2"
             },
-            "engines": {
-                "node": "14 >=14.21 || 16 >=16.20 || >=18"
-            },
             "funding": {
                 "url": "https://github.com/sponsors/isaacs"
             },
@@ -2503,7 +2576,6 @@
             "version": "0.8.1",
             "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.1.tgz",
             "integrity": "sha512-fxzUDjOA37kOsYq8dP+3oPIlw8/kJVXwu0hOXLun82R1LpV02shGeWGYKx2lbpKffL5I0sfPPjfqbYxuqBluAA==",
-            "license": "MIT",
             "dependencies": {
                 "picocolors": "^1.0.0",
                 "vite-plugin-full-reload": "^1.0.5"
@@ -2564,8 +2636,7 @@
         "node_modules/lodash-es": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-            "license": "MIT"
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
         },
         "node_modules/lodash.castarray": {
             "version": "4.4.0",
@@ -2593,19 +2664,16 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
         },
         "node_modules/lru-cache": {
-            "version": "10.4.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.0.tgz",
-            "integrity": "sha512-bfJaPTuEiTYBu+ulDaeQ0F+uLmlfFkMgXj4cbwfuMSjgObGMzb55FMMbDvbRU0fAHZ4sLGkz2mKwcMg8Dvm8Ww==",
-            "engines": {
-                "node": ">=18"
-            }
+            "version": "10.4.3",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+            "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
         },
         "node_modules/magic-string": {
-            "version": "0.30.10",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-            "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+            "version": "0.30.11",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+            "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
             "dependencies": {
-                "@jridgewell/sourcemap-codec": "^1.4.15"
+                "@jridgewell/sourcemap-codec": "^1.5.0"
             }
         },
         "node_modules/merge2": {
@@ -2721,8 +2789,7 @@
             "version": "2.0.18",
             "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
             "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/normalize-path": {
             "version": "3.0.0",
@@ -2844,8 +2911,7 @@
         "node_modules/parchment": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
-            "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
-            "license": "BSD-3-Clause"
+            "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A=="
         },
         "node_modules/parent-module": {
             "version": "1.0.1",
@@ -2859,6 +2925,11 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-srcset": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+            "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+        },
         "node_modules/path-exists": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2964,7 +3035,6 @@
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
-            "license": "MIT",
             "dependencies": {
                 "nanoid": "^3.3.7",
                 "picocolors": "^1.0.1",
@@ -3054,27 +3124,33 @@
             }
         },
         "node_modules/postcss-nested": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-            "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+            "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
             "dependencies": {
-                "postcss-selector-parser": "^6.0.11"
+                "postcss-selector-parser": "^6.1.1"
             },
             "engines": {
                 "node": ">=12.0"
             },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            },
             "peerDependencies": {
                 "postcss": "^8.2.14"
             }
         },
         "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-            "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+            "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -3113,7 +3189,6 @@
             "version": "3.53.0",
             "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.53.0.tgz",
             "integrity": "sha512-mRqTPGGZX+3AQokaCCjxLVSNEjGEA7LaPdBT4qSpGEdMstK6vhUBCxgLH7IPjHudbaSi4Xo3CIO62pXQxbz8dQ==",
-            "license": "MIT",
             "peerDependencies": {
                 "vue": "^3.0.0"
             }
@@ -3133,9 +3208,9 @@
             }
         },
         "node_modules/qs": {
-            "version": "6.12.3",
-            "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
-            "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
+            "version": "6.13.0",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+            "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
             "dependencies": {
                 "side-channel": "^1.0.6"
             },
@@ -3169,7 +3244,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz",
             "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==",
-            "license": "BSD-3-Clause",
             "dependencies": {
                 "eventemitter3": "^5.0.1",
                 "lodash-es": "^4.17.21",
@@ -3184,7 +3258,6 @@
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
             "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
-            "license": "MIT",
             "dependencies": {
                 "fast-diff": "^1.3.0",
                 "lodash.clonedeep": "^4.5.0",
@@ -3300,10 +3373,23 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/sanitize-html": {
+            "version": "2.13.0",
+            "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.0.tgz",
+            "integrity": "sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==",
+            "dependencies": {
+                "deepmerge": "^4.2.2",
+                "escape-string-regexp": "^4.0.0",
+                "htmlparser2": "^8.0.0",
+                "is-plain-object": "^5.0.0",
+                "parse-srcset": "^1.0.2",
+                "postcss": "^8.3.11"
+            }
+        },
         "node_modules/semver": {
-            "version": "7.6.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-            "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver.js"
@@ -3568,7 +3654,6 @@
             "version": "3.4.10",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
             "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
-            "license": "MIT",
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -3605,7 +3690,6 @@
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-            "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -3639,6 +3723,14 @@
                 "node": ">=0.8"
             }
         },
+        "node_modules/to-fast-properties": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3692,9 +3784,9 @@
             }
         },
         "node_modules/typescript": {
-            "version": "5.5.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-            "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+            "version": "5.5.4",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+            "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
             "devOptional": true,
             "peer": true,
             "bin": {
@@ -3753,7 +3845,6 @@
             "version": "4.5.3",
             "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
             "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
-            "license": "MIT",
             "dependencies": {
                 "esbuild": "^0.18.10",
                 "postcss": "^8.4.27",
@@ -3817,7 +3908,6 @@
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
             "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
-            "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.4.38",
                 "@vue/compiler-sfc": "3.4.38",
@@ -3992,9 +4082,9 @@
             }
         },
         "node_modules/yaml": {
-            "version": "2.4.5",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
-            "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+            "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
             "bin": {
                 "yaml": "bin.mjs"
             },
diff --git a/package.json b/package.json
index 0f51689..28ad064 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "lodash": "^4.17.21",
         "primevue": "^3.53.0",
         "quill": "^2.0.2",
+        "sanitize-html": "^2.13.0",
         "tailwindcss": "^3.4.10",
         "vue": "^3.4.38",
         "vue-toastification": "^2.0.0-rc.5"
diff --git a/resources/js/Components/BackgroundGrid.vue b/resources/js/Components/BackgroundGrid.vue
index f8614e5..cf6e347 100644
--- a/resources/js/Components/BackgroundGrid.vue
+++ b/resources/js/Components/BackgroundGrid.vue
@@ -8,21 +8,14 @@ defineProps({
 </script>
 
 <template>
-  <svg class="absolute inset-0 -z-10 size-full stroke-gray-200"
-       :class="'[mask-image:radial-gradient(100%_100%_at_top_' + maskDirection + ',white,transparent)]'"
-       aria-hidden="true"
-  >
+  <svg class="absolute inset-0 -z-10 size-full stroke-gray-200" :class="'[mask-image:radial-gradient(100%_100%_at_top_' + maskDirection + ',white,transparent)]'" aria-hidden="true">
     <defs>
-      <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-1"
-               patternUnits="userSpaceOnUse"
-      >
+      <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse">
         <path d="M100 200V.5M.5 .5H200" fill="none" />
       </pattern>
     </defs>
     <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
-      <path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
-            stroke-width="0"
-      />
+      <path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z" stroke-width="0" />
     </svg>
     <rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
   </svg>
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
new file mode 100644
index 0000000..3601fb2
--- /dev/null
+++ b/resources/js/Components/Pagination.vue
@@ -0,0 +1,21 @@
+<script setup>
+
+defineProps({
+  pagination: Object,
+})
+</script>
+
+<template>
+  <nav class="relative flex justify-center">
+    <template v-for="link in pagination.links" :key="link.label">
+      <InertiaLink
+        preserve-scroll
+        :href="link.url ?? ''"
+        class="flex items-center justify-center rounded-lg px-3 py-2 text-sm text-gray-600"
+        :class="{ 'bg-gray-200': link.active, '!text-gray-300': !link.url }"
+      >
+        {{ link.label }}
+      </InertiaLink>
+    </template>
+  </nav>
+</template>
diff --git a/resources/js/Layouts/PublicLayout.vue b/resources/js/Layouts/PublicLayout.vue
index 792ccea..10f5673 100644
--- a/resources/js/Layouts/PublicLayout.vue
+++ b/resources/js/Layouts/PublicLayout.vue
@@ -82,7 +82,7 @@ const mobileMenuOpen = ref(false)
       </Dialog>
     </header>
 
-    <div class="flex-1">
+    <div class="flex-1 bg-white">
       <slot />
     </div>
 
@@ -92,8 +92,7 @@ const mobileMenuOpen = ref(false)
           <p class="text-center text-xs leading-5 text-gray-500">
             2023
             <EllipsisHorizontalIcon class="mx-2 inline-block w-6" />
-            <a class="font-semibold" href="https://github.com/blumilksoftware/keating" target="_blank">keating
-              management system</a>
+            <a class="font-semibold" href="https://github.com/blumilksoftware/keating" target="_blank">keating management system</a>
             developed at
             <a class="font-semibold" href="https://blumilk.pl/" target="_blank">Blumilk</a>
           </p>
diff --git a/resources/js/Pages/Public/News.vue b/resources/js/Pages/Public/News.vue
deleted file mode 100644
index 661512b..0000000
--- a/resources/js/Pages/Public/News.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-import PublicLayout from '@/Layouts/PublicLayout.vue'
-
-defineProps({
-  title: String,
-})
-</script>
-
-<template>
-  <PublicLayout />
-</template>
diff --git a/resources/js/Pages/Public/News/Index.vue b/resources/js/Pages/Public/News/Index.vue
new file mode 100644
index 0000000..21dc9b6
--- /dev/null
+++ b/resources/js/Pages/Public/News/Index.vue
@@ -0,0 +1,61 @@
+<script setup>
+import PublicLayout from '@/Layouts/PublicLayout.vue'
+import BackgroundGrid from '../../../Components/BackgroundGrid.vue'
+import SectionHeader from '../../../Components/SectionHeader.vue'
+import Pagination from '../../../Components/Pagination.vue'
+import sanitizeHtml from 'sanitize-html'
+import { NoSymbolIcon } from '@heroicons/vue/24/outline'
+
+defineProps({
+  paginator: Object,
+})
+
+</script>
+
+<template>
+  <PublicLayout>
+    <div class="relative isolate bg-white">
+      <BackgroundGrid />
+      <div class="py-24 sm:py-32">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <SectionHeader>
+            <template #header>
+              Aktualności
+            </template>
+            <template #subheader>
+              Ostatnie wiadomości opublikowane w systemie.
+            </template>
+          </SectionHeader>
+
+          <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+            <article v-for="post in paginator.data" :key="post.id" class="flex max-w-xl flex-col items-start justify-between">
+              <div class="flex items-center gap-x-4 text-xs">
+                <time :datetime="post.published_at" class="text-gray-500">{{ post.published_at }}</time>
+              </div>
+              <div class="group relative">
+                <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+                  <a :href="'aktualnosci/' + post.slug">
+                    <span class="absolute inset-0" />
+                    {{ post.title }}
+                  </a>
+                </h3>
+                <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600" v-html="sanitizeHtml(post.content)" />
+              </div>
+            </article>
+          </div>
+
+          <div v-if="paginator.data.length === 0" class="text-center">
+            <NoSymbolIcon class="mx-auto size-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-semibold text-gray-900">
+              Brak aktualności
+            </h3>
+          </div>
+
+          <div v-if="paginator.data.length > 0" class="mt-24 flex justify-center">
+            <Pagination :pagination="paginator" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </PublicLayout>
+</template>
diff --git a/resources/js/Pages/Public/News/News.vue b/resources/js/Pages/Public/News/News.vue
new file mode 100644
index 0000000..02d5cda
--- /dev/null
+++ b/resources/js/Pages/Public/News/News.vue
@@ -0,0 +1,32 @@
+<script setup>
+import PublicLayout from '@/Layouts/PublicLayout.vue'
+import BackgroundGrid from '../../../Components/BackgroundGrid.vue'
+import SectionHeader from '../../../Components/SectionHeader.vue'
+import sanitizeHtml from 'sanitize-html'
+
+defineProps({
+  news: Object,
+})
+</script>
+
+<template>
+  <PublicLayout>
+    <div class="relative isolate bg-white">
+      <BackgroundGrid />
+      <div class="py-24 sm:py-32">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <SectionHeader>
+            <template #header>
+              {{ news.title }}
+            </template>
+            <template #subheader>
+              wiadomość z dnia {{ news.published_at }}
+            </template>
+          </SectionHeader>
+
+          <div class="mt-10" v-html="sanitizeHtml(news.content)" />
+        </div>
+      </div>
+    </div>
+  </PublicLayout>
+</template>
diff --git a/routes/web.php b/routes/web.php
index 907df0e..fbda352 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -26,7 +26,8 @@
 use Illuminate\Support\Facades\Route;
 
 Route::get("/", HomeController::class)->name("main");
-Route::get("/aktualnosci", NewsController::class);
+Route::get("/aktualnosci", [NewsController::class, "index"]);
+Route::get("/aktualnosci/{slug}", [NewsController::class, "get"]);
 Route::get("/oceny/{semester?}/{course?}/{group?}/{index?}", PublicGradeController::class);
 
 Route::middleware("guest")->group(function (): void {
diff --git a/tests/Feature/NewsSlugTest.php b/tests/Feature/NewsSlugTest.php
new file mode 100644
index 0000000..cd748bc
--- /dev/null
+++ b/tests/Feature/NewsSlugTest.php
@@ -0,0 +1,72 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature;
+
+use App\Models\News;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class NewsSlugTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function testNewsSlugging(): void
+    {
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-01 15:00:00",
+        ]);
+
+        $this->assertEquals("2024-06-01-test", News::query()->first()->slug);
+    }
+
+    public function testMultipleNewsSlugging(): void
+    {
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-01 15:00:00",
+        ]);
+
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-15 15:00:00",
+        ]);
+
+        $news = News::query()->get();
+
+        $this->assertEquals("2024-06-01-test", $news[0]->slug);
+        $this->assertEquals("2024-06-15-test", $news[1]->slug);
+    }
+
+    public function testMultipleNewsWithRepeatedTitleSlugging(): void
+    {
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-01 15:00:00",
+        ]);
+
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-01 15:00:00",
+        ]);
+
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-15 15:00:00",
+        ]);
+
+        News::factory()->create([
+            "title" => "Test",
+            "published_at" => "2024-06-01 15:00:00",
+        ]);
+
+        $news = News::query()->get();
+
+        $this->assertEquals("2024-06-01-test", $news[0]->slug);
+        $this->assertEquals("2024-06-01-test-2", $news[1]->slug);
+        $this->assertEquals("2024-06-15-test", $news[2]->slug);
+        $this->assertEquals("2024-06-01-test-3", $news[3]->slug);
+    }
+}