feat: wrap all widgets and comments in is-land on:visible

Add <is-land on:visible> lazy-loading wrapper to every widget template
and the comments section for consistent deferred rendering. Widgets
that already had it (social-activity, github-repos, blogroll, feedland,
webmentions) are unchanged. Also wraps inline search and custom-html
widgets in all sidebar container files.

_includes/components/blog-sidebar.njk

@@ -35,13 +35,16 @@
     {% elif widget.type == "recent-comments" %}
       {% include "components/widgets/recent-comments.njk" %}
     {% elif widget.type == "search" %}
+      <is-land on:visible>
       <div class="widget">
         <h3 class="widget-title">Search</h3>
         <div id="blog-sidebar-search"></div>
         <script>initPagefind("#blog-sidebar-search");</script>
       </div>
+      </is-land>
     {% elif widget.type == "custom-html" %}
       {% set wConfig = widget.config or {} %}
+      <is-land on:visible>
       <div class="widget">
         {% if wConfig.title %}
         <h3 class="widget-title">{{ wConfig.title }}</h3>
@@ -52,6 +55,7 @@
         </div>
         {% endif %}
       </div>
+      </is-land>
     {% else %}
       <!-- Unknown widget type: {{ widget.type }} -->
     {% endif %}

_includes/components/comments.njk

@@ -1,6 +1,7 @@
 {# Comments section — shown on post pages before webmentions #}
 {% set absoluteUrl = site.url + page.url %}
 
+<is-land on:visible>
 <section class="comments mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="comments"
          x-data="commentsSection('{{ absoluteUrl }}')"
          x-init="init()">
@@ -92,3 +93,4 @@
     </template>
   </div>
 </section>
+</is-land>

_includes/components/cv-sidebar.njk

@@ -18,16 +18,19 @@
     {% elif widget.type == "categories" %}
       {% include "components/widgets/categories.njk" %}
     {% elif widget.type == "search" %}
+      <is-land on:visible>
       <div class="widget">
         <h3 class="widget-title">Search</h3>
         <div id="sidebar-search"></div>
         <script>initPagefind("#sidebar-search");</script>
       </div>
+      </is-land>
     {% elif widget.type == "webmentions" %}
       {% include "components/widgets/webmentions.njk" %}
     {% elif widget.type == "custom-html" %}
       {# Custom content widget #}
       {% set wConfig = widget.config or {} %}
+      <is-land on:visible>
       <div class="widget">
         {% if wConfig.title %}
         <h3 class="widget-title">{{ wConfig.title }}</h3>
@@ -38,6 +41,7 @@
         </div>
         {% endif %}
       </div>
+      </is-land>
     {% else %}
       <!-- Unknown widget type: {{ widget.type }} -->
     {% endif %}

_includes/components/homepage-sidebar.njk

@@ -18,11 +18,13 @@
     {% elif widget.type == "categories" %}
       {% include "components/widgets/categories.njk" %}
     {% elif widget.type == "search" %}
+      <is-land on:visible>
       <div class="widget">
         <h3 class="widget-title">Search</h3>
         <div id="sidebar-search"></div>
         <script>initPagefind("#sidebar-search");</script>
       </div>
+      </is-land>
     {% elif widget.type == "webmentions" %}
       {% include "components/widgets/webmentions.njk" %}
     {% elif widget.type == "recent-comments" %}
@@ -30,6 +32,7 @@
     {% elif widget.type == "custom-html" %}
       {# Custom content widget #}
       {% set wConfig = widget.config or {} %}
+      <is-land on:visible>
       <div class="widget">
         {% if wConfig.title %}
         <h3 class="widget-title">{{ wConfig.title }}</h3>
@@ -40,6 +43,7 @@
         </div>
         {% endif %}
       </div>
+      </is-land>
     {% else %}
       <!-- Unknown widget type: {{ widget.type }} -->
     {% endif %}

_includes/components/sidebar.njk

@@ -29,15 +29,18 @@
     {% elif widget.type == "recent-comments" %}
       {% include "components/widgets/recent-comments.njk" %}
     {% elif widget.type == "search" %}
+      <is-land on:visible>
       <div class="widget">
         <h3 class="widget-title">Search</h3>
         <div id="listing-sidebar-search"></div>
         <script>initPagefind("#listing-sidebar-search");</script>
       </div>
+      </is-land>
     {% elif widget.type == "webmentions" %}
       {% include "components/widgets/webmentions.njk" %}
     {% elif widget.type == "custom-html" %}
       {% set wConfig = widget.config or {} %}
+      <is-land on:visible>
       <div class="widget">
         {% if wConfig.title %}
         <h3 class="widget-title">{{ wConfig.title }}</h3>
@@ -48,6 +51,7 @@
         </div>
         {% endif %}
       </div>
+      </is-land>
     {% else %}
       <!-- Unknown widget type: {{ widget.type }} -->
     {% endif %}

_includes/components/widgets/author-card-compact.njk

@@ -1,4 +1,5 @@
 {# Author Compact Card - h-card microformat (compact version for blog sidebars) #}
+<is-land on:visible>
 <div class="widget">
   <div class="h-card p-author flex items-center gap-3">
     {# Hidden u-photo for reliable microformat parsing #}
@@ -26,3 +27,4 @@
   {% if site.author.email %}<data class="u-email hidden" value="{{ site.author.email }}"></data>{% endif %}
   {% if site.author.org %}<data class="p-org hidden" value="{{ site.author.org }}"></data>{% endif %}
 </div>
+</is-land>

_includes/components/widgets/author-card.njk

@@ -1,4 +1,6 @@
 {# Author Card Widget - includes the canonical h-card component #}
+<is-land on:visible>
 <div class="widget">
   {% include "components/h-card.njk" %}
 </div>
+</is-land>

_includes/components/widgets/categories.njk

@@ -1,5 +1,6 @@
 {# Categories/Tags Widget #}
 {% if categories and categories.length %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Categories</h3>
   <div class="flex flex-wrap gap-2">
@@ -10,4 +11,5 @@
     {% endfor %}
   </div>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/funkwhale.njk

@@ -1,6 +1,7 @@
 {# Listening Widget — combined Funkwhale + Last.fm recent tracks #}
 {% set hasListening = (funkwhaleActivity and (funkwhaleActivity.nowPlaying or funkwhaleActivity.listenings.length)) or (lastfmActivity and (lastfmActivity.nowPlaying or lastfmActivity.scrobbles.length)) %}
 {% if hasListening %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title flex items-center gap-2">
     <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -110,4 +111,5 @@
     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
   </a>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/post-categories.njk

@@ -1,5 +1,6 @@
 {# Categories for This Post #}
 {% if category %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Categories</h3>
   <div class="flex flex-wrap gap-2">
@@ -16,4 +17,5 @@
     {% endif %}
   </div>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/post-navigation.njk

@@ -4,6 +4,7 @@
 {% set _nextPost = collections.posts | nextInCollection(page) %}
 
 {% if _prevPost or _nextPost %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">More Posts</h3>
   <div class="space-y-3">
@@ -61,4 +62,5 @@
     {% endif %}
   </div>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/recent-comments.njk

@@ -1,5 +1,6 @@
 {# Recent Comments Widget — sidebar #}
 {% if recentComments and recentComments.length %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Recent Comments</h3>
   <ul class="space-y-3">
@@ -22,4 +23,5 @@
     {% endfor %}
   </ul>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/recent-posts-blog.njk

@@ -1,6 +1,7 @@
 {# Recent Posts Widget — type-aware, for blog/post sidebars #}
 {# Uses collections.posts directly (all post types, not just recentPosts collection) #}
 {% if collections.posts %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Recent Posts</h3>
   <ul class="space-y-3">
@@ -80,4 +81,5 @@
     View all posts
   </a>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/recent-posts.njk

@@ -1,5 +1,6 @@
 {# Recent Posts Widget (sidebar) - compact type-aware list #}
 {% if recentPosts and recentPosts.length %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Recent Posts</h3>
   <ul class="space-y-3">
@@ -87,4 +88,5 @@
     View all posts
   </a>
 </div>
+</is-land>
 {% endif %}

_includes/components/widgets/share.njk

@@ -1,4 +1,5 @@
 {# Share Widget #}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Share</h3>
   <div class="flex gap-2">
@@ -22,3 +23,4 @@
     </a>
   </div>
 </div>
+</is-land>

_includes/components/widgets/subscribe.njk

@@ -1,4 +1,5 @@
 {# Subscribe Widget #}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Subscribe</h3>
   <div class="space-y-2">
@@ -16,3 +17,4 @@
     </a>
   </div>
 </div>
+</is-land>

_includes/components/widgets/toc.njk

@@ -1,5 +1,6 @@
 {# Table of Contents Widget (for articles with headings) #}
 {% if toc and toc.length %}
+<is-land on:visible>
 <div class="widget">
   <h3 class="widget-title">Contents</h3>
   <nav class="toc">
@@ -14,4 +15,5 @@
     </ul>
   </nav>
 </div>
+</is-land>
 {% endif %}