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

src/data/analytics.js

@@ -0,0 +1,18 @@
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function () {
+  const API_KEY_PLAUSIBLE = process.env.API_KEY_PLAUSIBLE;
+  const url =
+    "https://plausible.io/api/v1/stats/breakdown?site_id=coryd.dev&period=6mo&property=event:page&limit=30";
+  const res = EleventyFetch(url, {
+    duration: "1h",
+    type: "json",
+    fetchOptions: {
+      headers: {
+        Authorization: `Bearer ${API_KEY_PLAUSIBLE}`,
+      },
+    },
+  }).catch();
+  const pages = await res;
+  return pages["results"].filter((p) => p["page"].includes("posts"));
+}

src/includes/blocks/addon-links.liquid

@@ -0,0 +1,9 @@
+
+<div class="addon-links">
+  {%- if popularPosts.size > 0 -%}
+    {% render "blocks/popular-posts.liquid", popularPosts:popularPosts %}
+  {%- endif -%}
+  {%- if links.size > 0 -%}
+    {% render "blocks/recent-links.liquid", links:links %}
+  {%- endif -%}
+</div>

src/includes/blocks/index.liquid

@@ -14,5 +14,7 @@
       {{ block.text | markdown }}
     {%- when 'divider' -%}
       {{ block.markup | markdown }}
+    {%- when 'addon_links' -%}
+      {% render "blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
   {%- endcase -%}
 {%- endfor -%}

src/includes/blocks/popular-posts.liquid

@@ -0,0 +1,15 @@
+{%- if popularPosts.size > 0 -%}
+  <article>
+    <h3 class="article">
+      {% tablericon "chart-bar-popular" "Popular" %}
+      Popular posts
+    </h3>
+    <ol type="1">
+      {%- for post in popularPosts limit: 5 -%}
+        <li>
+          <a href="{{ post.url }}">{{ post.title }}</a>
+        </li>
+      {%- endfor -%}
+    </ol>
+  </article>
+{%- endif -%}

src/includes/blocks/recent-links.liquid

@@ -0,0 +1,18 @@
+{%- if links.size > 0 -%}
+  <article>
+    <h3 class="link">
+      {% tablericon "link" "Links" %}
+      Recent links
+    </h3>
+    <ul>
+      {%- for link in links limit: 5 -%}
+      <li>
+        <a href="{{ link.link }}" title="{{ link.title | escape }}">
+          {{ link.title }}
+        </a>
+        {% if link.author %} via <a href="{{ link.author.url }}">{{ link.author.name }}</a>{% endif %}
+      </li>
+      {%- endfor -%}
+    </ul>
+  </article>
+{%- endif -%}

src/pages/page.html

@@ -9,4 +9,9 @@ image: "{{ page.open_graph_image | prepend: globals.cdn_url | default: globals.a
 updated: "{{ page.updated | default: null }}"
 schema: page
 ---
-{% render "blocks/index.liquid", blocks:page.blocks, globals:globals %}
+{% render "blocks/index.liquid",
+  blocks:page.blocks,
+  globals:globals,
+  collections:collections,
+  links:links
+%}

src/pages/posts/post.html

@@ -51,5 +51,6 @@ schema: blog
       shows: post.shows
     %}
     {% render "blocks/banners/coffee.liquid" %}
+    {% render "blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
   </div>
 </article>