filter button styling, new "add package" button

Signed-off-by: Jurj-Bogdan <jurj@dotkernel.com>

Author: Jurj-Bogdan

ADD_ECOSYSTEM_PACKAGE.md

@@ -1,31 +1,20 @@
 # Adding your entry to the Laminas Ecosystem
 
-You can add packages **available via composer** to the `data/ecosystem/ecosystem-packages.json` file by following the steps below:
+You can list your packages on the Laminas third party packages page by following the steps below:
+> Note that all packages **must** be listed on [Packagist](https://packagist.org/)
 
-- Entries must use the [template](#new-entry-template) as a guide.
-- Submit a PR.
+- Add your entries as JSON objects to the `data/ecosystem/ecosystem-packages.json` file.
+- Each package **must** be added as a single object.
+- Entries **must** use the [template](#new-entry-template) for submission.
+- Submit a PR against the default branch.
 
-> Use the following command to make sure your submission will be correctly built:
+Use the following command to make sure your submission will be correctly built:
 
 ```bash
-composer build
+./vendor/bin/laminas ecosystem:create-db --github-token=<github_token> [--force-rebuild]
 ```
 
-> The following command can be run individually for testing:
-
-```bash
-./vendor/bin/laminas ecosystem:create-db  --github-token=<github_token> [--force-rebuild]
-```
-
-> the optional "--force-rebuild" flag will regenerate the database completely, not only add and/or remove packages
-
-*Used for creating the database.*
-
-```bash
-./vendor/bin/laminas ecosystem:seed-db  --github-token=<github_token>
-```
-
-*Used for updating the package data every X hours.*
+The optional "--force-rebuild" flag will regenerate the database completely, not only add and/or remove packages
 
 ## New entry template
 
@@ -50,4 +39,4 @@ composer build
   **string** - optional URL to package homepage, will overwrite "homepage" field from Packagist Api data
 
 - `category`
-  **string** - package category must be one of "skeleton", "integration", "tool"
+  **string** - must be one of "skeleton", "integration", "tool"

bootstrap/scss/_custom-styles.scss

@@ -606,12 +606,15 @@ article {
 }
 
 #ecosystem-section {
-    .keyword {
-        --filter-button-color: #678799;
+    $filter-color: #678799;
+
+    #clear-filters-button:hover {
+        color: white;
     }
 
     #ecosystem-pagination {
         margin-top: 1em;
+        min-height: 60px;
     }
 
     a.package-button {
@@ -719,12 +722,17 @@ article {
     margin-bottom: .5em;
 
     .package-button {
-        border: 2px solid var(--filter-button-color);
+        border: 2px solid $filter-color;
         border-radius: 5px;
         padding: 0 .25em;
-        color: var(--filter-button-color);
+        color: $filter-color;
         font-weight: bold;
         background-color: white;
+
+        &:hover {
+            color: white;
+            background-color: $filter-color;
+        }
     }
 }
 
@@ -733,12 +741,18 @@ article {
     flex-direction: row;
     gap: .5em;
     margin: .5em 0;
+}
 
-    .ecosystem-filter {
-        border-radius: 5px;
-        color: white;
-        background-color: var(--filter-button-color);
-        padding: 0 .5em;
+.ecosystem-filter {
+    color: white;
+    background-color: $filter-color;
+    border: 2px solid $filter-color;
+    border-radius: 5px;
+    padding: 0 .5em;
+
+    &:hover {
+        background-color: darken($filter-color, 10%);
+        border-color: darken($filter-color, 10%);
     }
 }
 

src/Ecosystem/templates/list.phtml

@@ -15,7 +15,7 @@ declare(strict_types=1);
 use GetLaminas\Ecosystem\Enums\EcosystemCategoryEnum;
 use GetLaminas\Ecosystem\Enums\EcosystemTypeEnum;
 
-$this->layout('layout::default', ['title' => 'Laminas Ecosystem']);
+$this->layout('layout::default', ['title' => 'Laminas third party packages']);
 
 function formatDownloads(int $downloads): string {
     if ($downloads >= 1_000_000_000) {
@@ -32,9 +32,9 @@ function formatDownloads(int $downloads): string {
 }
 ?>
 <section id="ecosystem-section" class="container">
-    <div class="mt-5">
-        <div>
-            <h1>Laminas Ecosystem</h1>
+    <div>
+        <div class="my-5">
+            <h1>Laminas third party packages</h1>
             <h5>Third party packages which provide explicit support for Laminas packages</h5>
         </div>
 
@@ -52,8 +52,8 @@ function formatDownloads(int $downloads): string {
                 </div>
                 <div class="col-lg-8 collapse d-lg-flex gap-2" data-bs-parent="#packageSearchBar" id="packageSearchBar">
                     <div class="btn-group mt-2 mt-lg-0">
-                        <button type="button" class="btn border-primary pe-none">Type</button>
-                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                            Type:
                             <span class=""><?= $type ?? 'All' ?></span>
                         </button>
                         <ul class="dropdown-menu">
@@ -69,8 +69,8 @@ function formatDownloads(int $downloads): string {
                     </div>
 
                     <div class="btn-group mt-2 mt-lg-0">
-                        <button type="button" class="btn border-primary pe-none">Category</button>
-                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                            Category:
                             <span class=""><?= $category ?? 'All' ?></span>
                         </button>
                         <ul class="dropdown-menu">
@@ -86,7 +86,7 @@ function formatDownloads(int $downloads): string {
                         </ul>
                     </div>
 
-                    <?php if ($type || $category || $search) : ?>
+                    <?php if ($type || $category || $search || $keywords !== []) : ?>
                         <div class="btn-group mt-2 mt-lg-0">
                             <button id="clear-filters-button" type="button" class="btn btn-outline-danger">Clear <i class="bi bi-x-circle"></i></button>
                         </div>
@@ -113,7 +113,7 @@ function formatDownloads(int $downloads): string {
                     <?php endif?>
                     <div class="card-header">
                         <h5 class="card-title col-md-9">
-                            <a href="<?= $package->packagistUrl ?>" target="_blank">
+                            <a href="https://packagist.org/packages/<?= $package->packagistUrl ?>" target="_blank">
                                 <p class="details-item"><?= $package->name ?></p>
                             </a>
                         </h5>
@@ -184,4 +184,8 @@ function formatDownloads(int $downloads): string {
     <div id="ecosystem-pagination">
         <?php $this->insert('partials::pagination', ['pagination' => $pagination]) ?>
     </div>
+
+    <a class="gradient-background rounded-4 text-primary text-decoration-none p-2" target="_blank" href="https://github.com/laminas/getlaminas.org/blob/master/ADD_ECOSYSTEM_PACKAGE.md">
+        Add a package
+    </a>
 </section>