From b1eedee9d4ab04edee63100f74bc8f2962504566 Mon Sep 17 00:00:00 2001
From: Andrew Dupont <github@andrewdupont.net>
Date: Wed, 27 Dec 2023 12:28:45 -0600
Subject: [PATCH 1/5] Display information about consumed/provided services

---
 ejs-views/pages/package_detail.ejs        |   1 +
 ejs-views/pages/package_list.ejs          |   1 +
 ejs-views/pages/search.ejs                |   1 +
 ejs-views/partials/footer.ejs             |   2 +-
 ejs-views/partials/pagination.ejs         |  12 +--
 ejs-views/partials/search_bar.ejs         |   2 +-
 ejs-views/partials/search_description.ejs |  12 +++
 ejs-views/partials/service_listing.ejs    |  68 ++++++++++++++
 src/handlers.js                           | 104 +++++++++++++++-------
 src/utils.js                              |   3 +
 10 files changed, 166 insertions(+), 40 deletions(-)
 create mode 100644 ejs-views/partials/search_description.ejs
 create mode 100644 ejs-views/partials/service_listing.ejs

diff --git a/ejs-views/pages/package_detail.ejs b/ejs-views/pages/package_detail.ejs
index d4253a4..00bddec 100644
--- a/ejs-views/pages/package_detail.ejs
+++ b/ejs-views/pages/package_detail.ejs
@@ -2,6 +2,7 @@
 
 <article>
   <%- include('../partials/package_listing', {verbose: true}); %>
+  <%- include('../partials/service_listing', {pack}); %>
   <div id="readme" class="mt-12 prose max-w-none">
     <%-pack.readme%>
   </div>
diff --git a/ejs-views/pages/package_list.ejs b/ejs-views/pages/package_list.ejs
index 7d870f9..d7118f3 100644
--- a/ejs-views/pages/package_list.ejs
+++ b/ejs-views/pages/package_list.ejs
@@ -2,6 +2,7 @@
 
 <article>
   <%- include('../partials/search_bar'); %>
+  <%- include('../partials/search_description'); %>
   <%- include('../partials/pagination'); %>
   <%- include('../partials/package_grid', { packages }); %>
   <%- include('../partials/pagination'); %>
diff --git a/ejs-views/pages/search.ejs b/ejs-views/pages/search.ejs
index 94d1a31..a6d6ba2 100644
--- a/ejs-views/pages/search.ejs
+++ b/ejs-views/pages/search.ejs
@@ -2,6 +2,7 @@
 
 <article>
   <%- include('../partials/search_bar'); %>
+  <%- include('../partials/search_description'); %>
   <%- include('../partials/pagination'); %>
   <%- include('../partials/package_grid', { packages }); %>
   <% if (pagination && pagination.total > 0) { %>
diff --git a/ejs-views/partials/footer.ejs b/ejs-views/partials/footer.ejs
index 019c900..90d1092 100644
--- a/ejs-views/partials/footer.ejs
+++ b/ejs-views/partials/footer.ejs
@@ -28,7 +28,7 @@
             <a href="https://pulsar-edit.dev/community.html" target="_blank">Contact Us</a>
         </div>
     </div>
-    <p class="text-sm opacity-70">Pulsar-Edit © <%- new Date().getFullYear() %></p>
+    <p class="text-sm opacity-70">Pulsar-Edit © <%= new Date().getFullYear() %></p>
 </footer>
 </body>
 <% if (dev) { %>
diff --git a/ejs-views/partials/pagination.ejs b/ejs-views/partials/pagination.ejs
index 50bc83c..baf46c5 100644
--- a/ejs-views/partials/pagination.ejs
+++ b/ejs-views/partials/pagination.ejs
@@ -1,25 +1,25 @@
 <% if (pagination && pagination.total > 0) { %>
     <div id="pagination" class="sm:flex-row flex-col flex items-center justify-between gap-3 border border-secondary rounded p-3">
-        <p class="opacity-70">Showing <%- pagination.from %> to <%- pagination.to %> of <%- pagination.total %> entries</p>
+        <p class="opacity-70">Showing <%= pagination.from %> to <%= pagination.to %> of <%= pagination.total %> entries</p>
         <div class="flex items-center gap-1 sm:gap-3 lg:gap-6">
-            <a href="<%- pagination.routes.first %>" class="<%- !!pagination.routes.first ? '' : 'disabled' %>">
+            <a href="<%= pagination.routes.first %>" class="<%= !!pagination.routes.first ? '' : 'disabled' %>">
                 <i class="fas fa-chevron-left -mr-1"></i>
                 <i class="fas fa-chevron-left"></i>
             </a>
 
-            <a href="<%- pagination.routes.prev %>" class="<%- !!pagination.routes.prev ? '' : 'disabled' %>">
+            <a href="<%= pagination.routes.prev %>" class="<%= !!pagination.routes.prev ? '' : 'disabled' %>">
                 <i class="fas fa-chevron-left"></i>
             </a>
 
             <% pagination.options.forEach(option => { %>
-                <a href="<%- option.value %>" class="<%= option.label == pagination.page ? 'active' : '' %>"><%= option.label %></a>
+                <a href="<%= option.value %>" class="<%= option.label == pagination.page ? 'active' : '' %>"><%= option.label %></a>
             <% }); %>
 
-            <a href="<%- pagination.routes.next %>" class="<%- !!pagination.routes.next ? '' : 'disabled' %>">
+            <a href="<%= pagination.routes.next %>" class="<%= !!pagination.routes.next ? '' : 'disabled' %>">
                 <i class="fas fa-chevron-right"></i>
             </a>
 
-            <a href="<%- pagination.routes.last %>" class="<%- !!pagination.routes.last ? '' : 'disabled' %>">
+            <a href="<%= pagination.routes.last %>" class="<%= !!pagination.routes.last ? '' : 'disabled' %>">
                 <i class="fas fa-chevron-right -mr-1"></i>
                 <i class="fas fa-chevron-right"></i>
             </a>
diff --git a/ejs-views/partials/search_bar.ejs b/ejs-views/partials/search_bar.ejs
index a7560ff..3f117e3 100644
--- a/ejs-views/partials/search_bar.ejs
+++ b/ejs-views/partials/search_bar.ejs
@@ -1,7 +1,7 @@
 <div class="text-center">
   <h1>Packages make Pulsar do amazing things.</h1>
   <form class="my-12" action="/packages/search">
-    <input class="wide" type="search" value="<% if (locals.search) { %><%- search %><% } %>" name="q" placeholder="Search Packages..." />
+    <input class="wide" type="search" value="<%= locals.search ? search : '' %>" name="q" placeholder="Search Packages..." />
     <button type="submit">
       <i class="fas fa-magnifying-glass"></i>
       Search
diff --git a/ejs-views/partials/search_description.ejs b/ejs-views/partials/search_description.ejs
new file mode 100644
index 0000000..255f0f5
--- /dev/null
+++ b/ejs-views/partials/search_description.ejs
@@ -0,0 +1,12 @@
+<%
+  let serviceSpecified = locals.serviceType && locals.serviceName;
+  let serviceTypeVerb = locals.serviceType === 'provided' ? 'provide' : 'consume';
+%>
+
+<% if (serviceSpecified)  { %>
+<div class="text-center mt-4 mb-4">
+  <p>
+    Displaying all packages which <%= serviceTypeVerb %> the <strong><%= locals.serviceName %></strong> service.
+  </p>
+</div>
+<% } %>
diff --git a/ejs-views/partials/service_listing.ejs b/ejs-views/partials/service_listing.ejs
new file mode 100644
index 0000000..98c2ebf
--- /dev/null
+++ b/ejs-views/partials/service_listing.ejs
@@ -0,0 +1,68 @@
+<% if (pack.consumedServices || pack.providedServices) { %>
+<%
+
+  function urlForPackageSearch (serviceName, serviceType) {
+    return `/packages?serviceType=${serviceType}&service=${serviceName}`;
+  }
+
+  function aggregateServices(services) {
+    let aggregated = new Map();
+    for (let name in services) {
+      let versions = Object.keys(services[name].versions);
+      aggregated.set(name, versions);
+    }
+    return aggregated;
+  }
+
+
+  let { consumedServices, providedServices } = pack;
+  let consumed = aggregateServices(consumedServices);
+  let provided = aggregateServices(providedServices);
+%>
+
+<style media="screen">
+  <%# I hate Tailwind. %>
+  @media screen and (min-width: 769px) {
+    .service-listing {
+      float: right;
+      max-width: 25vw;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .service-listing {
+      float: none;
+      max-width: auto;
+    }
+  }
+</style>
+
+<div class="service-listing mt-4 mb-4 border p-4 rounded text-sm overflow-hidden">
+  <% if (provided.size > 0) { %>
+    <div class="service-listing-provided mb-3">
+      <p class="italic mb-1">This package <strong>provides</strong> the following services:</p>
+      <ul>
+        <% for (let [name, versions] of provided) { %>
+          <li class="inline-block">
+            <a class="text-xs font-semibold underline decoration-gray-400 decoration-1 mr-1" href="<%- urlForPackageSearch(name, 'consumed') %>" title="Versions: <%- versions.join(', ') %>"><code><%- name %></code></a>
+          </li>
+        <% } %>
+      </ul>
+    </div>
+  <% } %>
+
+  <% if (consumed.size > 0) { %>
+    <div class="service-listing-consumed">
+      <p class="italic mb-1">This package <strong>consumes</strong> the following services:</p>
+      <ul style="margin: 0;">
+        <% for (let [name, versions] of consumed) { %>
+          <li class="inline-block">
+            <a class="text-xs font-semibold underline decoration-gray-400 decoration-1 mr-1" href="<%- urlForPackageSearch(name, 'provided') %>" title="Versions: <%- versions.join(', ') %>"><code><%- name %></code></a>
+          </li>
+        <% } %>
+      </ul>
+    </div>
+  <% } %>
+
+</div>
+
+<% } %>
diff --git a/src/handlers.js b/src/handlers.js
index bf08bf6..d5ea6c6 100644
--- a/src/handlers.js
+++ b/src/handlers.js
@@ -13,19 +13,31 @@ async function statusPage(req, res) {
 async function fullListingPage(req, res, timecop) {
   timecop.start("api-request");
   try {
-    let api = await superagent.get(`${apiurl}/api/packages`).query(req.query);
+    let api = await superagent.get(`${apiurl}/api/packages`)
+      .query(req.query);
     const pagination = utils.getPagination(req, api);
     timecop.end("api-request");
     timecop.start("transcribe-json");
     let obj = await utils.prepareForListing(api.body);
     timecop.end("transcribe-json");
-    res.render("package_list", { dev: DEV, packages: obj, pagination, timecop: timecop.timetable, page: {
-      name: "All Pulsar Packages",
-      og_url: "https://web.pulsar-edit.dev/packages",
-      og_description: "The Pulsar Package Repository",
-      og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
-      og_image_type: "image/svg+xml"
-    }});
+    res.render(
+      "package_list",
+      {
+        dev: DEV,
+        packages: obj,
+        pagination,
+        serviceName: req.query.service,
+        serviceType: req.query.serviceType,
+        timecop: timecop.timetable,
+        page: {
+          name: "All Pulsar Packages",
+          og_url: "https://web.pulsar-edit.dev/packages",
+          og_description: "The Pulsar Package Repository",
+          og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+          og_image_type: "image/svg+xml"
+        }
+      }
+    );
   } catch(err) {
     utils.displayError(req, res, {
       error: utils.modifyErrorText(err),
@@ -55,15 +67,20 @@ async function singlePackageListing(req, res, timecop) {
     timecop.start("transcribe-json");
     let obj = await utils.prepareForDetail(api.body);
     timecop.end("transcribe-json");
-    res.render("package_detail", { dev: DEV, pack: obj, timecop: timecop.timetable, page: {
-      name: obj.name,
-      og_url: `https://web.pulsar-edit.dev/packages/${obj.name}`,
-      og_description: obj.description,
-      og_image: `https://image.pulsar-edit.dev/packages/${obj.name}?image_kind=${og_image_kind}&theme=${og_image_theme}`,
-      og_image_type: "image/png",
-      og_image_width: 1200,
-      og_image_height: 600,
-    }});
+    res.render("package_detail", {
+      dev: DEV,
+      pack: obj,
+      timecop: timecop.timetable,
+      page: {
+        name: obj.name,
+        og_url: `https://web.pulsar-edit.dev/packages/${obj.name}`,
+        og_description: obj.description,
+        og_image: `https://image.pulsar-edit.dev/packages/${obj.name}?image_kind=${og_image_kind}&theme=${og_image_theme}`,
+        og_image_type: "image/png",
+        og_image_width: 1200,
+        og_image_height: 600,
+      }
+    });
   } catch(err) {
     utils.displayError(req, res, {
       error: utils.modifyErrorText(err),
@@ -88,13 +105,18 @@ async function featuredPackageListing(req, res, timecop) {
     timecop.start("transcribe-json");
     let obj = await utils.prepareForListing(api.body);
     timecop.end("transcribe-json");
-    res.render("package_list", { dev: DEV, packages: obj, timecop: timecop.timetable, page: {
-      name: "Featured Packages",
-      og_url: "https://web.pulsar-edit.dev/packages/featured",
-      og_description: "The Pulsar Package Repository",
-      og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
-      og_image_type: "image/svg+xml"
-    }});
+    res.render("package_list", {
+      dev: DEV,
+      packages: obj,
+      timecop: timecop.timetable,
+      page: {
+        name: "Featured Packages",
+        og_url: "https://web.pulsar-edit.dev/packages/featured",
+        og_description: "The Pulsar Package Repository",
+        og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+        og_image_type: "image/svg+xml"
+      }
+    });
   } catch(err) {
     utils.displayError(req, res, err);
   }
@@ -115,7 +137,12 @@ async function homePage(req, res, timecop) {
   if (cached !== null) {
     timecop.end("cache-check");
     // We know our cache is good and lets serve the data
-    res.render("home", { dev: DEV, featured: cached, timecop: timecop.timetable, page: homePage });
+    res.render("home", {
+      dev: DEV,
+      featured: cached,
+      timecop: timecop.timetable,
+      page: homePage
+    });
   } else {
     // the cache is invalid.
     timecop.end("cache-check");
@@ -139,18 +166,31 @@ async function searchHandler(req, res, timecop) {
   timecop.start("api-request");
   try {
     let api = await superagent.get(`${apiurl}/api/packages/search`).query(req.query);
+
     const pagination = utils.getPagination(req, api);
     timecop.end("api-request");
     timecop.start("transcribe-json");
     let obj = await utils.prepareForListing(api.body);
     timecop.end("transcribe-json");
-    res.render("search", { dev: DEV, packages: obj, search: req.query.q, pagination, timecop: timecop.timetable, page: {
-      name: `Search ${req.query.q}`,
-      og_url: "https://web.pulsar-edit.dev/packages/search",
-      og_description: "The Pulsar Package Repository",
-      og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
-      og_image_type: "image/svg+xml"
-    }});
+    res.render(
+      "search",
+      {
+        dev: DEV,
+        packages: obj,
+        search: req.query.q,
+        serviceName: req.query.service,
+        serviceType: req.query.serviceType,
+        pagination,
+        timecop: timecop.timetable,
+        page: {
+          name: `Search ${req.query.q}`,
+          og_url: "https://web.pulsar-edit.dev/packages/search",
+          og_description: "The Pulsar Package Repository",
+          og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+          og_image_type: "image/svg+xml"
+        }
+      }
+    );
   } catch(err) {
     console.log(err);
     utils.displayError(req, res, err);
diff --git a/src/utils.js b/src/utils.js
index 34f9541..d47fc6d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -146,6 +146,9 @@ function prepareForDetail(obj) {
     pack.bugLink = obj.metadata.bugs ? obj.metadata.bugs.url : "";
     pack.install = `atom://settings-view/show-package?package=${pack.name}`;
 
+    pack.providedServices = obj.metadata.providedServices ?? null;
+    pack.consumedServices = obj.metadata.consumedServices ?? null;
+
     // Add custom handling of image links. This aims to fix the common issue of users specifying local paths in their links.
     // Which result in them not loading here since they live on GitHub.
     // This is declared here, since this needs access to the repo the package is on.

From 3911f8c75fc88a4fe81b837d456cbcf56ec08579 Mon Sep 17 00:00:00 2001
From: Andrew Dupont <github@andrewdupont.net>
Date: Wed, 27 Dec 2023 12:34:46 -0600
Subject: [PATCH 2/5] Remove a partial from the search page (where it isn't
 applicable)

---
 ejs-views/pages/search.ejs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ejs-views/pages/search.ejs b/ejs-views/pages/search.ejs
index a6d6ba2..94d1a31 100644
--- a/ejs-views/pages/search.ejs
+++ b/ejs-views/pages/search.ejs
@@ -2,7 +2,6 @@
 
 <article>
   <%- include('../partials/search_bar'); %>
-  <%- include('../partials/search_description'); %>
   <%- include('../partials/pagination'); %>
   <%- include('../partials/package_grid', { packages }); %>
   <% if (pagination && pagination.total > 0) { %>

From 532ebe45145f6ca1b8b71f6388da8f7d40d5ca4f Mon Sep 17 00:00:00 2001
From: Andrew Dupont <github@andrewdupont.net>
Date: Wed, 27 Dec 2023 16:53:16 -0600
Subject: [PATCH 3/5] Move CSS to `site.css`

---
 ejs-views/partials/service_listing.ejs | 16 ----------------
 package-lock.json                      |  5 +++++
 src/site.css                           | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/ejs-views/partials/service_listing.ejs b/ejs-views/partials/service_listing.ejs
index 98c2ebf..9586fc3 100644
--- a/ejs-views/partials/service_listing.ejs
+++ b/ejs-views/partials/service_listing.ejs
@@ -20,22 +20,6 @@
   let provided = aggregateServices(providedServices);
 %>
 
-<style media="screen">
-  <%# I hate Tailwind. %>
-  @media screen and (min-width: 769px) {
-    .service-listing {
-      float: right;
-      max-width: 25vw;
-    }
-  }
-  @media screen and (max-width: 768px) {
-    .service-listing {
-      float: none;
-      max-width: auto;
-    }
-  }
-</style>
-
 <div class="service-listing mt-4 mb-4 border p-4 rounded text-sm overflow-hidden">
   <% if (provided.size > 0) { %>
     <div class="service-listing-provided mb-3">
diff --git a/package-lock.json b/package-lock.json
index 93276ee..11fb4ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "markdown-it-task-checkbox": "^1.0.6",
         "minify": "^9.2.0",
         "parse-github-url": "^1.0.2",
+        "string-strip-html": "^8.5.0",
         "superagent": "^8.0.1",
         "tailwindcss": "^3.2.4"
       },
@@ -10299,6 +10300,10 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "string-strip-html": {
+      "resolved": "https://registry.npmjs.org/string-strip-html/-/string-strip-html-8.5.0.tgz",
+      "integrity": "sha512-5ICsK1B1j0A3AF1d45m0sqQCcmi1Q+t1QpF+b794LO5FTHV+ITkGR5C+UCDJQZgs5LMuRruqr6j48PxQVIurJQ=="
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
diff --git a/src/site.css b/src/site.css
index 038424a..87bbb33 100644
--- a/src/site.css
+++ b/src/site.css
@@ -271,3 +271,20 @@ nav.active {
 #pagination a.disabled {
   @apply pointer-events-none text-secondary;
 }
+
+/********************************/
+/******* SERVICE LISTING ********/
+/********************************/
+
+@media screen and (min-width: 769px) {
+  .service-listing {
+    float: right;
+    max-width: 25vw;
+  }
+}
+@media screen and (max-width: 768px) {
+  .service-listing {
+    float: none;
+    max-width: auto;
+  }
+}

From a24fd389a268f7b71dcb06c4f6cfa68c3ef2d02a Mon Sep 17 00:00:00 2001
From: Andrew Dupont <github@andrewdupont.net>
Date: Thu, 28 Dec 2023 16:27:42 -0800
Subject: [PATCH 4/5] Don't show the search description if `serviceType` is not
 a valid value

---
 ejs-views/partials/search_description.ejs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ejs-views/partials/search_description.ejs b/ejs-views/partials/search_description.ejs
index 255f0f5..98fd02f 100644
--- a/ejs-views/partials/search_description.ejs
+++ b/ejs-views/partials/search_description.ejs
@@ -1,5 +1,6 @@
 <%
-  let serviceSpecified = locals.serviceType && locals.serviceName;
+  const TYPE_VALUES = new Set(['provided', 'consumed']);
+  let serviceSpecified = locals.serviceType && TYPE_VALUES.has(locals.serviceName);
   let serviceTypeVerb = locals.serviceType === 'provided' ? 'provide' : 'consume';
 %>
 

From 6db3ddb36763310721d017fc7f4f5d3a7ceb09bc Mon Sep 17 00:00:00 2001
From: Andrew Dupont <github@andrewdupont.net>
Date: Thu, 28 Dec 2023 16:27:54 -0800
Subject: [PATCH 5/5] Address CSS feedback

---
 ejs-views/partials/service_listing.ejs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ejs-views/partials/service_listing.ejs b/ejs-views/partials/service_listing.ejs
index 9586fc3..a952135 100644
--- a/ejs-views/partials/service_listing.ejs
+++ b/ejs-views/partials/service_listing.ejs
@@ -20,13 +20,13 @@
   let provided = aggregateServices(providedServices);
 %>
 
-<div class="service-listing mt-4 mb-4 border p-4 rounded text-sm overflow-hidden">
+<div class="service-listing my-4 mr-0 lg:ml-4 border p-4 rounded text-sm overflow-hidden">
   <% if (provided.size > 0) { %>
     <div class="service-listing-provided mb-3">
       <p class="italic mb-1">This package <strong>provides</strong> the following services:</p>
       <ul>
         <% for (let [name, versions] of provided) { %>
-          <li class="inline-block">
+          <li class="max-md:inline-block">
             <a class="text-xs font-semibold underline decoration-gray-400 decoration-1 mr-1" href="<%- urlForPackageSearch(name, 'consumed') %>" title="Versions: <%- versions.join(', ') %>"><code><%- name %></code></a>
           </li>
         <% } %>
@@ -39,7 +39,7 @@
       <p class="italic mb-1">This package <strong>consumes</strong> the following services:</p>
       <ul style="margin: 0;">
         <% for (let [name, versions] of consumed) { %>
-          <li class="inline-block">
+          <li class="max-md:inline-block">
             <a class="text-xs font-semibold underline decoration-gray-400 decoration-1 mr-1" href="<%- urlForPackageSearch(name, 'provided') %>" title="Versions: <%- versions.join(', ') %>"><code><%- name %></code></a>
           </li>
         <% } %>