Display information about consumed/provided services

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>

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'); %>

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) { %>

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>

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

ejs-views/partials/search_description.ejs

@@ -0,0 +1,13 @@
+<%
+  const TYPE_VALUES = new Set(['provided', 'consumed']);
+  let serviceSpecified = locals.serviceType && TYPE_VALUES.has(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>
+<% } %>

ejs-views/partials/service_listing.ejs

@@ -0,0 +1,52 @@
+<% 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);
+%>
+
+<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="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>
+        <% } %>
+      </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="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>
+        <% } %>
+      </ul>
+    </div>
+  <% } %>
+
+</div>
+
+<% } %>

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);

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;
+  }
+}

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.