Add news announcement carousel to dashboard

app/Http/Controllers/HomeController.php

@@ -12,6 +12,7 @@
 use App\Models\BeatmapDownload;
 use App\Models\Beatmapset;
 use App\Models\Forum\Post;
+use App\Models\NewsAnnouncement;
 use App\Models\NewsPost;
 use App\Models\UserDonation;
 use Auth;
@@ -99,11 +100,16 @@ public function index()
 
         if (Auth::check()) {
             $newBeatmapsets = Beatmapset::latestRanked();
+            $newsAnnouncements = json_collection(
+                NewsAnnouncement::default()->get(),
+                'NewsAnnouncement',
+            );
             $popularBeatmapsets = Beatmapset::popular()->get();
 
             return ext_view('home.user', compact(
                 'newBeatmapsets',
                 'news',
+                'newsAnnouncements',
                 'popularBeatmapsets'
             ));
         } else {

app/Models/NewsAnnouncement.php

@@ -0,0 +1,72 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+
+/**
+ * @property-read string|null $content_html
+ * @property string|null $content_markdown
+ * @property Carbon|null $ended_at
+ * @property-read string|null $ended_at_json
+ * @property int $id
+ * @property string $image_url
+ * @property int $order
+ * @property Carbon $started_at
+ * @property-read string $started_at_json
+ * @property string $url
+ * @method static Builder default()
+ */
+class NewsAnnouncement extends Model
+{
+    public $incrementing = false;
+    public $timestamps = false;
+
+    protected $dates = ['ended_at', 'started_at'];
+
+    public function scopeDefault(Builder $query): void
+    {
+        $now = Carbon::now();
+
+        $query
+            ->where('started_at', '<=', $now)
+            ->where(function (Builder $query) use ($now) {
+                $query
+                    ->where('ended_at', '>', $now)
+                    ->orWhereNull('ended_at');
+            })
+            ->orderBy('order');
+    }
+
+    public function getAttribute($key)
+    {
+        return match ($key) {
+            'content_markdown',
+            'id',
+            'image_url',
+            'order',
+            'url' => $this->getRawAttribute($key),
+
+            'ended_at',
+            'started_at' => $this->getTimeFast($key),
+
+            'ended_at_json',
+            'started_at_json' => $this->getJsonTimeFast($key),
+
+            'content_html' => $this->getContentHtml(),
+        };
+    }
+
+    private function getContentHtml(): ?string
+    {
+        return $this->content_markdown === null
+            ? null
+            : markdown($this->content_markdown);
+    }
+}

app/Transformers/NewsAnnouncementTransformer.php

@@ -0,0 +1,29 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+namespace App\Transformers;
+
+use App\Models\NewsAnnouncement;
+
+class NewsAnnouncementTransformer extends TransformerAbstract
+{
+    public function transform(NewsAnnouncement $newsAnnouncement): array
+    {
+        return [
+            'content' => $newsAnnouncement->content_markdown === null ? null : [
+                'html' => $newsAnnouncement->content_html,
+                'markdown' => $newsAnnouncement->content_markdown,
+            ],
+            'ended_at' => $newsAnnouncement->ended_at_json,
+            'id' => $newsAnnouncement->getKey(),
+            'image_url' => $newsAnnouncement->image_url,
+            'order' => $newsAnnouncement->order,
+            'started_at' => $newsAnnouncement->started_at_json,
+            'url' => $newsAnnouncement->url,
+        ];
+    }
+}

database/migrations/2023_08_07_100000_create_news_announcements.php

@@ -0,0 +1,37 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('news_announcements', function (Blueprint $table): void {
+            $table->mediumIncrements('id');
+            $table->text('content_markdown')->nullable();
+            $table->timestamp('ended_at')->nullable();
+            $table->string('image_url');
+            $table->tinyInteger('order');
+            $table->timestamp('started_at')->useCurrent();
+            $table->string('url');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('news_announcements');
+    }
+};

resources/css/bem-index.less

@@ -228,6 +228,8 @@
 @import "bem/navbar-mobile";
 @import "bem/navbar-mobile-before";
 @import "bem/navbar-mobile-item";
+@import "bem/news-announcement";
+@import "bem/news-announcements";
 @import "bem/news-card";
 @import "bem/news-index";
 @import "bem/news-post-preview";

resources/css/bem/news-announcement.less

@@ -0,0 +1,31 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.news-announcement {
+  height: 100%;
+  left: calc(100% * var(--index, 0));
+  overflow-x: hidden;
+  position: absolute;
+  width: 100%;
+
+  &__content {
+    background: hsla(var(--hsl-b4), 0.7);
+    bottom: 0;
+    padding: 10px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__image {
+    height: 100%;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  &__link {
+    display: block;
+    height: 100%;
+  }
+}

resources/css/bem/news-announcements.less

@@ -0,0 +1,76 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.news-announcements {
+  margin-top: 20px;
+  overflow-x: hidden;
+  position: relative;
+
+  &__button {
+    .reset-input();
+    bottom: 0;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+
+    &:hover {
+      color: @osu-colour-l1;
+    }
+
+    &--left {
+      --icon: @fa-var-chevron-left;
+      left: 0;
+    }
+
+    &--right {
+      --icon: @fa-var-chevron-right;
+      right: 0;
+    }
+
+    &::before {
+      .fas();
+      content: var(--icon);
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &__container {
+    height: 250px;
+    transform: translateX(calc(-100% * var(--index, 0)));
+
+    &--transition {
+      transition: transform 300ms ease-in-out;
+    }
+  }
+
+  &__indicator {
+    align-items: center;
+    display: flex;
+    height: 6px;
+
+    &::before {
+      background: @osu-colour-h1;
+      border-radius: 10000px;
+      content: '';
+      height: 2px;
+      opacity: 0.5;
+      transition: 100ms ease-out;
+      transition-property: height, opacity;
+      width: 30px;
+    }
+
+    &--active::before {
+      height: 6px;
+      opacity: 1;
+    }
+  }
+
+  &__indicators {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    margin-top: 10px;
+  }
+}

resources/css/bem/user-home.less

@@ -45,6 +45,22 @@
     }
   }
 
+  &__news-announcements-placeholder {
+    align-items: center;
+    display: flex;
+    height: 250px; // news-announcements__container height
+    justify-content: center;
+    margin-top: 20px; // news-announcements margin
+
+    &--with-indicators {
+      // This part won't be identical to the real component if the indicators
+      // wrap onto more than one line, but it's good enough for a placeholder
+      margin-bottom:
+        10px /* news-announcements__indicators margin */ +
+        6px /* news-announcements__indicator height */;
+    }
+  }
+
   &__news-posts-group {
     .default-box-shadow();
     display: block;