feat: restore link widgets

src/assets/scripts/index.js

@@ -118,6 +118,7 @@ window.addEventListener("load", () => {
     const $fallback = document.querySelector(".search__form--fallback");
     const $input = document.querySelector(".search__form--input");
     const $results = document.querySelector(".search__results");
+    const $addonLinks = document.querySelector(".addon-links");
     const $loadMoreButton = document.querySelector(".search__load-more");
     const $typeCheckboxes = document.querySelectorAll(
       '.search__form--type input[type="checkbox"]'
@@ -179,6 +180,7 @@ window.addEventListener("load", () => {
         resultHTML ||
         '<li class="search__results--no-results">No results found.</li>';
       $results.style.display = "block";
+      $addonLinks.style.display = results.length === 0 ? "grid" : "none";
     };
 
     const loadSearchIndex = async (query, types, page) => {
@@ -243,6 +245,7 @@ window.addEventListener("load", () => {
       if (!query) {
         renderSearchResults([]);
         $loadMoreButton.style.display = "none";
+        $addonLinks.style.display = "grid";
         return;
       }
 
@@ -271,5 +274,7 @@ window.addEventListener("load", () => {
       currentResults = [...currentResults, ...nextResults];
       updateSearchResults(nextResults);
     });
+
+    $addonLinks.style.display = "grid";
   })();
 });

src/assets/styles/base/index.css

@@ -315,7 +315,7 @@ article {
   border-bottom: var(--border-gray);
 
   &:last-of-type {
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   &.intro p {

src/assets/styles/components/addon-links.css

@@ -0,0 +1,24 @@
+.addon-links {
+  display: grid;
+  gap: var(--sizing-base);
+  grid-template-columns: var(--grid-columns-one);
+
+  @media screen and (min-width: 768px) {
+    grid-template-columns: var(--grid-columns-two);
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  & article {
+    border-bottom: 0;
+    margin-bottom: 0;
+
+    & ol,
+    ul {
+      padding: 0;
+      margin-bottom: 0;
+    }
+  }
+}

src/assets/styles/defaults/vars.css

@@ -127,6 +127,7 @@
   --aspect-ratio-banner: 3/2;
 
   /* grid columns */
+  --grid-columns-one: repeat(1, minmax(0, 1fr));
   --grid-columns-two: repeat(2, minmax(0, 1fr));
   --grid-columns-three: repeat(3, minmax(0, 1fr));
   --grid-columns-four: repeat(4, minmax(0, 1fr));

src/assets/styles/index.css

@@ -25,6 +25,7 @@
 @import url("./pages/webrings.css") layer(page);
 
 /* component styles */
+@import url("./components/addon-links.css") layer(components);
 @import url("./components/badge-grid.css") layer(components);
 @import url("./components/banners.css") layer(components);
 @import url("./components/buttons.css") layer(components);