add featured packages slider

LordSimal · LordSimal · commit 5cb40de2b4f9 · 2026-04-02T22:25:51.000+02:00
diff --git a/config/app.php b/config/app.php
@@ -92,6 +92,15 @@
         // 'cacheTime' => '+1 year'
     ],
 
+    'Packages' => [
+        'featured' => [
+            'markstory/asset_compress',
+            'josegonzalez/cakephp-upload',
+            'dereuromark/cakephp-queue',
+            'lordsimal/cakephp-sentry',
+        ],
+    ],
+
     /*
      * Configure the cache adapters.
      */
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,15 @@
 {
     "type": "module",
     "devDependencies": {
-        "tailwindcss": "^4.0.0",
         "@tailwindcss/vite": "^4.1.4",
+        "tailwindcss": "^4.0.0",
         "vite": "^8.0.0"
     },
     "scripts": {
         "dev": "vite build --watch",
         "build": "vite build"
+    },
+    "dependencies": {
+        "swiper": "^12.1.3"
     }
 }
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
@@ -8,7 +8,6 @@
          xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/10.1/phpunit.xsd">
     <php>
         <ini name="memory_limit" value="-1"/>
-        <ini name="apc.enable_cli" value="1"/>
     </php>
 
     <!-- Add any additional test suites you want to run here -->
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "./fonts.css";
+@import "swiper/css";
+@import "swiper/css/navigation";
 
 @theme {
     --font-raleway: "Raleway", sans-serif;
@@ -37,3 +39,25 @@
 [data-is-php-filter] + .ss-main {
     --ss-primary-color: var(--color-blue-500);
 }
+
+@layer components {
+    .featured-packages-slider-shell {
+        @apply -mx-3 overflow-hidden px-3 pb-4;
+    }
+
+    .featured-packages-slider {
+        @apply overflow-visible;
+    }
+
+    .featured-packages-slider .swiper-slide {
+        @apply h-auto py-2;
+    }
+
+    .featured-packages-slider-button {
+        @apply inline-flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-lg text-slate-700 shadow-sm transition hover:border-cake-red hover:text-cake-red disabled:cursor-not-allowed disabled:opacity-40;
+    }
+
+    .featured-packages-slider-button::after {
+        content: none;
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -0,0 +1,57 @@
+import Swiper from 'swiper'
+import { Autoplay, Navigation } from 'swiper/modules'
+
+const initializeSelects = () => {
+    if (typeof window.SlimSelect !== 'function') {
+        return
+    }
+
+    const selects = document.querySelectorAll('select')
+
+    selects.forEach((element) => {
+        const placeholder = element.getAttribute('data-placeholder')
+
+        new window.SlimSelect({
+            select: element,
+            settings: {
+                placeholderText: placeholder,
+            },
+        })
+    })
+}
+
+const initializeFeaturedPackagesSlider = () => {
+    const slider = document.querySelector('[data-featured-packages-slider]')
+
+    if (!slider) {
+        return
+    }
+
+    new Swiper(slider, {
+        modules: [Autoplay, Navigation],
+        loop: true,
+        slidesPerView: 1,
+        spaceBetween: 24,
+        grabCursor: true,
+        // autoplay: {
+        //     delay: 4000,
+        //     disableOnInteraction: false,
+        //     pauseOnMouseEnter: true,
+        // },
+        navigation: {
+            nextEl: '[data-featured-packages-next]',
+            prevEl: '[data-featured-packages-prev]',
+        },
+        breakpoints: {
+            768: {
+                slidesPerView: 2,
+            },
+            1280: {
+                slidesPerView: 3,
+            },
+        },
+    })
+}
+
+initializeSelects()
+initializeFeaturedPackagesSlider()
diff --git a/src/Controller/PackagesController.php b/src/Controller/PackagesController.php
@@ -3,6 +3,7 @@
 
 namespace App\Controller;
 
+use Cake\Core\Configure;
 use Cake\ORM\Query\SelectQuery;
 
 /**
@@ -28,11 +29,36 @@ public function index()
             ));
         }
 
+        $featuredPackageNames = array_values(array_filter((array)Configure::read('Packages.featured', [])));
+        $featuredPackages = [];
+
+        if ($featuredPackageNames !== []) {
+            $featuredPackages = $this->Packages
+                ->find()
+                ->contain(['Tags' => function (SelectQuery $q) {
+                    return $q->orderByDesc('Tags.label');
+                }])
+                ->where(['Packages.package IN' => $featuredPackageNames])
+                ->all()
+                ->indexBy('package')
+                ->toArray();
+
+            $featuredPackages = array_values(array_filter(
+                array_map(
+                    static fn (string $packageName) => $featuredPackages[$packageName] ?? null,
+                    $featuredPackageNames,
+                ),
+            ));
+        }
+
         $query = $this->Packages
             ->find('search', search: $this->request->getQueryParams())
             ->contain(['Tags' => function (SelectQuery $q) {
                 return $q->orderByDesc('Tags.label');
             }]);
+        if ($featuredPackageNames !== []) {
+            $query->where(['Packages.package NOT IN' => $featuredPackageNames]);
+        }
         $packages = $this->paginate($query, ['limit' => 21]);
 
         $cakephpTags = $this->Packages->Tags->find('list', keyField: 'slug')
@@ -44,6 +70,6 @@ public function index()
             ->orderByAsc('label')
             ->toArray();
 
-        $this->set(compact('packages', 'cakephpTags', 'phpTags'));
+        $this->set(compact('featuredPackages', 'packages', 'cakephpTags', 'phpTags'));
     }
 }
diff --git a/templates/Packages/index.php b/templates/Packages/index.php
@@ -1,12 +1,14 @@
 <?php
 /**
  * @var \App\View\AppView $this
+ * @var iterable<\App\Model\Entity\Package> $featuredPackages
  * @var iterable<\App\Model\Entity\Package> $packages
  * @var iterable<\Tags\Model\Entity\Tag> $cakephpTags
  * @var iterable<\Tags\Model\Entity\Tag> $phpTags
  */
 ?>
 <div class="packages index content">
+    <?php $featuredPackageNames = array_column((array)$featuredPackages, 'package'); ?>
     <div class="px-4 py-8 sm:px-6 lg:px-8">
         <div class="mb-8 flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
             <div>
@@ -43,9 +45,41 @@
             </div>
         </div>
 
+        <?php if ($featuredPackages) : ?>
+            <section class="mb-8">
+                <div class="mb-5 flex items-end justify-between gap-4">
+                    <div>
+                        <p class="text-sm font-medium uppercase tracking-[0.2em] text-cake-red"><?= __('Featured') ?></p>
+                    </div>
+                    <div class="hidden items-center gap-3 md:flex">
+                        <button type="button" class="featured-packages-slider-button" data-featured-packages-prev aria-label="<?= __('Previous featured package') ?>">
+                            &larr;
+                        </button>
+                        <button type="button" class="featured-packages-slider-button" data-featured-packages-next aria-label="<?= __('Next featured package') ?>">
+                            &rarr;
+                        </button>
+                    </div>
+                </div>
+                <div class="featured-packages-slider-shell">
+                    <div class="featured-packages-slider swiper" data-featured-packages-slider>
+                        <div class="swiper-wrapper">
+                            <?php foreach ($featuredPackages as $package) : ?>
+                                <div class="swiper-slide">
+                                    <?= $this->element('Packages/package-tile', ['package' => $package, 'isFeatured' => true]) ?>
+                                </div>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        <?php endif; ?>
+
         <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
             <?php foreach ($packages as $package) : ?>
-                <?= $this->element('Packages/package-tile', ['package' => $package]) ?>
+                <?= $this->element('Packages/package-tile', [
+                    'package' => $package,
+                    'isFeatured' => in_array($package->package, $featuredPackageNames, true),
+                ]) ?>
             <?php endforeach; ?>
         </div>
 
diff --git a/templates/element/Packages/package-tile.php b/templates/element/Packages/package-tile.php
@@ -2,16 +2,25 @@
 /**
  * @var \App\View\AppView $this
  * @var \App\Model\Entity\Package $package
+ * @var bool $isFeatured
  */
+$isFeatured = $isFeatured ?? false;
 ?>
 <article class="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
     <a class="block border-b border-slate-200 bg-slate-50 px-5 py-4 transition group-hover:bg-white"
        target="_blank" rel="noopener noreferrer" href="<?= h($package->repo_url) ?>">
         <div class="flex items-start justify-between gap-4">
             <div class="min-w-0">
-                <h2 class="truncate text-lg font-semibold text-slate-950 transition group-hover:text-cake-red">
-                    <?= h($package->package) ?>
-                </h2>
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="truncate text-lg font-semibold text-slate-950 transition group-hover:text-cake-red">
+                        <?= h($package->package) ?>
+                    </h2>
+                    <?php if ($isFeatured) : ?>
+                        <span class="shrink-0 rounded-full bg-cake-red px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-white">
+                            <?= __('Featured') ?>
+                        </span>
+                    <?php endif; ?>
+                </div>
             </div>
             <span class="shrink-0 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600">
                 <?= __('Plugin') ?>
diff --git a/templates/layout/default.php b/templates/layout/default.php
@@ -31,6 +31,7 @@
 
     <script src="https://unpkg.com/slim-select@latest/dist/slimselect.js"></script>
     <link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet">
+    <?= $this->Html->script('app.js', ['type' => 'module']) ?>
 
     <?= $this->fetch('meta') ?>
     <?= $this->fetch('css') ?>
@@ -54,17 +55,5 @@
         <?= $this->Flash->render() ?>
         <?= $this->fetch('content') ?>
     </main>
-    <script>
-        const selects = document.querySelectorAll('select');
-        selects.forEach((elem) => {
-            let placeholder = elem.getAttribute('data-placeholder');
-            new SlimSelect({
-                select: elem,
-                settings: {
-                    placeholderText: placeholder,
-                }
-            })
-        });
-    </script>
 </body>
 </html>
diff --git a/tests/schema.sql b/tests/schema.sql
diff --git a/vite.config.js b/vite.config.js
@@ -7,12 +7,23 @@ export default defineConfig({
         tailwindcss(),
     ],
     build: {
-        outDir: 'webroot/css',
+        outDir: 'webroot',
+        emptyOutDir: false,
         rollupOptions: {
-            input: 'resources/css/style.css',
+            input: {
+                cake: 'resources/css/style.css',
+                app: 'resources/js/app.js',
+            },
             output: {
-                assetFileNames: 'cake.css',
-            }
-        }
-    }
+                entryFileNames: (chunkInfo) => chunkInfo.name === 'app' ? 'js/app.js' : 'js/[name].js',
+                assetFileNames: (assetInfo) => {
+                    if (assetInfo.names.includes('cake.css')) {
+                        return 'css/cake.css';
+                    }
+
+                    return 'assets/[name][extname]';
+                },
+            },
+        },
+    },
 })
diff --git a/webroot/js/app.js b/webroot/js/app.js

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,15 @@`
`1`	`1`	`{`
`2`	`2`	`"type": "module",`
`3`	`3`	`"devDependencies": {`
`4`		`- "tailwindcss": "^4.0.0",`
`5`	`4`	`"@tailwindcss/vite": "^4.1.4",`
	`5`	`+ "tailwindcss": "^4.0.0",`
`6`	`6`	`"vite": "^8.0.0"`
`7`	`7`	`},`
`8`	`8`	`"scripts": {`
`9`	`9`	`"dev": "vite build --watch",`
`10`	`10`	`"build": "vite build"`
	`11`	`+ },`
	`12`	`+ "dependencies": {`
	`13`	`+ "swiper": "^12.1.3"`
`11`	`14`	`}`
`12`	`15`	`}`